영원히 지속되는 방명록

우리가 만들고 있는 것

레벨 3과 동일한 API –GET /api/vzkazy그리고POST /api/vzkazy– 하지만 메모리의 배열 대신 SQLite에 읽고 씁니다. React 프론트엔드는 거의 동일하게 유지될 수 있어.

보여줄게: 데이터베이스가 있는 서버

const express = require("express");
const cors = require("cors");
const Database = require("better-sqlite3");

const aplikace = express();
const db = new Database("web.db");

db.exec(`
  CREATE TABLE IF NOT EXISTS vzkazy (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    jmeno TEXT NOT NULL,
    text TEXT NOT NULL,
    vytvoreno TEXT DEFAULT CURRENT_TIMESTAMP
  )
`);

aplikace.use(cors());
aplikace.use(express.json());

// GET – all messages from the database
aplikace.get("/api/vzkazy", (pozadavek, odpoved) => {
  const radky = db.prepare(
    "SELECT id, jmeno, text, vytvoreno FROM vzkazy ORDER BY id DESC"
  ).all();
  odpoved.json(radky);
});

// POST – a new message into the database
aplikace.post("/api/vzkazy", (pozadavek, odpoved) => {
  const { jmeno, text } = pozadavek.body;

  if (!jmeno || !text || jmeno.length > 50 || text.length > 500) {
    return odpoved.status(400).json({ chyba: "Invalid message." });
  }

  const vloz = db.prepare("INSERT INTO vzkazy (jmeno, text) VALUES (?, ?)");
  const vysledek = vloz.run(jmeno, text);

  odpoved.json({ ulozeno: true, id: vysledek.lastInsertRowid });
});

aplikace.listen(3900, () => {
  console.log("Server running at http://localhost:3900");
});

보여줄게: 프런트엔드

레벨 3의 React 구성 요소는 변경 없이 작동해. 서버는 추가 항목만 추가하면 동일한 JSON을 반환해.id그리고vytvoreno전지. 메시지 아래에 작은 회색 텍스트로 표시할 수 있어.

네 차례 💪

1. 교체vzkazy배열server.js위의 코드를 사용해(또는 점진적으로 수행해. 먼저 GET을 수행한 다음 POST를 수행해).
2. 서버를 시작하고 React에서 2개의 메시지를 보냅니다.
3. 서버를 중지하고 다시 시작한 다음 페이지를 새로 고칩니다. 메시지는 남아 있어야 해.
4. 변경 사항을 Git에 커밋하고 GitHub에 푸시해.web.db– 들어있어요.gitignore).

이번 수업에서 배울 점

• API + SQLite = 영구 데이터. -prepare+?안전한 INSERT를 위해 -web.dbGit에 속하지 않어. 나중에 클라우드에서 PostgreSQL을 사용해.

© 2026 Ing. Martin Polak / AlgoRhino · 콘텐츠 이용 약관