시작하며
이번주에는 지난 Section에서 배웠던 React를 더 편리하게 사용할 수 있는 라이브러리인 Styled-Component, Redux와 UI 컨포넌트를 체계적이고 효율적으로 구축할 수 있는 Storybook을 사용하여 구현하는 여러 스프린트를 진행하였다. 이전에는 어떻게 웹페이지를 구현하는가에 집중했다면 이번주는 어떻게 해야 효율적이고 편하게 개발을 할 수 있을까에 초점을 맞추어 챕터가 진행되었다.
학습목표
React 컴포넌트 디자인
- ✅ 컴포넌트 기반 Bottom-up 방식 개발이 무엇인지 이해한다.
- ✅ 컴포넌트 UI 개발에 도움을 주는 라이브러리인 Storybook을 활용할 수 있다.
- ✅ 구조적으로 CSS를 작성하는 방법의 발전과 이유에 대해서 이해한다.
- ✅ 컴포넌트 기반 CSS 작성에 도움을 주는 라이브러리인 Styled-Component를 활용할 수 있다.
- ✅ DOM Reference를 활용하기 위한 useRef Hook을 활용할 수 있다.
Redux
- ✅ 상태 관리 라이브러리가 왜 필요한지 이해할 수 있다.
- ✅ Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.
- ✅ Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다.
- ✅ Presentational 컴포넌트와 Container 컴포넌트의 개념을 이해할 수 있다.
- ✅ Redux hooks(useSelector, useDispatch)를 사용해 store 를 업데이트할 수 있다.
마치며
이번주는 코스의 불친절함?을 확실하게 느낄 수 있는 시간이었다. 기존에도 정규 코스만으로는 이해할 수 없는 부분이 많아서 구글링을 통해 부족한 부분을 채워나가야 했고 이것이 코드 스테이츠에서 원하는 학습방식이라고 설명을 했기 때문에 어느정도 공감을 하면서 공부을 했었다. 이전에는 학습 방향을 잡아준 후, 개인이 학습을 진행했다면 이번주는 정말 도착지만 정해주고 길을 알아서 찾아내야 하는 수준이여서, 공식문서와 블로그들을 검색하면서 스스로 이해하였다. 구글링을 통해서 학습을 해보면서 느낀 것은 혼자서 모르는 개념을 공부할 때는 공식문서가 최고라고 생각했고, 필요한 부분만 찾아서 이해하는 능력을 길러야겠다고 생각했다. 그리고 활용할 수 있는 편리한 라이브러리가 수십개이기 때문에 프로젝트의 성격에 따라 적합한 라이브러리를 찾아서 학습하는 것이 효율적으로 개발할 수 있는 방법이라고 생각했다. 다음주 수요일에는 두 번째 HA가 예정되어 있어서 코플릿을 대비해서 자료구조와 재귀를 복습하고 과제형 HA를 대비해서 서버와 React관련 스프린트 코드를 리뷰할 예정이다.
