🎯기간 : 2022.05.16~ 2022.05.22
이번 포스팅은 한 주간의 기간동안 진행한 것을 회고하려고 합니다.
제가 크게 이번주 진행한 것은 아래와 같습니다.
1. 리액트 장바구니 미션 step2 진행
#1. 리액트 장바구니 STEP2 미션 진행📚
#1-1 미션을 임한 자세😎
우선, UI는 많은 신경을 쓰지 않았습니다. 이제껏 매 미션마다 UI를 나름대로 신경써왔지만, 이번 미션만큼은 UI보다는 컴포넌트와 새롭게 적용해보고자 하는 것에 초점을 맞추어 많은 시간을 투자하였습니다. 결과적으로, 다양한 시도를 하였기에 따라오는 성취감이 컸던 한 주였던 것 같습니다.
#1-2 새롭게 적용한 다양한 시도🔥
1. JS -> TS로 마이그레이션
타입스크립트로 마이그레이션을 시도하였습니다. 타입스크립트 경험이 아직 부족하여 미숙한 점이 존재할 수 있지만, 나름대로 철저하게 타입 제한을 하여서 안정적인 개발을 하려고 노력했습니다. 특히, redux-thunk 부분에서 타입을 적용하는 것이 까다로워서 시간을 많이 소요한 기억이 납니다. 적용하는 과정이 굉장히 재미있었습니다. .으로 어떤 것을 참조할 수 있는지 길잡이 역할을 해주고, 잘못된 값을 참조할 경우 컴파일 에러를 발생시켜줘서 많은 에러를 사전에 예방할 수 있었습니다. 결과적으로 타입스크립트의 장점을 많이 느꼈습니다.
2. redux-thunk와 redux-logger 도입
비동기를 처리할 때 redux-thunk를 주로 사용한다고 하여 적용하였습니다. 비동기와 관련된 액션을 그룹화하여 사용할 수 있어서 좋았습니다. 또한 redux-logger는 처음 사용해봤는데, 콘솔창에 바로 액션에 따른 전∙후 결과를 알려줘서 개발하기 굉장히 편했습니다.
3. Chakra UI 및 Tailwind css를 활용하여 공통 컴포넌트 구성
UI를 개발하게 되면, 중복되는 스타일이 여지없이 발생하게 되는데요. 중복되는 스타일을 재사용하기 위해 저는 공통 컴포넌트로 분리하였습니다. 공통 컴포넌트를 개발할 때 Chakra UI와 Tailwind css를 많이 참고하였습니다. 결과적으로 Text, Box, Flex, Button등의 공통 컴포넌트를 개발하였고, 재사용할 수 있어 좋은 것 같습니다.
4. 커스텀 훅 분리
Container - Persentation 방식을 사용하려다, 비즈니스 로직을 커스텀 훅에 담는 형식으로 사용하였습니다.
단순한 분리보다는 해당 컴포넌트가 알 필요없는 내용인 경우에는 커스텀 훅으로 분리를 진행했고,
반대의 경우에는 컴포넌트에 배치시켰습니다. 아직까지, 비즈니스 로직을 커스텀 훅으로 어디까지 분리를 해야하는가에 대해서 고민을 하고 있는 상태입니다.🤔
5. 디바운스 적용
장난기가 많은 사용자가 어떤 상품을 장바구니에 수십차례 반복적으로 클릭하는 경우가 있다고 생각하였습니다. 이 상황을 디바운스를 사용해 해결했습니다.
6. code splitting 적용
실험으로 적용해봤습니다. cra-bundle-analyzer를 활용해서 code splitting 전∙후의 차이를 비교해 본 결과, 역시 프로젝트 규모가 작아서 그런지 차이가 미미하였습니다.
7. 이미지 preload 진행 후, 상품 리스트 렌더링
상품 리스트 페이지에서 상품 이미지를 불러오게 됩니다. 상품 이미지의 크기가 천자만별이기에 어떤 것은 빠르게, 어떤 것은 느리게 로드됩니다. 이 차이가 사용자에게 굉장히 큰 불편함을 주게 됩니다. 그리하여 상품 리스트를 렌더링하기 전에, 상품 이미지를 미리 로드하고, 상품 이미지가 모두 로드된 후에 상품 리스트를 렌더링하게끔 개발하는 식으로 UX를 개선하였습니다. 추가적으로 상품 이미지가 전부 로드되기 전에는 skeleton을 렌더하도록 진행했습니다.
8. msw 적용
msw(mock service worker)는 API 모킹 라이브러리로, 서버를 향한 네트워크 요청을 intercept하여 mocking된 응답값을 내려주는 역할을 합니다. 프론트엔드에서 서버와의 통신이 필요한 기능을 개발하는 경우, 백엔드에서 API가 구현되기 전에는 해당 기능을 개발하기 어려운데요. 이 상황에서 msw를 사용하면 좋을 것 같습니다.
#1-3 느낀점🤩
이번 주는 장바구니 미션외에는 아무것도 진행하지 않았는데요. 그만큼 미션에 시간을 많이 투자하였고, 많은 것을 시도하고자 하였습니다.
아직 리팩토링이 많이 필요한 코드이지만, 리뷰어님이 노력을 알아주셔서 굉장히 기분좋게 한 주를 마무리한 것 같습니다.💯
이상으로 우아한테크코스 level2 15주차 회고는 여기서 마무리하겠습니다.🏎🏎🏎
