블로그

cynh K

[인프런 워밍업 스터디 1기 디자인] 1주차 발자국 및 회고

피그마 베리어블을 활용한 디자인시스템 구축 1주차 회고1주차 회고를 시작하려고 합니다.스타트업에서 1인 디자이너로 일하며 디자인시스템의 필요성을 절실히 느껴 처음으로 접근해보았던 디자인시스템,현재 약 3년차 프로덕트디자이너로 실무를 경험하며 '현재 내가 가장 모르겠고 자신없는 분야는 디자인시스템이다' 라는 나만의 약점을 이젠 강점으로 상쇄하고자 신청한 스터디였습니다.업무와 병행하다보니 초반참여가 어려웠는데, 하나하나 강의 수강을 완료하고디스코드,노션,PDF 등 다양한 자료와 동기부여,피드백을 적극적으로 해주시는 볼드 멘토님과 열정적인 멘티분들을 보며할 수 있는 만큼 최대한 임하자! 하며 진행했던 것 같습니다.한 주가 지나고 느낀바가 너무 커 이 부분 개선해 2주차에 접근하고자 합니다..1주차 느낀점오전시간 활용퇴근 후 수강은 피로도가 높아 집중하기 어려웠습니다. 출근 전 오전시간을 활용해 수강하고, 퇴근 후의 시간은 추가/보완 하는 시간을 가지면 좋을 것 같아요.미루기 금지! 대비할 것예측가능한 선에서 업무와 약속을 정리하고, 강의출석을 성실하게 하고싶다는 생각이 절실했습니다. 2주차 시작에 있어 다짐스타일가이드를 재수강 후 정리하며, 내가 좋아하는 구성의 파운데이션 구성하기멘토님이 정의하신 스타일 외에 나만의 스타일도 생각하며 만들기최대한 계획적으로 임하고 싶은데 변수가 없길 바래봅니다!스타일가이드 정리하다 뭔가 이상하다 싶어 수정할게 많아졌는데 그것보다 발자국 먼저 남기러 왔습니다ㅠ!볼드님도 멘티님들도 스터디 하는 모든 분들도 한 주 고생하셨고,다음주도 화이팅입니다!

UX/UI인프런디자인시스템피그마워밍업스터디

젬졍

[인프런 워밍업 스터디 1기 디자인] 1주차 발자국🐾

일주일간의 학습에 대한 회고커리큘럼을 따라 매일 아침 강의를 듣고 첫 주를 보냈습니다. 1주 차의 솔직한 후기는 '복습할 시간이 부족해 완벽하게 하지 못하는 내가 밉다.' 였습니다😭. 그럼에도 불구하고 이번 주 강의를 수강하고 모든 미션을 완수할 수 있었던 것은 디스코드에서 열정적으로 지도해 주신 볼드 멘토님과 끝까지 미션을 수행하는 멘티들 덕분이었습니다. 늘어나는 스레드를 보며.. 매일 피그마를 열 수 있었습니다💪💪. 앞으로 더 분발해서 끝까지 완수할 수 있도록 노력하겠습니다!일주일 동안 잘한 것아침마다 디자인 공부한 것: 오전마다 디자인을 공부하는 습관을 기를 수 있어서 좋았습니다. 회사를 가기 전에도, 간 후에도 강의를 들은 나. 매우 칭찬해.포기하지 않은 것: 하마터면.. 1주 차에 하차할뻔 했다..아쉬웠던 점기존의 스타일 가이드라인에 의존하는 것: 이번 수강을 통해 새로운 디자인 시스템을 구축할 수 있도록 하는 것이 제 목표인데, 어렵다고 느끼는 부분은 어느새 멘토님의 가이드라인을 그저 따라 하려 하더라고요. 혼자서 고민해 보고 디자인 시스템을 만들어 나가는 시간을 가져야겠습니다.복습시간이 적었던 점보완하고 싶은 점커뮤니티를 적극적으로 이용하기: 친절왕 멘토님의 활동을 보며, 다음 주부터는 멘토님에게 많이 질문도 하고, 워밍업 스터디를 적극적으로 활용해야겠다는 생각을 했습니다.복습을 저녁으로 미루지 않는 삶 액션 플랜rem에 대해 좀 더 이해하기회사 네이밍 엑셀 시트 구성(잊어먹었다..)가이드라인-컬러 부분 가독성 높이기: 읽기 쉽고 이해가 쉽도록 수정해야겠습니다.다음 주에는실습을 많이 해보는 방향으로 고쳐나가기1주 차 복습 잊지 말기: 컴포넌트가 잘 구성되려면 파운데이션이 잘 갖추어져 있어야 한다!!다음주 업무량이 많은데…잘할 수 있겠죠?😱 힘내라 다음주의 나!

UX/UI워밍업클럽디자인시스템피그마

이용수

[인프런 워밍업 클럽 1기] BE 3일차 과제

[인프런 워밍업 클럽 1기] BE 3일차 과제본 게시글은 다음 강의 내용을 진행하고 있습니다.자바와 스프링 부트로 생애 최초 서버 만들기, 누구나 쉽게 개발부터 배포까지! [서버 개발 올인원 패키지] - https://inf.run/XKQg[키워드]익명 클래스 / 람다 / 함수형 프로그래밍 / @FunctionalInterface / 스트림 API / 메소드 레퍼런스키워드를 참고해 찾아본 각 키워드의 정의와 특징을 간단하게 정리해보고 질문에 답변해보려고 한다. 익명 클래스정의이름이 없는 클래스로, 클래스의 정의와 동시에 객체를 생성할 수 있는 방법이다.특징클래스 이름이 없어 특정한 위치에서 직접적으로 선언되며, 이와 동시에 객체가 인스턴스화 된다.주로 일회성으로, 재사용이 필요 없는 특정 상황이나 동작을 구현하는 데에 주로 사용된다.복잡한 클래스를 별도로 선언할 필요 없이 필요한 구현 부분만을 직접 작성할 수 있다.코드를 더욱 간결하고 읽게 쉽게 만들며, 불필요한 클래스 선언을 줄여준다. 람다정의코드 가독성을 위해 도입된 익명 클래스 객체를 더욱 더 간결하고 명확하게 표현할 수 있도록 하는 것이다.특징함수의 이름과 반환값이 없어져 익명 함수의 한 종류로 취급한다.함수를 변수처럼 전달하거나 반환하는 데 사용된다.익명 함수를 사용하는 것보다 더 적은 코드로 동일한 내용을 구현할 수 있다. 함수형 프로그래밍정의프로그래밍 패러다임 중 하나로, 순수 함수를 기반으로 데이터 처리와 상태 변화를 최소화하는 방식의 프로그래밍 기법이다.특징동일한 입력에 대해 항상 같은 결과를 반환하며, 외부 상태를 변경하지 않는 함수인 순수 함수를 사용한다.순수 함수를 사용하여 코드의 복잡성에 따른 부작용을 최소화하여 프로그램의 유지 보수와 테스트를 용이하게 하도록 한다. @FunctionalInterface정의함수형 인터페이스를 선언할 때 사용하는 어노테이션이다.특징함수형 인터페이스는 하나의 추상 메서드만을 가지고 있어야 한다.인터페이스에 어노테이션을 사용하면 해당 인터페이스가 함수형 인터페이스인지 검사한다.다음과 같은 형식으로 함수형 인터페이스를 선언한다.@FunctionalInterface interface MyFunction { void myMethod(); } // 함수형 인터페이스의 구현 MyFunction func = () -> System.out.println("함수형 인터페이스의 메소드 구현"); 스트림 API정의컬렉션, 배열 등의 저장 요소를 조작 및 가공, 변환하여 원하는 값으로 반환해주는 인터페이스이다.특징원본 데이터를 조회하여 별도의 Stream 객체로 생성을 하기 때문에 배열의 정렬이나 필터링 작업을 하더라도 원본 데이터를 변경하지 않는다.이미 사용이 되어 닫히면 재사용이 불가능하며 새로운 Stream을 생성해주어야 한다.Stream 내에서 내부적으로 반복문을 처리하기에 간결한 소스코드의 작성이 가능하다.  메소드 레퍼런스정의메소드를 직접 참조하여 람다 표현식을 더 간결하게 만들어주는 방법이다.특징기존의 메서드 정의를 재활용해 람다와 같이 사용할 수 있다.메소드 레퍼런스의 종류종류 : 정적 메서드 참조 람다 표현식 : (x) -> ClassName.method(x) 메서드 참조 : ClassName::method 종류 : 인스턴스 메서드 참조 람다 표현식 : (x) -> obj.method(x) 메서드 참조 : obj::method 종류 : 매개변수의 메서드 참조 람다 표현식 : (obj, x) -> obj.method(x) 메서드 참조 : ClassName::method 종류 : 생성자 참조 람다 표현식 : (x, y) -> new ClassName(x, y) 메서드 참조 : ClassName::new [질문]Q. 자바의 람다식은 왜 등장했을까?A. 궁극적으로 람다식이 등장한 이유는 불필요한 코드를 줄이고, 가독성을 높이기 위해서이다.질문에 대한 자료를 찾아보며 다음과 같은 등장 배경을 찾아볼 수 있었다.람다를 지원하기 전의 자바는 클래스에서 메서드를 정의하고, 필요할 때 메서드를 호출하는 형태의 완전한 명령형 프로그래밍 패러다임을 고수하고 있었다.그러나 자바를 사용하는 개발자들은 개발 규모가 커지면서 복잡하게 얽힌 코드를 유지보수 하는 것이 힘들어졌다.모든 것을 순수 함수로 나누어 문제를 해결하는 함수형 프로그래밍 패러다임이 나타나면서 자바에서도 이러한 함수형 프로그래밍 패러다임의 이점을 가져오기 위해 람다식이 등장하게 되었다.람다식을 이용하면 함수를 일급 객체로 다루어 함수형 프로그래밍의 패러다임을 자바에서도 적용할 수 있게 되었다.즉, 람다식이 등장하며 자바는 객체지향 언어이며 함수형 언어의 기능을 갖추게 되었다고 할 수 있다.그렇게 함수형 프로그래밍 패러다임을 통해 기존 코드에서 불필요한 코드를 줄이고, 가독성을 높일 수 있어 유지보수 측면에 도움이 되었다.이러한 이유로 불필요한 코드를 줄이고, 가독성을 높이기 위해서 함수형 프로그래밍 패러다임을 도입하려 했고 그러기 위해 람다식이 등장했다는 것으로 이해했다.Q. 람다식과 익명 클래스는 어떤 관계가 있을까?A. 람다식과 익명 클래스는 공통적으로 함수형 프로그래밍을 지원하기 위해 익명 함수를 만드는데 사용되지만 다른 부분도 존재하며 주로 익명 클래스를 대체하여 더 간결하고 가독성 높은 코드를 작성하기 위해 람다식을 사용한다.람다식이름이 없는 메서드입니다.추상 및 구체 클래스를 확장할 수 없습니다.단일 추상 메서드를 포함하는 인터페이스를 구현할 수 있습니다.인스턴스 변수를 선언할 수 없습니다.람다 표현식을 인스턴스화 할 수 없습니다.람다 표현식 내부의 this 키워드는 현재 외부 클래스 객체를 나타냅니다.익명 클래스이름이 없는 클래스이다.추상 및 구체 클래스를 확장할 수 있다.여러 추상 메서드를 포함하는 인터페이스를 구현할 수 있다.익명 내부 클래스 내부에서 인스턴스 변수를 선언할 수 있다.익명 내부 클래스를 인스턴스화 할 수 있다.익명 내부 클래스 내부의 this 키워드는 현재 익명 내부 클래스 객체를 참조한다. 다른 부분이 있음에도 불구하고 람다식을 사용하는 이유는 람다식을 사용하면 익명 클래스를 사용한 것보다 더 간결하고 가독성 높은 코드를 작성할 수 있다.예를 들어, 문자열 리스트를 정렬하는 예제를 익명 클래스와 람다식으로 구현한 과정을 비교해보겠다.익명 클래스 Collections.sort(words, new Comparator<String>() { // 익명 클래스 정의 public int compare(String s1, String s2) { return Integer.compare(s1.length(), s2.length()); } });람다식Collections.sort(words, (s1, s2) -> Integer.compare(s1.length(), s2.length()));코드를 상당히 줄여주고 보기 편해진 것을 확인할 수 있다. Q. 람다식의 문법은 어떻게 될까?람다식은 기본적으로 매개변수(Parameter) 와 화살표(->)와 실행문(expression)으로 구성된다.다음과 같은 매커니즘으로 람다식을 구현한다.기본 : (int num) -> {System.out.println(num);} 단일 실행문은 중괄호 제거 : (int num) -> System.out.println(num); 단일 인자는 타입 생략 : (num) -> System.out.println(num); 단일 인자는 소괄호 제거 : num -> System.out.println(num); 인자가 없으면 소괄호 필수 : () -> System.out.println("매개변수 없음"); 인자가 여러개면 소괄호 필수 : (x, y) -> System.out.println(x, y); 인자가 없고 반환값이 있으면 : () -> {return value;}; 실행코드가 return문 뿐이면 return 키워드 생략 가능 : () -> value; 매개변수, 리턴타입 둘다 있으면 : (x, y) -> x+y; [Java] 익명 클래스 (Anonymous Class)란? — 개발자의 서랍 (tistory.com)[Java] Stream API -1 이해하기: 용어 및 Stream 생성 — Contributor9 (tistory.com)코드 가독성 높이는 자바 람다식과 함수형 인터페이스 | 요즘IT (wishket.com)[Java] 람다식(Lambda Expression)과 함수형 인터페이스(Functional Interface) - (2/5) - MangKyu's Diary (tistory.com)[Java]익명 내부 클래스와 람다식의 차이점 (tistory.com)람다식(feat. 익명 구현 클래스 vs 람다식) (tistory.com)

인프런워밍업백엔드

쩡니니

[인프런 워밍업 클럽] 첫번째 발자국

 프롤로그이번에 내가 듣게 된 강의는피그마 배리어블을 활용한 디자인 시스템 구축하기이다!회사에서 최근에 디자인 시스템 업데이트가 있었다.사수님이 메인으로 가져간 업무였기 때문에, 나는 어떻게 변경되었는지 전달만 받았다.사수님이 팀에 공유하는 모습을 보며,,, 나의 부족함을 느꼈다...디자인 시스템... 나에겐 너무 막막한 일이였다.만약 사수님이 없었고 내 업무였다면 나는 엉망진창으로 만들었을것이다 ㅠ그래서 이번에 디자인 시스템에 공부해보자 하고 이 강의를 듣게 되었다!   색상 베리어블색상 배리어블을 들어가기 전, 디자인 토큰과 배리어블에 대해 배우는 시간이 있었다.알고있었고 사용도 했었지만 이렇게 꼼꼼히 짚고 넘어가니 좋았다. 대충만 알고있었던 지난날이 후회되는 순간이였다.배리어블을 통해 색상을 등록했다. 이전엔 등록해져있는 색상만 사용했었는데, 직접 등록해보니 재밌고 새로웠다.사실 이번에 등록한것도 강사님이 하란대로 하긴 했지만 ㅠ 그래도 내것으로 흡수해야지많은 색상을 등록하다보니 배리어블 구조에도 익숙해져간다 히히   타이포그래피타이포그래피는 사이드 프로젝트 할때도 많이 만들어왔고, 또 내 기준 가장 쉬웠기 땜에 잘 따라간것 같다.아는걸 점검하는 시간이랄까? >_<   그림자쉐도우에 대해서는 알고있었고, 잘 활용해 왔었지만 베리어블 등록이 가능한지는 몰랐다.그리고 솔직히 말하면 다크모드에서도 쉐도우를 주는지 몰랐다.. (다크모드엔 쉐도우 안들어가는걸로 알고 있었음)그래서 다크모드 쉐도우 만들었떤게 특별한 경험이였다.회사 업무할때도 유용하게 쓸듯!   반응형 그리드반응형 그리드도 많은 강의를 따라하며 만들어봤떤터라 쉽게 따라갈 수 있었다. 우리 회사는 앱서비스 회사라 많이 안쓸것 같지만 그래도 배워놓는게 좋지! >_<  후기이번 일주일간 강의를 들으면서 베리어블의 구조에 대해 빠삭하게 알게 된 것 같다. 그리고 실무에서 사용할 수 있는 스킬들도 많이 배워서 너무 좋다!!!미션도 너무 쉽지도 어렵지도 않은 미션들이여서 천천히 따라하기 좋았따. 미션이 없었으면 뭔가 늘어졌을것 같기도?미션이 좀만 더 어려워지면 좀 힘들것 같긴 하지만 ㅠㅠ베리어블에 편집에서 원하는 요소에서만 보여지게하는거(?) 같은 경우는 회사에 적용했더니 사수님이 칭찬해주셨따.다음 강의가 기대된다!   

UX/UI

한국 IT 용어 이야기 (6) - 리뷰

한글로도 영어로도 아주 많이 쓰이고, 다른 단어들과 붙어서도 많이 쓰인다. 언뜻 생각나는 것만으로도 코드 리뷰, 프로젝트 리뷰, UI 리뷰, 리걸 리뷰, 피어 리뷰 등등이 생각나고, 가볍게 '시간 나면 봐 달라' 부터 '승인해 달라' 까지의 스펙트럼이 넓어서 영어로도 어려웠고, 한국에 와서는 Agile의 파도 아래에서 쓰임이 참으로 어려웠던 단어이다.곰곰히 생각해 보면 조금 더 한국말로 검토 혹은 승인, 결재 등도 있겠지만, 역시 딱딱해 지는 것은 어쩔 수 없겠다. 결과적으로는 what's next를 잘 정의해 놓아야 불필요한 오해들이 줄어들겠고, 아래는 몇가지 사례들과 개인적인 견해들.code review구글에서 code review 를 처음 배웠는데, (거의) 모든 코드가 아무에게나 보이고, 어지간하면 build & run 이 가능하고, change 를 보낼 수 있으며, repository owner 가 혹은 해당 reviewer 가 24시간 내에 응답이 오는 꽤 신기한 경험들이었다.언어 별 approver도 따로 있어서 readability 를 챙겨야 했고, owner 가 안된다고 하면 여러 가지 방법을 동원해서 어떻게든 되는 방법을 찾는 등 "LGTM"을 받기 위한 모든 노력이 여기 들어간다고 하겠다. 마침표, 약어 등의 영어로 흠이 잡혀 고생하던 경험, 그리고 그걸 이용해서 owner의 기분을 풀어주는 고급 기술, 대상 팀의 TODO 를 풀어주는 조건으로 code 를 짜 넣는 방법, 높은 사람들의 stamp 를 받아서 강제적으로 되게 하는 등의 여러 기억들이 지나간다.이 맥락에서는 '리뷰'라는 말을 떼어 놓고 생각해 본 적은 없고, 한글로도 딱히 번역될 만한 말이 없는 거 같기도 하다. 당시 구글의 코드는 지금의 용어들로는 극단적인 mono-repo, 잘게 잘려진 changes, approve based 강한 정책, 리뷰어로 되어 있었을 때의 강한 의무 등 바깥에 와 보니 굳이 저렇게까지 싶을 정도의 정책들이었지만, 개인적으로는 혹독한 process가 주었던 장점들을 좋아한다.document review팀을 옮겨 다니는 짬이 되면서 가장 신경이 많이 쓰이는 부분이 자연스럽게 문서들의 review에 대한 것들이겠다. 제품의 거대한 그림을 보여 주는 PRD , master design doc 같은 formal 한 문서들부터 작은 기능 별로 만들어진 약식 문서들, 실험 리포트들, one pager라고 불리는 짧은 design proposal 들까지... '운영'으로 갈 수록 필요가 많은 일들이긴 하겠다. 실제로 서른 넘어 배운 영어도 여기서 많이 늘었음은 틀림 없으리라.앞의 code change 의 경우, 남의 repository에 요청할 때 제일 먼저 듣는 이야기가 'design doc이 있느냐?' 였고, 대개 이 질문은 너의 아이디어를 sponsor / support 해 주는 높은 누군가가 있느냐 라는 질문이라 하겠다. Google Doc 에서 review , approve 기능이 은근히 유용했던 기억이고, 몇몇 팀에서는 아예 comment를 resolve 하는 것과 explicit 한 approve를 받아 오는 것을 review 과정의 일부로 놓기도 했고, 그 때문에 comment 를 남기는 행위와 허락 없이 resolve 하는 행위가 조금 적대적인 행위로 받아들여지는 부작용들도 있었다.approve stamp 를 찍어 주었으면 하는 높은 사람은 대개 다른 거 하느라 바쁘고, 문서 리뷰를 요청한 사람은 또 반대로 급하기에 begging 의 기술이 필요하기도 했고, 이 날을 위해서 평소에 잘 지내 놓거나 visibility를 높여 놓거나 하는 게 필요했다. 대면 출장의 용도도 여기서 가장 컸던 거 같다. 지나고 보니 그래도 제일 좋은 방법은 review 의 결과가 미치는 영향에 따라서 요청할 때 1) 그냥 한 번 봐 달라 혹은 2) 네 생각에는 A/B/C 중 어떤 게 나은 거 같니 3) 네가 approve 찍어 주면 고맙겠다. 며칠이면 되겠니? 등의 기대치를 아예 dry 하게 요청하는 것이었던 거같다. 역지사지...launch review구글에 다니면서 가장 짜릿하고 좋았던 경험들은 이 launch review 들에 있다. launchcal 이라 불렸고, 훗날 ariane 라 불리는 과제의 gatekeeping , explicit approval 에 해당하는 process 이고, 혹자는 agile , fast iteration 의 정반대에 있다고 해서 불편해 하는 시각이 있었던 과정이다. 다른 과제들을 읽음으로서 얻게 되는 장점도 훌륭하게 많았고, 매주 area leadership 들이 이를 운용하는 모습은 교과서에 닿아 있고, Google 의 respect others 에 가장 가까운 점이기도 하다.여기서는 모든 리뷰의 목표가 'appove' 에 있고, 어떻게 하면 approve 를 받을 수 있는가 에 대한 방법, timeline 등이 잘 정의되어 있었다. speed를 고려해서는 approve 를 optional 혹은 TBR 등으로 해 놓는 정도도 나쁘지 않았고, legal 을 제외한 나머지는 자기가 맡은 부분만 신경쓰는 것도 좋은 경험이었다. 예를 들면 검색팀의 경우 engineering 과 quality 가 담당자가 달랐어서 engineering 은 성능과 기계의 비용 등에 대한 점만 보고, quality는 사용자 실험 지표 등만 보고, 둘 다 UI 에 대해서는 맘에 안 들어도 내버려 둔다든지...개인적으로 agile / squad process 를 별로 좋아하지 않는데, 그 중 가장 큰 부분이 review 과정 자체를 생략하며 speed를 얻으려 하는 습관들 때문이다. 사람이 많고 여러 직군이 같이 하게 될 때 효용이 더 크겠지만, 테크 쪽은 어떻게든 그래도 코드가 들어가기 전에 비슷한 과정을 겪게 될테니까 부작용이 덜한데, 적어도 같은 직군의 다른 팀원들에게 도움 받는다는 생각으로 리뷰를 요청하는 건 규모와 상관없이 했으면 하는 생각이다. 여러 이유로 일단 내가 이걸 봐 달라고 하면 딴지부터 걸겠지..? 라는 선입견도 영향이 있을 수 있겠고, 서로 다른 squad 사이의 알력 같은 것도 쉽게 예상되긴 한다. 한국의 작은 회사들에 도입하려 했을 때 직접적인 피드백들은 불필요한 과정 추가로 인한 delay 우려 였고, 아이러니하지만, 나는 정 반대의 생각이고, 구글에서 event driven launch 들이 있었을 때 launch process가 가장 도움이 되었었던 사례들이 있다.아래는 추억 돋는 quality review.Search Quality Meeting: Spelling for Long Queries (Annotated)Quality 에 진심인 사람들의 치열한 리뷰 현장. Table 에는 stakeholder들, 병풍처럼 대기하는 과제 진행자들... 차례대로 기다리는...

교양한글영어용어

이용수

[인프런 워밍업 클럽 1기] BE 2일차 과제

