[Express.js] 홈페이지 처리

 

https://opentutorials.org/course/3370

생활코딩님의 Express.js강의를 참고하였습니다.

---

1.기존 Node.js 처리방식

if(pathname === '/'){
      if(queryData.id === undefined){
        fs.readdir('./data', function(error, filelist){
          var title = 'Welcome';
          var description = 'Hello, Node.js';
          var list = template.list(filelist);
          var html = template.HTML(title, list,
            `<h2>${title}</h2>${description}`,
            `<a href="/create">create</a>`
          );
          response.writeHead(200);
          response.end(html);
        });
      } else {
        fs.readdir('./data', function(error, filelist){
          var filteredId = path.parse(queryData.id).base;
          fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
            var title = queryData.id;
            var sanitizedTitle = sanitizeHtml(title);
            var sanitizedDescription = sanitizeHtml(description, {
              allowedTags:['h1']
            });
            var list = template.list(filelist);
            var html = template.HTML(sanitizedTitle, list,
              `<h2>${sanitizedTitle}</h2>${sanitizedDescription}`,
              ` <a href="/create">create</a>
                <a href="/update?id=${sanitizedTitle}">update</a>
                <form action="delete_process" method="post">
                  <input type="hidden" name="id" value="${sanitizedTitle}">
                  <input type="submit" value="delete">
                </form>`
            );
            response.writeHead(200);
            response.end(html);
          });
        });
      }
    }

 

 

 

 

 

2.Express.js에서 처리방식

// 기본 라우트 설정
app.get('/', (req, response) => {
  fs.readdir('./data', function(error, filelist){
    var title = 'Welcome';
    var description = 'Hello, Node.js';
    var list = template.list(filelist);
    var html = template.HTML(title, list,
      `<h2>${title}</h2>${description}`,
      `<a href="/create">create</a>`
    );
    response.end(html);
  });
});

 

 

 

 

 

 

3.차이점

3-1.라우팅 처리

Node.js	Express.js
라우팅을 수동으로 처리합니다. if (pathname === '/')와 같은 조건문을 사용하여 요청된 경로를 확인하고, queryData.id가 정의되지 않은 경우 특정 동작을 수행하도록 코드가 작성되어 있습니다. URL 경로와 쿼리 문자열(queryData)을 직접 파싱하고 관리해야 합니다. 이 과정에서 URL 모듈을 사용해 쿼리 스트링을 파싱하고 처리해야 합니다.	라우팅이 자동화됩니다. app.get('/', (req, response) => { ... })와 같은 형태로 특정 경로에 대한 요청을 처리할 수 있습니다. 쿼리 문자열(req.query)과 URL 경로(req.params)도 자동으로 파싱되며, 라우트 핸들러에서 쉽게 접근할 수 있습니다. 예를 들어, req.query.id로 쿼리 문자열을 쉽게 참조할 수 있습니다.

 

 

3-2.응답 처리

Node.js	Express.js
응답을 보낼 때 response.writeHead(200)로 HTTP 상태 코드를 설정하고, 그 후에 response.end(html)로 응답 본문을 전송합니다.	response.end(html)만으로 응답을 간단하게 전송할 수 있으며, 상태 코드를 설정하는 부분도 자동화할 수 있습니다.

 

3-3.미들웨어

Node.js	Express.js
미들웨어 개념이 없으므로, 모든 요청 처리를 각 조건문에 따라 직접 구현해야 합니다.	미들웨어를 쉽게 사용할 수 있어, 요청을 처리하기 전에 수행해야 하는 공통 작업(예: 인증, 로깅 등)을 관리할 수 있습니다. 또한 여러 경로와 요청 메서드에 대해 쉽게 코드를 확장할 수 있습니다.

 

 

3-4. 웹서버 시작

Node.js	Express.js
http.createServer()는 Node.js의 내장 HTTP 모듈을 사용해 서버를 생성합니다. 이 메서드는 요청이 올 때마다 호출되는 콜백 함수를 매개변수로 받아들입니다.	app.listen()은 Express.js 애플리케이션을 특정 포트에서 시작하게 합니다. 이 메서드는 내부적으로 http.createServer()를 호출하여 서버를 시작하지만, Express의 다양한 기능을 사용할 수 있게 합니다.

 

 

 

 

 

const express = require('express');
const fs = require('fs');
const path = require('path');
const template = require('./template'); // 가정: template 모듈이 HTML 템플릿을 생성하는 함수들을 제공한다고 가정합니다.

const app = express();
const port = 3000;

// 기본 라우트 설정
app.get('/', (req, response) => {
  // 'data' 디렉토리의 파일 목록을 읽기
  fs.readdir('./data', function(error, filelist) {
    if (error) {
      // 파일 목록 읽기 중 에러가 발생한 경우
      console.error('Error reading directory:', error);
      response.status(500).send('Internal Server Error');
      return;
    }
    
    // 페이지에 표시할 제목과 설명 설정
    var title = 'Welcome';
    var description = 'Hello, Node.js';
    
    // 파일 목록을 HTML 리스트로 변환 (template.list는 filelist를 HTML 리스트로 변환하는 함수라고 가정)
    var list = template.list(filelist);
    
    // HTML 템플릿을 생성 (template.HTML은 전체 HTML 페이지를 생성하는 함수라고 가정)
    var html = template.HTML(title, list,
      // 페이지의 본문 내용: 제목과 설명
      `<h2>${title}</h2>${description}`,
      // 페이지의 하단 링크
      `<a href="/create">create</a>`
    );
    
    // 생성된 HTML을 클라이언트에 응답으로 전송
    response.end(html);
  });
});

// 서버 시작
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});