풀 스택 React 및 Node.js - 데이터베이스!

바로 뛰어들자!

필요한 모든 편집은 서버에 있습니다. 우리는 편의를 위해 Prisma ORM과 SqlLite DB를 사용할 것입니다. node-server에 설치해야 합니다.

Express가 데이터베이스에 연결하는 데 사용할 Prisma 클라이언트를 설치합니다.

npm i -S @prisma/client

다음으로 역시 서버에 Prisma를 설치합니다.

npm i -D prisma

-D is shorthand for --save-dev. This saves the package under devDependencies

node-server에서 새 폴더 prisma를 만듭니다.

폴더 prisma에서 새 파일 schema.prisma를 만듭니다. 내용을 다음으로 설정합니다.

datasource db {
  provider = "sqlite"
  url      = "file:./data.db?connection_limit=1"
}

generator client {
  provider = "prisma-client-js"
}

model Note {
  id        String @id @default(cuid())
  title     String
  content   String
  authorId  String
  lang      String
  isLive    Boolean
  category  String

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  author    Author  @relation(fields: [authorId], references: [id], onDelete: Cascade, onUpdate: Cascade)
}

model Author {
  id        String @id @default(cuid())
  username  String @unique

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  notes    Note[]
}

여기에 두 개의 테이블이 있습니다.

참고

저자

SqlLite 데이터베이스 파일을 생성하려면 node-server 폴더에서 다음 명령을 실행합니다.

npx prisma db push

이제 DB 엔터티를 생성하려면 다음을 실행합니다.

npx prisma generate

node-server에서 새 폴더(models)를 만듭니다. node-server/models 내부에서 3개의 새 파일을 생성합니다.

db.js

author.model.js

note.model.js

db.js를 다음과 같이 편집합니다.

const { PrismaClient } = require("@prisma/client")

let prisma;

if (process.env.NODE_ENV === "production") {
  prisma = new PrismaClient()
} else {
  const {__db__} = global;

  if (__db__) {
    prisma = __db__
  } else {
    prisma = new PrismaClient({
      log: [
        {
          emit: "event",
          level: "query",
        },
        "info",
        "warn",
        "error",
      ],
    });

    prisma.$on("query", ({query, duration}) => {
      console.log(`\x1b[36mprisma:query\x1b[0m ${query}`);
      console.log(`Took: ${duration}ms`)
    });

    global.__db__ = prisma
  }

  prisma.$connect();
}

module.exports = {
  prisma
}

개발 환경에서 이것은 단일 prisma 인스턴스를 생성하고 이를 글로벌로 저장하고 SQL 쿼리를 콘솔에 기록합니다.

author.model.js를 다음과 같이 편집합니다.

const { prisma } = require("./db")

async function getAuthor(id) {
  return prisma.author.findUnique({ where: { id } });
}

async function getAuthorByName(username) {
  return prisma.author.findUnique({ where: { username } });
}

async function createAuthor(
  author
) {
  return prisma.author.create({
    data: author
  });
}

module.exports = {
  getAuthor,
  getAuthorByName,
  createAuthor,
}

note.model.js를 다음과 같이 편집합니다.

const { prisma } = require("./db")

async function getNotes() {
  return prisma.note.findMany();
}

async function getNote(id) {
  return prisma.note.findUnique({ where: { id } });
}

async function createNote(
  note
) {
  return prisma.note.create({
    data: note
  });
}

async function updateNote(
  note
) {
  return prisma.note.update({
    data: note,
  });
}

module.exports = {
  getNotes,
  getNote,
  createNote,
  updateNote,
}

그러면 데이터 액세스 계층이 완료됩니다. 이제 이러한 ORM 기능을 컨트롤러에서 사용하여 데이터에 액세스할 수 있습니다.

먼저 데이터베이스를 시드할 스크립트를 만들어야 합니다. prisma 폴더에서 새 파일 seed.js를 만듭니다.

const { PrismaClient } = require("@prisma/client")
const prisma = new PrismaClient();

async function seed() {
  // Blitz everything!
  await prisma.note.deleteMany();
  await prisma.author.deleteMany();

  const author = await prisma.author.create({
    data: {
      username: 'neohed'
    },
  });

  await prisma.note.create({
    data: {
      title: 'A New Note',
      content: 'This note is retrieved from the database!',
      authorId: author.id,
      lang: 'en',
      isLive: true,
      category: '',
    },
  });

  console.log(`Database has been seeded. 🌱`)
}

seed()
  .then(() => {
    console.log('Prisma seed function in prisma/seed.js executed!')
  })
  .catch((e) => {
    console.error(e);
    process.exit(1)
  })
  .finally(async () => {
    await prisma.$disconnect()
  })

이제 package.json에서 이 스크립트를 참조해야 합니다. 다음과 같이 package.json을 편집합니다.

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@prisma/client": "^4.0.0",
    "body-parser": "^1.20.0",
    "cors": "^2.8.5",
    "express": "^4.18.1",
    "morgan": "^1.10.0"
  },
  "devDependencies": {
    "prisma": "^4.0.0"
  },
  "prisma": {
    "seed": "node prisma/seed.js"
  }
}

이제 시드 스크립트를 실행하고 다음을 실행합니다.

npx prisma db seed

이것은 seed.js 스크립트를 실행하고 데이터베이스를 하나의 작성자와 하나의 메모 레코드로 채웁니다.

마지막으로 note.controller.js를 다음과 같이 편집합니다.

const authorRepo = require('../models/author.model');
const noteRepo = require('../models/note.model');

async function getNote(req, res) {
  const notes = await noteRepo.getNotes();
  //HACK return top 1 note
  const { authorId, ...noteRest } = notes[0];
  const { username } = await authorRepo.getAuthor(authorId);

  res.json({ note: {
      ...noteRest,
      author: username
    }
  });
}

async function postNote(req, res) {
  const {body} = req;
  const {id, title, content, author, lang, isLive, category} = body;

  console.log('Server received data:');
  console.log({id, title, content, author, lang, isLive, category})

  res
    .status(200)
    .json({
      message: 'Ok'
    })
}

module.exports = {
  getNote,
  postNote
}

지금 서버와 클라이언트를 실행하면 SqlLite 데이터베이스에서 로드된 다른 데이터를 볼 수 있습니다! 서버 콘솔에 기록된 SQL 쿼리도 볼 수 있습니다.

다음으로 양식을 완성하고 몇 가지 누락된 기능을 추가합니다...

코드 저장소: Github Repository