Simple API server with http module(2)

2. http 모듈로 westagram API 빌드하기

위스타그램(Westagram) 웹 시스템을 개발해서 서비스하는 가상의 스토리를 가정한다.

Westagram Backend API 시스템 아키텍처:
Client의 요청을 받는 Node.js based API + MySQL based database

목적

• 데이터베이스 없이 API에만 데이터를 저장했을 때 발생하는 여러가지 문제점을 체감한다
• 데이터베이스 없이 Client(크롬 브라우저)와 Node.js 기반으로 API 통신 확인.

2-1. API 기능 정의

위스타그램에 필요한 백엔드 API의 기능:

• 서버의 건강상태 확인 요청(Health check) 처리
• 회원가입 생성 요청 처리 및 결과 반환
• 게시물(피드) 생성 요청 처리 및 결과 반환
• 게시물(피드) 목록 조회 요청 처리 및 결과 반환
• 특정 게시물(피드) 조회 요청 처리 및 결과 반환
• 특정 게시물(피드)에 댓글 생성 요청 처리 및 결과 반환
• 특정 게시물(피드)에 댓글에 댓글 생성 요청 처리 및 결과 반환
• 특정 게시물(피드)에 달린 댓글 목록 조회 요청 처리 및 결과 반환

2-2. API 코드 작성⭐️

요약

• 
• 

2-2-1. HTTP server 객체 생성

ex) 클라이언트에게 Hello World!를 반환:

1. app.js라는 파일을 생성.
2. (1) http 웹서버를 만들기 위해서 Node.js 내에 내장되어 있는 http 모듈을 require()로 불러온다.
   require(): 자바스크립트 ES6의 import와 유사함.
   require 후, 해당 모듈을 http 라는 변수에 담아 하나의 객체로 사용.

// app.js
const http = require('http'); // (1)

3. (2) http 모듈에는 서버를 생성하는 기능(메서드)가 포함되어 있다

• createServer([options], requestListener)
  • options (선택) : client와 connection 유지 시간을 결정하는 keepAliveTimeout과 같음
  • requestListener 함수 (선택) : http request가 들어왔을 때, 실행되어야함. createServer() 메서드를 호출할 때 인자로 전달해줘도 되지만, 나중에 등록해줄 수도 있다.(이하, 나중에 등록하는 방식)

// HTTP 서버 객체 생성
const server = http.createServer(); // (2)

4. (3) Client에서 HTTP 요청이 들어왔을 때, 실제로 실행되는 함수(requestListner)를 정의한다.

• 매개변수 request, response : httpRequestListener 함수의 호출부 인자(arguments).
  실행 결과: { message: "Hello World!" } 메시지 반환.
  👉 http 요청을 받아 응답하는 함수를 만들어야 된다!
  👉 http 요청을 받았을 때, httpRequestListener 함수를 아직 실행할 수 없음.

// HTTP 요청(이벤트)이 발생하면 실행되는 Listener(함수) 정의
const httpRequestListener = function (request, response) { // (3)
    response.writeHead(200, { "Content-Type": "application/json" }); // (4)
    response.end(JSON.stringify({ message: "Hello World!" }));  // (5)
};

5. 서버가 http 요청를 이벤트(event)로 인식해서 http 요청 이벤트가 발생할때마다 httpRequestListener 함수를 실행할 수 있도록 이벤트로 등록하는 코드를 작성한다.
   : 서버는 클라이언트의 http 요청을 http request 이벤트로 인식한다!

// http request가 발생하면 httpRequestListener가 실행될 수 있도록 
// "request" 이벤트에 httpRequestListener(함수) 등록
server.on("request", httpRequestListener); // (6)

이벤트가 등록되는 순서⭐️

1. http.createServer() 메서드 실행 결과
   반환된 서버 객체가 가지고 있는 on() 메서드를 사용해 이벤트를 등록.
2. on() 메서드를 호출 시, 인자로 "request"라는 문자열과 httpRequestListener 함수를 전달.
3. server.on(“request”, httpRequestListener) 메서드를 호출 시, server 객체에 "request" 이름으로 이벤트가 등록되게 된다.
4. 이후에 서버로 실제로 http 요청이 들어오면, "request" 이름으로 등록된 httpRequestListener 함수에 인자로 클라이언트의 요청에 대한 정보가 담긴 request 객체와 응답에 대한 정보가 담긴 response 객체를 넘겨주면서 내부 로직이 실행된다.
5. 그래서 httpRequestListener 함수의 블록({}) 내부에서는 request와 response로 넘어오는 어떤 값을 사용할 수 있게 된다.
6. 이렇게 전달받은 response 객체 내부의 여러가지 메서드(wrtieHead, end, 등)를 호출해서 클라이언트에게 응답을 보낼 수 있다.

