Atomic Design Pattern 도입기 (2)⚛️
·
기술 도입기
안녕하세요! 미어켓 프론트엔드 개발자 노윤지입니다.😊지난 글에서는 미어켓에서는 아토믹 디자인 패턴이 무엇인지와 이 방법론을 도입한 이유를 소개했었어요.이번에는 미어켓 팀이 아토믹 디자인 패턴을 도입한 방식와 실제 사용 후기를 나눠볼게요."아토믹 디자인 패턴은 멘탈 모델이기 때문에, 팀 내에서 아토믹 디자인 패턴 규칙을 정립해야 한다."미어켓 팀은 다른 팀들의 사례를 분석하여 각 팀이 아토믹 디자인 패턴을 도입하면서 새로운 규칙을 만들고 있음을 알게 되었어요. 미어켓 팀도 추상적인 패턴을 구체화할 필요가 있었죠.Atomic Design Pattern 사용 규칙미어켓 팀에서는 크게 4가지 규칙을 정했어요. 1. 디렉터리 구조 통일하기프로젝트의 디렉터리 구조는 다음과 같이 구성했어요.src/├── compo..
Atomic Design Pattern 도입기⚛️
·
기술 도입기
안녕하세요! 미어켓 프론트엔드 개발자 노윤지입니다.😊프론트엔드 개발자라면 컴포넌트를 어떻게 구성하고 관리하는 건 항상 고민되는 일이죠. 미어켓에서는 아토믹 디자인 패턴을 활용해 컴포넌트를 개발하고 있어요. 이번 글에서는 아토믹 디자인 패턴이 무엇인지와 이 방법론을 채택한 이유를 함께 나눠볼게요."확장성, 재사용성, 가독성 갖춘 유니콘 컴포넌트를 만들 순 없을까?"미어켓은 서비스 운영과 확장을 위해 컴포넌트의 구성과 관리가 용이한 환경이 필요했어요. 이 고민을 해결해 준 것이 바로 아토믹 디자인 패턴이었죠.Atomic Design Pattern이란?원자와 분자처럼 작은 단위들이 조합해 더 큰 대상을 만드는 원리를 바탕으로 한 디자인 패턴이에요. 이 패턴은 컴포넌트를 아래와 같이 5가지 레벨로 나누고, 각..