SLASH 기술 블로그

목표 이전 글에서 Atomic Design 패턴에 대해서 알아보았다. 이번에는 Atomic Design 패턴을 통해 직접 간단한 페이지 하나를 만들 예정이다. 사용한 기술 정리 [x] React.js [x] Styled-Components 시작하기 우선 시작하기에 앞서 이번 글에서는 어떤 페이지를 만들것인지 캡쳐 화면을 보고 가보자! 저번 글에서 예시로 보여줬던 화면과 비슷한 디자인으로 이미지와 같은 페이지를 만들어 볼 것이다. 조금 다른 것은 Pages단계를 보여주기 위해서 텍스트를 입력하고 SEARCH 버튼을 누르면 Content영역에 해당 텍스트가 보여지는 기능을 추가해볼 것이다. 완성된 페이지를 같이 만들어보자. Atomic 하게 구조 나누기 Atomic Design Pattern에서 가장 중요하..

Atomic Design이란 Atomic Design이란 디자인 요소들을 나눠서 파악하고 이들의 조합을 통해 또 다른 디자인을 구성하는 방식을 말한다. 이러한 방식은 컴포넌트 단위로 개발하는 React프로젝트와 잘 어울리는데 어떻게 구성하는 디자인 패턴인지 같이 알아보자. 디자인 요소들을 나눠서 파악하고 이들의 조합을 통해 또 다른 디자인을 구성한다는 말은 화학시간에 배웠던 원자 구조와 연관이 있다. 모든 물체는 원자로 구성되어 있다. 이러한 원자들이 결합하여 분자를 형성하고 차례대로 더 복잡한 유기체로 결합하여 하나의 물질을 구성하게 된다. 이 관점으로 하나의 페이지도 마찬가지로 여러가지 작은 컴포넌트들이 존재하고 컴포넌트들끼리 결합하여 하나의 페이지를 구성하게 된다는 것이 Atomic Design이 ..