[인프런 워밍업 클럽 1기] BE 2일차 과제문제 1구현 과정구현 목표 : 두 수를 입력해 요청하면 덧셈, 뺄셈, 곱셈의 결과를 반환하여 응답함.메서드 타입 : GET경로 : /api/v1/calc쿼리 파라미터 이름 : num1 / 타입 : int이름 : num2 / 타입 : intController 구현 - CalcController.javapackage com.group.libraryapp.controller.assignment.calc; import com.group.libraryapp.dto.assignment.request.CalculatorCalcRequest; import com.group.libraryapp.dto.assignment.response.CalculatorCalcResponse; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; @RestController public class CalcController { @GetMapping("/api/v1/calc") public CalculatorCalcResponse calcTwoNumbers(CalculatorCalcRequest request ) { return new CalculatorCalcResponse(request); } }Request DTO 구현 - CalculatorCalcRequest.javapackage com.group.libraryapp.dto.assignment.request; public class CalculatorCalcRequest { private int num1; private int num2; public CalculatorCalcRequest(int num1, int num2) { this.num1 = num1; this.num2 = num2; } public int getNum1() { return num1; } public int getNum2() { return num2; } }Response DTO 구현 - CalculatorCalcResponsepackage com.group.libraryapp.dto.assignment.response; import com.group.libraryapp.dto.assignment.request.CalculatorCalcRequest; public class CalculatorCalcResponse { private int add; private int minus; private int multiply; public CalculatorCalcResponse(CalculatorCalcRequest num) { this.add = num.getNum1() + num.getNum2(); this.minus = num.getNum1() - num.getNum2(); this.multiply = num.getNum1() * num.getNum2(); } public int getAdd() { return add; } public int getMinus() { return minus; } public int getMultiply() { return multiply; } } 서버 실행 후 Postman 결과 확인문제 2구현 과정구현 목표 : 날짜를 입력해 요청하면 해당 날짜 요일을 반환하여 응답함.메서드 타입 : GET경로 : /api/v1/day-of-the-week쿼리 파라미터 이름 : date / 타입 : LocalDate Controller 구현 - dayController.javapackage com.group.libraryapp.controller.assignment.day; import com.group.libraryapp.dto.assignment.response.DayOfTheWeekResponse; import org.springframework.format.annotation.DateTimeFormat; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import java.time.LocalDate; @RestController public class dayController { @GetMapping("/api/v1/day-of-the-week") public DayOfTheWeekResponse getDayOfWeek(@RequestParam @DateTimeFormat(iso = DateTimeFormat.ISO.DATE) LocalDate date) { return new DayOfTheWeekResponse(date); } }Request DTO 구현 - DayOfTheWeekRequest.javapackage com.group.libraryapp.dto.assignment.request; import java.time.LocalDate; public class DayOfTheWeekRequest { private LocalDate date; public DayOfTheWeekRequest(LocalDate date) { this.date = date; } public LocalDate getDate() { return date; } }Response DTO 구현 - DayOfTheWeekResponse.javapackage com.group.libraryapp.dto.assignment.response; import java.time.LocalDate; public class DayOfTheWeekResponse { private String dayOfTheWeek; public DayOfTheWeekResponse(LocalDate date) { this.dayOfTheWeek = date.getDayOfWeek().toString(); } public String getDayOfTheWeek() { return dayOfTheWeek.substring(0, 3); } }서버 실행 후 Postman 결과 확인문제 3구현 과정구현 목표 : 여러 수가 입력된 배열을 입력해 요청하면 배열 내 수의 총합을 반환하여 응답함.메서드 타입 : POST경로 : /totalsum쿼리 파라미터 이름 : numbers / 타입 : ListController 구현 - TotalSumController.javapackage com.group.libraryapp.controller.assignment.totalsum; import com.group.libraryapp.dto.assignment.request.TotalSumRequest; import com.group.libraryapp.dto.assignment.response.TotalSumResponse; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RestController; @RestController public class TotalSumController { @PostMapping("/totalsum") public TotalSumResponse getTotalSum(@RequestBody TotalSumRequest request) { return new TotalSumResponse(request); } }Request DTO 구현 - TotalSumRequest.javapackage com.group.libraryapp.dto.assignment.request; import java.util.List; public class TotalSumRequest { private List<Integer> numbers; public List<Integer> getNumbers() { return numbers; } }Response DTO 구현 - TotalSumResponse.javapackage com.group.libraryapp.dto.assignment.response; import com.group.libraryapp.dto.assignment.request.TotalSumRequest; public class TotalSumResponse { private int sum; public int getSum() { return sum; } public TotalSumResponse(TotalSumRequest request) { this.sum = request.getNumbers().stream().mapToInt(Integer::intValue).sum(); } }서버 실행 후 Postman 결과 확인 

백엔드인프런워밍업백엔드

이용수

[인프런 워밍업 클럽 1기] BE 1일차 과제

[인프런 워밍업 클럽 1기] BE 1일차 과제 [질문]Q. 어노테이션을 사용하는 이유 (효과) 는 무엇일까?  A. 어노테이션을 사용하는 이유에 대해 아래 내용에서 어노테이션의 정의, 특징, 역할, 장,단점에 대해 자료를 찾아 정리해보면서 나름대로 다음과 같은 결과를 도출 했다.어노테이션을 사용하면 코드와 설정을 같은 위치에 배치하여 코드의 가독성을 향상시킨다.클래스, 메서드, 필드, 파라미터 등과 관련된 정보가 함께 있어 코드를 읽고 이해하기 쉬워지며 특히, 코드의 흐름을 파악하기 쉬워진다.별도의 설정 파일을 작성하지 않고도 어노테이션을 사용하여 설정을 간소화할 수 있다. 이는 개발자가 코드에 직접 설정을 기술할 수 있으므로 설정 관리를 단순화시킨다.어노테이션을 통해 공통적인 코드 패턴이나 설정을 재사용할 수 있다. 이는 코드의 중복을 줄이고 효율적으로 코드를 작성할 수 있도록 도와준다.필요한 기능이나 제약 사항을 정의하기 위해 커스텀 어노테이션을 직접 정의할 수 있다. 이것은 프로젝트에서 특정한 요구사항에 대응하기 위해 유연하고 효율적인 방식으로 사용할 수 있다.어노테이션 프로세서를 사용하면 컴파일 시점에 어노테이션을 처리하고 검증할 수 있다. 또한, 코드를 자동으로 생성하거나 수정할 수 있어서 프로젝트에 필요한 기능을 효과적으로 구현할 수 있다. 어노테이션의 정의자바에서 어노테이션(Annotation)이란 소스 코드에 메타데이터를 추가하는 방법을 제공하는 기능이다. 어노테이션의 특징어노테이션은 컴파일러나 런타임 환경에게 정보를 전달할 수 있으며 전달된 정보는 코드를 실행하거나 컴파일할 때 사용된다.어노테이션은 @ 기호로 시작하며, 주석과 유사하게 생겼지만, 주석과는 달리 컴파일러가 읽고 처리할 수 있다.정의된 어노테이션은 해당 타겟에 대한 동작을 수행하는 프로그램 외에는 다른 프로그램에게 영향을 주지 않는다.        어노테이션의 역할컴파일러에게 문법 에러를 체크하도록 정보를 제공한다.프로그램을 빌드할 때 코드를 자동으로 생성할 수 있도록 정보를 제공한다.런타임에 특정 기능을 실행하도록 정보를 제공한다.  어노테이션 사용의 장점코드의 가독성 향상어노테이션은 코드와 설정을 같은 위치에 배치하므로 읽고 이해하기 쉽다. 클래스, 메서드, 필드, 파라미터 등 연관된 코드와 가까이 있기 때문에 흐름을 따라가기 쉽다.설정의 간소화별도의 설정 파일 작성 없이 어노테이션 적용을 통해 설정을 간소화할 수 있다.중복 코드 제거공통적인 코드 패턴이나 설정을 재사용할 수 있기 때문에 코드의 중복을 줄이고 효율적으로 코드를 작성할 수 있다.커스텀 어노테이션 정의직접 커스텀 어노테이션을 정의함으로 필요한 기능이나 제약 사항을 정의하여 사용할 수 있다.프로세서를 통한 검증 및 코드 생성어노테이션 프로세서를 이용해 컴파일 시점에 어노테이션을 처리하고 검증할 수 있다. 또한 코드를 자동으로 생성하거나 수정할 수 있기에 효과적으로 기능을 구현할 수 있다. 어노테이션 사용의 단점런타임 오버헤드런타임 시점에 리플렉션을 사용하여 처리하는 어노테이션의 경우 성능상의 오버헤드가 발생할 수 있다.컴파일 시점 제한어노테이션도 컴파일 시점에 오류를 확인할 수 있지만, 어노테이션 로직이 런타임에 에러를 발생시키거나 어노테이션에 잘못된 값이 할당된 경우 컴파일 시점에 오류를 확인할 수 없을 수도 있다. 어노테이션의 종류어노테이션은 크게 세 가지로 구분된다. 자바에서 기본적으로 제공하는 빌트인 어노테이션과 어노테이션을 정의하는 데 사용되는 메타 어노테이션, 마지막으로 사용자 어노테이션이 있다. 빌트인 어노테이션자바에서 기본적으로 제공하는 어노테이션이다.@Override : 컴파일러에게 메서드를 오버라이딩하는 것이라고 알린다.@Deprecated : 앞으로 사용하지 않을 대상임을 알린다.@FunctionalInterface : 함수형 인터페이스라는 것을 알린다.@SuppressWarning : 컴파일러가 경고 메시지를 나타내지 않는다.@SafeVaragrs : 제네릭과 같은 가변 인자의 매개변수를 사용할 때의 경고를 나타내지 않는다. 메타 어노테이션어노테이션에 붙이는 어노테이션으로, 어노테이션을 정의하는 데 사용한다.@Target : 어노테이션을 정의할 때 적용 대상을 지정하는 데 사용한다.@Documented : 어노테이션 정보를 javadoc으로 작성된 문서에 포함시킨다.@Inherited : 어노테이션이 하위 클래스에 상속되도록 한다.@Retention : 어노테이션이 유지되는 기간을 정하기 위해 사용한다.@Repeatable : 어노테이션을 반복해서 적용할 수 있도록 한다. 사용자 정의 어노테이션사용자가 직접 정의하여 사용하는 어노테이션이다. Q. 나만의 어노테이션은 어떻게 만들 수 있을까? A. 사용자가 직접 여러 어노테이션을 혼합하거나 정의하여 어노테이션을 만들 수 있다.기본적으로 인터페이스를 정의하는 것과 유사하며 @interface 뒤에 사용할 어노테이션의 이름을 정의하고 속성을 설정한다.어노테이션을 정의할 때 기본적으로 포함되야할 메타 어노테이션이 존재한다.@Retention - 어노테이션이 유지되는 기간을 정해야 하며 다음과 같은 열거 상수 중 선택한다.SOURCE : 컴파일할 때 적용 ~ 컴파일된 후에 제거됨CLASS : 메모리로 로딩할 때 적용 ~ 메모리로 로딩된 후에 제거됨RUNTIME : 실행할 때 적용 ~ 계속 유지됨@Target - 어노테이션을 정의할 때 적용 대상을 지정해야 하며 다음과 같은 열거 상수 중 선택한다.TYPE : 클래스, 인터페이스 열거타입ANOTATION_TYPE : 어노테이션FIELD : 필드CONSTERUCTOR : 생성자METHOD : 메서드LOCAL_VARIABLE : 로컬 변수PACKAGE : 패키지 이제 예를 들어 @MyAnnotion이라는 String 속성을 가진 어노테이션을 정의해보겠다.import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target; // 사용자 정의 어노테이션 선언 @Retention(RetentionPolicy.RUNTIME) // 어노테이션 정보를 유지할 시점 (런타임까지 유지) @Target(ElementType.METHOD) // 어노테이션이 적용될 대상 (메서드에 적용) public @interface MyAnnotation { String value() default "test"; // 어노테이션의 속성, 기본값은 빈 문자열 // 추가적인 속성이 필요하다면 여기에 선언할 수 있습니다. }정의한 어노테이션에 사용한 메타 어노테이션은 다음과 같다.@Retention(RetentionPolicy.RUNTIME): 어노테이션 정보를 런타임까지 유지한다는 것을 의미하며 이렇게 하면 실행 중에 리플렉션(reflection)을 사용하여 어노테이션 정보를 읽을 수 있다.@Target(ElementType.METHOD): 이 어노테이션은 메서드에만 적용하도록 설정한다. 이제 메인 코드에서 어노테이션을 사용하고 리플렉션을 통해 어노테이션의 정보를 출력해보자.public class Main { @MyAnnotation public void myMethod() { System.out.println("This is myMethod"); } public static void main(String[] args) throws Exception { Main example = new Main(); example.myMethod(); // 리플렉션을 이용하여 어노테이션 정보 출력 java.lang.reflect.Method method = Main.class.getMethod("myMethod"); MyAnnotation annotation = method.getAnnotation(MyAnnotation.class); System.out.println("Method name: " + method.getName()); System.out.println("Annotation value: " + annotation.value()); } }어노테이션의 이름과 속성 값을 출력하는걸 확인할 수 있다."C:\Program Files\Java\jdk-11.0.16.1\bin\java.exe" "-javaagent:C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2021.1.1\lib\idea_rt.jar=6433:C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2021.1.1\bin" -Dfile.encoding=UTF-8 -classpath C:\Users\User\Desktop\test\out\production\test Main This is myMethod Method name: myMethod Annotation value: test Process finished with exit code 0참고 자료[Spring] 스프링을 어노테이션 기반으로 만든 이유 (tistory.com)[Java] Custom Annotation(커스텀 어노테이션) 만들기 - MangKyu's Diary (tistory.com) 

