TIL : Chatterbox Server

앞서 진행했던 chatterbox client는 fetch API를 활용해 이미 만들어진 AWS 서버와 연결했었는데 이번에는 직접 Node.js에서 서버를 구축하는 스프린트를 진행했다.

---

1. Node Debugging

- postman을 이용해 디버깅을 진행할 수 있다.

 

Postman - GET

 

Postman - POST

 

- package.json에서 npm start 내용을 '--inspect'를 이용해 "start": "nodemon --inspect server/basic-server.js"로 바꿔주면 크롬창에서 새로운 디버깅을 할 수 있다.

 

※ 참고 사이트 : nodejs.org/ko/docs/guides/debugging-getting-started/

---

2. Chatterbox Server

클라이언트는 chatterbox client의 파일을 받아오고 이번 스프린트는 서버 위주로 진행했다. 이때 클라이언트에서 server URL만 원격 주소에서 나의 로컬 주소(http://localhost:3000/)로 변경해주었다.

2021.04.29 - [TIL 👩🏻‍💻] - TIL : Chatterbox Client

 

basic-server.js에서는 require('')를 이용해 request-handler.js 파일과 연결해주고 나머지는 request-handler.js 파일에서 작업한다.

const data = { results: [] };

const requestHandler = function (request, response) {
  const headers = defaultCorsHeaders;
  headers["Content-Type"] = "application/json";
  // 응답 헤더에 응답하는 컨텐츠의 자료 타입을 헤더에 기록

  if (request.method === 'OPTIONS') {
    // CORS 설정을 돌려줘야 한다.
    response.writeHead(200, headers);
    response.end();
  }

  else if (request.method === 'GET' && request.url === '/messages') {
    response.writeHead(200, headers);
    response.end(JSON.stringify(data));
  }

  else if (request.method === 'POST' && request.url === '/messages') {
    let body = [];
    request.on('data', (chunk) => {
      body.push(chunk);
    }).on('end', () => {
      body = Buffer.concat(body).toString();
      data.results.push(JSON.parse(body));
      response.writeHead(201, headers);
      response.end(JSON.stringify(data));
    });
  }

  else {
    response.writeHead(404, headers);
    response.end();
  // 노드 서버에 대한 모든 요청은 응답이 있어야 한다. 
  // response.end 메서드는 요청에 대한 응답을 보내준다.
  }
};

const defaultCorsHeaders = {
  "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 // Seconds.
};

module.exports = requestHandler;

=> 코드를 모두 작성하고 postman으로 확인해보면 GET, POST 모두 잘 전송되는 것을 알 수 있다. 아직 진행하지 못한 어드밴스드 부분도 해 보고 싶다!! (HA 끝나면 해봐야겠다!)

- fs 모듈을 이용해 서버가 메시지들의 목록을 파일로 저장하기 (서버가 재시작해도 메시지 목록을 불러올 수 있다.)

- socket.io를 이용해 새로 작성해 보기 (실시간 통신을 지원하므로 새로운 메시지를 fetch하기 위해 setInterval을 사용할 필요가 없어진다.)

- 정적파일, 즉 HTML 및 Javascript 파일을 제공할 수 있도록 하기 (클라이언트 파일을 따로 브라우저에 열지 않고, 단지 URL http://127.0.0.1에 접속할 때, 클라이언트 페이지가 뜨도록 만드는 것)