Mini Node Server

서버 실행 (서버 코드를 수정하고 저장했다면 프로그램을 매번 다시 실행해야 한다.)

node server/basic-server.js

매번 파일 실행하지 않고 npm start 명령어로 이용하는 방법

1. npm install nodemon 설치 후 package.json 의 scripts 에 아래 코드 추가

"start": "nodemon server/basic-server.js"

2. npx 로 nodemon 설치하지 않고 실행

npx nodemon server/basic-server.js

과제 시작하기

• POST에 문자열을 담아 요청을 보낼 때 HTTP 메시지에 body(payload) 를 이용한다.
• 서버는 요청에 따른 적절한 응답을 클라이언트로 보내야 한다.
• CORS 관리 헤더를 OPTIONS 응답에 적용해야 한다.
  ⇒ 클라이언트의 preflight request 에 대한 응답을 돌려줘야 한다.
  (preflight request 에 대한 응답은 이미 헤더에 작성되어 있음)

const http = require('http');

const server = http.createServer((request, response) => {

response.writeHead(200, defaultCorsHeader);

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

const http = require('http');
const PORT = 4999;
const ip = 'localhost';

const server = http.createServer((request, response) => {
  if(request.method === 'POST' && request.url === '/upper') {
    request.on('data', (chunk) => {
      body.push(chunk);
    // 대문자 응답을 돌려줘라
    }).on('end', () => {
      body = Buffer.concat(body).toString();
      response.writeHead(200, defaultCorsHeader);
      response.end(body.toUpperCase()); // 응답주기
    })
  // 메소드가 post고, url이 /lower면
  } else if (request.method === 'POST' && request.url === '/lower') {
    // 소문자 응답을 돌려주라
    request.on('data', (chunk) => {
      body.push(chunk);
    }).on('end', () => {
      body = Buffer.concat(body).toString();
      response.writeHead(200, defaultCorsHeader);
      response.end(body.toLowerCase()); // 응답주기
    })
  }
  else {
    // bad request 에러로 처리
    // response.writeHead(404, defaultCorsHeader);
    response.statusCode = 404;
    response.end();
  }
  console.log(
    `http request method is ${request.method}, url is ${request.url}`
  );
}
                                 
server.listen(PORT, ip, () => {
  console.log(`http server listen on ${ip}:${PORT}`);
});

const defaultCorsHeader = {
  // 출처 설정하는 헤더
  'Access-Control-Allow-Origin': '*', // 어떤 경로든 cors 처리해주겠다.
  // 허용할 메서드를 설정하는 헤더
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS', // 어떤 mothod 든 cors처리해주겠다.
  // 허용할 헤더를 설정하는 헤더
  'Access-Control-Allow-Headers': 'Content-Type, Accept', 
  // 프리플라이의 내용을 캐싱 설정 : 초 단위
  'Access-Control-Max-Age': 10
};

🧐 응답과 요청에는 헤더를 지정해줘야 하는데 이건 응답(end)가 되기 전에 나와야 함

⇒ 안그러면 에러가 노출됨

Error [ERR_STREAM_WRITE_AFTER_END] : write after end

🧐 stateless (메멘토 너낌~)

이전에 했던 작업을 기억을 못하는..
if 로 조건을 둬서 하면 다음 요청때 다시 사용할 수 없어서
매 요청마다 저 writeHead를 추가해줘야 함
⇒ 이전 프리플라이트에서는 통과했지만 다음 요청에서는 통과 못함(따로 처리를 해주지 않는한)
⇒ if문 안에 OPTIONS 만 writeHead처리를 해주면 프리플라이트는 성공되는데, fetch 는 에러남
그래서 if 없이 그냥 해줘도 되더라

if(request.method === 'OPTIONS') {
  response.writeHead(200, defaultCorsHeader);
}

🧐 body JSON일때, Content-type은?

fetch api 를 쓸 때 객체를 넣어주고,
body에 실제 데이터를 json 형태로 담아줄 때
headers 에 저 내용을 꼭 써줘야한다.
안써주면 서버에서 받았을 때 빈객체?로 보여질 수 있다.

post(path, body) {
  fetch(`http://localhose:4999/${path}`, {
    method: "POST",
    body: JSON.stringity(body),
    headers: {
      // 내가 보내는 형태의 파일?이 json 타입이다 라는 뜻
      "Content-Type" : "application/json",
    },
  })
  .then((res) => res.json())
  .then((res) => {
    this.render(res)
  })
}

🧐 request .on

body를 바로 찾아올 수 없어서 on 메서드를 붙인다.
이벤트 리스너 같은 걸 달아준다.
"data" 그 뒤에 부분이 콜백함수

request 에서 body 에 담겨진 데이터를 Buffer형태로 첫번째 인자에 넘겨주고 이걸 chunk 로 받겠다.

chunk 는 실제 데이터 형태가 아니고 Buffer 형태를 띈다.

Buffer는? 데이터를 임시로 담아두는 형태

request.on("data", (chunk) => {
  body.push(chunk);
})