백엔드인프런워밍업백엔드

한국 IT 용어 이야기 (3) - "R&R"

여러 직군의 사람들과 일을 하게 되었을 때, 애자일/스프린트/회고/리뷰 등으로 이런 저런 일들을 진행하게 될 때 듣게 되었던 단어 중에 생소한 것으로 "R&R"이 있었다. 스쳐 지나듯 오갔던 말이어서 한글로 "알앤아ㄹ" 혹은 "아래날" 정도로 들려서 꽤 오랫동안 'arena' 를 이야기하는 줄 알고 있었다. 'arena' 는 발음으로는 '어리나'에 가깝지만, 한국에서는 '아레나' 라고 듣고 자라 왔었기에 한데 모여 전투적으로 열심히 일하자는 이야기겠구나 생각했었는데, 사실은 정반대의 의미를 가진 단어였던 셈이었다.참고로 구글, 바드, 웹스터 등에 R&R 을 물어보면 Rest & Recreation 을 알려 주는데https://www.merriam-webster.com/dictionary/R%20%26%20R여기에 한글로 '뜻'이라 물어 한국어를 섞어 주면 IT 용어들로 쏠려서 결과들이 몰려 온다. 관련업에 종사하긴 하지만, 한국어 컨텐츠가 쏠려 있는 거 같아 조금 씁슬해 진 부분도 있겠다.https://www.google.com/search?q=R%26R+%EB%9C%BB알앤알 뒤에 붙는 단어들로는 '정리하다', '구분하다'가 많이 오고, 비슷한 문맥에 '업무분장'이라는 이름의 단어도 종종 등장한다. 업무분장은 job assignment , task assignment 등에 더 가깝다 하겠다.몇몇 기억들주로 여럿이 모여 일을 같이 하면서 혹은 나누어 하게 될 때 '선을 긋는' 용도로 자주 쓰였던 기억이다. 팀간에 혹은 멤버들 간에 가벼운 텐션이 있게 될 경우 나는 여기까지만 할 거고 그쪽에서 나머지는 알아서 하라 정도의 거리 두기 용으로 ...프로젝트 단위 보다는 조직도 같이 큰 그림에서 이해하기에 괜찮은 개념들이긴 하지만, 뭔가 훨씬 더 규모가 큰 곳들 - 영업망 업권 할당 같은 - 에서 쓰이는 게 좋은 개념이 과하게 스타트업씬에 내려와 있는 게 아닐까 싶었다. 특히 'responsibility' 부분은 과제에 적용시키기 어렵다는 생각인데, 실제로 '책임을 진다'는 게 어떤 의미인가에 대해 딱 떨어지는 그림이 나오진 않았고, 이는 내가 각종 툴의 "assigned" 상태에 익숙해져 있는 bias 가 있다 하겠다.아이러니하게 구글에 다니면서는 한 번도 써 보지 않은 단어였고, 그래서인지 개인적으로 개발 조직 내에서는 적어도 선을 그으면 안 된다는 생각이다. 잘 풀릴때는 뭐 별 문제 없지만, 왠지 과제가 삐걱거릴 때 무의식적으로 선을 긋는 습관이 여기서 온 거 같다는 생각이고, 몇몇 경우 개인들과 조직의 성장을 막는 요소로 작용하고 있지 않았나 하는 생각이다. 예를 들면 '나는 프론트엔드 엔지니어니까 백앤드는 고치면 안돼' 같은..선을 긋고 기본 자세가 방어적인 데서 시작을 하는 팀들과 복잡한 일을 해 나갈 때, 자연스레 비는 부분에 대해 책임 소재가 불분명해져서 종종 어려운 일들이 생겼다. 사람 수가 일감의 수보다 부족한 거의 모든 스타트업 씬에서는 특히 자주 일어나는 일인데, 새로운 영역의 일이거나 몇몇 팀들의 사이에서 겹치거나 비거나 하는 경우 자발적으로 알아서 챙겨 지면 좋으련만.. 이걸 잘 나누어서 일이 되게 잘 시키는(?) 것도 PM 이나 리더십의 R&R 이라 생각할 수도 있겠다.

교양용어개발자한국어

한국 IT 용어 이야기 (2) - 정합성

두번째로 챌린징했던 단어는 '정합성'이다. PM / design 쪽에서 이야기는 많이 듣지 못했지만, data 직군과 DBA , DevOps 들과 이야기할 때 종종 나왔던 단어이다.일단 네이버 사전에서 정합성은 무슨 말인지 못 알아들을 정도의 설명인데, 단지 뒤에 '체크'라는 말이 붙으면서 조금 알아들을 수 있는 용어로 바뀌게 된다.네이버 사전 결과 '정합성'30년 전에 데이터베이스 과목을 수강한 후에 실무 일머리들은 영어로 다시 다 배웠기에 여러 가지 용어들을 두리뭉실하게 써 왔는데, 여기서 잠깐 ChatGPT 와 bard 의 이야기 먼저...ChatGPT 의 결과 - "데이터 정합성을 영어로"bard 의 결과 - "데이터 정합성을 영어로"일단 책에서 배운 개념으로 data consistency 와 data integrity 가 꼬이기 시작했고, 한글로 적당한 '데이터 무결성'이 생각이 났다. 이를 비교하려 다시 물어 보니 이제 bard 랑 chatGPT 가 비슷한 말을 하게 되는 거 같았다.ChatGPT - 데이터 무결성과 데이터 정합성 비교bard - 데이터 무결성과 데이터 정합성 비교아래는 배웠던 대로 이해하고 동작하는 (쉬운) 예제들.database migration 작업을 하는데, 새로 생성된 테이블의 entry 개수가 이전 table 의 개수와 다르다.. --> 두 테이블의 정합성이 맞지 않아 AWS DMS 를 다시 시도한다든지...database , table 안에 끊어진 reference 들이 있고, deprecated 된 table 때문에 의미 없는 필드들이 더 생기게 되었다. --> data 무결성이 깨지는 상황으로 batch 잡을 돌려서 null 로 채우자.. 조금 난이도가 있는 사례로는소스로 삼는 raw table 이 여러 곳에서 동시에 사용되는 derived table 을 만들게 되는데, 같은 날 생성된 다른 두 테이블의 같아야 할 값이 다르더라. --> 두 테이블 사이에 필드들이 정합성이 다르다. freezing 되어 있는 테이블을 써라.. 그런데, 위의 bard 의 번역처럼 다양한 의미를 두리뭉실하게 '정합성'이라는 말에 기대어 쓰는 경우들이 종종 있었다. 뭔가 딱히 깊이 설명하고 싶지 않지만, 보이는 데이터를 바로 쓰기 찜찜할 때 '정합성' 이 거론되었고, 사실 이 단어 뒤에 들어오게 될 동사를 고르는 것도 꽤 어려운 일이다. '맞지 않다' , '깨져 있다', '좋다 or 나쁘다'. '완벽하다', '쓸만하다?'가장 어려웠던 사례로는Google Analytics 가 주는 MAU, Firebase 가 주는 MAU , Amplitude 가 주는 MAU 가 다른데, 데이터 정합성이 의심되니 쓰던 걸 쓰도록 하겠다. or vice versa실험을 돌려 지표가 나왔는데, 정합성에 이슈가 있어서 다시 하기로 했다. 이 '정합성'이라는 말은 '무결성'에 비해 조금 과하게 넓게 쓰이고 있는 게 아닐까 하는 생각이었고, 이 일본식 한자들은 딱히 정이 가지 않기도 해서 어느 새 지나 보니 시간 될 때마다 영어 표기를 권하는 꼰대가 되어 있었다.

교양용어개발자한국어

mikro-orm 버그 리포팅 후기 (feat. auto increment)

이슈등록 링크: https://github.com/mikro-orm/mikro-orm/issues/5460 [ 문제 상황 ] 사내에서 mikro-orm 을 Mysql 과 사용하고 있는데, 사내 db는  짝수 채번을 하고 있는데, 이상하게 mikro-orm 에서 여러 entity 를 영속화하면 pk 가 순차적으로 나오는 문제가 있었다.  [ 이슈의 정체 ] JPA의 경우 ORM 채번을 할 때, 아래의 mysql ok packet 을 통해서 이루어진다. https://dev.mysql.com/doc/dev/mysql-server/latest/page_protocol_basic_ok_packet.html 이후에 auto_increment 에 대한 설정 값을 요청하여서, 이를 기반으로 영속성 컨텍스트에 auto_increment pk 를 세팅을 하기 마련이다. 단순 repository.save 호출을 한다고 가정하면, 아래의 패킷이 날아간다. 1. begin 2. insert into 'table' ('데이터')3. commit 그리고 2번 요청의 응답 패킷(OK packet)에 자세히 보면 아래와 같이 Last INSERT ID 라는 값이 내려온다. 이 값을 기준으로 entity 에 id 를 세팅해준다. (참고로, commit 되기전에 db 에서는 채번이 되고, db 에서 한번 채번되는 경우에 tx 가 롤백이 되더라도 이후에 같은 값을 사용하지는 않는다 -> pk 는 항상 순차가 아닐 수도 있음) 사실 이런 부분은 mikro-orm 도 똑같을거라고 생각을 했는데, mikro-orm 자체가 어떤 특별한 재주를 부리는건 아닐거라서 MySQL 서버와의 통신을 통해서 채번한 결과를 사용하는건 당연해보였다.  그런데, 아래와 같이 여러 개의 entity 를 저장하는 경우에 이상하게 pk 가 순차로 나왔다. (실제 코드는 아니고, 단순화하였다)mysql 채번 결과를 바탕으로 entity 의 pk가 정해질 텐데,  pk가 순차적으로 생성되니 의아했다.const result = await this.postRepository.save([ new PostEntity('title'), new PostEntity('title2'), new PostEntity('title3'), ]); return result; } @Injectable() export class PostRepository { constructor( @InjectRepository(PostEntity) private readonly postRepository: EntityRepository<PostEntity>, ) {} async save(entity: PostEntity | PostEntity[]): Promise<PostEntity | PostEntity[]> { await this.postRepository.getEntityManager().persistAndFlush(entity); return entity; } }  그래서, 해당 패킷이 어떻게 나가는지 wireshark 를 통해 패킷 분석을 해보았다 wireshark 를 사용하여 packet 을 확인해보니 auto_increment 에 대한 쿼리가 패킷으로 잘 날아갔다.  Ok packet이 잘 왔고, auto_increment 변수에 대한 값도 잘 조회하고 있었다.  그런데 결과는 아래와 같았다. - entity: pk 는 1씩 증가- tx commit 이후 db: db 레코드의 pk는 2씩 증가하고 있었다. mikro-orm 버그가 확실해 보였고, 브레이크 포인트를 찍어서 확인을 해보았다.  아래 코드에서 this.autoIncrementIncrement 필드에 1을 세팅하고 있는게 문제의 원인이었다.mikro-orm 의 connection 은 mikro-orm/knex 라는 라이브러리를 통해 이루어지는데, 여기서 res는  Value 로 내려오는데,할당 시에는 res?.auto_increment_increment 로 할당하고 있던게 문제였다.async getAutoIncrementIncrement(ctx) { if (this.autoIncrementIncrement == null) { // the increment step may differ when running a cluster, see https://github.com/mikro-orm/mikro-orm/issues/3828 const res = await this.connection.execute(`show variables like 'auto_increment_increment'`, [], 'get', ctx, { enabled: false }); /* istanbul ignore next */ this.autoIncrementIncrement = res?.auto_increment_increment ? +res?.auto_increment_increment : 1; } return this.autoIncrementIncrement; }  [ 후기 ] 사실 팀 내에서 이 문제에 대해서 인지는 하고 있었고, 다른 방식으로 문제를 해결하고 있었다. 그런데 시간이 나서, 트러블 슈팅을 해보았고 위와 같은 이슈가 있다는 것을 알게 되었던 것이다.  그래서 이 부분에 대해서 이슈를 등록했고, 올라온지 몇시간도 안되어서 수정되었다. 사실 처음부터 pr 을 올릴까 말까 고민을 했는데, orm 특성상 driver 의 버전에 의해 생기는 버그일 수도 있다고 생각을 해서 pr 을 올리지 않고 상세하게 이슈 리포팅을 했다. 무지성 pr을 올릴걸하는 아쉬움이 남는다 ㅋㅋtistory 게시글 링크: https://pius712.tistory.com/22

