디자인 패턴 연구
React
2023. 7. 29. 01:29
웹 사이트를 돌아다니다 보면 위 그림과 같이 한 섹션에 여러 개의 카드 영역이 한 줄에 일정 간격을 두고 배치된 것을 본 적이 있을 것이다. 위 캡처본과 같이 구글에서 검색 카테고리를 보여주는 부분인데, 이미지, 동영상.. 등과 같은 카테고리를 담고 있는 하나의 섹션이 있고, 섹션 안에 카테고리 아이템이 일정 간격을 두고 한 줄로 배치되어 있다. 아토믹 디자인 패턴을 공부하면서 해당 부분을 추상화하는 방법은 나름대로 연구해보았다. 먼저, 구글 검색 카테고리 영역을 보면 가장 먼저 떠오는 것이 카테고리아이템을 담을 전체 섹션과, 아이템을 한 줄로 배치해 줄 컴포넌트로 구성되어 있음을 알 수 있다. 그리고 먼저, 아톰에 해당하는 요소로 FlexBox, Section을 떠올렸고, FlexBox와 Section..
