ex) -비행기의 수많은 부품이 하나의 덩어리가된다면 의존성을 분리할 수 없게된다 1. 매번 처음부터 끝까지 만들어야하기 때문에 같은 비행기를 다시 만들기 어렵게 된다. 2. 한번 설계한 과정이 새로운 디자인의 비행기를 만드는데 도움을 주기 힘들다 -> 각부분을 분리하고 작은 단위 설계, 조립한다면 독립적 설계로 효율적 설계가 가능하다
[프론트 엔드의 컴포넌트]
사용자와의 interaction이 시대에 따라 증가하면서 웹의 복잡성이 증가하였고 전체의 웹페이지를 부분부분 쪼개는 엘리먼트들이 등장하였다. 자바스크립트를 통해 element그룹을 효율적으로 관리 할 수 있기 때문에 프론테엔드에서의 컴포넌트는 element그룹을 반환하는 자바스크립트 함수이다.
[Atomic Design] 컴포넌트를 분리하는 방법론 중 하나 1.원자: 인터페이스를 구성하는 최소단위의 블록 ex)form, inpu, button등 HTML태그들이 원자에 해당됨 2. 분자: 원자들을 하나의 단위로동작시키는 ui컴포넌트 ex) 여러 html태그들이 겹합하여 검색을 위한 ui컴포넌트가 된다 -> 하나의 책임을 갖는다 3. 유기체: 하나 이상의 책임을 갖거나 반복적인 원자, 분자 조합 ->하나이상의 책임을 가질 수 있다, 특정 영역을 차지하는 기준에 따라 조합할 수 있다 ex)메인로고, 검색창, 내정보 보기 버튼들이 존재하는 헤더영역을 유기체로 구성할 수 있다.
4.템플릿 -> 원자 분자 유기체 단계의 컴포넌트들을 배치하는 레이아웃 5. 페이지 -> 데이터가 페이지에 전달되면 페이지가 된다
[컴포넌트를 어떻게 관리할 수 있을까] 디자인 시스템! : 컴포넌트와 스타일을 관리하는 시스템 : 일관된 시스템으로 유지보수할 때 유리해 질 수 있다.