Next.js???
Next.js는 Vercel이라는 Frontend Team에서 만든 CSR, SSR 방식의 장점을 모두 가지고 생산에 필요한 많은 기능들을 제공하는 아주 강력한 React 프레임워크.
최초 프로젝트 생성 이후
처음 CNA 설치를 하면 위와 같이 구조가 잡힌다.
Next.js에서 page Route는 따로 route 설정을 하지않아도 pages 디렉토리의 .js, .jsx, .ts, .tsx 파일이 각 페이지는 그들의 파일 이름을 기반으로 route된다.
예를 들어, 만약 pages/sample.js 파일을 생성한다면 /sample로 쉽게 접근 가능하다.
next에서 기존에 만들어둔 폴더구조는 유지해야할 것같은데.. pages 밖에있는게 거슬려.. src 안에 넣고싶다....
https://nextjs.org/docs/advanced-features/src-directory
되네?
뭐이것저것 추가해서 머릿속으로 구상한 폴더를 만들었다.
Atomic Design Pattern 과 Presentation Component - Container Component 를 기반으로 해보자.
기본적인건 어느정도 된듯?
이제 디테일하게 잡아보자.
디렉토리 상세
api
비동기는 항상 사용하던 Axios를 기본으로 할것 같다.
api 폴더 하위엔 Axios Instance 와 각각 api 명세를 둘 생각이다.
(추가적으로 React-query는 좀 스터디가 필요해보이고 필요성이 느껴진다면 적용할 생각이다.)
components (Presentation Component)
일단 Components 디자인 패턴은 Atomic Design Pattern을 사용할 생각이다.(아는게 이것뿐..)
containers (Container Component)
api 호출, 이벤트 함수, 비즈니스 로직, 상태관리, 예외처리 등 UI와 로직을 서로 분리해서 관리하기 위한 폴더이다.
pages
page route
store
redux / mobx 회의 후 적용
stories
이후에 storybook을 사용할거라 일단 만들었다.
styles
Global Styles 폴더 (컴포넌트 개별 css 는 각 컴포넌트 폴더에 module로 관리한다.)
types
type 관리 폴더
utils
공통 함수 폴더
끝
References
https://ui.toast.com/weekly-pick/ko_20200213
https://atomicdesign.bradfrost.com/chapter-2/
https://doiler.tistory.com/38
