Daily Front_Minhhk

express refactoring MiniServer 본문

Code개발일지

express refactoring MiniServer

Minhhk 2022. 12. 14. 16:38

1.1. Express.js에서 할 수 있는 것

  1. 모든 요청에 대해 url이나 메소드를 확인할 때
  2. POST 요청 등에 포함된 body(payload)를 순수 node.js보다 더 간편하게 구조화하고 싶을 때
  3. 모든 요청/응답에 CORS 헤더를 붙여야 할 때
  4. 요청 헤더에 사용자 인증 정보가 담겨있는지 확인할 때
  5. Object 형태가 아닌 String 형태도 받을 수 있게 하려면 아래와 같은 처리를 해줘야 합니다.
const jsonParser = express.json({strict:false})

express.json 속성 중 strict의 디폴트 값은 true로 되어있어 Object만 허용되어 있는 상태이기 때문입니다.

1.2. res.json 과 res.send([body])의 차이

둘의 공통점은 클라이언트의 request에 대한 데이터를 포함해서 response를 보내는 기능입니다.

단, send는 json과 다르게 보낼 수 있는 종류의 제한이 적습니다.

1.3. CORS

1.3.1. 왜 필요한가?

서버가 허용한 클라이언트의 요청에만 응답하기 위해서 입니다.

Mini Node Server - Express

어제 > Mini Node Server라는 과제를 HTTP 모듈로 작성

오늘 >프레임워크 Express를 이용하는 방식으로 리팩토링이다!

Express는 프레임워크 자체에서 라우터 기능을 제공하고,

Express 내장 미들웨어인 express.json()를 사용하고,

cors 미들웨어를 사용하면 HTTP 모듈 보다 과정을 간단하게 처리할 수 있다.

라우터에 관해서는 보충해서 수정 하겠다!

//TODO npx nodemon server/basic-server.js -> 서버실행
//! express 구현
const express = require('express')

//? Object 형태가 아닌 String 형태도 받을 수 있게 하려면 아래와 같은 처리를 해줘야 합니다.
// express.json 속성 중 strict의 디폴트 값은 true로 되어있어 Object만 허용되어 있는 상태이기 때문입니다.
const jsonParser = express.json({strict: false});
const cors = require('cors');
const app = express();

// const router = express.Router()

const PORT = 4999;
const ip = 'localhost';

//루트 경로에 대한 라우팅 이후에 myLogger가 로드되면, 
//루트 경로의 라우트 핸들러가 요청-응답 주기를 종료하므로 
//요청은 절대로 myLogger에 도달하지 못하며 앱은 console.log(~)를 인쇄 못함

const myLogger = function (req, res, next) {
  console.log(`express request method is ${req.method}, url is ${req.url}`)

//? 현재의 미들웨어 함수가 요청-응답 주기를 종료하지 않는 경우에는 next()를 호출하여 
//?그 다음 미들웨어 함수에 제어를 전달해야 합니다. 그렇지 않으면 해당 요청은 정지된 채로 방치됩니다.  
next();
};

app.use(myLogger);

// 프리플라이트 관문
//TODO 모든 요청에 대하여 cors 설정
app.use(cors());

//?특정 도메인
// const options = {
//   origin: "<https://codestates.com>", // 접근 권한을 부여하는 도메인
//   credentials: true, // 응답 헤더에 Access-Control-Allow-Credentials 추가
//   optionsSuccessStatus: 200, // 응답 상태 200으로 설정
// };

// app.use(cors(options));

// //*특정 요청
// app.get("/example/:id", cors(), function (req, res, next) {
//   res.json({ msg: "example" });
// });

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

app.post('/upper', jsonParser, function (req, res) {
  //? Express의 공식문서에 req.body의 기본 값으로 undefined로 설정

  //? express.json() -> 미들웨어 역할을 한다
  //? application/json의 Content-Type에 대해 파싱해주는 역할을 한다.
  res.json(req.body.toUpperCase())
})

app.post('/lower', jsonParser, function (req, res) {
  res.json(req.body.toLowerCase())
})

app.use(function(req, res, next) {
  res.status(404).send('Sorry cant find that!');
});

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

'Code개발일지' 카테고리의 다른 글

[자료구조/알고리즘] 재귀 + 연습문제,,  (0) 2022.12.15
my-agora-states Server  (1) 2022.12.14
express, Middleware  (0) 2022.12.14
Web Server/ mininode Server  (0) 2022.12.08
Web Server (SOP, CORS)  (0) 2022.12.08