2-2-2. response 객체

response 객체: 서버로 웹브라우저나 또는 앱으로 부터 어떤 요청이 있을 때 요청한 사용자 측으로 값을 반환해 줄 때 사용하는 객체.

(4) response.writeHead() 메서드

response.writeHead(200, {'Content-Type':'application/json'}); // (4)

• 첫번째 200:

  • 웹서버 들어오는 어떤 요청에 대해 정상적으로 값을 리턴할 때 사용하는 http 상태코드.
  • 오류 없이 서버에서 처리가 정상적으로 완료되면 200 코드를 담아 응답헤더를 설정해준다.

• 두번째 {'Content-Type' : 'application/json'}:

  • response message의 body에 담기는 컨텐츠의 타입이 application/json 형식이라는 것을 정의한다.
  • 브라우저에서는 Content-Type 헤더를 기준으로 값을 json 형태로 화면에 출력.
  • { } 블럭에는 복수의 값을 담을 수 있다.
  • 그외에도 Authorization, Cookie 등의 다양한 값을 지정할 수 있다

(5) response.end( ) 함수

response.end(JSON.stringify({ message: "Hello World!" }));

• { message: "Hello World!" } 객체를 response message의 body에 담아서 클라이언트에 반환한다.
• 실제 코드 값을 end( ) 함수의 인자로 전달해서 호출하면 브라우저는 해당 컨텐츠를 받은 후 json 형태로 화면에 출력해 준다.

2-2-3. request 객체

request 객체: 요청을 보낸 클라이언트와 관련된 데이터가 담겨있는 객체

• 클라이언트의 IP, 요청에서 사용한 URL, HTTP Method(GET, POST, DELETE, PATCH).

// app.js
const httpRequestListener = function (request, response) {
  console.log(`request object : ${request}`) // 클라이언트 정보 획득
  
  response.writeHead(200, { "Content-Type": "application/json" });
  response.end(JSON.stringify({ message: "Hello World!" }));
};

request 객체를 출력해보고,
API 구현에 필요한 request.url, request.method 속성을 알아보자

2-3. HTTP server 실행

컴퓨터와 컴퓨터가 통신하려면?

1. IP 주소, 포트 번호를 사용한다!

• 서버에는 여러가지 애플리케이션(크롬, 카카오톡, http 서버(API))이 각 고유한 포트 번호를 가지고 실행되고 있다.
• http://IP 주소:포트 번호 : 클라이언트에서 서버로 요청 보낼 때

2. (7) server.listen(포트 번호, IP 주소, 콜백함수) 메서드

• server 객체에서 제공
• Node.js에서 클라이언트의 요청 수신을 대기도록 서버를 실행시킨다

server.listen(8000, '127.0.0.1', function() { // (7)
    console.log('Listening to requests on port 8000');
});

• 생성된 서버가 8000 포트를 수신 포트(listening port)로 바라보고 http 수신을 대기한다.
• listen() 함수를 호출해 server가 해당 포트를 리스닝하면서 수신을 대기한다.
  • listen(): 시간이 걸릴 수 있는 작업이므로 callback으로 비동기 동작한다.
    listen 완료 👉 callback 실행: 'Listening to requests on port 8000'

3. 터미널에서 node.js로 app.js 파일을 실행한다.

$ node app.js
Listening to requests on port 8000

2-3. 서버에 요청 보내기

2-3-1. Client 툴 설치

httpie : http 요청을 보내는 개발용 클라이언트 도구

#Ubuntu
$ sudo apt install httpie
#Mac
$ brew install httpie

2-3-2. HTTP 요청 보내기

$ http -v GET 127.0.0.1:8000

이 과정을 택배 배송에 비유한다면..
택배원(Client)이 배송 주소를 보고 물건(request)을 가지고 아파트(IP주소, 포트번호)까지 도달했고 이제 101동 1001호(엔드포인트)로 전달할 것이다

실행결과: