Atomic Design

아토믹 디자인

- 컴포넌트를 나눌때 프레젠테이션 부분과 그 외의 단위로 나누는 것이 무난하다.

단계별 명칭	내용	예시	주의점	역할
Atoms	더이상 나눌 수 없는 단위	button, input, label	stateless data don't call API no logic	표시 이벤트는 emit
Molecules	아톰이 2개 이상 결합된 단위	썸네일 + 이름, 돌아가기 버튼 + 헤더메뉴	stateless data don't call API no logic 강제로 사용해야 하는 단계는 아님*2	표시 이벤트는 emit
Organisms	하나이상의 기능을 가진 단위	헤더, 푸터, 사이드메뉴, 테이블, 위젯	이벤트는 emit 전달	UI부품 핸들링
Templates	페이지의 구성을 나타내는 단위	루프문으로 복수개의 내용이 표시되는 템플릿	이벤트는 emit 전달	부품들의 포지션
Pages	페이지에 컨텐츠가 들어간 단위	디자인	이벤트 처리	API 통신*1

*1. Container 클래스을 만들어서 Vuex + API 를 처리시키는 역할을 하는 별도의 클래스를 만드는 것도 검토

*2. 아톰으로만 구성된 오르가니즘을 만들어도 된다. 반드시 Molecules 가 필요한 것은 아님.