쿠키로 기억하기

Coddy Node.js 여정의 인증과 보안 섹션에 포함된 레슨. 24개 중 8번째.

HTTP는 요청 사이에 사용자를 기억하지 않습니다. 각 요청은 단독으로 도착하며, 서버는 같은 브라우저에서 온 요청인지 알 수 없습니다. 쿠키가 이 문제를 해결합니다. 서버는 Set-Cookie 헤더로 응답하고, 브라우저는 이후 해당 사이트에 보내는 모든 요청의 Cookie 헤더에 그 값을 담아 보냅니다.

res.cookie(name, value)는 쿠키 하나를 설정합니다. req.get('cookie')는 브라우저가 보낸 Cookie 헤더를 한 줄의 텍스트로 읽습니다. Express는 Cookie 헤더를 대신 읽어 주지 않습니다(cookie-parser 패키지를 사용하면 됩니다). 따라서 cookies.js에서 parseCookies를 제공합니다. 모든 값은 텍스트로 전달됩니다.

app.get('/theme/:name', (req, res) => {
    res.cookie('theme', req.params.name);
    res.send('Saved');
});

app.get('/', (req, res) => {
    const { theme = 'light' } = parseCookies(req.get('cookie'));
    res.send(`Your theme is ${theme}`);
});

챌린지

쉬움

GET /visit는 이 브라우저가 이 경로를 몇 번 호출했는지 세어야 합니다. 서버는 횟수를 저장하지 않습니다. 횟수는 쿠키에 담겨 이동하고, 브라우저는 모든 요청에 쿠키를 다시 보냅니다.

server.js의 GET /visit에서, 이 수업에서 보여 준 대로 parseCookies를 사용해 브라우저가 보낸 쿠키를 읽으세요. 횟수는 visits라는 쿠키에 들어 있습니다. 쿠키 값은 "2"처럼 텍스트로 전달됩니다. 첫 방문 때는 쿠키가 없으므로 0으로 계산합니다.
횟수에 숫자로 1을 더해 "2"가 "21"이 아니라 3이 되게 하세요.
visits 쿠키를 새 횟수로 설정해 다음번에 브라우저가 쿠키를 다시 보내도록 하세요.
새 횟수를 텍스트가 아닌 숫자로 응답하세요: {"visits": 3}.

직접 해보기: 실행을 누르세요. GET /visit을 보내세요: {"visits": 1}. 다시 보내세요: {"visits": 2}. 세 번째로 보내세요: {"visits": 3}. 해당 응답의 Headers 탭을 여세요: Set-Cookie에는 visits=3; Path=/라고 표시됩니다.

직접 해보기

import express from 'express';
import { parseCookies } from './cookies.js';
import { notes, users } from './db.js';
import { hashPassword, verifyPassword } from './passwords.js';

const app = express();
app.use(express.json());

app.post('/signup', async (req, res) => {
    const username = String(req.body.username ?? '').trim().toLowerCase();
    const password = String(req.body.password ?? '');
    if (!username || password.length < 8) {
        return res.status(400).json({ error: 'Pick a username and a password of at least 8 characters' });
    }
    if (await users.findOne({ username })) {
        return res.status(409).json({ error: 'That username is taken' });
    }
    await users.insertOne({ username, passwordHash: await hashPassword(password) });
    res.status(201).json({ username });
});

app.post('/login', async (req, res) => {
    const username = String(req.body.username ?? '').trim().toLowerCase();
    const user = await users.findOne({ username });
    if (!user || !(await verifyPassword(String(req.body.password ?? ''), user.passwordHash))) {
        return res.status(401).json({ error: 'Wrong username or password' });
    }
    res.json({ username: user.username });
});

// 이 브라우저가 GET /visit을 호출한 횟수를 셉니다.
app.get('/visit', (req, res) => {
    const visits = 1;
    res.json({ visits });
});

// 메모. 현재는 누구나 읽고 쓸 수 있습니다.
app.get('/notes', async (req, res) => {
    res.json(await notes.find().toArray());
});

app.post('/notes', async (req, res) => {
    const note = { text: String(req.body.text ?? '') };
    await notes.insertOne(note);
    res.status(201).json(note);
});

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

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

인증과 보안의 모든 레슨

직접 연습해 보세요: Express 플레이그라운드