chatter box

📅 TIL #53



🎯 Achievement Goals


  • node.js의 내장 http 모듈을 사용할 수 있다.





👉 chatter box


이번 스프린트에서는 서버를 새로 만들고, 유저가 웹 브라우저에 접속하고 메세지를 보내고 읽을 수 있게 해주어야 하는 것이었다.

node를 본격적으로 배우면서 백엔드 개발의 맛보기(?) 식으로 공부를 했는데… 정말 어려웠다. 나는 백엔드가 더 재밌을 것 같고, 백엔드쪽으로 해보고 싶다는 생각을 했는데 이번 계기로 쉽지는 않을 것 같다는 생각이 확 들었다.

오늘 공부한 내용은 postman을 활용해서 테스트를 해보고, GET 메소드와 POST 메소드를 사용해보는 것이었다!

저번주 금요일과 코드 상으로는 큰 차이는 없지만 그래도 포스트맨을 활용한 점이 달랐다!


// 기본적으로 CORS를 만들어줬다.
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.
};
const headers = defaultCorsHeaders;
headers["Content-Type"] = "text/plain";

// 생략..
let obj = {results:[]}

if (request.url === '/messages' && request.method === 'GET') {
    response.writeHead(200, headers);
  // 파싱이 가능한 JSON 문자열로 돌려주었다.
    response.end(JSON.stringify(obj));
}

else if (request.url === '/messages' && request.method === "POST") {
    let body = [];
    request.on("data", (chunk) => {
      body.push(chunk);
    }).on("end", () => {
      body = Buffer.concat(body).toString();
      // 객체형태로 돌려주었다.
      obj.results.push(JSON.parse(body))
    })
    response.writeHead(201, headers);
    response.end("test");
}




그리고 위에 내용을 postman을 활용하여 데이터가 어떻게 전달되는지도 확인해보았다.


miniserver


이렇게 데이터도 조회를 해 볼수가 있었다!! 이런면에서 백엔드가 정말 신기하고 흥미로웠다. 이제 내일 express로 리팩토링 과정만 거치면 클라이언트-서버 아키텍쳐 스프린트는 끝이 난다. 그리고 드디어 리액트를 배우게 된다!!







🙌 느낀점


실제로 데이터가 어떻게 전달되는지 확인하는 과정이 정말로 흥미로웠다. 하지만 그만큼 여태 스프린트 중에서 제일 복잡하고 정리가 안되었다. node.js 의 http 모듈과 fs 모듈을 더 많이 공부할 필요성을 느꼈다.



👊 내일의 TIW(today I Will)

express