HTML 페이지

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

Recipe Box는 이제 HTML 문자열 및 이스케이프 연습을 하나의 페이지로 만듭니다. 레시피마다 링크를 하나씩 만드세요. 링크의 href는 이동할 위치를 지정하고, 태그 사이의 텍스트는 독자에게 표시되는 레이블입니다.

const link = `<a href="/books/${book.id}">${escapeHtml(book.title)}</a>`;

도우미 함수는 html.js에 제공되어 있습니다. 제목마다 이 함수를 적용하되, 링크 태그는 마크업으로 직접 작성하세요. map으로 링크를 만들고 join으로 하나의 문자열로 합치세요. 배열을 템플릿 문자열 안에 직접 넣으면 링크 사이에 쉼표가 들어갑니다. res.send는 완성된 페이지를 브라우저에 전달합니다.

<ul>은 목록을 담고 <li>는 각 항목을 감쌉니다. 이스케이프하지 않은 마크업은 페이지를 바꾸거나 방문자의 브라우저에서 스크립트를 실행할 수 있으므로, 직접 만든 데이터 파일의 제목이라도 각각 이스케이프하세요.

챌린지

쉬움

이 단계에서는 Status Codes의 프로젝트 파일(server.js 포함)이 아니라 강좌에 준비된 Recipe Box 프로젝트를 엽니다. 이전 작업은 해당 강좌에 그대로 남아 있습니다. server.js를 수정하기 전에 제공된 파일을 읽어 보세요. 이 복사본에는 Recipe Box 경로, 상태 코드, 공유 html.js 도우미 함수가 들어 있습니다.

홈 페이지가 실제 페이지로 바뀝니다. 모든 레시피가 목록에 표시되고, 각 레시피는 해당 레시피 페이지로 연결됩니다.

server.js에서 제공된 escapeHtml 도우미 함수를 ./html.js에서 가져옵니다.
/ 경로를 변경하여 환영 문구 대신 HTML 페이지를 보내도록 합니다. 페이지에는 레시피마다 하나씩 링크가 있으며, 각 링크는 해당 레시피 페이지로 이동하고 제목을 표시합니다. 예를 들어 레시피 2의 경우 다음과 같습니다. <a href="/recipes/2">Pancakes</a>. 목록을 사용하면 좋습니다. 각 링크는 <li> 항목에 넣고, 모든 항목을 하나의 <ul> 안에 넣으세요. 제목을 추가하는 것으로 시작할 수 있습니다. <h1>Recipe Box</h1>.
각 제목을 페이지에 넣기 전에 escapeHtml에 전달합니다. 그러면 Fish & Chips는 Fish & Chips로 페이지에 전달되고, 브라우저에는 Fish & Chips로 표시됩니다.
map으로 항목을 만들고 빈 문자열로 결합합니다. 배열을 그대로 템플릿 문자열에 넣으면 항목 사이에 쉼표가 표시됩니다.

시도해 보세요: ‘실행’을 누르고 /로 요청을 보냅니다. 네 개의 링크가 있는 페이지로 응답이 표시됩니다. Fish & Chips를 클릭하면 /recipes/4 페이지가 열리고 Fish & Chips가 표시됩니다.

직접 해보기

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

const app = express();

app.get('/', (req, res) => {
    res.send('Welcome to Recipe Box');
});

// 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');
});