ZeroCho Blog

안녕하세요! 이번 시간에는 Node.js로 text 대신에 HTML을 전송하는 방법을 알아보겠습니다! 지난 시간에는 간단한 text를 전송했는데, text로 HTML 구조를 만들어서 전송하기는 힘들겠죠? 그래서 아예 통째로 HTML 파일을 전송하는 방법이 있습니다.

일단 지난 시간 만들었던 server.js와 같은 폴더 위치에 main.html을 만듭니다. (이름은 상관 없습니다) HTML 파일의 내용물은 자바스크립트 강좌28 턴제 게임 만들기의 HTML을 쓰겠습니다.

그리고 실제 서비스에서는 여러 페이지를 사용하기 때문에 저희도 여러 페이지 구현을 위한 about.html도 만들겠습니다. 게임에 관한 정보가 나와있는 페이지입니다.

about.html

<html>
<head>
  <meta charset="utf-8" />
  <title>About</title>
</head>
<body>
  <div>제작자: ZeroCho</div>
</body>
</html>

이렇게 만든 main.html, about.html을 다음과 같이 전송해줍니다. 아 그리고 turn.js 파일도 강좌30에서 복사하여 같은 폴더에 넣어주세요.

server.js

const http = require('http');
const url = require('url');
const fs = require('fs');
http.createServer((request, response) => {
  const path = url.parse(request.url, true).pathname; // url에서 path 추출
  if (request.method === 'GET') { // GET 요청이면
    if (path === '/about') { // 주소가 /about이면
      response.writeHead(200,{'Content-Type':'text/html'}); // header 설정
      fs.readFile(__dirname + '/about.html', (err, data) => { // 파일 읽는 메소드
        if (err) {
          return console.error(err); // 에러 발생시 에러 기록하고 종료
        }
        response.end(data, 'utf-8'); // 브라우저로 전송
      });
    } else if (path === '/') { // 주소가 /이면
      response.writeHead(200,{'Content-Type':'text/html'});
      fs.readFile(__dirname + '/main.html', (err, data) => {
        if (err) {
          return console.error(err);
        }
        response.end(data, 'utf-8');
      });
    } else { // 매칭되는 주소가 없으면
      response.statusCode = 404; // 404 상태 코드
      response.end('주소가 없습니다');
    }
  }
}).listen(8080);

fs와 url 모듈을 추가했습니다. fs 모듈은 파일을 읽고 쓰는 모듈입니다. 여기서는 readFile 메소드로 HTML 파일을 읽어서 읽은 데이터를 브라우저로 보내고 있네요. url 모듈은 주소를 분석하는 모듈입니다. 이 모듈을 사용해서 url에 따라 다른 HTML을 전송하는 라우팅을 구현하고 있습니다.

url.parse 메소드로 요청한 주소request.url을 분석할 수 있습니다. path 변수에 분석한 url을 담고, GET 요청(기본적으로 GET 요청입니다. 폼의 POST, GET 요청과 같은 겁니다)일 때 url에 따라 각각 다른 HTML 파일을 읽습니다.

그 전에 response.writeHead 메소드로 response.setHeader 메소드와 같이 header을 설정합니다. 파일을 다 읽은 후 response.end 메소드로 읽은 data를 전송하고 있습니다. __dirname은 현재 프로젝트의 경로를 의미합니다. __dirname + '/main.html'은 현재 프로젝트 경로의 main.html의 주소겠죠? 만약 요청 주소가 '/'도 아니고 '/about'도 아닌 경우에는 404 NOT FOUND 에러를 전송합니다. 해당하는 주소에 맞는 파일이 없을 때 발생하는 에러입니다. 몇 번 보신 적이 있을 겁니다.

cmd로 서버가 있는 곳으로 가서 node server하면 다음과 같이 브라우저 주소를 쳤을 때 경로에 맞는 HTML 페이지가 보여집니다.

이렇게 HTML을 전송해보았는데요. 코드가 너무 반복되고, 페이지 별로 HTML을 따로 만들어야하며, 이를 각각 주소와 일일히 연결해야하는 단점이 있습니다. 페이지가 수십 페이지 이상 늘어난다고 생각해보세요. 매번 GET 요청인지 확인하고, 주소를 파악하고, fs로 매칭되는 파일을 읽어서 브라우저로 전송해야 합니다. 이렇게 해서는 실제 서비스는 무리겠죠? 다음 시간에는 이 귀찮은 과정을 간단히 해결해 줄 Express 프레임워크에 대해서 알아봅시다!