📋 읽을 거리-2

리액트 아토믹패턴 적용기

아토믹 디자인(Atomic Design) 적용기

아토믹(Atomic) 컴포넌트 디자인 개발 패턴

코드 재사용 최적화 컴포넌트 관리법

재사용성을 고려한 컴포넌트의 분리

/container/FriendPage
/component/FriendList

단단한 컴포넌트 부수기 | 핀다 Finda

리액트는 상속보다는 조합

"조합 기반 컴포넌트"

제어역전 (Inversion of Control)

---

나는 리액트를 어떻게 설계할 것인가?

components - containers pattern
https://github.com/velopert/velog-client/tree/master/src/components
https://github.com/velopert/velog-client/tree/master/src/containers

컴포넌트를 어떻게 만들어야 할까?

• Presentational & Container Components : 책임이 중앙집중된 절차적 프로그래밍
  

• Custom Hooks : 책임이 분산된 객체지향 프로그래밍
  
  

프로젝트 구조 잡기 | vlpt

e.g. https://github.com/vlpt-playground/react-memo-app

Container와 Component

🔼6년 전

nextjs 파일구조

TypeScript 환경에서 Redux를 프로처럼 사용하기

---

React에서 컴포넌트 경로 깔끔히 관리하기

상대경로 지옥에서 벗어나기 : craco

---

next.js 파일(페이지) 구조

Next.js 프로젝트 디렉토리 구조

---

리덕스 모듈 만들기 - 덕스 패턴(Ducks pattern)

Redux - Ducks 패턴

ducks-modular-redux | Github

Ducks 구조와 redux-actions 사용하기

---

mobx 알아보기 | 기억보다 기록을

---

Next.js의 Routes

Next.js의 Pages

NextJS 로 Static Site 만들기

---

CSS방법론 : OOCSS, BEM, SMACSS

css 방법론 - BEM 방식

BEM (Block Element Modifier) 이란?

CSS 를 효율적이고 빠르게 작성하기 위한 웹 개발 방법론

Atomic Design과 BEM (ABEM)

ABEM (Atomic design + BEM)