static 및 dynamic 콘텐츠 추가하기

교재를 이어 Node.js와 Express.js로 서버 설정을 설명한 후 이제, 클라이언트에게 콘텐츠를 서빙할 수 있는 방법을 알아봅시다. 이번 장에서는 static, dynamic 콘텐츠 서빙을 다루고 각각을 Express.js 기반 프로젝트에 구현하는 방법을 단계적으로 살펴봅니다.

Static 파일 서빙하기

static 파일은 정적인 데이터를 클라이언트에게 보내기 위한 파일입니다. 일반적으로 이미지, JavaScript, CSS 스타일 파일과 같은 리소스가 여기에 포함됩니다. Express에서는 express.static 함수를 사용하여 이 파일들을 설정하고 제공할 수 있습니다.

Express static 미들웨어 구현

static 파일들을 서빙하기 위해 public 디렉토리를 만들어보세요. 그 안에 정적 리소스를 추가합니다:

project_root/
  public/
    images/
    css/
    js/

그 후, 다음 코드를 작성하십시오:

const express = require('express');
const app = express();

app.use(express.static('public'));

const port = 3000;
app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

이 미들웨어는 클라이언트가 /public 디렉터리상의 파일을 요청할 때 해당 파일을 반환합니다.

Dynamic 콘텐츠 생성하기

Dynamic 콘텐츠는, 클라이언트 요청에 맞게 생성되거나 동적으로 처리되는 데이터입니다. 예를 들어, 사용자 정보 페이지나 데이터베이스 쿼리 결과를 사용하는 화면이 있습니다.

기본 dynamic 콘텐츠 서빙 방법

Express에서는 템플릿 엔진을 사용하여 dynamic 콘텐츠를 구성합니다. 다음은 Pug(이전엔 Jade로 알려짐)를 사용하는 예입니다:

npm install pug

파일, HTML 구조를 위한 레이아웃 설정 후에는 다음 코드로 데이터를 렌더링:

app.set('view engine', 'pug');
app.set('views', './views');

app.get('/recipe/:name', (req, res) => {
  const data = {
    name: req.params.name,
    info: "Delicious recipe details "
  };

  res.render("recipe_detail",data);
});

Views 폴더 아래 설정된 템플릿 파일에는 필요한 변수 바인딩 구조가 존재하며 클라이언트가 접속 상황에 따라 동적으로 변경됩니다.

참고자료

Serving static files in Express Express + EJS: Rendering Templates with Dynamic Content.