안녕하세요. 오늘은 1년간 Atomic Design Pattern을 활용하여 디자인 시스템을 구축하면서 겪었던 구분 기준의 모호함과, 이를 해결하기 위해 명확한 규칙을 정립한 과정을 회고해보려고 합니다. 이 글에서는 Atomic Design Pattern의 개념 설명은 생략하고, 도입 계기와 겪었던 어려움, 문제 해결 과정, 그리고 그 과정에서 느낀 점을 공유하겠습니다. Atomic Design을 도입한 이유 React에서는 UI를 계층화하여 컴포넌트를 분할하고, 단일 책임 원칙에 따라 설계하는 방식을 권장합니다. 프로젝트가 성장하면서 공통적으로 사용되는 컴포넌트가 점점 증가했고, 이를 체계적으로 관리하고 재사용성을 높이기 위한 방법이 필요했습니다. 컴포넌트를 작은 단위로 나누어 조합하는 방식은 유지보수성과 확장성을 높이는 데 유용했으며, 이를 효과적으로 적용할 수 있는 패턴으로 Atomic Design이 적절하다고 판단했습니다. Brad Frost의 Atomic Design 개…

Introduction #1077 이슈를 보면 mutateFn의 variable을 필수값으로 변경한 이력을 볼 수 있다. mutation인데 왜 variable이 없냐고? 나의 경우에는 URL의 있는 queryParams를 읽어와서 데이터를 넘겨주면 되기 때문에 useSomething hook 안에서 처리하고 싶었다. 문제상황 mutate() 와 같이 variable에 아무 값도 넣지 않고 mutation 함수를 호출 할 수 없다. TVariables 타입에 undefined도 줘보고 이래저래 별짓을 다해봐도 필수값을 optional 하게 바꿀수는 없었다. 에러 발생 해결 실질적으로는 mute 함수에서 variable을 정의해서 넣어주는 것이기 때문에 그렇게 꼼수해결법도 아니다.