🌐 HTTP 모듈

지은·2022년 10월 14일

Node.js Library

목록 보기

6/14

시작하기에 앞서, nodemon과 serve라는 도구에 대해 알아보자.

nodemon

: Node.js 기반의 애플리케이션을 개발할 때, 파일의 코드가 변경될 때마다 애플리케이션을 자동으로 재실행시켜주는 모듈
➡️ 원래 파일이 수정될 때마다 서버를 재실행시켜줘야 하는데, 이를 자동으로 해준다.
nodemon

nodemon으로 서버 실행 방법 1 - npm

nodemon을 설치한다.
npm install nodemon
package.json 파일의 "script"에 아래 코드를 추가하고, npm start 명령어로 서버를 실행한다.
"start": "nodemon server.js"
nodemon으로 서버 실행 방법 2 - npx

npx nodemon 명령어로 서버 파일을 실행한다.
npx nodemon server.js

serve

: 특정 포트에서 클라이언트를 실행할 수 있게 해주는 모듈
# client/index.html를 포트 번호 80에서 실행한다.
npx serve -l 80 client/

웹 서버

브라우저에는 fetch와 같이 HTTP 요청을 보내는 도구가 기본적으로 내장되어 있다.
서버는 클라이언트(브라우저)의 HTTP 요청에 맞게 응답을 보낼 수 있도록 코드를 작성해야 한다.
➡️ 이렇게 HTTP 요청을 처리하고 응답을 보내주는 프로그램을 웹 서버라고 한다.

HTTP 모듈

: HTTP 요청과 응답을 다루는 웹 서버를 만들 수 있게 해주는 모듈

HTTP 모듈 불러오기

const http = require("http");

서버 생성하기

`createServer()`

모든 node 웹 서버 애플리케이션은 웹 서버 객체를 만들어야 한다.
createServer() 메소드를 이용해서 웹 서버 객체를 만든다.

const server = http.createServer((request, response) => {
  // 요청 핸들링
});

클라이언트에서 서버로 HTTP 요청이 올 때마다, createServer() 함수가 호출된다.
서버에 요청이 오면, node는 createServer()의 콜백 함수에 request와 response 객체를 전달하며, 요청 핸들러 함수를 호출한다.
요청을 실제로 처리하려면 server 객체에 listen() 메소드를 호출해야 한다.

서버 실행하기

`server.listen()`

listen() 메소드를 호출할 때는 서버에서 사용하고자 하는 포트 번호를 전달인자로 전달한다.

server.listen(4999);

아래처럼 다른 전달인자도 함께 전달할 수 있다.

const PORT = 4999;
const ip = 'localhost';
...
server.listen(PORT, ip, () => {
  console.log(`Server is Running at ${ip}:${PORT}`);
  // Server is Running at localhost:4999
});

요청 처리하기

`request.method` & `request.url`

요청을 처리할 때, 우선 메소드와 URL을 확인한 후, 이에 대한 적절한 작업을 실행하면 된다.
request 객체의 method, url 프로퍼티에 접근하여 요청의 HTTP 메소드와 URL을 확인할 수 있다.

request.method : HTTP 메소드/동사
request.url : 전체 URL에서 서버, 프로토콜, 포트를 제외한 것으로, 세 번째 슬래시 이후의 나머지 전부

요청 헤더

`request.headers`

request 객체의 headers 객체를 통해 요청의 헤더에 접근할 수 있다.

console.log(request.headers);
// 헤더 객체가 출력된다. {...}

console.log(request.headers['user-agent']);
// 헤더 객체의 user-agent 속성의 값이 출력된다.
// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

클라이언트가 어떻게 헤더를 설정했는지와 관계 없이 모든 헤더는 소문자로만 표현된다.

요청 바디

`'data'` & `'end'` 이벤트

POST나 PUT 요청을 받을 때는, 요청 바디에 있는 데이터를 받아와야 한다.
request 객체는 ReadableStream 인터페이스를 구현하고 있는데, 이 스트림에 'data'와 'end' 이벤트 리스너를 등록해 데이터를 받아올 수 있다.

let body = [];
request.on('data', (chunck) => { // 'data' 이벤트 리스너
  body.push(chunck);
}).on('end', () => { // 'end' 이벤트 리스너
  body = Buffer.concat(body).toString();
  // body에 요청 바디 전체가 담긴다.
});

'data' 이벤트는 청크(chunck)를 발생시키고, 이 청크는 문자열 데이터를 담고 있는 Buffer 객체이다.
이 청크를 배열에 수집한 후,
'end' 이벤트에서 Buffer에 이어 붙인 다음,
toString() 메소드를 이용해 문자열로 변환한다.
➡️ 이제 변수 body에는 요청 바디의 데이터가 문자열로 담기게 된다.

Buffer 객체

버퍼 형태의 데이터를 원래의 문자로 다시 바꾸려면 toString() 메소드를 이용하면 된다.
data.toString()

응답의 HTTP 상태 코드 변경하기

`response.statusCode`

HTTP 상태 코드를 따로 설정하지 않으면, HTTP 상태 코드는 항상 200이다.
응답의 HTTP 상태 코드를 변경하려면 response 객체의 statusCode 프로퍼티를 설정하면 된다.

response.statusCode = 404;
// 404 Not Found, 클라이언트에게 리소스를 찾을 수 없다고 알려준다.

응답 헤더

`response.setHeader()`

response 객체에 setHeader() 메소드로 헤더를 설정할 수 있다.

response.setHeader('Content-Type', 'application/json');
response.setHeader('X-Powered-By', 'bacon');

