5. 모듈 정의 패턴 앞선 장에선 모듈 시스템의 기능중 종속성 로드와 관련해 살펴봤다. 이번 장에선 API를 정의하는 도구로써의 모듈 시스템을 살펴보도록 하자. API 디자인과 관련해서 고려해야할 주요 요소는 private과 public의 균형이다. 모듈의 은닉성과 확장성/코드 재사용과 직결되는 부분으로써 API 유용성에 직접적인 영향을 미치기 때문이다. 그럼 지금부터 본격적으로 Node.js에서 모듈 정의시 export 지정, 함수, 클래스, 인스턴스 내보내기, 몽키 패치와 같은 주요 패턴에 대해 알아보자. 1) exports 지정하기 (Named exports) Node.js에서 public API를 공개하는 가장 기본적인 방법은 export에 할당하는 것이다. 이는 곧 exports에서 참조하는 객..

4. CommonJS 모듈 Node.js의 첫 번째 내장 모듈 시스템으로, CommonJS 명세의 주요 개념 두 가지는 아래와 같다. require : 로컬 파일 시스템으로부터 모듈을 import 한다 exports, module.exports : 현재 모듈에서 공개될 기능들을 내보낸다 물론 내용은 훨씬 더 많지만 현재까지는 이 정보만으로 충분하다. 1) 직접 만드는 모듈 로더 Node.js에서 CommonJS 작동 원리를 이해하기 위해 비슷한 시스템을 만들어보자. require( ) 함수의 원래 기능 중 일부를 모방해서 만들어볼텐데, 물론 100% 동일한 것은 아니다. // Node.js에서 fs는 파일시스템에 접근해 I/O 작업을 처리하는 모듈이다 // fs.readFileSync( path, opt..

모듈은 주요 애플리케이션들을 구조화하기 위한 부품이다. 모듈은 코드를 작은 유닛으로 나눠줌으로써 개별적으로 개발 가능하고 테스트 가능한 형태로 만들어준다. 또한, 명시적으로 노출시키지 않은 모든 함수들과 변수들을 비공개로 유지해 은닉성을 강화시켜주는 장치이기도 하다. 그리고 여러 언어들은 모듈과 비슷한 개념으로 아래 개념을 사용하고 있다. package (Java, Go, PHP, Rust, Dart) assembly (.NET) library (Ruby) nuit (Pascal dialects) Node.js의 경우 특이하게 CommonJS(CJS), ECMAScript modules(ESM) 두 가지 모듈 시스템을 사용하고 있다. 이번 장에선 왜 두 가지 형태가 존재하며, 각각의 장단점과 패턴을 알아..

사실 이전까지가 리액트 대부분의 기본 개념들이었다. 리액트 '자체'가 궁금했다면 21장까지만 읽어보면 된다. 그런데 웹 애플리케이션을 만들다 보면 백엔드 기술이 필요한 경우가 허다하다. 물론 여기선 DB설계 같은 어려운 개념을 다루진 않을 것이다. 1. Koa 프레임워크 서버 개발용 프레임워크. Express의 기존 개발 팀이 개발했다. Koa는 미들웨어 기능만 갖추고 있어 Express보다 훨씬 가볍고, async/await 문법을 정식으로 지원해서 비동기 작업 관리가 더 편하다. 사실 뭐가 됐건 취향껏 하면 되기 때문에 문제는 없다만, 이 책에선 Koa를 쓰기로 한다. (사실 Express 커뮤니티가 훨씬 더 커서 참고하기 쉬움) 2. Koa 기본 사용법 2.1 서버 띄우기 Express랑 거의 동일..

1. Node.js 철학 모든 프로그래밍 플랫폼은 자신들만의 철학과 원칙, 이데올로기를 가지고 있다. 노드js 역시 마찬가지이며, 아래와 같은 원칙들을 가지고 있다. ※ https://en.wikipedia.org/wiki/List_of_software_development_philosophies 1.1 경량 코어 코어를 최소한의 기능 세트로 관리하되 코어의 바깥 부분에 유저스페이스(userspace)라 불리는 유저 전용 모듈 생태계를 두는 것을 원칙으로 함. 이는 커뮤니티가 유저 관점에서 폭넓은 해결책을 실험해볼 수 있는 자유를 부여함. 1.2 경량 모듈 Node.js는 프로그램 코드를 구성하는 기본적인 수단으로서 모듈 개념을 사용한다. 이것은 애플리케이션과 재사용 가능한 라이브러리를 만들기 위한 구성..

리덕스에 타입스크립트를 고-급지게 넣는 방법을 알아보자. 리덕스의 흐름은 아래와 같다. 액션 타입을 선언하고 / 액션 생성 함수를 정의한 뒤 / 액션을 받아서 실제로 작업해주는 리듀서를 작성한다 리듀서가 여러개라면 루트리듀서라는 이름 하에 하나로 통합해준다 (combineReducers) 상태를 관리해줄 스토어를 선언한다 (createStore) 스토어를 뿌려준다 (Provide) 리덕스와 연동할 컨테이너를 만들고 스토어와 연결해서 state와 dispatch를 가져온다(useSelector, useDispatch) 가져온걸로 지지고볶고 한다 1. 카운트 1) 액션 및 리듀서 정의(modules/counter.ts) // 액션 타입 const INCREASE = 'counter/INCREASE' as c..