[Express.js] 상세페이지 구현

 

https://opentutorials.org/course/3370

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

---

1.기존 Node.js 코드

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('/page/:pageId', (request, response) => {
  fs.readdir('./data', function(error, filelist){
    var filteredId = path.parse(request.params.pageId).base;
    fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
      var title = request.params.pageId;
      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.send(html);
    });
  });
});

 

 

 

 

 

 

3.차이

3-1.라우팅 및 요청 처리 방식

Express.js: app.get('/page/:pageId', ...)로 라우트를 정의합니다.

Node.js: 별도의 라우팅 라이브러리가 없기 때문에, URL을 수동으로 파싱하고 경로를 비교하여 요청을 처리해야 합니다.

app.get('/page/:pageId', (request, response)


fs.readdir('./data', function(error, filelist)

 

 

3-2.요청 데이터 접근

Express.js: request.params를 통해 라우트 파라미터에 간단하게 접근할 수 있습니다.

Node.js: 요청 데이터를 직접 파싱해야 합니다.

 var filteredId = path.parse(request.params.pageId).base;
 
 
 var filteredId = path.parse(queryData.id).base;

 

 

3-3.응답 처리

Express.js: response.send()를 사용해 응답을 전송하고 자동으로 연결을 종료합니다.

Node.js: response.writeHead()로 상태 코드와 헤더를 수동으로 설정한 후, response.end()로 응답을 종료합니다.

 

response.send(html);

response.writeHead(200);
response.end(html);

 

 

 

// 상세 페이지 라우트 설정: '/page/:pageId' 경로에 대한 GET 요청을 처리합니다.
// ':pageId'는 동적인 URL 파라미터로, 요청된 페이지 ID를 나타냅니다.
app.get('/page/:pageId', (request, response) => {
  // './data' 디렉토리의 파일 목록을 읽어옵니다.
  fs.readdir('./data', function(error, filelist){
    // 요청된 pageId에서 파일 이름을 안전하게 추출합니다.
    var filteredId = path.parse(request.params.pageId).base;
    
    // 추출한 파일 이름을 사용해 해당 파일의 내용을 읽어옵니다.
    fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
      // pageId를 페이지 제목으로 설정합니다.
      var title = request.params.pageId;
      
      // 제목을 HTML로 안전하게 변환합니다.
      var sanitizedTitle = sanitizeHtml(title);
      
      // 파일 내용을 HTML로 안전하게 변환합니다. (h1 태그만 허용)
      var sanitizedDescription = sanitizeHtml(description, {
        allowedTags:['h1']
      });
      
      // 파일 목록을 HTML 리스트로 변환합니다.
      var list = template.list(filelist);
      
      // 전체 HTML 페이지를 생성합니다. 제목, 파일 목록, 설명을 포함합니다.
      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>`
      );
      
      // 생성된 HTML을 클라이언트에 전송합니다.
      response.send(html);
    });
  });
});