노트『자바스크립트 + 리액트 디자인 패턴』
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"이라 불린다.