[과제] Mini node server

과제 목표

클라이언트의 액션(버튼 클릭)에 따라 각기 다른 HTTP 요청이 서버로 들어오면, HTTP 요청에 담아 보낸 단어를 소문자 또는 대문자로 응답하는 서버를 구현합니다.

 

 

참고 문서

HTTP 트랜잭션 해부

https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction

 

내가 겪은 시행착오와 새로 알게 된 것

 

서버 입장에서 생각하기

계속 프론트엔드의 관점에서만 생각하다 보니 내가 서버를 구현해야 한다는 사실 자체가 낯설었다.

생각이 자꾸 '내가 왜 요청을 받지???'라는 물음으로 돌아가서 이걸 바꾸는 데 시간이 좀 걸렸다.

 

node.js의 http 처리 과정

createServer를 이용해 서버를 생성한다.

이때 규정되는 request, response 객체에 담긴 메서드로 요청의 내용을 확인하고 응답을 보낼 수 있다.

 

메서드, url, 헤더 받기

const { method, url } = request;
const { headers } = request;
const userAgent = headers['user-agent'];

요청의 메서드, url, 헤더 받기는 어렵지 않다.

request 객체 안에 잘 담겨 있으므로 가져다 쓰기만 하면 된다.

 

요청 바디 받기

let body = [];
request.on('data', (chunk) => {
  body.push(chunk);
}).on('end', () => {
  body = Buffer.concat(body).toString();
  // 여기서 `body`에 전체 요청 바디가 문자열로 담겨있습니다.
});

바디를 받아오는 작업은 좀 더 복잡하다.

아직 이 코드에 담긴 on 메서드의 작동 원리를 완벽하게 이해하지는 못했고,

이런 방식으로 요청 바디에 접근할 수 있다는 것 정도만 알게 되었다.

request객체가 상속받은 incomingMessage가 상속받은 Stream의 on메서드는 비동기적으로 작동한다.

그래서 첫번째 on 메서드에서 데이터를 다 받아오고 더 이상 받아올 것이 없게 되면

두번째 on 메서드에서 받아온 정보를 바탕으로 작업을 해야 한다.

그런데 두 on 메서드의 스코프가 다르기 때문에 전역 변수 body를 선언해서 

그 변수에 조작을 해주는 방식으로 해야 정상적으로 작동하게 된다.

 

CORS 설정하는 응답하기

요청의 내용을 받아오는 것까지 해결하고 응답을 줄 차례가 되었을 때,

바로 POST 요청에 따른 응답만을 조건화해줬는데 그러니까 실행이 잘 되지 않았다.

그 이유는 프리플라이트 요청에 대해 먼저 CORS 응답 헤더 설정을 해줬어야 하는데 이 부분을 빼먹어서

프리플라이트에서 요청이 끝나버리고 POST 요청으로 넘어가지 못한 것 때문이었다.

  if (method === "OPTIONS") {
    response.writeHead(200, defaultCorsHeader);
    response.end("hello mini-server sprints");
  }

위와 같이 메서드가 OPTIONS일 때를 조건화해줌으로써 해결했다.

그런데 end 메서드가 없으면 응답이 잘 가지 않는다.

end에 쓸모없는 문자열을 넣지 않고 해결하는 방법은 없는지 궁금하다.

 

CORS 설정 방법

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,
};

이번 과제에서 기본으로 제공된 CORS 설정은 위와 같이 되어 있었다. 이 설정을 첫째줄부터 해석하면 모든 도메인에서 해당 서버로의 접근을 허용하고, GET, POST, PUT, DELETE, OPTIONS 메서드를 허용한다. 또, "Content-Type"과 "Accept" 헤더를 허용한다. 마지막으로, 이 설정은 10초 동안 프리플라이트 요청 결과를 캐시하여 다음 요청에서 재사용할 수 있도록 한다.

이렇게 설정을 해줬기 때문에 프리플라이트가 가고 난 뒤 본요청인 POST 요청을 할 때도 똑같이 헤더 설정을 해줘야 한다(페어님의 실수에서 배웠다 ㅋㅋ)