[General] NextJS로 리팩토링을 하기 위한 베이스 셋업

[Bokdol11859]

팀 단위로 진행되던 리팩토링이 어쩔 수 없는 이유로 무산이 되어 개인적으로 리팩토링을 마저 진행

당시 팀에서 진행되던 리팩토링 레포지토리 : https://github.com/TodoMall/TodoMall-Client-V2

초기 셋업 및 공통적으로 사용되는 컴포넌트들을 제작하고 생성했던 PR 기록 : TodoMall/TodoMall-Client-V2#11

기술 스택의 변화

리팩토링 이전에 사용하던 기술 스택: [Javascript, ReactJS, Styled-Components]
리팩토링에 도입한 기술 스택: [Typescript, NextJS, Emotion, Framer-Motion, React-Query, Redux-Toolkit, Storybook]

1. Javscript -> Typescript

• 개발 과정에서 타입 추론의 도움을 받고, 코드의 완성도 및 안정성을 위해 Typescript를 도입

2. ReactJS -> NextJS

• NextJS의 파일 기반 라우팅을 통해 직관적인 파일 구조를 구축할 수 있고, 추가적인 라이브러리의 도입 없이도 라우팅이 간편하기에 도입
• 데이터의 변화가 발생하지 않는 여러 페이지들에 SSG/ISR을 적용해서 페이지 로딩 속도 향상을 위해 도입

3. Styled-Components -> Emotion

• 제공하는 기능의 차이는 거의 동일하지만, Emotion은 NextJS에서 추가적인 작업 없이도 바로 적용이 가능하기 때문에 도입

4. Framer-Motion

• 여러 애니메이션들을 간편하게 적용하기 위해 도입

5. React-Query

• 서비스의 특성상 Server-State가 Client-State보다 비중이 훨씬 높음
• Server-State를 캐싱해서 불필요한 서버 요청을 제거
• isLoading, error 등등의 데이터를 반복적인 작업 없이 참조할 수 있는 훅 제공

6. Redux-Toolkit

• 앞서 말했듯이 서비스의 특성상 다뤄야하는 Client-State가 많지 않아 Context API를 이용할 수 있었지만, FLUX 패턴에 익숙해지기 위해 도입
• 모달 상태, 약관 동의 상태와 같은 Client-State 관리를 위해 도입

7. Storybook

• 기존에는 디자인팀과의 원활한 협업 및 간편한 UI 테스팅을 위해 도입
• 사용하는 과정에서 디자인 시스템 구축이 간편해지는 것을 체감하고, 개인적인 리팩토링에도 도입하기로 결정