Node.js 교과서 : 4. http 모듈로 서버 만들기

전지연·2025년 10월 24일

GDG_study node.js

GDGoC_2025

목록 보기

5/16

HTTP 서버 만들기

노드로 http 서버 만들기

javascript에서 http 모듈을 제공

서버 코드 형

const http = require('http');

http.createServer((req, res) => {
  // 어떻게 응답할지
}

req : 요청에 대한 정보
res : 응답에 대한 정보

참고로 요청을 거부할 수도 있다(수상한 요청일 경우)

서버 생성 예시

process 돌릴 때 port를 하나 사용해야 한다(여기선 8080 사용)
콘솔 출력 :
localhost:8080 접속

포트 하나 = 프로그램 하나

createServer를 server변수에 담고, server.on('error')을 사용해서 에러를 처리할 수도 있음

server.on('listening')을 사용해서 콜백을 밖으로 빼내어 줄 수도 있다

fs로 HTML 읽어 제공하기

safari같은 경우는 서버 열심히 만들어서 줘봤자

이 안에 있는게 문자열인지 html인지 못알아먹음
=> 보낸 서버가 html임을 알려줘야 함
=>

서버 여러개로 만들어서 동시에 실행할 수도 있다(잘 안씀)

html 따로 작성

html파일은 따로 만들고 코드에선 파일을 불러와서 전송해 줄 수 있다

async - await 사용할 때에는 try - catch를 작성해야 한다
fs.readFile을 이용해서 html파일을 읽어옴

REST API 서버 만들기

서버에 요청 보내는 경우 주소를 통해 요청의 내용을 표현
REST API : 서버의 자원을 정의하고 자원에 대한 주소를 지정하는 방법

HTTP 요청 메서드

GET : 서버에서 자원 가져올 때

POST : 서버에 자원 새로 등록

PUT : 서버의 자원을 요청에 있는 자원으로 치환

PATCH : 서버 자원의 일부만 수정

DELETE : 서버 자원 삭제

HTTP 프로토콜

클라이언트가 IOS, 안드로이드, 웹 상관없이 서버와 HTTP 프로토콜로 소통 가능

RESTful

: REST API를 사용한 주소 체계를 이용하는 서버

ex)
GET /user : 사용자 조회
POST /user : 사용자 등록

REST 서버 만들기

코드위치 : ch4>4.2>restServer.js

restServer.js

8082 포트 사용
서버를 실행한 후 localhost:8082에 접속하면 서버에 들어갈 수 있다

POST, PUT, DELETE 요청 보내기

restFront.js

서버에 접속해서 input값을 서버에 접속하면 restFront.js의 window.onload = getUser가 실행됨
서버에서는 else if(req.method === 'POST')가 실행되며 input값을 data로 받아 처리한다.

if (req.method === 'GET') {
  if (req.url === '/') {
    const data = await fs.readFile('./restFront.html');
    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
    return res.end(data);
  } else if (req.url === '/about') {
    const data = await fs.readFile('./about.html');
    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
    return res.end(data);
  } else if (req.url === '/users') {
    res.writeHead(200, { 'Content-Type': 'application/json; charset=utf-8' });
    return res.end(JSON.stringify(users));
  }
  // /도 /about도 /users도 아니면
  try {
    const data = await fs.readFile(`.${req.url}`);
    return res.end(data);
  } catch (err) {
    // 주소에 해당하는 라우트를 못 찾았다는 404 Not Found error 발생
  }

if - else if 문이 하나도 실행되지 않으면 try문이 실행
-> 서버 안에 있는 restFront.css와 restFront.js를 프론트로 전송
try문까지 실행되지 않으면 404 Not Found 실행

폼 전송

서버에 접속해서 폼을 제출하면 다음과 같은 과정이 실행된다

폼을 제출하면 밑의 코드가 실행된다
제출한 폼은 restServer.js의 req.method === 'POST'로 전달된다

코드를 실행해서 사용자를 등록한다
사용자 가져오는 방법(GET)

위의 코드에서 (req.url === '/users')가 실행되며 전송받은 폼 대로 사용자가 등록된다

HTTP 상태 코드

200 OK : 요청이 성공적

201 Created : 요청이 성공적, 그 결과로 새로운 리소스 생성

그 외에도 401, 404, 500 등 클라이언트 에러 코드 등이 있다.

그 외에도

닉네임 수정 : PUT 실행
닉네임 삭제 : DELETE 실행
가 GET, POST 처리하는 코드와 비슷한 흐름대로 실행된다

REST API 서버 생성 -> 실행 -> 요청 전송

쿠키와 세션 이해하기

쿠키의 필요성

요청의 단점 : 누가 요청을 보냈는지 모름
=> 로그인을 구현하면 해결
=> 때문에 쿠키와 세션 필요함

쿠키 : 키 = 값의 쌍(정보를 넣어주는 형식)
ex) name = zerocho
매 요청마다 서버에 동봉
서버 : 쿠키를 읽어 누가 보냈는지 확인

서버가 쿠기를 만들어서 클라이언트에 보내 줌
받은 쿠키를 클라이언트가 요청과 함께 보냄 -> 서버는 누가 보낸 요청인지 확인

(실습)쿠키 서버 만들기

쿠키 넣는 것을 직접 구현

키 : Set-Cookie / 값 : mycookie=test
Set-Cookie : Content-Type을 지정해 주는 것처럼 브라우저에게 쿠키를 설정하라고 명령

이렇게 지정한 후 서버에 접혹하면 헤더에서 쿠키의 존재를 확인할 수 있다.

이렇게 서버에서 가져온 쿠키는 다음부터 클라이언트가 서버에 접속할 때마다 헤더에 담아서 전송한다(페이지 새로고침으로 GET 메서드를 실행하면 확인할 수 있음)

헤더(Header)와 본문(body)

쿠키는 부가적인 정보 - 헤더에 저장

(실습)쿠키로 나 식별하기

cookie2.js :

parseCookies : 문자열을 객체로 바꿔주는 메서드
ex) { mycookie : 'test' }
else 안에 있는 try - catch 부분이 가장 먼저 실행됨
/login 요청을 보내면 if(req.url.startsWith('/login'))이 실행된다

name : 조현영
302 Redirect 실행
Set-Cookie :
- 쿠키에 한글 들어가면 안됨 -> encodeURLComponent로 name처리
- Expires -> 쿠키 만료 기간 설정(없으면 브라우저 끄면 쿠키 사라짐)
- HttpOnly -> javascript로 쿠키 설정하지 못하게
- 그 외에도 여러 설정이 있음