카테고리 없음

Refactor Express

Refactor Express 개요

Express - Node.js web application framework

Fast, unopinionated, minimalist web framework for Node.js $ npm install express --save

expressjs.com

Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크
웹 애플리케이션
- Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크입니다.
API
- 자유롭게 활용할 수 있는 수많은 HTTP 유틸리티 메소드 및 미들웨어를 통해 쉽고 빠르게 강력한 API를 작성할 수 있습니다.
성능
- Express는 기본적인 웹 애플리케이션 기능으로 구성된 얇은 계층을 제공하여, 여러분이 알고 있고 선호하는 Node.js 기능을 모호하게 만들지 않습니다.
Frameworks
- 많은 유명한 프레임워크들이 Express를 기반으로 하고 있습니다.

MERN stack은 JavaScript 생태계에서 인기 있는 프레임워크인 MongoDB, Express, React, Node.js를 지칭하는 말입니다. 이 중에서 Express는 Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 인기 있는 프레임워크입니다.
Express로 구현한 서버가 Node.js HTTP 모듈로 작성한 서버와 다른 점은 다음과 같습니다.
- 미들웨어를 추가할 수 있다.
- 라우터를 제공한다.

Express 설치

Express 공식 문서의 시작하기 - 설치 를 참고하세요.

npm install express

전에 진행했던 폴더에서 익스프레스를 설치하고 js파일을 수정했다.

express 리팩토링

이전에 진행했던 basic-server.js 파일의 코드

const http = require('http');
const PORT = 4999;
const ip = 'localhost';
const server = http.createServer((req, res) => {
  if (req.method === 'OPTIONS') {
    res.writeHead(200, defaultCorsHeader);
    res.end();
  }
  if (req.method === 'POST') {
    let body = [];
    req.on('data', chunk => body.push(chunk)).on('end', () => {
      body = Buffer.concat(body).toString();
      if (req.url === '/upper') body = body.toUpperCase();
      if (req.url === '/lower') body = body.toLowerCase();
      res.writeHead(200, defaultCorsHeader);
      res.end(body);
    });
  } else {
    res.statusCode = 404;
    res.end();
  }
});
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 express = require('express') // 모듈을 불러온다. // npm i express --save
const cors = require('cors') // cors 미들웨어를 불러온다.
 
const app = express(); // 서버를 만든다. 
app.use(cors()); // 모든 요청에 대해 CORS 를 허용한다. // npm i cors --save
app.use(express.json({strict: false})); // primitive data type 도 parsing 해주도록 설정
 
const port = 4999;   //app.js에서 포트번호 확인
const ip = 'localhost';
app.use(express.static('client'))
 
// GET
app.get('/', (req, res)=>{
  res.send('Hello world!');
})
 
// POST
app.post('/lower', (req, res) => {
  res.json(req.body.toLowerCase())
})

app.post('/upper' , (req, res) => {
  res.json(req.body.toUpperCase())
})

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

자주 사용하는 미들웨어(설치 방법)

body-parser : POST 요청 등에 포함된 body(payload)를 구조화할 때

npm i body-parser

※ body-parser는 이제 사용할 필요가 없어졌다. 왜? 최신버전에는 express안에 body-parser의 역할을 할 수 있게 업데이트 되었다. Express v4.16.0 부터는 body-parser를 따로 설치 하지 않고, Express 내장 미들웨어인 express.json()을 사용한다.

cors 모든 요청/응답에 CORS 헤더를 붙일 때

npm i cors --save

ode.js HTTP 모듈을 이용한 코드에 CORS 헤더를 붙이려면, 응답 객체의 writeHead 메서드를 이용할 수 있다. Node.js에서는 이 메서드 등을 이용하여 라우팅마다 헤더를 매번 넣어주어야 한다. 그뿐만 아니라, OPTIONS 메서드에 대한 라우팅도 따로 구현해야 한다. cors 미들웨어를 사용하면 이 과정을 간단하게 처리할 수 있다.

저작자표시 비영리 변경금지

Contents

새소식

인기 검색어

Refactor Express