[노드 2] 4장. http 모듈로 서버 만들기

🌟4장 키워드🌟

http 모듈

header, body

REST

쿠키, 세션

http2

클러스터

 

실제로 돌아가는 서버를 만들고, 서버 동작에 필요한 쿠키와 세션 처리를 살펴보고 요청 주소 라우팅 방법을 배울 것입니다.

 

4.1 요청과 응답 이해하기

const http = require('http');

http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
  res.write('<h1>Hello Node!</h1>');
  res.end('<p>Hello Server!</p>');
})
  .listen(8080, () => { // 서버 연결
    console.log('8080번 포트에서 서버 대기 중입니다!');
  });

• http 모듈 사용
  • createServer 메서드
    • 인수로 요청에 대한 콜백 함수를 사용할 수 있습니다.
    • 콜백 함수에는 응답을 넣습니다. (요청이 들어올 때마다 실행)
  • listen 메서드
    • 공개할 포트 번호를 넣습니다. 
    • 포트 연결 완료 후 실행될 콜백 함수를 넣습니다.
  • res 객체
    • writeHead : 응답에 대한 정보 기록하는 메서드
      ✔ 200, HTML, utf-8 ⇒ 헤더(header)에 기록됩니다.
    • write : 클라이언트로 보낼 데이터
      ✔ 문자열, 버퍼 ⇒ 본문(body)에 기록됩니다.
    • end : 응답 종료 메서드
      ✔ 인수가 있다면 클라이언트로 보내고 응답을 종료합니다.

서버 실행했을 때 콘솔창

http://localhost:8080  또는 http://127.0.0.1:8080에 접속

📌 localhost

localhost는 현재 컴퓨터의 내부 주소이며, 자신의 컴퓨터에서만 접근할 수 있습니다. 127.0.0.1을 주소로 사용해도 같습니다.

📌 포트

서버 내에서 프로세스를 구분하는 번호이며, 80번 포트를 사용하면 주소에서 포트를 생략할 수 있습니다.

 

📍 HTML 파일 fs 모듈로 읽어서 전송

const http = require('http');
const fs = require('fs').promises;

http.createServer(async (req, res) => {  // 요청이 들어오면
  try {
    const data = await fs.readFile('./server2.html');  // fs 모듈로 HTML 파일을 읽는다
    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
    res.end(data);
  } catch (err) {
    console.error(err);
    res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' });
    res.end(err.message);
  }
})
  .listen(8081, () => {
    console.log('8081번 포트에서 서버 대기 중입니다!');
  });

 

4.2 REST와 라우팅 사용하기

📌 REST(REpresentational State Transfer)

• 서버의 자원을 정의하고 자원에 대한 주소를 지정하는 방법을 말합니다.
• HTTP 요청 메서드를 사용합니다.

HTTP 요청 메서드	동작
GET	서버 자원을 가져오고자 할 때 사용 본문에 데이터를 넣지 않음 데이터를 서버로 보낼 때 쿼리스트링 사용
POST	서버에 자원을 새로 등록하고자 할 때 사용 요청의 본문(body)에 새로 등록할 데이터를 넣어 보냄
PUT	서버의 자원을 요청에 들어 있는 자원으로 치환 요청의 본문(body)에 치환할 데이터를 넣어 보냄
PATCH	서버 자원의 일부만 수정하고자 할 때 사용 요청의 본문에 일부 수정할 데이터를 넣어 보냄
DELETE	서버의 자원을 삭제할 때 사용
OPTIONS	요청을 하기 전에 통신 옵션을 설명하기 위해 사용

• 주소 하나는 요청 메서드를 여러 개 가질 수 있습니다.
  📍/user 주소로 GET 메서드(사용자 정보 가져오기), POST 메서드(사용자 등록하기)
• 주소와 메서드만 보고 요청의 내용을 알아볼 수 있다는 장점이 있습니다.
• GET 메서드는 브라우저에서 캐싱(기억)할 수도 있어 GET 요청 때 캐시에서 가져올 수 있습니다.
• 클라이언트가 누구든 상관없이 같은 방식으로 서버와 소통합니다. (iOS, 안드로이드, 웹 등)

REST API

const http = require('http');
const fs = require('fs').promises;
const path = require('path');

const users = {}; // 데이터 저장용

