NestJS를 위한 express 핵심 원리

https://www.inflearn.com/course/%ED%83%84%ED%83%84%ED%95%9C-%EB%B0%B1%EC%97%94%EB%93%9C-%EB%84%A4%EC%8A%A4%ED%8A%B8/dashboard

탄탄한 백엔드 NestJS, 기초부터 심화까지 - 인프런 | 강의

윤상석 님의 NestJS 강읠르 토대로 한 기록 포스팅 입니다.

웹 앱 아키텍쳐와 HTTP 프로토콜

구글.com 혹은 네이버.com을 주소창에 치면 해당 주소에 해당하는 서버 컴퓨터를 찾는다.

그 후 html,css,js로 이루어진 프론트 파일들이 다운받아져 화면에 그리게 된다.

로그인, 검색과 같은 버튼을 클릭하면 프론트에서 이벤트가 등록이 되고 프론트엔드는 해당 이벤트에 대한 api를 서버에 보내게된다.

그리고 api를 받은 서버는 해당 api에 맞는 비지니스로직에 맞게 데이터베이스에서 정보를 가져와 다시 프론트로 보내고

마지막으로 브라우저한테 씌워준다.

NestJS를 위한 express 핵심원리

express공식 문서 https://expressjs.com/

package.json

{

"scripts": {

"build": "tsc", //루트 경로에서 tsconfig.js를 읽어서 그 옵션에 맞게 컴파일을 한다.

"start:dev": "tsc-watch --onSuccess \"node dist/app.js\"", // 터미널에 npm run start: dev를 치면 초록명령어 실행

// tsc로 파일을 지켜보다, 성공을 했으면 다음 오른쪽 명령어를 실행.//node로 dist안에 있는 app.js실행

"prestart": "npm run build",

"start": "node dist/app.js" //npm run start 를 하면 자동으로 prestart가 먼저 실행이 된다.

},

"devDependencies": {

"@types/node": "^15.3.0", // node라는 js런타임의 type들을 가져온다. typescript사용을 위해

"prettier": "^2.2.1", // 코드를 포맷팅해준다,

"tsc": "^2.0.3", // 타입스크립트 컴파일러

"tsc-watch": "^4.2.9", // 계속 파일을 지켜보고있다, 파일이 변경되면 자동으로 컴파일시켜준다.

"typescript": "^4.3.4" // 타입스크립트를 버전에 맞게 하기 위해 devDependencies에 넣

},

"dependencies": {// 실제 배포 할떄 사용한느것들

"express": "^4.17.1"

}

}

tsconfing.json

{

"compilerOptions": {

"strict": true,

"module": "commonjs",

"declaration": true,

"removeComments": true,

"emitDecoratorMetadata": true,

"experimentalDecorators": true,

"allowSyntheticDefaultImports": true,

"target": "ES5",

"sourceMap": true,

"outDir": "./dist",

"baseUrl": "./src",

"incremental": true

},

"include": ["src/**/*"] // 어떤 것을 컴파일할지 적어준다. // src의 하위 모든 폴더,파들을 컴파일한다

}

결국 우선 express를 쓸때 npm run start:dev로 열어줄것이다.

npm run start를 하게 되면 prestart가 먼저 실행 된다.

그럼 결국 tsc는 루트 경로에서 tsconfig.json을 읽어서 옵션에 맞게 컴파일한다.

dist의 경우 tsconfig.json에서 컴파일 옵션에서 설정해준 폴더인데 그 해당 옵션에 따라 컴파일을 마치게 되면,

dist라는 폴더가 생기게 되고 dist안에 타입스크립틀르 컴파일해나도 js파일들이 결과물로 나오게 된다.

--> src폴더를 전부 열어 컴파일을 시켜준다음에, 컴파일한 결과를 dist파일에 옮긴다 그리고 dist폴더에 있는 app.js가 실행

npm i express --save

npm i @types/express -D // 결국 start를 통해서 서버에서 결국 node로 js로 실행을 시켜줄것인데 개발할때만 타입스크립트를 쓴다.

app.get("/test", (req: express.Request, res: express.Response) => {

console.log(req);

res.send({ hello: "world" });

});

이런걸 라우터라고 하며

클라이언트나 프론트가 백엔드한테 요청을 한다.

데이터 모킹이란?

테스트를 실행하기 위해 실제 데이터가 아닌 개발자가 필요에 의해서 만든 데이터이다.

미들웨어 ==> next를 추가하면 된다.

#로깅 미들웨어 use !!

app.use((req, res, next) => {

console.log(req.rawHeaders[1]);

console.log("this is logging middleware");

next();

});

이런걸 미들웨어라고 하며 next 함수가 다음 라우터가 실행이 되도록 한다.

미들웨어는 순서가 중요하다.

app.get("/cats/som", (req, res, next) => {

console.log("this is som middleware");

next();

});

위 코드도 미들웨어의 역활을하며 /cats/som/으로 넘어간다

app.use((req, res, next) => {

console.log("this is error middleware");

res.send({ error: "404 not found error" });

});

app.listen(port, () => {

console.log(`Example app listening on port ${port}`);

});

라우터의 마지막에 이렇게 아무런 url이 들어간 경우 이렇게 에러 처리를 해줄수있다.

.get('/cats/:id', (req, res) =>

:id를 통해 파라미터를 받을 수 있다.

분명 body를 가져 왔지만 콘솔에는 undefine이 나온다 그 이유는 express에서 body를 읽을수 있도록 즉, jsond을 읽을 수 있도록

미들웨어를 추가 해 줘야한다.

//* json middleware

app.use(express.json()); 이게 하나의 미들웨어 이다. 거진 가장 상단에 두어야 한다.

express에서 데이터 추가를 위한 post를 쓰기 위해서는 즉, express에서 body를 읽을수 있도록.

express.json이라는 미들웨어를 사용해야한다.

#라우터 때어내기

import { Router } from 'express';

const router = Router(); // 라우터 인스턴스 만들기.

이렇게 라우터를 express에서 하나 가져와서 router 하나로 묶는다.

export default router; // 그리고 등록된 라우터들 export 시켜준다.

그리고app.js에서 미들웨어 등록한다.

싱글톤 패턴

객체의 인스턴스가 오직 한개만 생성되게 한다.

싱글톤 패턴 사용 이유 : 추후 객체의 접근 시 메모리 낭비를 방지할 수 있다.

lisen에서 미들웨어 들을 다 세팅해준다.

라우트에 서비스패턴을 적용=> 서비스를 분리 하여 가독성과 유지보수를 down