[Web Server] Express

Hyun Jin·2023년 2월 7일
0

1. Express 개요

  • MERN stack : JavaScript 생태계에서 인기 있는 프레임워크인 MongoDB, Express, React, Node.js
  • Express : Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 인기 있는 프레임워크
  • Express로 구현한 서버가 Node.js HTTP 모듈로 작성한 서버와 다른 점 :
    1. 미들웨어를 추가할 수 있다.
    2. 라우터를 제공한다.

2-1. Express 시작하기

**1. Express 설치**

설치하기

npm install express

**2. 간단한 웹 서버 만들기**

Express "Hello World" 예제

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 on port ${port}`)
})

**3. 라우팅: 메서드와 url에 따라 분기(Routing)하기**

기본 라우팅

애플리케이션의 홈 페이지인 루트 라우트(/)에서 POST 요청에 응답:

app.post('/', function (req, res) {
  res.send('Got a POST request');
});
코드스테이츠 예제 :

애플리케이션의 홈 페이지인 루트 라우트(/)에서 POST 요청에 응답:

app.post('/', function (req, res) {
  res.send('Got a POST request');
});

Chapter2-2. Middleware 1

미들웨어(Middleware) : 자동차 공장의 컨베이어벨트에 비유했을 때, 컨베이어 벨트 위에 올라가 있는 요청(Request)에 필요한 기능을 더하거나, 문제가 발견된 불량품을 밖으로 걷어내는 역할

express 의 가장 큰 장점

**자주 사용하는 미들웨어

  • 미들웨어를 사용하는 케이스 : POST 요청 등에 포함된 body(payload)를 구조화할 때(쉽게 얻어내고자 할 때) 모든 요청/응답에 CORS 헤더를 붙여야 할 때 모든 요청에 대해 url이나 메서드를 확인할 때 요청 헤더에 사용자 인증 정보가 담겨있는지 확인할 때

case 1. POST 요청 등에 포함된 body(payload)를 구조화할 때(쉽게 얻어내고자 할 때)

  1. Node.js로 HTTP body(payload)를 받을 때

  2. body-parser 미들웨어를 사용할 때

  3. Express v4.16.0 부터는 body-parser를 따로 설치 하지 않고, Express 내장 미들웨어인 express.json()을 사용

    const jsonParser = express.json();
    
    // 생략
    app.post('/api/users', jsonParser, function (req, res) {
    
    })

    Mini-Node Server 리팩토링을 진행하다가 express.json() 미들웨어 사용에 에러가 난다면? express.json([options])의 options에 해답이 있습니다.

    const jsonParser = express.json({strict: false});
    
    // 생략
    app.post('/api/users', jsonParser, function (req, res) {
    
    })

    options{strict: false}를 추가 했습니다. 어떤 의미인지 설명할 수 있어야 합니다.

    • The properties of the optional options object.
      - Property : strict
      : Description :Enables or disables only accepting arrays and objects; when disabled will accept anything JSON.parse accepts.
      : Type : Boolean
      : Default : true
      • express.json([options]) 번역(https://expressjs.com/ko/4x/api.html#express.json)
        (Express v4.16.0 이후로 지원)

        Express에 내장된 미들웨어 기능(function).
        JSON 페이로드로 들어오는 요청을 파싱하며, body-parser를 베이스로 만들어졌음.

        JSON 만 파싱하며 오직 Content-Type header 가 type option 과 일치하는 요청만 보는(look) 미들웨어를 리턴합니다.
        이 파서는 body 의 모든 유니코드 인코딩을 허용(accept)하고 gzip 및 deflate 인코딩의 자동 인플레이션을 지원합니다.

        parsed data 를 가지고 있는 새로운 body 는 미들웨어(즉 req.body) 이후에 오는 요청 객체로 채워지거나,
        파싱할 body가 없거나 Content-Type이 일치하지 않는 경우 빈 객체empty object ({})로 채워지거나,
        에러가 발생하게 됩니다.

        ! req.body의 모양은 사용자의 입력을 기반으로 하므로, 해당 객체 안의 모든 property 와 value 는 신뢰할 수 없으며 유효성 검사가 선행되어야 합니다.
        예를 들어 req.body.foo.toString()은 여러 방식으로 실패할 수 있습니다. 예를 들어 foo가 없거나 문자열이 아닐 수 있고 toString이 함수가 아니라 대신 문자열이나 기타 사용자입력일 수 있습니다.

case 2. 모든 요청/응답에 CORS 헤더를 붙여야 할 때

cors 미들웨어를 사용

  1. 모든 요청에 대해 CORS 허용

    const cors = require('cors');
    
    // 생략
    app.use(cors());
  2. 특정 요청에 대해 CORS 허용

    const cors = require('cors')
    
    // 생략
    app.get('/products/:id', cors(), function (req, res, next) {
      res.json({msg: 'This is CORS-enabled for a Single Route'})
    })

case 3. 모든 요청에 대해 url이나 메서드를 확인할 때

app.use 를 사용

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

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

app.use(myLogger);

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

app.listen(3000);

case 4. 요청 헤더에 사용자 인증 정보가 담겨있는지 확인할 때

HTTP 요청에서 토큰이 있는지를 판단하여, 이미 로그인한 사용자일 경우 성공, 아닐 경우 에러를 보내는 미들웨어 예제

app.use((req, res, next) => {
  // 토큰이 있는지 확인, 없으면 받아줄 수 없음.
  if(req.headers.token){
    req.isLoggedIn = true;
    next();
  } else {
    res.status(400).send('invalid user')
  }
})

Chapter2-3. Middleware 2

express 미들웨어 사용 정보

미들웨어를 작성하여 사용할 수도 있음.

[출처 : 코드스테이츠]

profile
새싹 프론트엔드 개발자

0개의 댓글