atom

프론트 프로젝트를 하다보면 매번 고민하는 것 중 하나가 효율적인 폴더 및 파일 구조이다.나도 해당 질문에 대해 자세히 알지 못해서 매번 고민하던 와중, 디자인 시스템을 공부하면서 아토믹 디자인에 대해 알게 되었다.더 알아본 결과 정말 괜찮은 구조라 생각되었고 내 프로젝트에 도입해 보기로 하였다. 아토믹 디자인(Atomic Design) 이란? 아토믹 디자인은 화학적 관점에서 아이디어를 얻은 디자인 시스템이다.  아토믹 디자인은 위와 같은 단계별 기준을 가지고 있다.우리들의 궁극적인 목표인 Pages를 만들기 위해 Atom부터 시작하여 구체화하는 과정을 거치게 된다. Atom Atom이란 더 이상 분해할 수 없는 기본 컴포넌트이다.   위와 같이 label, input, button과 같이 기본 HTML ..

이전 블로그에서 toast 기능을 Context API 를 통해 구현하였다. (https://doyourbestcode.tistory.com/140) 물론 당장은 toast 기능 하나만 구현하였기 때문에 불필요한 rendering만 좀 신경 써주면 Context API를 사용해도 큰 문제가 없다. 하지만 여러 기능을 Context API를 통해 구현하고자 하면 문제가 발생할 수 있다. 불필요한 rendering을 처리하는 cost 이전 블로그를 보면 ... export const ToastValueContext = createContext(undefined); export const ToastActionContext = ..