[TIL] 2023-02-23

REST API 서버를 만드는 연습을 위해 Nodejs 기반 웹 프레임워크 익스프레스를 사용함

• Node.js - 웹 브라우저의 자바스크립트 엔진 부분만 떼어 내어, C/C++언어로 HTTP 프로토콜을 구현하여 독립적인 프로그램 형태로 동작하는 웹 서버 기능을 가진 자바스크립트 엔진을 구현한 것

  • http 패키지 기본 제공 - createServer 함수 제공 - 웹 서버 객체

    import {createServer} from 'http'
    	const hostname = "localhost", post = 4000
    	createServer((req, res) => {
    		res.write("Hello World");
    		res.end();
    	}).listen(port, () => console.log(`connect http://${hostname}:${port}`));
    		```

• REST 방식 API 서버

  웹 서버는 원래 웹 브라우저와 같은 HTTP 클라이언트에게 HTML 형식의 데이터를 전송해주는 목적으로 설계되었지만, 점차 HTML이 아닌 JSON 형식의 데이터를 전송해 주는 방식으로 진화되었습니다.
  이 두 방식을 구분하기 위해 HTML 형식 데이터를 전송하는 서버를 웹 서버, JSON 형식 데이터를 전송하는 서버를 API 서버라고 합니다.

  • Create - POST, Read - GET, Update - PUT, Delete - DELETE
  
  

• 익스프레스 프레임워크 express framework
  Node.js 환경 표준 웹 프레임워크 (express, cors 패키지 설치)

  • 익스프레스 REST API 웹 서버

    import {createServer} from 'http'
    import express from 'express'
       
    const hostname = 'localhost', port = 4000
    
    // app.메서드명(경로, (req, res) => {})
    const app = express()
     .get('/', (req, res) => {
       res.json({ message: 'Hello express World!' })
    });
    
    createServer(app).listen(port, () => console.log(`connect http://${hostname}:${port}`));

  • 익스프레스 미들웨어, use 메서드
    익스프레스 객체 app은 use 메서드를 제공하며, use 메서드의 매개변수로 사용되는 콜백 함수를 미들웨어라고 한다.

  • express.static 미들웨어
    익스프레스 객체가 public 디렉터리에 있는 .html, .css, .js, .png와 같은 파일을 웹 브라우저에 응답할 수 있게 하는 정적 파일 서버로 동작할 수 있게 함.

  • express.json 미들웨어
    웹 브라우저에서 동작하는 리액트 코드는 다음 코드 형태로 HTTP POST 메서드를 통해 body 부분의 데이터를 서버로 전송할 수 있음

    fetch(url, {
    	method: 'POST',
    	headers: {'Content-Type': 'application/json'},
    	body: JSON.stringify(data)
     })

    익스프레스는 이렇게 전달받은 데이터를 req.body 형태로 얻을 수 있음

  • cors 미들웨어
    자바스크립트 코드에서 HTTP POST 메서드로 데이터를 보낼 때 프리플라이트preflight요청과 응답 통신 기능을 추가하여, 악의적인 목적의 데이터를 POST나 PUT 메서드로 서버 쪽에 보내지 못하게 하는 기술

    fetch(url, {
    	method: 'POST',
    	mode: 'cors',
    	cache: 'no-cache',
    	credentials: 'same-origin',
    })

    ---

    종합 코드 예제

  import express from 'express'
  import cors from 'cors'
  
  export const createExpressApp = (...args: any[]) => {
    const app = express();
  
    app
      .use((req, res, next) => {
        console.log(`url='${req.url}, method=${req.method}`);
        next();
      })
      .use(express.static('public'))
      .use(express.json())
      .use(cors())
      .get('/', (req, res) => {
          res.json({message: 'Hello express World!'});
      });
  
    return app;
  
  }