백엔드mikro-rommikroormnodejsnestjs

김종한

[찍먹클럽] C#과 유니티로 만드는 MMORPG 게임 개발 시리즈 강의 후기 feat.인프

[찍먹클럽] C#과 유니티로 만드는 MMORPG 게임 개발 시리즈 강의 후기 feat.인프런 인프런_찍먹클럽 Unity 개발 교육이번 KG 카이로스 교육에서 Unity를 사용해 프로젝트의 질을 높이기 위해서 많은 강의를 찾던 중..."인프런" 에서 Unity 강의를 1달간 무료로 제공되는 [찍먹클럽] 이벤트를 모집했었습니다!아침 Unity를 입문에 관련 교육이 필요했었고 특히나 돈이 없는 취업 준비생 입장에서 무료 강의는정말 달콤한 소식이 아니었나 싶었습니다.찍먹클럽에 선정되었다!내가 정말 열심히 블로그를 운영해서 그런가?운이 좋게도 [찍먹클럽] 에 선정되었다![C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part3: 유니티 엔진출처 : 인프런https://bit.ly/3V7xZts이번에 무료로 들었던 강의는 위의 링크를 통해서 자세하게 확인할 수 있습니다!무엇보다도 인프런은 높은 질의 강의를 제공하는 플랫폼으로 잘 알고 있었습니다.특히나 개발자들도 많이 찾는 강의 플랫폼이어서 더욱 신뢰가 갔었습니다.거기다가... 강사님의 엄청난 이력까지... 열심히 들을 이유가 생겼습니다!우선 강의에 대해서 좋은 점을 말씀드린다면1) 부드러운 진행과 필요한 내용으로 구성된 효율적 강의2) Unity 입문하면서 느끼는 Assets, Hierarchy처럼 복잡한 내용들을 집어줌3) 모델링만 하는 것이 아는 C#에 대한 내용도 포함된 복합적인 강의4) 개발하기 좋은 환경 구성까지 잡아 줌 (*레이아웃 설정, 폴더 정리 등)출처 입력가장 좋은 점이라면 [몰입도] 있는 강의가 아니었나 싶었습니다.아직 강의를 전부다 듣지 못했기 때문에... 지금까지 강의를 보고 구현한 정도만 리뷰하겠습니다! <Notion을 통한 강의 내용 정리>강의에서 중요한 내용들은 Notion에 따로 정리 <C# 코드 구현고 동작은 Unity 씬에서 확인>Unity는 C# Script를 작성해 동작을 제어하거나 새로운 Assets들을 추가할 수도 있습니다.필요하고 주로 사용하는 코드들은 따로 정리해서 내가 개발하고 싶거나 Object를 동작할 때 자주 활용했습니다.이번 강의에 대해 좋은 점도 코드 리뷰도 같이 해주셔서 상당히 만족했습니다.Vector3에 대한 코드 리뷰와 동작 확인 <Prefab을 통해 나만의 Tank 만들어 보기>Assets에 Prefab을 만들어서 내가 원하는 Object들을 생성하고 저장합니다.각 Prefab은 Speed나 각도를 독립적으로 지정해 동작을 시킬 수 있습니다.허접해 보이지만 탱크다.나만의 Tank를 동작해 봄!나의 Unity 공부는 -ing출처 입력최근에 KG 카이로스에 프로젝트를 기획하고 팀원들과 의견을 나누는 과정에 있어서바쁜(*핑계 아님) 와중에 강의를 절반 정도 들었습니다!KG_KAIROS 최종 프로젝트 <안>그래서... 앞으로의 남은 강의를 전부 수강하게 된다면 어떤 Unity 환경 속에 내가 구성한 Object를동작하고 플레이할 수 있을지 기대가 됩니다!남은 강의... 그중 미니 RPG가 상당히 기대된다! 인프런 담당자님... 반드시 전부 수강하겠습니다. 믿어 주십쇼!미련한 수강생

그래픽 디자인인프런인프런강의후기게임개발게임개발강의인강후기강의후기UnityC#유니티엔진MMORPG

[인프런 찍먹클럽] 언리얼엔진5 스파르타 클래스 - 심화편 후기

언리얼 엔진5를 공부를 하다보면, 영어 강의들을 보게 된다. 수많은 영어 강의들한국어 강의를 찾던 중, 인프런의 언리얼엔진5 스파르타 클래스 - 심화편을 알게 되었다.심화편이라.. ㄷㄷ 벌써부터 궁금해지지 않나?! 강사님은 YAL 선생님!실전, 심화로 나누어 2개의 강의를 제작하셨다. 실전편은 무료이니 모든 분들이 체험할 수 있다. 언리얼엔진5 스파르타 클래스 - 심화편 : https://bit.ly/3T7YBbd 특히, 나는 애니메이션을 더욱 알고 싶어서 이번에 참가하게 되었다.언리얼 엔진의 애니메이션의 다양한 방식들을 알 수 있다. IK,FK를 보면 무슨 생각이 들까요? 피하고 싶어진다...😥하지만, 강의를 들으면서 애니메이션에 사용되는 용어들을 쉽게 알 수 있었다. IK: Inverse Kinematic 축을 활용해 bone을 움직임FK: 관절 인형 처럼 관절들을 조종해서 움직임을 구현출처: 언리얼 엔진5 스파르타 클래스 - 심화편, 섹션 8. UE5 리타게팅  리타게팅! 애니메이션을 다른 캐릭터에 복사를 하는 것이다. 당연히 그대로 사용하면 bone의 사용방식이 다를테니 망가진다. 동기화를 해주기 위해서 사용하게된다. 1. 먼저 리타겟팅을 위해 bone 체인을 설정해준다.출처: 언리얼 엔진5 스파르타 클래스 - 심화편, 섹션 8. UE5 리타게팅2. 리타겟팅 에셋에서 Source IK Rig와 Target Ik Rig를 비교하면서 오차들을 수정하며 동기화 시킨다.출처: 언리얼 엔진5 스파르타 클래스 - 심화편, 섹션 8. UE5 리타게팅 3. 리타겟한 결과를 볼 수 있다.https://youtu.be/b9l-7svKbP4출처: 언리얼 엔진5 스파르타 클래스 - 심화편, 섹션 8. UE5 리타게팅 이 방식들을 강의를 들으면서 따라하면 쉽게 제작이 가능하다.중요한 사실은 이 강의를 기반으로 자신의 애니메이션을 제작하는데 활용 할 수 있다. 물론, 강의를 따라해도 안되는 경우들이 생긴다. 나도 물론 생겨서 당황스러웠지만, 커뮤니티 게시판으로 해결을 하였다.언리얼 엔진5 스파르타 클래스 - 심화편 커뮤니티 게시판여기 게시판을 활용해서 선생님께 직접 질문을 하고 답변을 받을 수 있으니, 걱정 안해도 될 것이다. 후기나는 이번 찍먹클럽을 통해서 애니메이션에 대한 두려움이 사라지게 되었다. 배운 것들을 기반으로 나의 프로젝트에서 애니메이션을  활용할 수 있음을 확인하여 나에게 만족스러운 강의가 되었다. 이 강의를 자신이 들어도 괜찮을까 고민 하는 분들!난이도가 매우 쉽게 구성되어 있고 커리큘럼이 단계적으로 잘 구성되어 있다. 선생님과 함께 따라서 제작한다면 무리가 없을 것이다.언리얼 엔진5 에디터도 무려 한국어로 되어 있어, 영어가 어려워 접근하기 쉽지 않은 분들도 할 수 있는 쉬운 접근 중 하나가 될 것이다. 모두 스파르타 클래스 - 심화편을 듣고 언리얼 엔진5를 마스터 할 수 있도록 노력하자! 화이팅!

게임 프로그래밍인프런인프런강의후기게임개발게임개발강의인강후기강의후기게임개발자인프런강의

sql - section 1

관계형 DBOLTP (Online Transaction Processing): 트랜잭션을 하기위한 데이터베이스특징보류, 중간 상태가 없어서 데이터의 무결성을 유지할 수 있다.데이터 추가, 변경이 많다.쿼리 속도가 느리다.트랜잭션: 데이터베이스의 상태를 변화시키기 위해 수행되는 작업의 단위관련 DBMSoracle데이터 베이스 시장 1위높은 안정성과 유지보수 보장비싼 가격mysql오픈소스데이터 베이스 시장 2위postgreSQL오픈소스mysql보다 sql 표준을 잘 지원하며, 쿼리가 복잡해질 수록 성능이 더 잘 나옴mssql대규모 엔터프라이즈 수준의 시스템에 적합주로 윈도우 환경에 사용default isolation level이 read committed데이터를 읽을 때 공유잠금이 유지 -> WITH(NOLOCK)을 통해 공유잠금없이 데이터 조회OLAP(Online Analytical Processing): 데이터 웨어하우스를 이용해, 분석질의를 처리 목적으로 만들어진 데이터베이스쿼리 속도가 빠른 편데이터 웨어하우스: 분석가능한 정보의 중앙 라포지토리관련 DBMS빅쿼리구글 클라우드의 OLAP + data warehouse 사용컴퓨팅 레이어와 스토리지 레이어 분리각 레이어가 다른 레이어에 영향을 안 미침비관계형 DB (NOSQL)특징key - value 형식을 지원PK,FK JOIN을 지원하지 않음스키마에 대한 정의가 없음장점대용량 데이터 처리에 유리관계형 데이터베이스보다 읽기, 쓰기 속도가 빠름데이터 모델링에 유리분산처리에 유리데이터의 일관성을 보장하지 않아도 되고, join 연산이 필요없을 때 사용하면 유리관련 DBMS몽고DBRedis  

데이터베이스

코딩웍스(Coding Works)

[Tailwind CSS] CLI설치 VS Code에서 npm 에러 환경 변수 설정

[Tailwind CSS로 개발자가 만드는 멋진 UI 스타일링] 강의 중 [섹션 3. Tailwind CSS CLI 환경 구축]에서 [Tailwind CSS에서 CLI 환경 구축(ft. Node.js)] 영상 참고자료입니다.비주얼스튜디오코드 커멘트 창에서 npm init을 실행하면 'npm'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 라는 오류 메세지가 나올 수 있습니다. 이건 비주얼스튜디오코드에서 발생하는 오류인데 npm의 환경 변수를 설정해주면 해결되니 오류가 나면 아래처럼 해주시면 됩니다.1) 윈도우 검색창 또는 제어판에서 환경 변수를 검색하고 시스템 환경 변수 편집 클릭※ [환경변수]라고 붙여서 검색하지 마시고 [환경 변수]라고 띄어쓰기로 검색해야 제대로 나옵니다.2) 시스템 속성 → 고급 → [환경 변수] 클릭3) 시스템 변수 항목에서 Path를 찾아 클릭 후 편집 클릭4) 새로 만들기 → C:\Program Files\nodejs\ 입력 → 확인 클릭5) VS Code 재실행 후 커멘트 창에서 npm init 다시 실행아래 화면처럼 node.js가 정상적으로 설치되기 시작하며 오케이!![Tailwind CSS로 개발자가 만드는 멋진 UI 스타일링]✅ 강의소개 및 무료강의 보러가기 : https://inf.run/pjqKk

웹 퍼블리싱tailwindcli환경설정

Dream

[ 인프런 워밍업 클럽 Study FE 0기 ] Week 3 발자국

