[TIL] Refactor Express

Captainjack·2021년 5월 5일

목록 보기

28/260

Express.js는 Node.js 환경에서 웹 어플리케이션 혹은 API를 제작하기 위해 사용되는 인기있는 프레임워크이다.

Node.js 모듈(http 모듈)로 작성했던 http 서버를 express서버 프레임워크를 통해서 리팩토링 해보자

먼저 설치해야 될 것이 있다.

npm install express --save
//--save 옵션을 통해 설치된 Node 모듈은 package.json 파일 내의 dependencies 목록에 추가됩니다. 
//이후 app 디렉토리에서 npm install을 실행하면 종속 항목 목록 내의 모듈이 자동으로 설치됩니다.

express를 설치
https://expressjs.com/
(*아래쪽에 언어를 한글로 바꿀 수 있는 설정이 존재한다.)

npm init명령어로 package.json파일을 만들 수 있는데, 옵션 설정은
https://docs.npmjs.com/cli/v7/configuring-npm/package-json
이곳에 자세하게 기술되어있지만

npm init -y 
//모든 옵션을 기본으로 설정한채 만들어준다.(y는 yes의 축약형)

일단 기본으로 설정하는 법을 익혔다.

처음으로 돌아가 리팩토링을 진행하기 위해서 라우팅 분기를 잡아 줘야한다.

라우팅? method, url을 이용한 분기 (조건문이라고 생각)

그리고 미들웨어가 이 역할을 해준다. (변수.use(cors()))

미들웨어?

인형을 만드는 컨베이어 벨트를 떠올려보자 첫부분에서는 눈을 붙이고
다음 부분에서는 다리를 붙이고 그 다음에는 손을 붙이고 일정방향이 흘러가는 대로 각각의 파트 끝에 인형이라는 완성품이 된다.

각각의 파트를 미들웨어라고 보면 된다.

https://expressjs.com/ko/guide/using-middleware.html
(작성방법에 관한 링크)

먼저 require을 이용해서 express를가져온다.

const express = require('express');
const app = express();

app.use(express.json()); 
//JSON형태로 오는 요청의 payload(body)를 쉽게 받게 해주는 것 with 파싱

messages = [{id: 1, username: '김코딩', text: 'hello world'}];


==========================
app.get('/', (req,res) => {
	res.status(200).json(messages) 
	//json메서드에 .send()문이 내장되어있어서 send없이 사용해도 응답이 잘 된다.
	// '/' 부분은 url이다.
	// statuscode 200의 요청을 Content-Type: application/json으로 한다.
	
})
// 이런식으로 쓰면 http://localhost:3000/todo/이부분에 무슨 숫자가와도 전부다 처리가가능!
app.get('/todo/:id', (req, res) =>{
	console.log(req.params);
	res.send('Hello World');
})
===========================

app.post('/messages', (req, res)=>{
	console.log*(req.body)
	res.send('success post');
})

// body를 받는 다른 방식
app.post('/', (req,res) => {
	const id = messages.length + 1;
    messages.push({
		id,
		...req.body
	})
	res.status(201).json({ id })
})

=================================

이번엔 테스트를 하기위해 포스트맨으로 포스트를 보내보자.

포스트맨으로 post 요청을 JSON 보낼 때 설정하는 부분.
특히 body부분에 값은 전부 ""로 처리해줘야한다.

이런식으로 포스트 발송하면

값이 오게 된다.

또,

클라이언트와통신하기 위해서 Origin을 설정해야하는데

원래 Node.js모듈식을 보면


server.listen(PORT, ip, () => {
  console.log(`http server listen on ${ip}:${PORT}`);
});

const defaultCorsHeader = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
  'Access-Control-Allow-Headers': 'Content-Type, Accept',
  'Access-Control-Max-Age': 10
};

굉장히 길고 비효율적인데 이걸 express로 리팩토링을 하면

const cors = require('cors')

// 생략
app.use(cors()) // 모든 요청에 대해 CORS 허용

단 한줄로 줄일 수 있다.

app.use()문법은 항상 모든 url에 적용되는걸 기억해준다.

또한, 이러한 미들웨를 작성도 할 수 있는데,
https://expressjs.com/ko/guide/writing-middleware.html

var express = require('express');
var app = express();

var myLogger = function (req, res, next) {
  console.log('LOGGED');
  next();
};

app.use(myLogger);

app.get('/', function (req, res) {
  res.send('Hello World!');
});

app.listen(3000);