http.createServer(async (req, res) => {   // HTTP 요청 메서드 구분
  try {
    if (req.method === 'GET') {  // 다시 구분
      if (req.url === '/') {
        const data = await fs.readFile(path.join(__dirname, '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(path.join(__dirname, '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(path.join(__dirname, req.url));
        return res.end(data);
      } catch (err) {
        // 주소에 해당하는 라우트를 못 찾았다는 404 Not Found error 발생
      }
    } else if (req.method === 'POST') {
      if (req.url === '/user') {
        let body = '';
        // 요청의 body를 stream 형식으로 받음
        req.on('data', (data) => {
          body += data;
        });
        // 요청의 body를 다 받은 후 실행됨
        return req.on('end', () => {
          console.log('POST 본문(Body):', body);
          const { name } = JSON.parse(body);
          const id = Date.now();
          users[id] = name;
          res.writeHead(201, { 'Content-Type': 'text/plain; charset=utf-8' });
          res.end('등록 성공');
        });
      }
    } else if (req.method === 'PUT') {
      if (req.url.startsWith('/user/')) {
        const key = req.url.split('/')[2];
        let body = '';
        req.on('data', (data) => {
          body += data;
        });
        return req.on('end', () => {
          console.log('PUT 본문(Body):', body);
          users[key] = JSON.parse(body).name;
          res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
          return res.end(JSON.stringify(users));
        });
      }
    } else if (req.method === 'DELETE') {
      if (req.url.startsWith('/user/')) {
        const key = req.url.split('/')[2];
        delete users[key];
        res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
        return res.end(JSON.stringify(users));
      }
    }
    res.writeHead(404);
    return res.end('NOT FOUND');
  } catch (err) {
    console.error(err);
    res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' });
    res.end(err.message);
  }
})
  .listen(8082, () => {
    console.log('8082번 포트에서 서버 대기 중입니다');
  });

POST로 이름 등록, PUT으로 수정

 

4.3 쿠키와 세션 이해하기

🍪 쿠키

• 클라이언트가 누구인지 식별하기 위해 서버가 요청에 대한 응답을 할 때 보내는 것입니다.
• 유효기간이 있습니다.
• 키-값의 쌍으로 이루어져 있습니다.
• 웹 브라우저는 쿠키를 저장해 뒀다가 다음에 요청할 때마다 쿠키를 동봉해서 보냅니다.
• 요청의 헤더(Cookie)에 담겨 전송됩니다.
• 브라우저는 응답의 헤더(Set-Cookie)에 따라 쿠키를 저장합니다.

const http = require('http');

http.createServer((req, res) => {     // req 객체에 담겨 있는 쿠키를 가져옴 
  console.log(req.url, req.headers.cookie);  // 쿠키가 들어있는 위치
  res.writeHead(200, { 'Set-Cookie': 'mycookie=test' });  // 응답의 헤더에 쿠키를 기록
  res.end('Hello Cookie');
})
  .listen(8083, () => {
    console.log('8083번 포트에서 서버 대기 중입니다!');
  });

• favicon(파비콘) : 웹 사이트 탭에 보이는 이미지

📌 / undefinded, /favicon.ico mycookie=test 두 개가 기록된 이유

첫 번째 요청(/)을 보내기 전에는 브라우저가 어떠한 쿠키 정보도 갖고 있지 않아 undefined가 기록되었습니다.

브라우저는 HTML에서 파비콘이 뭔지 유추할 수 없으면 서버에 파비콘 정보에 대한 요청을 보냅니다.

두 번째 요청(/favicon.ico)의 헤더에 쿠키가 들어 있음을 확인할 수 있습니다.

쿠키로 사용자 식별

const http = require('http');
const fs = require('fs').promises;
const path = require('path');

const parseCookies = (cookie = '') =>   // 쿠키 문자열을 쉽게 사용하기 위해 자바스크립트 객체 형식으로 변경
  cookie
    .split(';')
    .map(v => v.split('='))
    .reduce((acc, [k, v]) => {
      acc[k.trim()] = decodeURIComponent(v);
      return acc;
    }, {});

// GET /login 처리 부분
http.createServer(async (req, res) => {
  const cookies = parseCookies(req.headers.cookie); // { mycookie: 'test' }
  // 주소가 /login으로 시작하는 경우
  if (req.url.startsWith('/login')) {
    const url = new URL(req.url, '<http://localhost:8084>');
    const name = url.searchParams.get('name');  // name이라는 Params가 있는지 찾고 name에 넣는다.
    const expires = new Date();
    // 쿠키 유효 시간을 현재시간 + 5분으로 설정
    expires.setMinutes(expires.getMinutes() + 5);
    res.writeHead(302, {       // 302 응답코드, 리다이렉트 주소와 쿠키를 헤더에 넣는다.
      Location: '/',
      'Set-Cookie': `name=${encodeURIComponent(name)}; Expires=${expires.toGMTString()}; HttpOnly; Path=/`,
    });
    res.end();
  // name이라는 쿠키가 있는 경우
  } else if (cookies.name) {
    res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
    res.end(`${cookies.name}님 안녕하세요`);
  } else {  // 쿠키가 없다.
    try {
      const data = await fs.readFile(path.join(__dirname, 'cookie2.html'));
      res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
      res.end(data);
    } catch (err) {
      res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' });
      res.end(err.message);
    }
  }
})
  .listen(8084, () => {
    console.log('8084번 포트에서 서버 대기 중입니다!');
  });

쿠키에는 한글과 줄 바꿈을 넣을 수 없으며, 한글은 encodeURIComponent로 감싸서 넣습니다.

로그인 페이지로 접속하지 않은 경우, 먼저 쿠키가 있는지 없는지 확인합니다. 쿠키가 없다면 로그인할 수 있는 페이지를 보내고, 있다면 로그인한 상태로 간주해 인사말을 보냅니다.

 

그러나 이 방식은 쿠키가 노출되어 있으며 조작될 위험이 있습니다.

session을 사용해 서버가 사용자 정보를 관리하도록 합시다.

const http = require('http');
const fs = require('fs').promises;
const path = require('path');

const parseCookies = (cookie = '') =>
  cookie
    .split(';')
    .map(v => v.split('='))
    .reduce((acc, [k, v]) => {
      acc[k.trim()] = decodeURIComponent(v);
      return acc;
    }, {});

const session = {};

http.createServer(async (req, res) => {
  const cookies = parseCookies(req.headers.cookie);
  if (req.url.startsWith('/login')) {
    const url = new URL(req.url, '<http://localhost:8085>');
    const name = url.searchParams.get('name');
    const expires = new Date();
    expires.setMinutes(expires.getMinutes() + 5);
    const uniqueInt = Date.now();
    session[uniqueInt] = {
      name,
      expires,
    };
    res.writeHead(302, {
      Location: '/',
      'Set-Cookie': `session=${uniqueInt}; Expires=${expires.toGMTString()}; HttpOnly; Path=/`,
    });
    res.end();
  // 세션쿠키가 존재하고, 만료 기간이 지나지 않았다면
  } else if (cookies.session && session[cookies.session].expires > new Date()) {
    res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
    res.end(`${session[cookies.session].name}님 안녕하세요`);
  } else {
    try {
      const data = await fs.readFile(path.join(__dirname, 'cookie2.html'));
      res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
      res.end(data);
    } catch (err) {
      res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' });
      res.end(err.message);
    }
  }
})
  .listen(8085, () => {
    console.log('8085번 포트에서 서버 대기 중입니다!');
  });

• 쿠키에 이름을 담는 것 대신 uniqueInt 숫자 값을 사용합니다.
• 서버에 사용자 정보를 저장하고, 클라이언트와는 세션 아이디로 소통합니다.
• 서버는 세션을 레디스나 멤캐시드 같은 데이터베이스에 넣습니다.

 

4.4 https와 http2

📌 https 모듈
웹 서버에 SSL 암호화를 추가하여 보안을 강화합니다.

인증해 주는 기관에서 구입해야 합니다.

const https = require('https');
const fs = require('fs');

https.createServer({
  cert: fs.readFileSync('도메인 인증서 경로'),
  key: fs.readFileSync('도메인 비밀키 경로'),
  ca: [
    fs.readFileSync('상위 인증서 경로'),
    fs.readFileSync('상위 인증서 경로'),
  ],
}, (req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
  res.write('<h1>Hello Node!</h1>');
  res.end('<p>Hello Server!</p>');
})
  .listen(443, () => {
    console.log('443번 포트에서 서버 대기 중입니다!');
  });

• 첫 번째 인수 : 인증서에 관련된 옵션 객체들
  인증서를 구입하여 받은 파일들을 fs.readFileSync 메서드로 읽어서 cert, key, ca 옵션에 알맞게 넣으면 됩니다.

📌 http2 모듈

노드의 http2 모듈은 SSL 암호화와 더불어 최신 HTTP 프로토콜인 http/2를 사용할 수 있게 합니다.

http/2는 요청 및 응답 방식이 기존 http/1.1보다 개선되어 훨씬 효율적으로 요청을 보냅니다.

 

4.5 cluster

📌 cluster (클러스터)

✔  cluster 모듈은 싱글 프로세스로 동작하는 노드가 CPU 코어를 모두 사용할 수 있게 해주는 모듈입니다.

✔ 코어 하나당 프로세스 하나가 돌아가게 하여, 코어를 하나만 사용할 때에 비해 성능이 개선됩니다.

✔ 메모리를 공유하지 못하는 단점이 있습니다.

const cluster = require('cluster');
const http = require('http');
const numCPUs = require('os').cpus().length;

if (cluster.isMaster) {
  console.log(`마스터 프로세스 아이디: ${process.pid}`);
  // CPU 개수만큼 워커를 생산
  for (let i = 0; i < numCPUs; i += 1) {
    cluster.fork();
  }
  // 워커가 종료되었을 때
  cluster.on('exit', (worker, code, signal) => {
    console.log(`${worker.process.pid}번 워커가 종료되었습니다.`);
    console.log('code', code, 'signal', signal);
    cluster.fork();
  });
} else {
  // 워커들이 포트에서 대기
  http.createServer((req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
    res.write('<h1>Hello Node!</h1>');
    res.end('<p>Hello Cluster!</p>');
    setTimeout(() => { // 워커 존재를 확인하기 위해 1초마다 강제 종료
      process.exit(1);
    }, 1000);
  }).listen(8086);

  console.log(`${process.pid}번 워커 실행`);
}

클러스터에는 마스터 프로세스와 워커 프로세스가 있습니다.

마스터 프로세스는 CPU 개수만큼 워커 프로세스를 만들고, 8086번 포트에서 대기합니다.

요청이 들어오면 만들어진 워커 프로세스에 요청을 분배합니다.

 

 

---

빈칸 채우기 문제 (빈칸을 드래그해서 정답을 맞혀 보세요!)

1. http 모듈의 (createServer) 메서드는 인수로 요청에 대한 콜백함수를 넣을 수 있으며, 요청이 들어올 때마다 매번 콜백 함수를 실행합니다.

2. 응답에 대한 정보가 기록되는 부분을 (헤더)라고 합니다. (헤더)에는 200, 콘텐츠 형식, charset 등이 포함된 정보가 있습니다.

3. 클라이언트로 보낼 데이터가 기록되는 부분은 (본문(body))이라고 합니다. 문자열, 버퍼 등을 보낼 수 있습니다.

4. (REST)는 서버의 자원을 정의하고 자원에 대한 주소를 지정하는 방법을 가리킵니다.

5. 주소 하나는 요청 메서드를 하나만 가질 수 있습니다. (O/X) 
    정답 : O

6. (쿠키)란 클라이언트가 누구인지 식별하기 위해 서버가 요청에 대한 응답을 할 때 보내는 것입니다.

7. (cluster) 모듈은 싱글 프로세스로 동작하는 노드가 CPU 코어를 모두 사용할 수 있게 해주는 모듈입니다.

 

 

 

코드 문제

1. 빈칸에 들어갈 코드를 작성해 보세요.

const http = require('http');

http.createServer((req, res) => {
  res.{1번 빈칸}(200, { 'Content-Type': 'text/html; charset=utf-8' });
  res.{2번 빈칸}('<h1>Hello Node!</h1>');
  res.{3번 빈칸}('<p>Hello Server!</p>');
})
  .listen(8080, () => { // 서버 연결
    console.log('8080번 포트에서 서버 대기 중입니다!');
  });

 정답 : writeHead, write, end

 

2. 빈칸에 들어갈 코드를 작성해 보세요.

const http = require('http');
const fs = require('fs').promises;
const path = require('path');

const parseCookies = (cookie = '') =>
  cookie
    .split(';')
    .map(v => v.split('='))
    .reduce((acc, [k, v]) => {
      acc[k.trim()] = decodeURIComponent(v);
      return acc;
    }, {});

const session = {};

http.createServer(async (req, res) => {
  const cookies = parseCookies(req.{1번 빈칸});
  if (req.url.startsWith('/login')) {
    const url = new URL(req.url, '<http://localhost:8085>');
    const name = url.searchParams.get('name');
    const expires = new Date();
    expires.setMinutes(expires.getMinutes() + 5);
    const uniqueInt = Date.now();
    session[uniqueInt] = {
      name,
      expires,
    };
    res.writeHead(302, {
      Location: '/',
      'Set-Cookie': `session=${{2번 빈칸}}; Expires=${expires.toGMTString()}; HttpOnly; Path=/`,
    });
    res.end();
  ... 생략

정답 : header.cookie, uniqueInt

---

Node.js #2 

Editor : 파오리