참고 자료
- 컴포넌트의 각 단계의 범위, 기준을 명확히 할 필요가 있음
- 나름 아토믹하게 구성한 것 같은데 왜 컴포넌트의 갯수가 많아지고 범위가 모호해졌을까?
기능이 아닌 뷰 단위로 나눴기 때문. 전체 화면을 쪼개는 비주얼적인 구성 요소로 나누면 안된다
참고 자료 꼭 읽기!!
- 위의 자료를 읽고 선협님 자료를 읽으면 더 잘 와닿는다
우리의 문제점
- view를 구성하는 단위로 나누었다
- 특정 컴포넌트나 도메인에만 쓰이는 컴포넌트도 따로 빼서 만들었다
molcule,orginizm,template이 전부domain에 몰려있다
이렇게 구현하면 좋을 것 같습니다
- 일반적인 웹 프로젝트에서 많은 부분들을 재사용하기 어렵다. 재사용 가능한 코드들은 기능에 집중해서 구현해야한다.
- Template폴더도 만들어서 오로지 레이아웃만 결정하는 컴포넌트가 포함되도록하는 것도 좋을 것 같다! ex) CardList컴포넌트는 단지 카드들의 레이아웃만 설정하는 거니까 Template폴더에 포함시킨다
- 특정 컴포넌트(또는 도메인)에만 쓰이거나, 기능이 없이 단순한 뷰 요소는 해당 컴포넌트 폴더에 같이 포함시킨다(내부 컴포넌트로 만듦)
- 컴포넌트 구분 기준
atoms- 하나의 기능
- 더 이상 나눠지지 않는 최소 요소
- 재사용 가능한 것만
- 하나의 태그
molcules- 하나의 역할
- atom의 그룹
- 재사용 가능한 것만
orginizm- 하나의 요구사항
- atom+molcule+orginizm 모두 조합 가능한 섹션
- 재사용 불가한 atom,mocule범위 내부 컴포넌트 포함
template- 단순히 레이아웃만
- ex) Wrapper, Container
pagetemplate과orginizm을 조합해서 구성- 서버 요청해 데이터를 받아 자식들에게 넘겨주는 곳
- 컴포넌트 정리 후 스토리북에 전부 등록하기!!
담당 페이지 수정 사항
EditSeriesPageWriteSeriesPage/EditArticlePageWriteArticlePage의 구조가 같기 때문에 template을 만들어줘야 할 것 같다
- Series, Article form을 만들어 페이지와 분리하는 게 더 컴팩트한지?