노트『자바스크립트 + 리액트 디자인 패턴』
Learning JavaScript Design Patterns: A JavaScript and React Developer's Guide
설계#pattern#book · 연결된 개념 17개
쉽게 말하면
이 책은 오래전부터 쓰이던 디자인 패턴을 자바스크립트답게, 그리고 리액트 시대에 맞게 다시 풀어 주는 책이에요. 클래스 문법이 생기기 전에도 클로저와 프로토타입으로 같은 목적을 이뤄 왔다고 말해요.
비유가 깨지는 곳 다른 언어의 패턴을 그대로 옮기면 된다고 오해하기 쉬워요. 책은 React를 MVC 프레임워크가 아니라 뷰 계층을 원하는 대로 구성하는 렌더링 라이브러리로 보고, 렌더 프롭·훅 같은 React 쪽 패턴으로 이어 가요.
Addy Osmani의 『Learning JavaScript Design Patterns』 2판 번역서다. 고전 디자인 패턴을 JavaScript의 특성(클로저, 프로토타입, 모듈)에 맞게 다시 설명하고, MV* 아키텍처와 React 시대의 패턴까지 이어 간다.
큰 줄기
- 생성 패턴(Creational Patterns): 생성자, 모듈·노출 모듈, 싱글턴, 프로토타입, 팩토리. JS에서는 클래스 문법 이전부터 클로저와 프로토타입으로 같은 목적을 달성해 왔다(생성 패턴)
- 구조 패턴(Structural Patterns): 퍼사드(복잡함을 감추는 단순한 겉면), 믹스인, 데코레이터(내부를 고치지 않고 기능 추가), 플라이웨이트(Flyweight, 공통 데이터를 외부 객체 하나에 모아 메모리 절약, 예: 이벤트 위임 이벤트 버블링·캡처링과 위임)(구조 패턴)
- 행위 패턴(Behavioral Patterns): 옵저버(주체가 구독자 목록에 알림)와 발행/구독(Publish/Subscribe, 중간 이벤트 채널을 두어 서로를 모름), 중재자(Mediator, 객체들이 서로 대신 중재자와만 소통), 커맨드(요청을 객체로 캡슐화)(행동 패턴)
- 아키텍처 패턴(Architectural Patterns): MVC·MVP·MVVM. React는 MVC(Model-View-Controller) 프레임워크가 아니라 뷰 계층을 원하는 대로 구성하는 렌더링 라이브러리라는 점을 짚는다
React 쪽 패턴(렌더 프롭, 컴파운드 컴포넌트, 훅)은 Render Props 패턴·컴파운드 컴포넌트 패턴·Presentational·Container 컴포넌트에 따로 정리했다.
출처: 『자바스크립트 + 리액트 디자인 패턴』 애디 오스마니 (원서 Learning JavaScript Design Patterns, 2nd Edition)
연결된 개념
이 노트를 가리키는 문서
뜻이 가까운 노트
- 언어적 안티패턴
이름, 타입, 주석이 말하는 것과 코드가 실제로 하는 일이 어긋나는 것. 읽는 사람을 잘못된 추측으로 이끈다.
- React로 보는 SOLID
SOLID는 원래 객체 지향 설계 원칙이지만 React 컴포넌트·props·훅에도 그대로 옮겨 볼 수 있다. 원칙 자체보다 "어떤 코드 모양이 되는가"를 짧게 정리한다.
- 선언형과 명령형 프로그래밍
명령형(Imperative)·절차적(Procedural) 프로그래밍은 결과에 도달하는 방법(how)을 단계별로 지시하고, 선언형 프로그래밍(Declarative Programming)은 원하는 결과(what)만 기술하고 과정은 도구에 맡긴다. 길 안내로 치면 "직진하다 두 번째 신호에서 우회전"이 명령형, "강남역 가 주세요"가 선언형이다.
- YAGNI
"그거 필요 없을 거야(You Aren't Gonna Need It)." 실제로 필요해지기 전까지 기능이나 확장 지점을 만들지 말라는 XP(Extreme Programming)의 원칙이다.
- NestJS
NestJS는 TypeScript를 전제로 모듈·의존성 주입(Dependency Injection, DI)·데코레이터(decorator) 구조를 제공하는 Node.js 서버 프레임워크다. 2017년 Kamil Myśliwiec가 만들었고, 구조를 강제하는 방식 때문에 흔히 "Node.js의 Spring"이라 불린다.