발자국3주 동안 진행된 스터디 클럽이 마무리되었습니다. 이번 스터디에서는 Next와 타입스크립트에 대해서 기초를 다지는 한 주를 보냈습니다. 이제 인프런 워밍업 클럽 스터디의 마지막 발자국을 남깁니다!요약Section 06-07. TDD 기본 및 간단한 앱 생성 및 배포대부분이 실습 위주였기에 코드가 궁금하다면 강의를 보자. 필요한 이론 개념만 요약하겠다.[ TDD(Test Driven Development) 란? ]TDD는 Test Driven Development의 약자로 테스트 주도 개발이라는 의미를 가지고 있다. 강의에서는 다음과 같이 설명한다.“실제 코드를 작성하기 전에 테스트 코드를 먼저 작성하는 것”테스트 코드를 작성한 후 그 테스트 코드를 Pass 할 수 있는 실제 코드를 작성한다.원하고자 하는 기능의 테스트 코드 작성 ⇒ 테스트 실행 FAIL ⇒ 테스트 코드에 맞는 실제 코드 작성 ⇒ 테스트 실행 PASSTDD는 테스트 코드를 작성한 뒤에 실제 코드를 작성한다. 단, 설계 단계에서 프로그래밍의 목적, 테스트 케이스를 작성해야 한다.요구 사항 접수요구 사항 분석 및 설계 ⇒ 목적 및 테스트 케이스 결정테스트 코드 작성FAIL (오류, 수정)이 난 코드를 테스트 케이스에 추가 후 이를 바탕으로 재 설계테스트가 통과 (PASS)된 코드만 개발 단계에서 실제 코드로 작성⇒ 반복적으로 코드의 테스트를 진행함으로서 오류 개발을 낮추고 소스 코드를 깔끔히 관리하는 것. 따라서 다음과 같은 장점이 있다.디버깅 시간 단축재 설계 시간 단축오류 발생 확률 저하추가 구현 용이테스트 기간 단축이렇게 보면 엄청나게 좋아 보이지만 모든 개발자들이 TDD 방식을 사용하지는 않는다. 아래 예시에서 첫 번째가 큰 듯 하다.익숙한 기존 방식을 버리지 못함생산성 저하 [ React Testing Library ] React Testing Library는 사용자가 컴포넌트를 사용하는 것처럼 테스팅하는 React의 테스트 라이브러리이다.React Testing Library는 React 구성 요소 작업을 위한 API를 추가하여 DOM Testing Library 위에 구축된다.DOM Testing Library란 DOM 노드를 테스트하기 위한 매우 가벼운 솔루션이다.Create React App으로 생성된 프로젝트는 React Testing Library를 지원하기 때문에 따로 설치할 필요가 없다.행위 주도 테스트(Behavior Driven Test)이다.EX) 사용자가 어떠한 행위로 이벤트가 발생되었을 때 프로그램이 어떻게 반응하는지~  [ Jest ]Jest는 현: Meta / 전: Facebook에서 만든 테스팅 프레임워크이다. 최소한의 설정으로 동작하며 Test case를 만들어서 어플리케이션 코드가 잘 돌아가는지 확인해준다Jest는 테스트 실행 환경을 제공한다.DOM이 없다(참고로 DOM 없이 React 테스트 X) ⇒ 따라서 React Testing Library와 함께 사Jest를 사용하려면 설치를 해야한다.라이브러리 설치: npm install jest —save-devTest 스크립트 변경: “test” : “jest” OR “jest —watch All”테스트를 작성할 폴더 및 파일 기본 구조 생성 Section 08. Next.js와 TypeScript[ NextJS ]Next.js란 SSR(Server-Side-Rendering)을 쉽게 구현할 수 있게 도와 주는 React 프레임워크이다.일반적으로 리액트는 SPA(Single-Page Application)를 이용해서 CSR(Client-Side-Rendering)을 하기 때문에 좋은 점도 많지만, 검색엔진 최적화(SEO)에 관한 단점이 있다. [ CSR과 SSR ]💡 사전 지식: 검색 엔진에 도움을 주는 것은 HTML의 시맨틱 태그들이다! 1. CSR (Client-Side-Rendering)React에서는 CSR 방식 기본적으로 사용CSR 초기 접속 시 렌더링 동작 방식:클라이언트가 서버에 페이지 내놔 요청서버는 빈 페이지를 클라이언트에게 전달 ⇒ 실제로 개발자 모드로 가면 HTML에 뼈대만 있는 것을 볼 수 있다.클라이언트는 JS 파일을 보고 렌더링 ⇒ 즉, 빈 페이지를 클라이언트에서 처리한다. ⇒ 서버에 대한 의존도가 별로 없다.결론: 검색 엔진에 영향을 주는 HTML이 빈 페이지니까 검색 엔진에 노출될 일이 거의 없다. [ SSR ]Next.js에서 사용하는 방식React에서도 이 방식을 사용할 수 있으나 구현이 어렵기 때문에 React로 굳이?라는 느낌.SSR초기 접속 시 렌더링 동작 방식:클라이언트가 서버에 페이지 내놔 요청서버는 미리 구성된 정적 파일을 클라이언트에게 전달. (정적 파일: HTML, CSS …)클라이언트는 전달 받은 스크립트를 실행하여 화면을 브라우저에 그림결론: 빈 페이지가 아닌 화면을 보여주기 때문에 SEO에 장점이 있다.Next.js 설치 방법 (필자가 npx만 사용해서 npx만 기록)npx create-next-app@latestnpx create-next-app@latest —typescript  [ create-next-app 기본 구조 ]Pages이 폴더 안에 페이지들을 생성만약 about이라는 페이지를 만드려면 pages폴더 안에 about.tsx를 생성해주면 된다.index.tsx가 처음 “/” 페이지로 지정된다._app.tsx는 공통되는 레이아웃을 작성한다.모든 페이지에 공통으로 들어가는 걸 넣어주려면 여기에 넣어주면 된다.url을 통해 특정 페이지에 진입하기 전 통과하는 인터셉터 페이지다. public이미지 같은 정적(static) 에셋들을 보관         styles(강의에서는 있는데 내 폴더에는 없다..) 스타일링을 처리해주는 폴더 모듈(module) css는 컴포넌트 종속적으로 스타일링하기 위한 것이며, 확장자 앞에 module을 붙여줘야한다. next.config.js Next.js는 웹 팩을 기본 번들러로 사용한다. 그래서 웹 팩에 관한 설정들을 이 파일에서 해줄 수 있다.  [ Pre-rendering ]서버에서 각 페이지의 HTML 파일을 미리 생성하는 것으로, 모든 페이지가 pre-render된다. 이렇게 하기 때문에 SEO 검색 엔진 최적화가 좋아진다.            [ Data Fetching ]Next.js에서는 데이터를 여러 방법으로 가져온다. 상황에 맞는 것을 알아서 잘 사용하자.보통 React에서는 데이터를 가져올 때 useEffect 안에서 처리한다. 하지만 Next.js에서는 다른 방법을 사용해서 가져온다. (물론 Next에서도 useEffect를 이용해 가져올 수도 있다.)getStaticProps: Static Generation으로 빌드할 때 데이터를 불러온다. (미리 한 번에 만들어 줌)getStaticPaths: Static Generation으로 데이터에 기반하여 pre-render시 특정한 동적 라우팅 구현getServerSideProps: Server Side Renderin으로 요청이 있을 때 데이터를 불러온다. [ TypeScript ]타입스크립트는 자바스크립트에 타입을 부여한 언어이다. 즉, 자바스크립트의 확장된 언어이다. 타입 스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한 번 변환해주어야 한다. 이 변환 과정을 컴파일(compile)이라고 한다.타입스크립트의 특징을 정리해보자.자바스크립트의 타입 확장 버전즉, 동적 언어: 자바스크립트 / 정적 언어: 타입스크립트이다.개발 환경에서 에러를 잡는 걸 도와준다.type annotations을 사용해서 코드를 분석할 수 있다.오직 개발 환경에서만 활성화 된다.타입 스크립트와 성능 향상은 관계없다.즉, 타입스크립트가 막 자바스크립트보다 성능이 뛰어나다!!!! 가 아니다. 자바스크립트는 굉장히 자유도가 높다. 하지만 이는 규모 큰 프로젝트를 진행한다면 오히려 독이 될 수 있다. (지옥의 타입 에러가 시작된다고 한다.) 뭐 이와 같은 이유로 타입스크립트 사용을 권장을 한다. 물론 필수 X타입스크립트는 자바스크립트를 단순화하여 더 쉽게 읽고 디버그할 수 있도록 한다.코드를 더 쉽게 읽고 이해할 수 있다.오픈 소스이다.정적 검사와 같은 자바스크립트 IDE 및 사례를 위한 매우 생산적이 개발 도구를 제공한다.자바스크립트보다 더 개선된 코드를 작성할 수 있다.ES6의 모든 이점과 더 많은 생산성을 제공한다.고통스러운 버그에서 구출해준다. [ TypeScript Type ]타입이란 컴파일러에게 "야! 나 이 타입 쓸거다?"라고 선전포고하는 것이다. 즉, 내가 어떠한 value를 사용할 것인지 추론이 가능하도록 표기하는 것. 이는 컴파일러에게도 좋겠지만 코드를 읽는 개발자도 편하다.Primitive/Object types의 경우 다음과 같다. (이건 너무 기초에 기초니까 정리 PASS)Primitive: string, number, boolean, null, undefined, symbol Object : function, array, classes, object 타입 스크립트에서는 기본적인 타입 및 특별한 타입을 제공한다.Any잘 알지 못하는 타입의 경우 사용서드 파티 데이터 로딩 시.. 도대체 뭔 데이터가 올지 모를 때 사용하면 된다.\물론 이런 "뭔 타입 올지 머르는데...?"와 같은 확실치 않은 것은 최대한 안 쓰는 게 좋다.Union또는 이다. OR이니까 | 사용한다.let code: string | number; 이렇게 하면 code의 값은 string 또는 number라는 뜻.Tuple배열에 타입 지정하는 버전~let ex: [number, string] = [1, "hello"];Enumenumerated type을 의미하며, 값들의 집합을 명시하고 이를 사용하도록 만든다.별도의 값을 설정하지 않으면 기본적으로 0 스타트이다.Void반환될 때 반환되는 데이터가 없을 경우 쓴다.참고로 함수들에서 return에 반환할 데이터 명시 안 해도 기본적으로 undefined가 반환 된다.이렇게 반환되는 값이 없어서 undefined가 반환되는 경우 void 쓰면 된다.Never아에 완전히 영원히 값이 반환할 일이 없는 경우.. 기본적으로 함수가 undefined를 반환하는데 그 조차도 하지 않는 경우에 쓴다.오류 리턴이나 영원히 끝나지 않을 무한 루프에서 쓴다.  [ annotation, type, interface ]annotation: 개발자가 타입을 타입스크립트에게 말해주는법const str: string = "Hello, World!"; const num: number = 1;type: 이 키워드를 사용해서 내가 타입 정의가 가능하다.type Person = { name: string, age: number }interface: type과 비슷하게 정의 가능~interface Person = { name: string, age: number }다만 interface는 부가적인 기능이 많다고 한다. (나중에 찾아봐야겠다.) [ Type assertion ]타입스크립트에서는 시스템이 추론 및 분석한 타입 내용을 우리가 원하는 대로 얼마든지 바꿀 수 있다. 이때 "타입 표명(type assertion)"이라 불리는 메커니즘이 사용된다.var foo = {}; foo.bar = 123; // 오류: 속성 bar가 존재하지 않음. foo.bas = "hello"; // 오류: 속성 bas가 존재하지 않음.컴파일러는 foo type이 빈 {}로 인식한다. 따라서 존재하지 않은 bar와 bas에 접근하려고 하는 것으로 보이기 때문에 당연히 오류를 낸다. 하지만 type assertion을 사용하면 이런 상황을 피할 수 있다.interface Foo { bar: number; bas: string; } var foo = {} as Foo; foo.bar = 123; foo.bas = "hello";저기 서 사용된 as가 type assertion이다.완전 간단하게 "컴파일러야. { } (왼쪽에 명시된 얘)는 Foo(오른쪽)와 같으니까 의심하지 말고 Foo(오른) 처럼 사용해라"라는 뜻이다. [ Next.js 13 ]12에서 13으로 넘어가면서 Next.js가 많이 바뀌었다고 한다! 위에서 설명한 것은 12니까 이 강의가 굉장히 중요해 보였다. (현재 14.1까지 나와따)다음 추가된 사항이고... 대부분 실습 위주 강의라서 간단하게 정리만 했다.App Routerpage 파일이 해당 경로의 페이지 컴포넌트 처리된다.Layout기본 레이아웃 정의 가능.공통된 레이아웃을 적도 children을 감싸는 형식으로 하면 된다.Server/Client ComponentNext에서는 기본이 Server Component이다.State, Hook, 이벤트 처리 및 브라우저 api 사용 => 이 경우 Client Component를 사용해야한다.코드 작성 전 맨 첫 줄에 "use client" 명시해주면 된다. Section 09. 리액트 Version 18새로 추가된 내용Automatic batchingSuspense on the server Transition등등...  [ Automatic batching ]배칭은 업데이트 대상이 되는 상태 값들을 하나의 그룹으로 묶어서 한 번의 리렌더링에 업데이트가 모두 진행될 수 있게 해주는 것이다. 하나의 함수 내부에서 여러 개의 state를 조작했을 경우 리렌더링이 그 state의 수 만큼 실행되는 것이 아니라 딱 1번만 최종 실행된다는 것이다. 그리고 제목에서 보이듯이 자동처리다. 개발자가 딱히 배칭을 위해 설정할 것은 없다.더 나은 성능을 위한 더 적은 리렌더링 가능이벤트 핸들러 밖에서도 작동필요할 때 제외 가능   [ Suspense on the server ]서버 사이드 렌더링서버에서 전체 앱에 대한 데이터 가져옴서버에서 전체 앱을 HTML로 렌더링하고 응답으로 보냄클라이언트에서 전체 앱에 대한 자바스크립트 코드 로드클라이언트에서 자바스크립트 논리를 전체 앱에 대해 서버 생성 HTML에 연결(hydration) [ Transition ]리액트에서 어떠한 업데이트가 Urgent하며 어떠한 것이 그러하지 않은지 알려준다. Section 10. 리덕스리덕스는 자바스크립트의 애플리케이션위한 상태 관리 라이브러리이다.CreateStore()앱의 전체 상태 트리를 보유하는 Redux 저장소를 만든다.앱에는 하나의 스토어만 있어야 한다.getState()애플리케이션의 현재 상태 트리를 반환한다.subscribe(listener)listener 함수 등록Action이 dispatch될 때마다 리스너 함수가 호출된다.그런 다음 getState()를 호출하여 콜백 내부의 현재 상태 트리를 읽을 수 있다. [ Provider ]<Provider> 구성 요소는 Redux Stroe 저장도에 액세스해야 하는 모든 중첩 구성 요소에서 Redux Store 저장소를 사용할 수 있도록 한다.React Redux 앱의 모든 Reqact 구성 요소는 저장소에 연결할 수 있으므로 대부분의 응용 프로그램은 전체 앱의 구성 요소 트리가 내부에 있는 최상위 수준에서 <Provider>를 렌더링한다.그런 다음 Hooks 및 연결 API는 React의 컨텍스트 메커니즘을 통해 제공도니 저장소 인스턴스에 액세스할 수 있다. [ useSelector, useDispatch ]리덕스 HOOKuseSelector스토어의 값을 가져올 수 있다.useDispatchstore에 있는 dispatch 함수에 접근. [ 리덕스 미들웨어 ]Redux 미들웨어는 액션을 전달하고(dispatch) 리듀서에 도달하는 순간 사이에 사전에 지정된 작업을 실행할 수 있게 해주는 중간자이다.💡 로깅, 충돌 보고, 비동기 API 통신, 라우팅 등을 위해 미들웨어를 사용한다!미들웨어 생성에 관한 것은 강의에서 실습으로 소개하니 궁금하면 강의를 보자. [ 커링 ]자바스크립트 고급 기술이다. (다른 언어에도 존재.)f(a, b, c)처럼 단일 호출로 처리하는 함수를 f(a)(b)(c)와 같이 각각의 인수가 호출 가능한 프로세스로 호출된 후 병합될 수 있게 변환하는 것이다. [ Thunk ]리덕스를 사용하는 앱에서 비동기 작업을 할 때 많이 사용하는 방법이다. "thunk"라는 단어는 "일부 지연된 작업을 수행하는 코드 조각"을 의미하는 프로그래밍 용어이다. Redux 스토어의 dispatch 및 getState 메서드와 상호 작용할 수 있는 내부 로직이 있는 함수를 작성할 수 있다. [ Redux Toolkit ]Redux 툴킷은 Redux 로직을 작성하기 위한 공식 권장 접근 방식이다.Redux 코어를 둘러싸고 있으며 Redux 앱을 빌드하는 데 필수적이라고 생각하는 패키지와 기능이 포함되어 있다.Redux 툴킷은 Redux 작업을 단순화하고 일반적인 실수를 방지하고 Redux 애플리케이션을 더 쉽게 작성할 수 있다.Redux 툴킷에는 Redux Thunk가 기본으로 들어가있다. 사용 순서:configureStore을 사용하여 Redux Store 만들기React 컴포넌트에 Redux Stroe 제공 순서주위에 React-Redux <Provider>로 컴포넌트를 감싸준다.Redux Stroe를 <Provider store={store}>로 전달한다.creatSlice로 Redux 슬라이스 리듀서 생성React 컴포넌트에서 React-Redux useSelector/useDispatch Hook 사용미션과제 총 합본 https://www.inflearn.com/blogs/7021React 미션 02. 디즈니+ 클론과제 중에 가장 어려웠던 부분은 구글 연동이었습니다. 처음으로 구글 연동을 시도하면서 계속해서 오류가 발생했고, 한 번은 무한 로그인에 걸려 프로그램이 멈춘 적도 있었습니다. 이때는 정말 심장이 철렁거렸습니다. 그러나 마음을 비우고 처음부터 차근차근 시도하니 로그인 연동에 성공했습니다.또 다른 어려움은 마우스를 대면 비디오가 나오는 부분이었습니다. 이미지와 비디오를 겹쳐놓고 마우스가 hover될 때 비디오만 보여주는 부분인데, CSS의 position 이해가 부족한 것인지 배치가 제대로 되지 않아 계속 시도해야 했습니다. position에 대한 부분은 추가적인 학습이 필요하다고 느꼈습니다.React 미션 03. 포켓몬 도감포켓몬 과제는 난이도가 상이었고 디즈니와 다르게 참고할 코드조차 없는 어려운 과제였습니다. 이것은 정말 자기 스스로 머리를 쪼개가며 해결 해야하는 과제로 보였기에 가장 마지막에 해결을 하겠다 생각했습니다. 포켓몬 도감를 시작할 때, 이제야 웹을 공부를 하는 제가 이 과제를 과연 완성을 할 수 있을까? 했는데, 걱정과 다르게 디즈니보다 훨씬 쉬었습니다...! 코드를 작성하면서 렌더링이 안 일어나는 이상한 상황을 겪었지만(map key 값이 고유하지 못해서 발생한 문제) 금방 해결하고 완성을 했습니다!! 그 밖에는 문제된 일은 없습니다. 제가 스스로 작성한 코드가 작동하는 것을 보니 정말 뿌듯하네요. 그리고 예시와 다르게 UI를 상당히 많이 바꿨습니다...! 미션을 하면서 가장 즐거웠던 과제였습니다👍 React 미션 04. Next, TypeScript을 이용한 퀴즈 앱이번 프로젝트에서는 라우팅을 처리하기 위해 사용한 useRouter에서 문제가 발생했습니다. 문제를 해결하려고 찾아보니, next/router 대신에 next/navigation을 사용해야 한다는 것을 알게 되었습니다. 그것을 마지막으로 문제 없이 잘 과제를 끝 맞추었습니다.회고워밍업 스터디를 처음 시작할 때에는 HTML/CSS, JS의 기초만 약간 알고 있었고, 부트캠프나 프로젝트 경험이 없었습니다. 또한, 외적인 사정과 긴 강의 시간, 다양한 미션으로 인해 시간적으로도 부족함을 느꼈습니다. 하지만 저 자신의 발전을 위해서 새벽 3~4시까지 시간을 투자해나가며 수업과 미션을 해결해나갔습니다.또한, 저는 코틀린을 사용한 경험이 있는데, 타입 스크립트가 코틀린과 유사하다는 느낌을 받아서 타입 관련 공부가 수월했습니다. 하지만 타입스크립트의 심화 부분과 Next.js, 리덕스 등에 대해서는 추가적인 공부가 필요하다고 생각하고 있습니다.3주간의 스터디는 성장감을 느끼게 해주었습니다. 그렇기에 이미 끝났다는 사실이 아쉽기도 합니다. 이 소중한 경험을 제공해 준 인프런과 스터디를 이끌어주신 강사님에게 깊은 감사의 인사를 전합니다.앞으로도 계속해서 성장하고 발전하기 위해 노력할 것이며, 새로운 도전들을 마주하면서 더욱 성장해 나가고 싶습니다. 감사합니다! 🌱

