프론트엔드 개발자가 되기위한 여정-53

이정우·2022년 10월 26일
0

frontend-bootcamp

목록 보기
56/60

밸! 하!

밸로그여러분 안녕하세요!

오늘의 주제는 Atomic Pattern 입니다!

저는 처음에 Atomic pattern이라고 하길래
recoil에서 사용하는 atom을 의미하는것인지 알았는데
그게 아니었더라구요!

그래서 오늘은 힘차게 적어보겠습니다!

여러분 혹시 개발이나 디자인을 하시면서 Atomic Pattern 이라고 들어보신분들 계실까요??
저도 개발이라는 곳에 관심을 가지기 전에는 들어보지도 못했는데
한번 알아볼까요??

Atomic Pattern

도대체
Atomic Pattern란 무엇일까요??

먼저 직역을 한번 해볼까요?
원자패턴이라고 하는데
도대체 어떤패턴일까요??

먼저 Atomic Pattern은 개발방식에만 적용되는 개념이 아니라 디자인에서도 적용되는 설계 패던입니다!
즉 한개한개를 나누어서 재사용성을 용이하게 만드는 것인데요

실제로 프론트엔드를 준비하고 있는 저에게는 익숙한 개념이기도 합니다
그이유는 가장 자주사용하는 Vue와 react모두 컴포넌트 단위로 개발을 진행하기 때문인데요!
컴포넌트 단위로 설계 및 구현을 하게되면 재사용성이 용이해지고 이를 통해서
코드를 재개발 하지 않고서도 구현을 해나갈수 있습니다!

자 그럼 본격적으로 어떻게 이루어져있는지 알아보겠습니다!

먼저

원자(ATOM) 입니다

원자는 말그대로 가장 작은 단위의 컴포넌트입니다
원자는 어떤 context가 주어지든지 이에 해당하는 컴포넌트가 생성될수 있어야합니다!
말그대로 input태그도 컴포넌트로 분리하여 재사용을 할수가 있다는 것인데요!
그렇기에 다양한 state또한도 다양하게 가지고 있어야하면서 추상적이지만 최대한 포용할수 있게 설계가 되어야합니다!
또한 원자는 마진이나 위치값을 가지고 있지 않는데요 이를 통해서 재사용성을 훨씬 높일수있기 떄문입니다

그다음은

분자(Molecule) 입니다

분자는 원자가 엮여진게 분자인데요
즉 원자들을 조합하여서 만들어진것입니다!
분자는 분자만의 프로퍼티또한도 가지고있을수있으며 원자에게 기능까지도 만들어줄수있습니다!
분자가 원자를 스타일할수 있기때문에 분자가 원자의 위치값을 지정할수도 있습니다!

유기체(Organism)

유기체는 분자들이 엮여저서 만들어집니다 하지만 원자들이 모여서 만들어지기도 하는데요
유기체가 되게되면 저희가 개발할때 볼수있는 컴포넌트의 모습을 갖춥니다!
하지만 이때또한도 contents에 따라 최대한 재사용성을 높게 개발하는것또한도 중요합니다!
또한 유기체 또한도 분자와 원자의 상위 개념이기에 유기체에서 원자와 분자의 위치값또한도 지정해줄수가 있습니다!

템플릿(Template)

템플릿은 유기체와 컴포넌트의 위치를 지정해주는 역할을 합니다
그러나 여기에는 색상지정과 같은 스타일이 들어가지 않습니다
쉽게 말해 템플릿의 역할은 grid를 정해주는 역할만을 하고 있습니다 !

페이지(Page)

마지막으로 페이지입니다!
페이지는 템플릿을 이용해서 각 그리드에 컴포넌트를 그려서 보여주게 됩니다!
저희가 최종적으로 볼수있는 것들이죠!

자 마지막으로 특징입니다!

가장 중요한것은 개발만 이렇게 아토믹 패턴으로 되지않고 디자인도 이러한 원칙에 맞게 진행되어야합니다!
잘 만든 atomic pattern은 지속적으로 가져다 사용할수있는 정말 좋은 Legacy Code가 될수있기 때문입니다!
마치 스토리북과같이 한번 개발해놓으면 정말 좋다는것이죠!

자 이렇게 오늘은 ATomic Pattern에 대해서 알아보았습니다 !

오늘도 부족한 지식을 한개 채워가네요!!

자 그럼 밸~바!

profile
주니어 프론트엔드 개발자

0개의 댓글