정적 파일

Coddy Node.js 여정의 Express 기초 섹션에 포함된 레슨. 23개 중 11번째.

스타일시트나 이미지는 절대 바뀌지 않으며, 파일마다 경로를 만드는 것은 불필요한 작업입니다.

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

express.static('assets')는 assets 폴더의 파일을 각 파일의 이름으로 제공합니다. assets/logo.png는 GET /logo.png 요청에 응답합니다. 폴더 이름은 URL에 포함되지 않습니다. Express는 확장자를 바탕으로 콘텐츠 유형을 선택합니다. .css에는 text/css를, .png에는 image/png를 사용합니다. 해당 파일이 없는 경로는 다음으로 라우트에 전달됩니다.

app.use는 모든 요청에 대해 실행되는 함수를 추가합니다. 다음 장에서는 이러한 함수에 대해 알아봅니다. 이제 프로젝트에 스타일시트가 있는 public 폴더가 생겼습니다.

챌린지

쉬움

Recipe Box에 스타일시트가 추가됩니다. 파일은 public 폴더에 준비되어 있습니다. 서버는 파일을 제공하기만 하면 됩니다.

server.js에서 const app = express(); 바로 뒤에 express.static을 사용해 public 폴더의 모든 파일을 제공하세요. 그러면 public/style.css가 /style.css 경로로 제공됩니다.
홈 페이지에서 스타일시트를 불러오도록 하세요. / 경로가 보내는 HTML의 시작 부분에 <link rel="stylesheet" href="/style.css">를 넣으세요.

직접 해 보기: ‘실행’을 누르고 /로 요청을 보내세요. 이제 페이지에 스타일시트가 적용됩니다. /style.css로 요청을 보내세요. Headers 탭에 상태 코드 200, CSS 텍스트, Content-Type이 text/css로 표시됩니다. /missing.css로 요청을 보내세요. 해당 파일이 없으므로 요청은 다음으로 라우트에 전달됩니다. 일치하는 라우트가 없으므로 Express가 404로 응답합니다.

직접 해보기

import {escapeHtml} from './html.js';
import express from 'express';
import { recipes } from './data.js';

const app = express();



app.get('/', (req, res) => {
    const items = recipes.map((r) => `<li><a href="/recipes/${r.id}">${escapeHtml(r.title)}</a></li>`);
    res.send(`<h1>Recipe Box</h1><ul>${items.join('')}</ul>`);
});

// type('text')는 일반 텍스트를 전송하므로 각 제목이 한 줄씩 표시됩니다.
app.get('/recipes', (req, res) => {
    const { tag } = req.query;
    const list = tag ? recipes.filter((recipe) => recipe.tags.includes(tag)) : recipes;
    res.type('text').send(list.map((recipe) => recipe.title).join('\n'));
});

app.get('/recipes/:id', (req, res) => {
    const recipe = recipes.find((r) => r.id === Number(req.params.id));
    if (!recipe) {
        res.status(404).send('No such recipe');
        return;
    }
    res.send(recipe.title);
});

app.get('/api/recipes', (req, res) => {
    res.json(recipes);
});

app.get('/api/recipes/:id', (req, res) => {
    const recipe = recipes.find((r) => r.id === Number(req.params.id));
    if (!recipe) {
        res.status(404).json({ error: 'No such recipe' });
        return;
    }
    res.json(recipe);
});

app.get('/about', (req, res) => {
    res.send('Recipe Box collects family recipes.');
});

app.listen(3000, () => {
    console.log('Recipe Box is running on port 3000');
});