프론트엔드워밍업클럽FE

라이프웨어

전 세계 몸값 1위 오타니를 만든 비결, '좋은 루틴 만들기와 지속하기'

10년간 연봉 9천200억원,전 세계 스포츠에서 최고의 몸값을 자랑한 '오타니'와 다저스의 계약액입니다.오타니는 이미 살아 있는 전설로 불리고 있습니다.타자와 투수 어느 하나의 최고 기량을 보여주는 것도 어려운데, 오타니는 경기에서 양 포지션 모두 최고의 모습을 보여주기 때문입니다.  오타니가 이렇게 성공했던 비결은 무엇일까요?https://www.youtube.com/watch?v=xAn5z9_AfZgSource일본 야구계에 몇 차례 책을 썼던 로버트 위팅은 '오타니는 오직 역사상 최고의 야구 선수가 되는 것에만 관심을 두는, 전사로 변신한 수도승과 같다. 목표를 위해 필요한 활동들에만 정진한다'라는 평을 남겼습니다.오타니의 이 남다른 모습은 고1로 거슬러 올라갑니다. 당시 오타니는 '8구단 드레프트 1순위'라는 목표와 이 목표를 달성하기 위한 64가지 루틴을 수립했습니다. 그리고 현재까지 실천을 이어오고 있습니다.Source: 스포츠닛폰, 오타니 쇼헤이의 만다라트 목표  오타니의 비결은 세가지로 압축됩니다.1. 장기 목표를 수립합니다. 2. 목표에 효과적인 루틴을 수립합니다.3. 꾸준히 실천합니다. '장기 목표를 수립하는 방법과 워크북'에 대해선 '[기획물] 아직 꿈과 목표를 설정 못하셨나요? 이 글 하나로 끝내세요.'를 참고해 주세요. 이번 편에선 두번째 루틴 수립법과 세번째 루틴 실천법을 다룹니다.  효과적인 루틴 수립 방법첫째, 장기 목표에 효과적인 루틴을 수립합니다.장기 목표에 부합한 루틴을 수립하는 이유는 첫번째로 꾸준한 실천을 보장하는 동기부여를 얻을 수 있기 때문입니다. 두번째로 목표와 연관된 루틴을 떠올리기 쉽고, 장기 목표가 루틴의 우선순위를 판단할 기준이 되어주기 때문입니다.Source: LifeWare 장기 목표에 부합한 루틴을 수립하는 방법으로는 '만다라트 기법'을 활용하거나 혹은 '장기목표, 비전보드, 자기암시문'의 항목을 하나씩 살피면서 연관된 루틴을 뽑고 이후 루틴들의 우선순위를 설정할 수 있습니다.(참고: 만다라트 기법의 정의와 실천 방법, 쉽게 말해 정중앙에 최종 목표(인생 한문장)을 두고 마인드맵 그리듯이 연관 습관들을 뽑아내는 아이디어 도출방식입니다.) 둘째, 벤치마킹을 활용합니다.이는 비슷한 관심사를 가진 사람들의 루틴을 참고하는 방법입니다. '타이탄의 도구들' 처럼 위인들의 루틴을 모아둔 책을 참고하는 방법도 있습니다. 혹은 '챌린저스'과 같은 루틴앱에서 내게 맞는 루틴을 발견하는 방법도 있습니다.루틴 템플릿(링크)에는 루틴 도서와 앱들을 참고하여 가능한 모든 형태의 루틴들의 리스트를 뽑고 분류해 두었습니다. 필요한 루틴들은 여기서 발견하여 수립할 수도 있습니다.Source: LifeWare 라이프 시스템 - 루틴 시스템 - 루틴 아이템 모음   꾸준한 루틴 실천 비법 3단계사실 루틴을 세워도 작심삼일하기 일쑤이지 않으셨나요? 그렇다면 '루틴 실천 방법'을 제대로 적용하고 있지 않았을 가능성이 큽니다. 이 문제는 루틴이 실행되는 단계(실행 타이밍 인지> 실행 행동 발상 > 실행 동기 판단)를 구분하여 하나씩 방법을 찾을 수 있습니다.Source: LifeWare 라이프시스템 - 루틴 시스템 - 템플릿첫번째 단계는 루틴의 '수행 타이밍'을 인지하는 것입니다.Source: LifeWare, 조건 -> 행동 관계 루틴은 '조건'과 '행동'의 쌍으로 구성되어 있습니다. 따라서 루틴 실패의 첫번째 이유는 '조건'이 명확하지 않았거나 혹은 이를 인지하지 못했을 때 발생합니다.'조건'은 크게 '시간 조건'과 '상황 조건'으로 구분합니다. '우리가 매일 x시 ~를 하겠어'라는 것은 시점과 행동을 연결시킨 '시간 조건'의 사례에 해당합니다. 반면, '나는 사람들과 대화를 하는 상황에선 ~를 하겠어'라는 것은 내가 처한 상황과 행동이 연결된 '상황 조건'의 사례에 해당합니다. Source: LifeWare 시간조건과 상황조건 예시 '시간 조건'과 '상황 조건'별로 조건을 명시하게 된다면, 해당 조건이 충족했을 때 더 잘 떠오르는 것을 느낄 수 있습니다. 또 다른 방법으로는 '알림' 등을 적극적으로 활용해 조건을 인식하는데 도움을 받을 수 있습니다. 두번째 단계는 '수행할 행동'을 인지하는 것입니다.Source: LifeWare 루틴 시스템 - 수행할 행동 인지 상승 전략루틴 실패가 발생하는 두번째 이유는 '무엇을 실천'할 것인지 잊어버리기 때문입니다. 이 경우 역시 심리적인 방법을 먼저 적용해 볼 수 있습니다. 복잡한 루틴은 일상에서 떠올리기 어렵습니다. 이때는 기억하기 용이한 형태로 재구성하는 방법을 적용할 수 있습니다. 두번째로는 기억에 대한 부담을 줄이도록 '습관 체크앱' 등의 도움을 받을 수 있습니다. 외부 툴을 사용하면 '루틴 행동'을 떠올리는 속도는 느려지나, 정확도는 향상되는 장점을 가집니다. 세번째 단계는 '동기'를 가지고 실행에 옮기는 것입니다.루틴 실패가 발생하는 세번째 이유는 '동기'가 상대적으로 부족하기 때문입니다. 즉, 루틴 수행시 '기대되는 자극'이 수행을 유발하지 못하거나 다른 것을 할 때의 '기대 자극'보다 약하기 때문입니다. 기대 자극이란 '행동을 통해 얻을 보상 및 처벌의 강도'와 '실제로 행동의 성공 가능성'이 고려된 '인지적인 동기부여의 강도'를 가리킵니다. 이를 활용해 다음 두가지 접근법을 사용할 수 있습니다.Soure: LifeWare 루틴 시스템 - 기대자극 조절 전략첫째, 루틴 수행 시 '기대 자극을 높이는 전략'입니다. 대표적으로 '장기 목표와 연결시키거나 혹은 미실시에 대한 손실을 높이는 방법'을 사용합니다.'미실시에 대한 손실을 높이는 방법'을 예로 들어 보면 '벌금을 매기거나', '그룹 수행을 통해 실시하지 않는 경우, 사회적 평판 하락'에 대한 리스크를 스스로 부과시키는 방법을 사용할 수 있습니다. 둘째, 루틴을 수행하지 않고 '다른 것을 하는 경우의 기대 자극을 낮추는 전략'입니다. 대표적으로 '최종 보상에 대한 접근성을 떨어뜨리는 방법'을 사용합니다.예를 들어, 릴스 시청 및 코인 확인 등 스마트폰 중독 증상이 있다고 합시다. 이땐 스마트폰이 잠겨서 열리지 않게하거나 물리적으로 만지기 어려운 곳에 둠으로써 스마트폰의 습관적인 사용을 낮출 수 있습니다. 즉 우리는 위에서 언급한 세가지 전략인 '수행 타이밍 인지 강화', '수행할 행동 인지 강화', '상대적인 동기 강화'를 통해 실천 가능성을 높일 수 있게 됩니다.  [정리] 단계별로 루틴 설계 방법아래에는 위에서 언급한 내용을 순서대로 따라해볼 수 있도록 정리하였습니다.1. 루틴 원페이지를 마련합니다.위 원리들이 적용된 템플릿을 활용해, 루틴을 제작하시려면 아래 다운받기를 클릭해 주세요.[ 템플릿 다운받기 >> ]  (~3/17까지 무료 제공) 2. 수행할 루틴을 기록합니다.목표를 기준으로 루틴을 뽑거나 혹은 벤치마킹 등을 활용할 수 있습니다. 그 외에도 '루틴 도서 및 앱'에 언급되었던 '루틴 전체 리스트'를 템플릿에 포함해 두었으니 참고해 주세요. 3. 루틴의 조건을 세팅합니다.루틴이 실행되는 조건을 명시합니다. '시간 조건'과 '상황 조건' 중 어디에 해당하는지 생각하고, 구체적인 조건을 명시합니다. (아래 사진에서 첫번째 칼럼)Source: Lifeware - Daily Routine 예시 4. 루틴 자체가 잘 인지되도록 만듭니다.가능하면 외부 도움을 받지 않아도 루틴이 잘 기억나도록 단순화 시키는 것이 좋습니다. 그럼에도 루틴의 정확도를 높이기 위해선 루틴 체크리스트 등의 보조 도구를 활용하는 것도 좋습니다. (위 예시 사진에서 두번째 칼럼) 5. 루틴의 기대 자극을 조절합니다.루틴이 충분히 기대자극을 불러일으키는지 검토합니다. 혹은 루틴을 방해하는 행동의 기대자극이 더 큰지 검토합니다. 보상/처벌(손실) 장치로 루틴의 기대자극을 높입니다. 그리고 방해 행동의 접근성을 떨어뜨려 기대자극을 낮춥니다. (위 예시 사진에서 세번째 칼럼)  FAQ1. 목표 및 루틴을 수립한 다음에는 어떻게 해야 할까요?다음으로는 '주기적인 피드백'을 통해 루틴을 지속적으로 업그레이드해야 합니다. 그리고 목표 중 루틴만으로 충족하기 어려운 체계적인 접근이 필요한 문제들은 프로젝트성 작업을 통해 해결합니다.1. 주기적으로 피드백을 수행합니다: Daily, Weekly 피드백을 통해 잘 지켜지지 않는 루틴들은 빠르게 확인하고 문제를 해결할 수 있습니다. 피드백한 결과를 다시 루틴에 반영하여 바로잡습니다.2. 문제해결을 통해 목표 달성을 촉진합니다: 목표에 따라서는 단계별로 체계적인 문제 해결이 필요한 경우가 많습니다. 이는 체계적인 문제 해결 방법('핵심 결과물' - '프로젝트' - '테스크')을 통해 효과적으로 수행할 수 있습니다.각 부분에 대한 상세 내용들은 추후 라이프웨어 뉴스레터를 통해 받아보실 수 있습니다. 뉴스레터를 통해 지속 가능한 성공과 성장에 도움이 되는 글들을 보내드립니다.[라이프웨어 뉴스레터 구독하기>>] 2. 루틴 관리 템플릿을 혼자 채우려니 어려워요. 어떻게 하면 좋을까요?라이프웨어에서 진행하는 '라이프웨어 올인원(All-in-One)' 프로그램을 추천드립니다. 강의도 듣고 조별 활동을 통해 실천도 하면서 4주간 나만의 라이프시스템을 완성할 수 있습니다. 이 프로그램에는 '목표, 루틴 시스템' 외에도 '피드백 시스템, 문제 해결 시스템, 문서 관리 시스템' 등 '인생을 생산적으로 살아가기 위한 필수 시스템'들을 포함하고 있습니다.이 프로그램을 3월 18일부터 4주간 온라인으로 진행될 예정입니다. 현재 3일간 모집 중이며 다음 링크를 통해 확인하실 수 있습니다.‘라이프웨어 올인원’ 1기 참여 기회 잡기 (3/13~3/15)>>  오늘의 레터를 정리합니다.1. 루틴은 꿈과 목표를 기반으로 도출되어야 한다:  꿈과 목표를 기반으로 도출된 루틴은 실행 시 동기부여가 강하다는 장점도 있으며, 지향점이 같기에 루틴 간 시너지를 창출시킬 수 있습니다.2. 루틴 실천을 위해선 '루틴 조건', '루틴 행동', '루틴 동기'를 최적화 시켜야 한다: 각 단계들이 최적화 되어 있지 않다면 '작심삼일'은 불가피하게 발생합니다. 인지적인 측면에서 솔루션과 외부 솔루션 등을 종합적으로 활용해서 실천율을 높일 수 있습니다. 위 소개된 방법을 따라할 수 있는 템플릿을 활용해 보세요. [ 템플릿 다운받기 >> ]  (~3/17까지 무료 제공)  '나만의 라이프시스템'을 함께 만들어 보는 4주간의 라이프웨어 코호트 프로그램에 참여해 보세요. 현재 1기 신청을 받고 있어요. 라이프웨어 올인원 1기는 라이프시스템 하위 시스템을 하나씩 경험하면서 삶을 변화 시킬 수 있는 프로그램으로 기획했어요. 1주차 테스크, 피드백, 루틴 관리를 시작으로 핵심 결과물과 문제 해결(프로젝트) 관리 그리고 목표 관리 등을 모두 다룰 예정이에요.프로그램을 신청을 해주세요.‘라이프웨어 올인원’ 1기 참여 기회 잡기 (3/13~3/15)>> Q. 라이프웨어는 무엇을 하는 곳인가요?삶을 변화 시키려면 무엇이 필요할까라는 고민과 연구로 이 프로그램이 탄생했어요. 자기계발 서적은 여전히 불티나게 팔리고 있지만 우리 삶은 변화가 더딘 것 같아요. 라이프웨어는 해답을 '핵심 원리가 담긴 컨텐츠와 라이프시스템'에서 찾고 있어요. 핵심 원리를 이해하고 시스템을 하나씩 적용하다보면 삶이 조금씩 변화해 가는 것을 발견하실 수 있을거에요. 그리고 꿈만 꿔왔던 목표들에 더 빠르게 가까워질 수 있을거에요.라이프웨어는 매주 뉴스레터를 통해 토픽을 하나씩 전달 드리는 것과 더불어 4주간의 집중 코호트 프로그램을 통해 시스템을 내재화하고 커스터마이징 하는 경험을 제공해 드리고 있어요. Q. 라이프웨어 코호트는 누구를 위한 프로그램인가요?자기계발 서적, 동영상 소비 대비 실제 삶의 변화가 많지 않다고 느끼는 분여러 생산성 도구를 사용하느라 불편하고 통합된 시스템을 만들고 싶은 분라이프웨어에서 소개한 컨텐츠를 혼자 적용하기에 어려움이 있고 시간이 오래 걸리는 분 Q. 프로그램의 핵심 구성은 어떻게 되나요?🙆‍♂ 적용 실습: 라이프시스템의 하위 시스템을 이해하고 실제 내 삶에 적용해 봅니다. (목표 관리, 루틴 관리, 핵심 결과물 관리, 문제 해결 관리(프로젝트), 테스크와 피드백, 지식 관리)👯‍♂ 그룹 러닝: 주 1회 온라인 그룹 러닝을 통해 자신의 시스템을 소개하고 피드백을 받습니다.🏗 DIY 제작: 스스로 노션 대시보드를 수정하는 방법을 배우고 실습합니다.📖 케이스 스터디: 라이프시스템을 성공적으로 사용하고 있는 사람들의 시스템을 분석하고 벤치마킹 포인트를 발견합니다.  라이프웨어 올인원 1기 참여 기회 잡기 (~3/15)>> 

기획 · 전략 · PM루틴생산성습관목표실천