[ Code States ] Mini Node Server 과제

Mini Node Server 과제 

1. Node.js의 http 모듈을 이용해 웹 서버 만들기

2. Node.js에서 파일을 읽거나 쓰기 위해 fs 모듈을 사용하듯이, HTTP 요청과 응답을 다루기 위해 HTTP 모듈을 사용하기

---

기본 세팅

서버 실행 

1. node 사용

node server/basic-server.js

2. nodemon 사용

npx nodemon server/basic-server.js

 

클라이언트 실행 

npx serve -l 포트번호 client/

 

구현해야 할 파일 

const http = require('http');

const PORT = 4999;

const ip = 'localhost';

const server = http.createServer((request, response) => {
  console.log(
    `http request method is ${request.method}, url is ${request.url}`
  );
  response.writeHead(200, defaultCorsHeader);
  response.end('hello mini-server sprints');
});

server.listen(PORT, ip, () => {
  console.log(`http server listen on ${ip}:${PORT}`);
});

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

 

서버 실행 후, 브라우저로 열었을 때

과제 요구 사항

- 클라이언트의 액션 (버튼 클릭)에 따라 각기 다른 HTTP 요청을 서버로 보내고, HTTP 요청에 담아 보낸 단어를 소문자 & 대문자로

응답을 받아 화면에 보여줘야 한다.

toUpperCase 버튼을 눌렀을 때 : 클라이언트에서 보낸 문자열을 대문자로 만들어서 보내야 한다.
toLowerCase 버튼을 눌렀을 때 : 클라이언트에서 보낸 문자열을 소문자로 만들어서 보내야 한다.

---

Node.js의 http 모듈을 이용한 작성된 전체 코드

const http = require('http');

const PORT = 4999;

const ip = 'localhost';

const server = http.createServer((request, response) => {
  // preflight request 처리 -> 메소드가 option 일때, cors 설정을 돌려줘야 한다.
  // 메소드가 post고, url이 /upper면 대문자로 응답을 돌려줘야 한다
  // 메소드가 post고, url이 /lower면 소문자로 응답을 돌려줘야 한다
  // 나머지는 다 에러로 처리한다. bad request

  const { method, url } = request;

  let body = [];
  request
    .on('data', (chunk) => {
      body.push(chunk);
    })
    .on('end', () => {
      body = Buffer.concat(body).toString();

      if (request.method === 'POST' && request.url === '/upper') {
        response.writeHead(200, defaultCorsHeader);
        response.end(body.toUpperCase());
      } else if (request.method === 'POST' && request.url === '/lower') {
        response.writeHead(200, defaultCorsHeader);
        response.end(body.toLowerCase());
      } else if (request.method === 'OPTIONS') {
        response.writeHead(200, defaultCorsHeader);
        response.end();
      } else {
        response.writeHead(404, defaultCorsHeader);
        response.end('잘못된 요청');
      }
    });
});

server.listen(PORT, ip, () => {
  console.log(`http server listen on ${ip}:${PORT}`);
});

const defaultCorsHeader = {
  // 모든 Origin에서 오는 요청을 허용
  'Access-Control-Allow-Origin': '*',
  // 모든 HTTP 메서드 허용
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
  // 요청을 허용하는 헤더
  'Access-Control-Allow-Headers': 'Content-Type, Accept',
  // 클라이언트에서 preflight 의 요청 결과를 저장할 기간을 지정
  'Access-Control-Max-Age': 10,
};

 

과제를 통해 알게 된 지식 / 각각의 역할

 

1. const http = require('http')

- Node.js의 내장 모듈인 http를 불러온다. 이 모듈은 HTTP 서버를 생성하고, HTTP 요청과 응답을 처리하기 위한 기능을 제공

 

2. const PORT = 4999

- 서버가 동작할 포트 번호를 지정

 

3.const ip = 'localhost'

- 서버가 동작할 IP 주소를 지정

 

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

- http.createServer() 메소드를 사용하여 HTTP 서버를 생성.
- 이 메소드는 서버가 요청을 수신하면 호출될 콜백 함수를 인자로 받음
- 이 콜백 함수는 클라이언트로부터의 요청(request)과 서버로의 응답(response)을 처리

 

5. request 객체

- 클라이언트로부터의 HTTP 요청을 나타내는 객체, 요청의 메소드, URL, 헤더, 본문 등의 정보를 포함하고 있음

 

6. response 객체

- 서버로의 HTTP 응답을 나타내는 객체, 응답의 상태 코드, 헤더, 본문 등을 설정하여 클라이언트에게 전송할 수 있음

 

7. request.on('data', (chunk) => { ... })

- 요청 본문을 받는 이벤트 리스너, data 이벤트가 발생하면 요청 본문의 일부인 chunk을 받아서 처리한다.

 

8. request.on('end', () => { ... })

- 요청 본문의 수신이 완료되었을 때 호출되는 이벤트 리스너

- end 이벤트가 발생하면 Buffer.concat() 메소드를 사용하여 body 배열에 저장된 모든 chunk을 하나의 문자열로 변환

 

9. response.writeHead(statusCode, headers)

- HTTP 응답의 상태 코드와 헤더를 설정

- statusCode는 응답의 상태 코드(예: 200, 404)를, headers는 응답의 헤더 객체를 지정

 

10. response.end(data)

- HTTP 응답의 본문을 설정하고, 응답을 클라이언트에게 전송한다.

- data는 응답의 본문을 나타내는 문자열 또는 버퍼입니다

 

11. defaultCorsHeader

- CORS(Cross-Origin Resource Sharing) 헤더를 설정하는 객체

 

12. server.listen(PORT, ip, () => { ... })

- 서버를 지정한 IP 주소와 포트 번호로 시작한다.

- 서버가 시작되면 콜백 함수가 호출, 서버는 클라이언트의 요청을 수신할 준비가 되어 있게 된다.

 

13.console.log(Server running at http://${ip}:${PORT})

- 서버가 시작되었을 때, 콘솔에 서버의 주소와 포트 번호를 출력한다.