📋 읽을 거리-1

Bora Im·2022년 4월 4일

읽을거리

목록 보기

1/7

eject
해당 프로젝트에 걸려서 숨겨져 있는 모든 설정을 밖으로 추출해주는 명령어

Atomic Design
아토믹 디자인 타입 관리 | 진혀쿠

Atoms (원자) : HTML 태그 (인풋, 버튼 등)
Molecules (분자) : 검색 영역 (인풋 + 버튼)
Organisms (유기체) : 헤더 (로고 + GNB + 검색)
Templates : 페이지를 구성하기 위한 유기체 그룹 (레이아웃)
Pages : 템플릿의 특정 인스턴스

React 프로젝트 구조를 설계하기 위해 추천할 만한 방법이 있을까요?
- 아토믹 디자인
나는 리액트를 어떻게 설계할 것인가?
- presentation, container 패턴 : UI와 로직을 서로 분리해서 관리
  - e.g. velog github - Styled Components
- Atomic 구조는 UI 재사용성이 매우 뛰어나서 협업 프로젝트에서 빠른 개발을 할 수 있는 패턴이다. 하지만 디자인 시스템을 구축하기 위한 초기 비용이 많이 들고, 로직과 State 들을 낮은 단위의 컴포넌트에서 다루지 못하고 page 단위에서 props로 내려줘야 하는 단점이 있다. props를 깊게 깊게 넣어줘야 하기 때문에 의도지 않은 props를 내려주는 실수가 있을 수도 있다.
- 디자인이 잘 나와있어서 디자인 시스템을 구축하기 편한 환경이라면 atomic 구조를 잘 활용할 수 있겠지만, 기획과 디자인이 자주 변경되는 환경에서는 atomic 디자인을 추천하지 않는다.
React 아키텍쳐, 디자인 시스템, 파일 구조에 대한 고찰
- 컴포넌트를 한땀한땀 만들수도 있지만, 너무 많은 양의 컴포넌트를 만들어야 할 수도 있기 때문에 저는 차크라 라고하는 리액트 기반 라이브러리를 사용해서 빠르게 스타일 가이드를 컴포넌트화 하는것을 추천드립니다. 기본적인 컴포넌트들을 차크라가 미리 만들어놔서 테마만 재정의하면 됩니다. 생산성이 굉장히 좋아요.
- 디자인 시스템 컴포넌트 만들기 | 모두싸인
- 코드로 만드는 Design System
리액트로 프로젝트를 진행할때 어떻게 폴더와 컴포넌트 구조를 설계하는 것이 좋을까?
assets pages components store api + utils styles
React Design Pattern - 아토믹 디자인 패턴 적용
왜 리액트를 사용하는 걸까? | JTHCAST
카카오페이지 웹 React 포팅 후기
리액트 UI 라이브러리
- 차크라
- Ant Design
- MUI
레퍼 프로젝트

Bora Im

다음 포스트

📋 읽을 거리-1

읽을거리

📋 읽을 거리-2

0개의 댓글