0. Node.js에서의 타입스크입트
1. node.js 웹앱 프레임워크 Express소개
1) express(가장 널리쓰임)란?
- Node.js 기반의 웹 어플리케이션 프레임워크
- 웹 어플리케이션을 만들기 쉽게 해주는 기능과 구조를 제공
- 이외에도 fastify(퍼포먼스 우수)나 koa 등 다양한 웹 어플리케이션 프레임워크 존재
2) express: 예제
// src/app.js
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Hello World');
});
app.listen(port, () => {
console.log('Example app listening at http://localhost:${port}');
});
3) express: Router
- REST API에서의 URI: 웹 리소스 또는 인터페이스의 경로 표현
- express에서의 라우터는 애픙이케이션 앤드 포인트(URI)를 정의하고
- 클라이언트가 어떤 경로로 요청했느냐에 따라 다른 코드를 실행
4) express: Middleware
- express의 미들웨어는 함수
- 요청과 응답 사이에서 요청이나 응답을 변경
- 에러가 났을 때 에러 응답을 보내거나 응답을 종료
- 미들웨어는 요청과 응답 사이에 존재(그래서 next를 사용해야 함)
5) express 아키텍쳐: 3계층 설계
- [1] > [2] > [3]
- [1]: controller layer - 들어오는 요청을 service 클래스에 라우팅
- [2]: service layer - 비즈니스 로직을 갖고 있는 서비스 클래스 CLI와 같은 스탠드얼론(독립형) 어플리케이션에서는 독자적으로 쓰일 수 있음
- [3]: persistent layer - DB나 웹/앱 스토리지 같이 영구히 데이터를 저장할 수 있는 계층
- 나누어야하는 이유: controller layer나 persistent layer가 다른 것으로 변경되어도 서비스 레이어의 비즈니스 로직이 그대로라면 변경된 레이어만 교체해주면 되기 때문
2. 자바스크립트 + Express로 커피 주문 앱 개발하기
1) 프로젝트 구조
- [src]
ㅏ app.js : 서버를 시작하는 메인 파일
ㅏ [middlewares]
| ㄴ errorMiddleware.js : 에러를 핸들링하는 미들웨어
ㅏ [routers] : app으로 들어오는 요청을 라우팅해주는 파일
|. ㅏmenuRouter.js
| ㄴ orderRouter.js
ㄴ [services] : 라우팅되는 요청들을 핸들링하는 코드
ㅏ CoffeeMenuService.js
ㄴ OrderServide.js
3. 자바스크립트에서 타입스크립트로 마이그레이션
1) 마이그레이션 순서
- [1] 트랜스파일링할 디렉터리 정하기
- [2] tsconfig.json 작성하기
- [3] babel을 사용한 es6 이상의 문법 지원
- [4] 확장자명을 *.js -> *.ts로 변경
- [5] 오류제거: 타입 추가하기
- * 만약 src 외에 다른 폴더가 있다면, 그리고 서로 다른 트랜스 파일 결과가 필요하다면 각폴더에 tsconfig.json 위치시키기
- [6] tsconfig.json 파일 생성
ㄴ npm i -g typescript
ㄴ tsc --init
2) babel과 함께 사용
- babel vs tsc
- tsc: 타입스크립트 파일과 트랜스파일링될 자바스크립트 파일이 타이핑되는 것을 빼고는 동일
- (ECMAScript 버전 신경 안쓰고 common.js방식의 require/export방식 사용 등)
- babel: 자바스크립트 파일을 원하는 형태로 트랜스파일링
- (esm방식의 import/export, 개발시에는 es6 이상의 자바스크립트 버전을 사용하고 결과물은 es5 버전을 원할 때 등)
3) babel과 함게 사용하기: 패키지 설치
- 프로그램이 실행되기 전 컴파일 단걔에서 사용될 라이브러리들이므로 devDependencies로 설치
- @babel/cli: cli에서 babel 명령어를 사용할 때 필요
- @babel/core: 트랜스파일링 하는데 사용되는 주요 코드들이 담긴 라이브러리
- @babel/plugin-transform-runtime: 폴리필이 필요할 때 바벨 내부의 헬퍼 함수 사용하게 해주는 라이브러리
- @babel/preset-env: 바벨 플러그인들을 합쳐놓은 번들파일
- @babel/preset-env-typescript: 타입스크립트 환경을 위함 플러그인들을 합친 번들 파일
4) babel과 함게 사용하기: babel.config.js 파일 작성
- tsconfig.jspn의 compilerOption에서 isolatedModules옵션을 true로 설정
- 타입을 export해서 값처럼 쓰는 등, babel이나 swc등의 트랜스파일러를 사용했을 때 트랜스 파일러가 잘못 사용되는 것을 방지
4. Node.js 프레임워크 Nest.js소개
1) nest.js 소개
- express나 fastify에서 사용가능한 platform agnostic(플랫폼 비종속적) 프레임워크
- 다양한 서버 개발가능(graphQL, REST, CLI, MVC)
- Angular에 영향을 받은 깔끔하고 견고한 아키텍쳐
- TS, jest, lint, code generator cli지원
- 다양한 플러그인(testing, swagger, etc)
2) nest.js 구조
- 모듈을 조칩 추가할 수 있음
- 모듈끼리 의존할 수 있으며, 전체 모듈을 아우르는 모듈을 만들 수도 있음
3) nest.js 설계 패턴
- Dependency injection
- 의존하는 클래스를 자신의 생성자 함수에서 생성하지 않고, 외부에서 인스턴스를 주입받는 형태로 변경
- 여러 인스턴스가 생기지도 않고, 주입하기 전 인스턴스화 할 때만 변경된 생성 로직을 작용하면 됨
4) 데코레이터(injectable, inject)
- nest.js에서는 dependency injection을 데코레이터를 통해서도 가능
- 데코레이터를 사용함으로써 생성 로직을 작성하는데 드는 비용을 절감
5. Nest.js로 커피 주문앱 개발하기
1) 프러젝트 생성 & 실행
- [1] nest.js cli 설치 - npm i -g @nestjs/cli
- [2] 프로젝트 생성 - nest new 프로젝트이름
- [3] 프로젝트 실행 - yarn start
2) 프로젝트 구조
- ㅏ README.md
ㅏ nest-cli.json : nest-cli에 대한 설정파일
ㅏ package.json
ㅏ [src]
| ㅏ app.controller.spec.js :
| ㅏ app.controller.js : AppModule에 들어오는 요청을 라우팅
| ㅏ app.module.js :
| ㅏ app.service.js : 라우팅되는 요청을 핸들링하는 코드, 비즈니스 로직이 들어가는 코드
| ㅏ main.js : 서버를 시작하는 메인 파일
ㅏ [test]
| ㄴ app.e2e-spec.ts
| ㄴ jest-e2e.json
ㅏ tsconfig.build.json : nest에서 코드를 build할 때 사용하는 tsconfig 설정 파일. 없으면 nest에서 build할 때 오류 발생
ㅏ tsconfig.json
ㄴ yarn.lock
3) express와 차이점
- 아키텍쳐에 대한 고민들 하지않아도 된다.
- 의존성 주입이 간편
- ts 지원, jest, eslint, prettier 등 기본설정이 다 되어있다.
- espress 또는 fastify를 유연하게 선택할 수 있다.
6. Nest.js에서 타입스크립트를 유용하게 사용하기
1) 파라미터 데토레이터로 validation
- nest.js의 custom decorator로 간편하게 구현 가능
- ts에서 파라미터 벨리데이션을 하려면 reflect-data라이브러리를 사용하여 parameter decorator와 method decorator를 정의하여 함께 사용했어야한다.
2) custom provider: non-class-based provider tokens
- interface를 만들어서 class에서 implements하고 해당 interface를 주입하고 싶은 경우 사용
- interface는 js파일로 트랜스파일링 되면 없어지는 타입
- 값으로 쓰일수 있는 토큰(문자열, 심볼)을 사용해 대신 주입
'타입스크립트' 카테고리의 다른 글
| Typescript 공부하기 11일차 (2022.10.27) (0) | 2022.10.28 |
|---|---|
| Typescript 공부하기 10일차 (2022.10.25) (0) | 2022.10.26 |
| Typescript 공부하기 8일차 (2022.10.02) (0) | 2022.10.02 |
| Typescript 공부하기 7일차 (2022.09.30) (1) | 2022.09.30 |
| Typescript 공부하기 6일차 (2022.09.29) (0) | 2022.09.29 |