[Atomic Pattern?]
아토믹 패턴이란? 쉽게 얘기해서 작은 단위의 컴포넌트를 만들어서 즉 작은 기능 하나하나도 잘게 쪼개서 컴포넌트에 적용시키는 방식이다.
웹에서는 프론트엔드 개발인 뷰 또는 컴포넌트 단위로 적용되는 리액트 때문에 이러한 디자인 패턴이 많이 나오기 시작했다.
아토믹 패턴은 총 5단계로 나눌 수있다.
Atom(원자)
Molecules(분자)
Organism(유기체)
Templete
pages
5단계로 쪼개어 보았을때..
1단계 원자는 폼의 인풋, 버튼, 인풋 필드 같은 작은 단위의 구성요소를 뜻한다.
2단계 분자는 각각의 구성요소를 합쳐서 어떠한 무엇인가를 할 수 있는 단계이다. 예를들어 폼의 인풋과 버튼이 있다면 검색창을 만들어 낼수 있다던가? 그런 의미이다.
3단계 유기체 단계는 이 분자들이 하나로 모여서 전체적인 하나의 Page 에서 중추적인 역할을 해낼수 있는 수준을 뜻한다. 즉 검색창과 로고 메뉴창들이 모여서 header를 이루는 방식 처럼?
4단계 템풀릿 단계는 말그대로 페이지로 넘어가기 전에 전체적인 테스트를 해볼 수 있다. 각각의 유기체들 즉 레이아웃 들이 합쳐져서 하나의 페이지로 구성되기 전에 템플릿으로 테스트를 진행해 볼수 있다.
5단계 페이지는 말그대로 모든 유기체들이 합쳐져서 나온 템플릿을 페이지화 시킨 것이다.
프론트엔드 개발 지망생 민범기입니다^^