데이터베이스 / Pagila 웹앱 작성하기 (1)

 

영화의 post 목록, 좋아요 기능, 댓글 기능을 갖춘 Pagila 웹앱 실습이다.

실습 환경은 다음과 같다.

• 리액트 기반
• Express - 서버
• prisma - 데이터베이스와 소통
• Postgresql, supabase - 데이터베이스

 

 

본 포스트에서는 프론트엔드 부분은 기존에 제공된 파일을 사용하고 백엔드 부분만 작성했다

 

 

---

 

 

초기 설정

 

#깃 레포지토리 생성
git init
#package.json 초기 파일 생성
npm init -y

#prisma 설치
npm install prisma -D
#prisma 초기 설정
npx prisma 
npx prisma init

 

 

package.json에 추가

  "type": "module",
  "main": "src/index.mjs",

 

* mjs : ECMAScript 모듈(ESM)을 위한 JavaScript 파일 확장자. 이 확장자가 붙은 파일은 ES 모듈로 처리되며, import 와 export 문법을 사용할 수 있다

 

 

Supabase 연결

1. 생성한 프로젝트로 들어가서 상단 중앙의 Connect 클릭

 

2. ORMS - .env.local 탭의 코드를 복사해 .env 파일에 붙여넣기

[YOUR-PASSWORD] 부분은 내가 처음 프로젝트 생성할 때 설정한 비밀번호로 대체

 

DATABASE_URL의 링크 끝에 파라미터로 connection_limit 추가 (pgbouncer=true도 없을 경우 추가한다)

&connection_limit=1

 

 

3. schema.prisma 파일

datasource db {
  provider          = "postgresql"
  url               = env("DATABASE_URL")
  directUrl         = env("DIRECT_URL")
}

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

 

 

4. supabase의 postgresql과의 연결 확인

#Supabase의 postgresql에 접근해서 데이터베이스 스키마를 불러온다
npx prisma db pull

 

 

 

마이그레이션 

1. prisma 폴더에 migrations/0_init 폴더 생성 후 prisma 스키마 기반 마이그레이션 sql 생성

npx prisma migrate diff \
--from-empty \
--to-schema-datamodel prisma/schema.prisma \
--script > prisma/migrations/0_init/migration.sql

 

 

2. 마이그레이션 정보 적용

npx prisma migrate resolve --applied 0_init

 

The migration ~~ is already recorded as applied in the database 라는 에러가 뜨면 이미 적용됐다는 것이니 신경안써도 된다

 

 

3. 마이그레이션 시작

npx prisma migrate dev

 

 

 

서버

npm i express morgan dotenv cors cookie-parser
npm i -D nodemon
npm i -D eslint@^8 eslint-config-prettier eslint-plugin-prettier prettier

 

 

• morgan : http 요청 로거 미들웨어 (디버깅 시 유용함)
• dotenv : .env 파일의 환경변수를 process.env로 사용하게 해줌
• nodemon : 파일을 변경을 감지해 서버를 자동으로 재시작시키는 툴

 

index.mjs

import express from "express";
import cors from "cors";
import morgan from "morgan";
import dotenv from "dotenv";
import cookieParser from "cookie-parser";

// .env 파일 불러오기
dotenv.config();

// HTTP 서버 생성
const app = express();

// CORS 설정
const corsOrigin = ["http://localhost:5173", "http://localhost:3000"];

app.use(
  cors({
    origin: corsOrigin,
    methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
    preflightContinue: false,
    optionsSuccessStatus: 204,
    credentials: true,
  }),
);

// 쿠키, body 파싱
app.use(cookieParser());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// HTTP 요청 로깅
app.use(
  morgan(":method :url :status :res[content-length] - :response-time ms"),
);

// Health Check
app.get("/health", (_, res) => {
  return res.status(200).json({
    message: "health check",
  });
});

// 나머지 요청은 모두 404
app.use((_, res) => {
  return res.status(404).json({
    error: "Not Found",
  });
});

app.listen(8090, () => console.log("Listening to 8090..."));

 

 

nodemon으로 한번 서버 실행이 잘되는지 테스트를 하기 위해 package.json의 script에 다음 내용을 추가한다

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    // 추가
    "server": "nodemon src/index.mjs"
  },

 

그리고 npm run server로 실행 후  http://localhost:8090/health 로 들어가보면

 

서버 셋팅까지 완료!