응답 헤더를 설정할 때, 헤더 이름의 대소문자는 중요하지 않다.
헤더를 여러 번 설정한다면 마지막에 설정한 값으로 설정된다.

`response.writeHead()`

명시적으로 응답 스트림에 헤더를 작성하고 싶다면 writeHead() 메소드를 사용해서 상태 코드와 헤더를 작성한다.

response.writeHead(200, {
  'Content-Type': 'application/json',
  'X-Powered-By': 'bacon'
});

➡️ 헤더를 작성하고 나면, 응답 바디(데이터)를 전송할 수 있다.
주의할 점❗️ 응답 바디에 데이터 청크를 작성하기 전에는 항상 상태 코드와 헤더를 설정해야 한다.

응답 바디

`response.write()`

response 객체는 WritableStream이므로, 클라이언트로 보내는 응답 바디는 일반적인 스트림 메소드 write()를 사용해서 작성한다.

response.write('<html>'); // 응답 바디 작성
response.write('<body>');
response.write('<h1>Hello, World!</h1>');
response.write('</body>');
response.write('</html>');
response.end(); // 응답 종료

response.end() 메소드는 반드시 응답마다 호출되어야 한다.

`response.end()`

response.end() 안에 데이터를 작성하면, response.write(data)를 호출한 다음에 response.end()를 호출한 것과 같다.

response.end(<html><body><h1>Hello, World!</h1></body></html>);
// 응답 바디를 작성하고 종료

CORS 설정하기

클라이언트에서 프리플라이트 요청(preflight request)을 보내면, 응답 헤더에 CORS를 설정하는 헤더를 넣어서 응답한다.

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

if(request.method === 'OPTIONS') {
  response.writeHead(200, defaultCorsHeader); // 응답 헤더 작성
  response.end(); // 응답 종료
  return; // if문 종결시키기
}

예제

클라이언트에서 텍스트를 입력한 후,
upper 버튼을 누르면 텍스트를 대문자로 변환시켜주고,
lower 버튼을 누르면 텍스트를 소문자로 변환시켜주는 애플리케이션의 서버

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

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

// 서버 생성
const server = http.createServer((request, response) => {
  let body = [];
  
  // 모든 응답의 헤더에 CORS 설정 헤더 작성
  response.writeHead(200, defaultCorsHeader);

  // POST 요청 + url이 /upper 일때
  if(request.method === 'POST' && request.url === '/upper') {
    request.on('data', (chunck) => {
      body.push(chunck);
    }).on('end', () => {
      body = Buffer.concat(body).toString().toUpperCase();
      response.end(body);
    });
    
  // POST 요청 + url이 /lower 일때
  } else if(request.method === 'POST' && request.url === '/lower') {
    request.on('data', (chunck) => {
    body.push(chunck);
    }).on('end', () => {
      body = Buffer.concat(body).toString().toLowerCase();
      response.end(body);
    });
  
  // 그 외의 요청은 에러 처리
  } else {
    response.statusCode = 404;
    response.end('404 Not Found');
  }
});

// 서버 실행
server.listen(PORT, ip, () => {
  console.log(`Server is Running at ${ip}:${PORT}`);
});

나중에 읽어보면 좋은 글
https://leejabba.gitbooks.io/node-js/content/http-baa8-b4c8.html#3
https://jongik.tistory.com/31

❔ 학습 후 궁금한 점

serve 모듈이 정확히 무엇인지 제대로 이해하지 못했다.

ReadableStream, WritableStream 이란?

이벤트 리스너를 사용할 때 .on()을 이용하는 건지?

요청/응답 헤더에 어떤 내용들이 있는지 공부하고 블로깅하기 🖋

지은

블로그 이전 -> https://janechun.tistory.com

이전 포스트

📂 File System 모듈

다음 포스트

🌐 HTTP 모듈

Node.js Library

nodemon

nodemon으로 서버 실행 방법 1 - npm

nodemon으로 서버 실행 방법 2 - npx

serve

웹 서버

HTTP 모듈

HTTP 모듈 불러오기

서버 생성하기

`createServer()`

서버 실행하기

`server.listen()`

요청 처리하기

`request.method` & `request.url`

요청 헤더

`request.headers`

요청 바디

`'data'` & `'end'` 이벤트

Buffer 객체

응답의 HTTP 상태 코드 변경하기

`response.statusCode`

응답 헤더

`response.setHeader()`

`response.writeHead()`

응답 바디

`response.write()`

`response.end()`

CORS 설정하기

예제

❔ 학습 후 궁금한 점

📂 File System 모듈

🌐 Express 프레임워크 & 미들웨어

0개의 댓글

🌐 HTTP 모듈

Node.js Library

nodemon

nodemon으로 서버 실행 방법 1 - npm

nodemon으로 서버 실행 방법 2 - npx

serve

웹 서버

HTTP 모듈

HTTP 모듈 불러오기

서버 생성하기

createServer()

서버 실행하기

server.listen()

요청 처리하기

request.method & request.url

요청 헤더

request.headers

요청 바디

'data' & 'end' 이벤트

Buffer 객체

응답의 HTTP 상태 코드 변경하기

response.statusCode

응답 헤더

response.setHeader()

response.writeHead()

응답 바디

response.write()

response.end()

CORS 설정하기

예제

❔ 학습 후 궁금한 점

📂 File System 모듈

🌐 Express 프레임워크 & 미들웨어

0개의 댓글

`createServer()`

`server.listen()`

`request.method` & `request.url`

`request.headers`

`'data'` & `'end'` 이벤트

`response.statusCode`

`response.setHeader()`

`response.writeHead()`

`response.write()`

`response.end()`