정렬

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

클라이언트는 최신 작업을 먼저 보거나, 목록을 A부터 Z까지 정렬해 달라고 할 수 있습니다. 흔히 ?sort=field 형식을 사용하며, 순서를 반대로 하려면 앞에 -를 붙입니다.

// GET /api/books?sort=-year
const field = sort.startsWith('-') ? sort.slice(1) : sort;   // 'year'
const direction = sort.startsWith('-') ? -1 : 1;
list = list.toSorted((a, b) => (a[field] - b[field]) * direction);

먼저 field가 허용하는 필드에 포함되는지 검증하고, 그렇지 않으면 400을 반환하세요. 책에 없는 필드로는 유용한 정렬 결과를 얻을 수 없기 때문입니다. toSorted는 정렬된 복사본을 반환합니다. sort는 배열 자체의 순서를 바꾸며, 필터로 복사본을 만들지 않았다면 그 배열은 저장소의 배열입니다. 따라서 이후의 모든 요청에서 새로운 순서를 보게 됩니다. 이 예제는 뺄셈을 사용하므로 숫자에만 적용됩니다. 두 문자열을 비교하려면 a.localeCompare(b)를 사용하세요. 뺄셈과 마찬가지로 음수, 0 또는 양수를 반환합니다. ISO 날짜는 시간 순서대로 정렬되는 문자열입니다.

챌린지

쉬움

Sorting Text에서 작성한 제목만 기준으로 정렬하는 코드를 아래의 필드 및 방향 처리 방식으로 바꾸세요.

클라이언트는 최신 작업부터 보거나, 목록을 A부터 Z까지 정렬하고 싶어 합니다. ?sort=를 사용해 목록을 정렬하세요.

routes/tasks.js의 목록 경로에서 req.query로부터 sort를 읽으세요. 이 값이 없으면 목록은 저장된 순서를 유지합니다.
?sort=title은 제목을 A부터 Z까지 정렬합니다. ?sort=createdAt은 생성 시간을 기준으로 오래된 항목부터 정렬합니다. 앞에 -를 붙이면 순서가 뒤집힙니다. 즉, ?sort=-title은 Z부터 A까지, ?sort=-createdAt은 최신 항목부터 정렬합니다.
두 필드 모두 텍스트입니다. createdAt은 "2026-03-03T10:30:00.000Z"와 같은 ISO 날짜이며, 텍스트로 정렬해도 올바른 순서가 됩니다. 따라서 뺄셈이 아니라 localeCompare로 비교하세요.

?sort=color와 같이 다른 필드를 지정하면 상태 코드 400을 반환합니다:

{ "error": { "code": "invalid_query", "message": "sort must be title or createdAt, with - in front to reverse" } }

필터를 적용한 다음 정렬하세요. 그러면 ?done=false&sort=-title은 미완료 작업을 Z부터 A까지 반환합니다.
toSorted를 사용해 복사본을 정렬하세요. sort는 저장된 배열 자체의 순서를 바꾸므로 이후의 모든 요청에서 바뀐 순서를 보게 됩니다.

직접 해 보세요: GET /api/tasks?sort=title은 작업 2, 3, 1을 반환합니다 ("Book...", "Send...", "Write..."). GET /api/tasks?sort=-createdAt은 3, 2, 1을 반환합니다. 그런 다음 일반 GET /api/tasks는 다시 1, 2, 3을 반환합니다. GET /api/tasks?sort=color는 코드 invalid_query와 함께 400을 반환합니다.

직접 해보기

import { Router } from 'express';
import { z } from 'zod';
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();

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

router.get('/', (req, res) => {
    const { done, q } = 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 (req.query.sort === 'title') {
        list = list.toSorted((a, b) => a.title.localeCompare(b.title));
    }
    res.json(list);
});

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/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;