•
“연관된 것은 모아두자” - 도메인이 같은 것들은 같은 폴더에 모아두자.
•
“직관적인 구조를 만들자” - 특별한 패턴을 따르기보다 처음 본 사람도 쉽게 찾아갈 수 있도록 하자
폴더 구조
•
폴더 네이밍은 단수형으로 → 그냥 고정
page
•
페이지와 강결합된 컴포넌트, 유틸함수, 훅스들은 각 페이지 컴포넌트와 함께 둔다. - “연관된 것은 모아두자”
•
page/최상위 도메인/shared → 최상위 도메인에서 공유되는 컴포넌트와 함수들은 최상위 폴더에 shared 디렉터리를 만들어 모아둔다.
shared
•
같은 도메인 내에서 공통되는게 생기면 상위로 옮기고, 다른 도메인에서 가져다 사용할 컴포넌트가 생기면 shared로 옮긴다.
•
여러 도메인에서 사용되며 비즈니스로직이 포함된 컴포넌트, 함수들을 포함해요.
common
•
도메인에 종속되지 않으며 shared 보다 더욱 추상화된 컴포넌트나 함수들이 존재
•
일단 공통 파일, 폴더 개발할때는 기본적으로 shared로가고 보수적으로 가져간다
•
예시
◦
util: 비즈니스 로직이 포함되지 않은 함수, web api
◦
service: 라이브러리를 한 번 wrapping 한 것들
◦
style: animation, reset css
◦
hook: 비즈니스 로직이 포함되어 있지 않은 커스텀 훅
◦
component: 당근 디자인시스템에 아직 구현되어 있지 않은 컴포넌트
service
•
bridge, google-analytics, sdk등 외부 라이브러리를 wrapping하거나 외부에 의존적인 로직을 포함하는 파일들을 분리