라벨

Coddy Node.js 여정의 REST API 섹션에 포함된 레슨. 25개 중 24번째.

작업에는 office나 money 같은 레이블이 붙으며, 보드 앱에는 각 레이블과 해당 레이블이 붙은 작업 수를 보여 주는 메뉴가 필요합니다. 이 단계에서는 목록에 대한 스키마 규칙, 필터, 레이블 수를 세는 경로, 이렇게 세 가지를 추가합니다. 아래와 같이 객체에 수를 세어 넣는 방법은 새로 배웁니다.

// 스키마의 genres: z.array(z.string()).max(3).optional()
const counts = {};
for (const book of books) {
    for (const genre of book.genres) {
        counts[genre] = (counts[genre] ?? 0) + 1;
    }
}
// { poetry: 2, drama: 1 }

Object.entries(counts)는 객체를 [["poetry", 2], ...] 쌍으로 변환하며, 이를 목록으로 매핑할 수 있습니다. 이와 같은 요약은 고유한 URL을 가진 독립적인 리소스입니다.

optional()은 이 필드가 없어도 되도록 하면서, 필드가 있으면 그 값은 계속 검사합니다. Object.entries(counts).map(([genre, count]) => ({ genre, count }))를 사용해 항목 쌍을 객체로 바꿉니다. 대괄호는 각 쌍의 값을 풀어내고, 괄호는 객체를 반환합니다.

챌린지

쉬움

보드 앱은 office나 money 같은 라벨로 작업을 그룹화하고, 각 라벨을 사용하는 작업 수와 함께 모든 라벨을 메뉴에 표시하려고 합니다. API에 라벨을 추가하세요.

routes/tasks.js에서 Task 스키마에 선택적 labels 필드를 추가하세요. 이 필드는 라벨을 최대 5개까지 담는 목록이며, 각 라벨은 공백을 제거한 뒤 1~20자 길이의 문자열이어야 합니다. 스키마가 Task를 기반으로 만들어지므로 POST와 PATCH에도 이 필드가 적용됩니다. 잘못된 목록에는 일반적인 400 invalid_body 오류를 반환합니다. 잘못된 목록의 예로는 "labels": "office"(목록이 아닌 텍스트), "labels": [""], 라벨 6개가 있습니다.
저장된 모든 작업에는 labels 목록이 있어야 합니다.
- POST 또는 PUT 요청에 labels가 없으면 []를 저장하세요. PUT은 작업 전체를 대체하므로, labels가 없는 PUT 요청은 기존 라벨을 지웁니다.
- PATCH는 labels를 함께 보낸 경우에만 해당 필드를 변경합니다.
store.js에서 시작 작업에 라벨을 지정하세요. 작업 1과 2에는 ["office"]를, 작업 3에는 ["money"]를 지정합니다.
계속해서 routes/tasks.js에서 목록 경로에 필터를 추가하세요. GET /api/v1/tasks?label=office는 labels에 office가 정확히 포함된 작업만 반환합니다. 이전처럼 다른 필터 및 페이지네이션과 함께 사용할 수 있습니다.
server.js에서 라우터 마운트 옆에 GET /api/v1/labels를 추가하고, 그곳에서 store.js의 tasks를 가져오세요. 사용 중인 모든 라벨과 각 라벨을 사용하는 작업 수를 반환하며, 라벨을 기준으로 A부터 Z 순서로 정렬합니다. 시작 작업의 경우:
```
[
  { "label": "money", "count": 1 },
  { "label": "office", "count": 2 }
]
```

테스트해 보기:

GET /api/v1/labels는 위 목록을 반환합니다.
/api/v1/tasks에 POST { "title": "Order chairs", "labels": ["office"] } 요청을 보내면 201을 받고, 새 작업에는 "labels": ["office"]가 포함됩니다. 이제 GET /api/v1/labels는 office의 "count": 3을 표시합니다.
POST { "title": "Water the plants" } 요청을 보내면 새 작업의 라벨은 "labels": []입니다.
GET /api/v1/tasks?label=money는 작업 3만 반환합니다. GET /api/v1/tasks?label=nope는 "items": []와 "total": 0을 반환합니다.
PUT /api/v1/tasks/2에 { "title": "Book the meeting room", "done": false }를 보내면 작업 2와 "labels": []를 반환합니다.

직접 해보기

import { Router } from 'express';
import { z } from 'zod';
import { config } from '../config.js';
import { sendError, sendInvalid } from '../errors.js';
import { nextId, tasks } from '../store.js';

