새로운 수업의 재미 덕분에 다시 개발자의 길을 의심하지 않게 됨.
React 수업
- 리액트의 특징과 역사
- 선언형을 주로 사용하며 필요에 따라 (접근성을 위한 처리 등) 명령형을 사용
- CDD(Component Driven Development): 함수와 같이 컴포넌트도 이름을 잘 짓고 재사용가능하며 오류를 잘 관리할 수 있어야 한다.
- 멀티플랫폼: React Native(모바일 앱)과 Electron(데스크탑 앱)
- 간단한 컴포넌트의 한-영 전환 렌더링 구현
- jQuery의 팩토리 함수를 사용, 한/영 콘텐츠와 이에 대한 메서드를 클래스로 만들어 모듈화
- 실습환경 설정
- ESlint와 prettier을 VSCode가 아닌 직접 package로 깔아보기
- package.json 구성과 설정
- scripts의 명령어들을 관리하는 법 (병렬 실행 npm-run-all 및 크로스플랫폼 cross-env)
"type":"module"로 하여 commonJS이 아닌 브라우저환경과 같이 ESM으로 세팅
- 환경변수 설정
- 코드스니펫 툴 사용하는 방법
- TDD(Test Driven Development)
- describe, test, expect 함수 구현
- Jest 라이브러리 사용
React 스터디
- Todo-List 만들기 최적화 (참고: TodoMVC for React)
React.memo로 컴포넌트를 감싸면, props가 변경되지 않는 경우 메모된 컴포넌트를 바로 반환- 기존 props와 현 props를 shallow compare
- 원시값을 받으면 상관없는데, 상위 콤포넌트에서 정의한 함수를 받는 경우는 함수의 참조값이 함수객체를 생성할 때마다 매번 달라지기 때문에 props 변경으로 인식하여 매번 콤포넌트를 다시 렌더링, 즉 memo의 의미가 없어진다.
- 이를 위해 함수 정의할 때 useCallback으로 함수를 감싸면 의존성 배열에 담긴 요소들이 변경되지 않는 이상은 메모된 함수의 참조값을 유지하게끔 처리된다.
- 여러 핸들러 내려보내기가 귀찮아서 handlers라는 이름의 객체로 한번에 보냈었는데 이제는 그러면 안되고 하나하나 prop을 통해 핸들러를 전달해야
블로그 포스팅 스터디
- 알아들은 것: 노션 웹클리핑, 알고리즘 시간복잡도 분석, VueJs에서 Typescript로 timer만들기
- 못 알아들은 것: Mybatis, Resilience4j 서킷브레이커
느낀 점
- 새로 시작된 수업에서 여러가지를 많이 알려주셔서 모르고 지나갈 뻔 했던 knowledge gap들이 다 해소되는 중
- React.memo와 useCallback으로 최적화하기 성공해서 너무 기쁘다.
- 블로그 포스팅 스터디에서는 여전히 사람 말을 못알아듣는 서당개를 담당하고 있지만 그래도 참여는 했다.
