MonthSub프로젝트 리팩토링을 시작했다
컴포넌트와 폴더 구조 정리부터 하기로 했는데 아토믹하게 컴포넌트를 나누는 기준이 감이 안왔다..
나름 아토믹하게 구성한 것 같은데 왜 컴포넌트의 갯수가 많아지고 범위가 모호해졌을까?
서치해봐도 단순한 예시만 있어서 실제 프로젝트 구현과는 적합하지 않았다..
그러던와중에 너무 좋은 글을 발견했고 문제점을 깨달았다.
컴포넌트를 기능의 단위가 아닌 뷰를 이루는 단위로 분리했기 때문이었다.
- atomic, molcules는 기능 단위로 구분.(기능이 꼭 있어야 함)
- organizm부터는 도메인 기준으로 폴더를 나눈 후,
해당 도메인에서만 쓰이거나, 기능이 없이 단순한 뷰 요소는
해당 컴포넌트 폴더에 같이 넣어준다.
컴포넌트 구분 기준
- atom: 하나의 기능
- molcule: 하나의 역할
- orginizm: 하나의 요구사항
- template: 단순히 레이아웃만 (Wrapper, Container등)
- page: 서버 요청해 데이터를 받아 자식들에게 넘겨주는 곳
#프론트엔드