Frontend
-
Atomic DesignFrontend/Design 2021. 9. 5. 18:03
Component 를 분리하고 설계하는 것은 개발자, 디자이너분들이 늘 고민하는 고민거리입니다. 필자는 Component 설계에 있어서 Atomic Design 을 알아보고 적용하려고 노력하고 있지만 늘 어느 단계로 분리할지 고민에 빠집니다.. 예시는 각종 Project 를 경험하며 적용한 방식으로 채워 넣겠습니다. Atomic Design Pattern 는 하나의 Interface System 을 5단계의 작은 단위로 Component 나누어 관리하는 Pattern 입니다. 5단계에 대해서 학습 내용을 정리 해보겠습니다. Atomic Design Hey there! I wrote a book called Atomic Design that dives into this topic in more detail..
-
[React]Frontend 설계 5단계Frontend/Design 2021. 9. 5. 16:19
모든 개발자가 생각하는 고민일 것입니다. 필자는 Frontend 설계 방식을 매번 고민하고 시작하지만 계획한 설계 흐름과 다른 방식으로 개발을 진행하는 경우가 많습니다. 이번 기회에 React 에서 권장하는 설계 방식을 학습하고 정리해봤습니다. React 에서 권장하는 설계 우선 접근법 React로 사고하기 - React React로 사고하기 – React A JavaScript library for building user interfaces ko.reactjs.org React 공식 문서에 설명된 내용을 필자가 나중에 보기 위해 정리만 해둔 것입니다. 각 단계에 대한 자세한 내용과 예시는 위 공식문서에 잘 설명되어 있습니다. 1. UI Component 계층 구조 나누기 Front End 에서 Dra..