사실
- 컴포넌트 단위의 개발에 적합한 styled component를 학습하였다.
- state를 관리하는 상태관리 redux를 학습하였다. 미니 쇼핑몰에서 상품을 카트에 추가하고, 삭제하는 등의 기능을 구현하는 과정에서, redux의 action, reducer 작성해 보며 상태관리를 연습하였다.
- redux, redux-thunk, styled component 등 현재까지 배운 내용을 종합적으로 사용해 보기 위해 watchaM(영화 리스트 조회)이라는 미니미 프로젝트를 진행해 보았다.
느낌
CSS만을 사용했을 때에는 className를 고민하고, 수정할 className을 찾느라 시간을 소모한 부분이 있었다면, 기능적으로 구분된 component별로 관리되는 CSS는 컴포넌트 단위 개발에 매우 적합하다고 느꼈다.
하지만, CSS in JS이다 보니 CSS가 길어지면 한 컴포넌트에 기능과 css가 같이 존재하여 길이가 길어질 수 밖에 없었고, 아직은 CSS 작성 숙련도가 부족한 나의 코드에서는 깔끔함을 느낄 수 없었다.
redux를 배우고나니, 상태관리가 수월했다. 리덕스를 사용하기 전, 이벤트 핸들러로 상태를 변화시키기 위해서는 이벤트가 발생하는 컴포넌트에서 상태를 가지고 있는 상위 컴포넌트까지 끌어올려줘야 했지만,
리덕스는 이벤트가 발생하는 컴포넌트에서 dispatch를 실행시켜 상태를 바로 변경할 수 있어 불필요한 코드를 줄일 수 있었다.
하지만, 작성해야할 코드가 너무 많다. type, action, reducer, store 등 하나의 상태를 관리하기 위해 작성해야할 코드들이 늘어난다. 때문에, local로 관리하여 useState를 사용할 state와 redux로 관리할 state를 구분하거나, 기능별 모듈화가 중요할 것 같다.
watchaM이라는 영화 리스트 조회 미니 프로젝트를 진행하면서 지금까지 배운 스택들을 활용해 볼 수 있는 좋은 기회가 되었다. 단순한 기능이었지만, 계획 단계에서 구현기능과 상태관리를 정확히 fix하고 진행해야 한다는 것을 느끼게 되었다.
발견점
익숙하지 않아 어려운 것이지, 반복은 해결책이 된다.
다음주를 위한 행동
다음주는 2차 시험이기 때문에, 시험을 위주로 학습할 것이다.
시험이 끝난 후에는 Typescript 등 코스에 포함되지 않았지만, 이전부터 관심이 있었던 스택을 조금씩 공부해볼 계획이다.
