[TIL] 네트워크 - Node.js HTTP 처리

드디어 서버 학습에 들어갔다. 여기서 부터 확실히 성향이 갈리는 것 같다. 이전에 리엑트 프런트단 할때 재밌고 이것저것 해보고 싶었는데 서버는 화면에 시각적으로 무언가 출력되기 보다는 콘솔과 네트워크창을 주로 읽어야 하니 어렵게 느껴진다. 나와는 반대로 오히려 서버가 더 재밌다는 분도 계셨다...

요청 메서드, 헤더를 읽어오고 응답 상태코드, 헤더를 설정하는 것은 이해가 되는데 응답/요청 바디 부분이 한눈에 이해되지 않는다. Stream과 Buffer의 개념에 대해 주말동안 추가적으로 학습해야 할 것 같다.

Today I Learned

Node.js 서버 HTTP 응답 코드 작성

참고자료 : Node.js HTTP Transaction

1. createServer로 웹 서버 객체 생성

const http = require('http');

const server = http.createServer((request, response) => {...});
// const server = http.createServer();
// sever.on('request', (request, response) => {...});

• 서버로 HTTP 요청이 올 때마다 request와 response 객체를 인자로 받는 createServer의 콜백함수가 호출된다.

2. 요청을 처리하기 위해 필요한 request의 프로퍼티들 읽어오기

// 헤더, 메소드, URL 읽어오기
const { header, method, url } = request;
// PUT이나 POST 요청을 받았을 때 요청 body 읽어들이기
let body = [];
request.on('error', (err) => {
  console.log(err); // 에러처리. 에러처리를 하지 않으면 프로그램에 문제가 생길 수 있다
}).on('data', (chunk) => {
  body.push(chunk); // chunk -> Buffer (raw binary data)
}).on('end', () => { // 모든 data가 받아졌을 때,
  body = Buffer.concat(body).toString();
  // concat(list) -> 여러 Buffer를 담은 list를 하나의 Buffer로 바꾸어줌
  // toString() -> Buffer를 사람이 읽을 수 있는 문자열로 바꾸어줌
  // 이제 읽어들인 data가 담긴 body로 원하는 작업을 할 수 있다
})

3. response 오류처리

response.on('error', (err) => {
  console.log(err);
})

• response 스트림도 error 이벤트를 발생시킬 수 있기 때문에 request 때와 마찬가지로 오류처리를 해야 한다.

4. 상태코드 & 응답 헤더 설정

response.writeHead(상태코드, {
  // '헤더이름1' : '헤더값1',
  //' 헤더이름2' : '헤더값2'
})
// 또는 따로 작성할 수도 있음
// response.statusCode = 상태코드;
// response.setHeader('헤더이름1' : '헤더값1');
// response.setHeader('헤더이름2' : '헤더값2');

5. 응답 바디 전송

response.write('보낼 데이터');
response.write('또 다른 보낼 데이터');
response.end();
// 또는 `end`에 모두 담아 보낼 수도 있음
// response.end('보낼 데이터 또 다른 보낼 데이터');

• 바디 데이터를 작성하기 전에 상태코드와 헤더를 먼저 설정해 주어야 한다.

6. 서버를 활성화 하고 특정 IP의 특정 포트로 받기

server.listen(포트번호, IP)

CORS 설정

참고자료 : MDN CORS

const http = require('http');

const server = http.createServer((request, response) => {
  // Preflight 처리
  if (request.method === 'OPTIONS') {
  	response.on('error', (err) => {
   	  console.log(err);
    });
    response.writeHead(204, {
      '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
    });
    response.end();
  }
  // request.method와 request.url에 따라 나누어 본 요청 처리
});

server.listen(5000, 'localhost');

• 주의! 실제 요청 응답에도 Access-Control-Allow-Origin 헤더를 설정해 주어야 한다. Access-Control-Allow-Methods와 Access-Control-Allow-Headers는 OPTIONS 요청(preflight 요청)에 응답에만 필요하다.