const router = Router();

// PUT이 전송하는 전체 작업입니다. .strict()는 목록에 없는 필드를 허용하지 않습니다.
const Task = z
    .object({
        title: z.string().trim().min(1).max(100),
        done: z.boolean(),
    })
    .strict();
const NewTask = Task.partial({ done: true });
const TaskChanges = Task.partial();
const SORT_FIELDS = ['title', 'createdAt'];

// 대소문자와 관계없이 다른 작업에 이미 이 title이 있으면 True입니다.
const titleTaken = (title, exceptId) =>
    tasks.some((t) => t.id !== exceptId && t.title.toLowerCase() === title.toLowerCase());

router.get('/', (req, res) => {
    const { done, q, sort } = req.query;
    let list = tasks;
    if (done !== undefined) {
        if (done !== 'true' && done !== 'false') {
            return sendError(res, 400, 'invalid_query', 'done must be true or false');
        }
        list = list.filter((t) => t.done === (done === 'true'));
    }
    if (q !== undefined) {
        const words = String(q).toLowerCase();
        list = list.filter((t) => t.title.toLowerCase().includes(words));
    }
    if (sort !== undefined) {
        const field = String(sort).startsWith('-') ? String(sort).slice(1) : String(sort);
        if (!SORT_FIELDS.includes(field)) {
            return sendError(
                res,
                400,
                'invalid_query',
                'sort must be title or createdAt, with - in front to reverse',
            );
        }
        const direction = String(sort).startsWith('-') ? -1 : 1;
        list = list.toSorted((a, b) => a[field].localeCompare(b[field]) * direction);
    }
    const page = req.query.page === undefined ? 1 : Number(req.query.page);
    const limit = req.query.limit === undefined ? config.pageSize : Number(req.query.limit);
    if (!Number.isInteger(page) || page < 1) {
        return sendError(res, 400, 'invalid_query', 'page must be a whole number from 1');
    }
    if (!Number.isInteger(limit) || limit < 1 || limit > 50) {
        return sendError(res, 400, 'invalid_query', 'limit must be a whole number from 1 to 50');
    }
    const start = (page - 1) * limit;
    res.json({
        items: list.slice(start, start + limit),
        page,
        total: list.length,
        pages: Math.ceil(list.length / limit),
    });
});

router.get('/:id', (req, res) => {
    const task = tasks.find((t) => t.id === Number(req.params.id));
    if (!task) {
        return sendError(res, 404, 'not_found', 'Task not found');
    }
    res.json(task);
});

router.post('/', (req, res) => {
    const result = NewTask.safeParse(req.body);
    if (!result.success) {
        return sendInvalid(res, result.error);
    }
    const { title, done = false } = result.data;
    if (titleTaken(title)) {
        return sendError(res, 409, 'conflict', 'A task with this title already exists');
    }
    const task = { id: nextId(), title, done, createdAt: new Date().toISOString() };
    tasks.push(task);
    res.status(201).location(`/api/v1/tasks/${task.id}`).json(task);
});

router.patch('/:id', (req, res) => {
    const task = tasks.find((t) => t.id === Number(req.params.id));
    if (!task) {
        return sendError(res, 404, 'not_found', 'Task not found');
    }
    const result = TaskChanges.safeParse(req.body);
    if (!result.success) {
        return sendInvalid(res, result.error);
    }
    if (result.data.title !== undefined && titleTaken(result.data.title, task.id)) {
        return sendError(res, 409, 'conflict', 'A task with this title already exists');
    }
    Object.assign(task, result.data);
    res.json(task);
});

router.put('/:id', (req, res) => {
    const index = tasks.findIndex((t) => t.id === Number(req.params.id));
    if (index === -1) {
        return sendError(res, 404, 'not_found', 'Task not found');
    }
    const result = Task.safeParse(req.body);
    if (!result.success) {
        return sendInvalid(res, result.error);
    }
    const { id, createdAt } = tasks[index];
    if (titleTaken(result.data.title, id)) {
        return sendError(res, 409, 'conflict', 'A task with this title already exists');
    }
    tasks[index] = { id, ...result.data, createdAt };
    res.json(tasks[index]);
});

router.delete('/:id', (req, res) => {
    const index = tasks.findIndex((t) => t.id === Number(req.params.id));
    if (index === -1) {
        return sendError(res, 404, 'not_found', 'Task not found');
    }
    tasks.splice(index, 1);
    res.status(204).end();
});

export default router;