Today I learned

Atomic Design

아토믹 디자인이란?
Atom(원자) 라는 이름에서 알 수 있듯이 아주 작게 컴포넌트로 쪼개고 쪼개서 개발하는 것을 말한다.

atom(원자) -> molecules(분자) -> organism(유기체)
이렇게 3단계로 component 를 구성하고 organism 들로 templete을 만들고 그 templete으로 page를 만든다.

📌atoms에는 무엇이 포함될까?
input, button, label..등등 굉장히 작은 태그 하나가 들어간다.

📌molecules에는 무엇이 포함될까?
두가지정도가 만난 하나의 단위가 포함된다.
예를들어 (input+label) or (input + button) 이

📌organism에는 무엇이 포함될까?
(input+label) + (button) + (span) 이렇게 atom 또는 molecules 에 속한 요소들이 모이면 organism 이 된다.

프로젝트에서 지금 막 아토믹디자인을 적용해보는 중이다.

지금까지 느끼는 장점은, 재사용성을 고민하며 개발을 할 수 있고 고쳐야할 부분이 생겼을때 데이터가 부분적으로 구성되어있기때문에 유지보수가 쉬울거같다

반면 지금까지 느끼는 단점은, 시간이 오래걸린다. 그 전까지는 레이아웃을 만들어가면서 작게 작게 쪼개는 방식으로 개발을 했는데 지금은 맨 처음 개발할때부터 모든걸 다 고려하고 진행해야하는점이 어렵게 느껴진다.

하나 확신하는 점은 이번 프로젝트를 끝내면 꽤 재사용성에 대해 효율적인 고민을 할 수 있는 개발자가 되어있을거란 확신이 든다.