런픽 | EP03. nestJS 프로젝트 생성 및 nestJS, prisma 환경 설정

 

 

 

런픽 | EP02-2. ERD 설계 - 리뷰와 관련된 데이터들

런픽 | EP02-2. ERD 설계 - 리뷰와 관련된 데이터들

 

어찌저찌 ERD 설계까지는 완료했다. 이제 드디어 코딩을 시작한다..

 

이번 프로젝트의 기술 스택으로는 다음과 같이 선정했었다.

• 백엔드
  • nestJS
  • PostgreSQL
  • Prisma
• 프론트엔드
  • Nuxt3
• 배포 인프라
  • 아마 aws이지 않을까? 아직 여기까지는 생각 안해봄

개발 순서로는 프로젝트를 먼저 세팅(전체적인 아키텍처 설계, NestJS 프로젝트 생성 및 Prisma 설정 등)을 하고 그 이후 러닝화 분석과 관련된 API 개발(CRUD) -> 인증 및 권한, 보안 시스템 구현 -> Nuxt3 프로젝트 생성 및 프론트엔드 개발 -> 배포 이렇다.

 

사실 혼자서 백/프론트를 하는 과정이 어떻게 보면 매우 비효율적일 수 있지만, 현재 실무에서 프론트엔드/백엔드 구분 없이 풀스택으로 일하고 있는 입장에서 서버와 클라이언트가 분리된 상태에서의 업무 방식을 경험해보고 싶어서 한 번 도전해본다.

 

전체적인 아키텍처는 다음과 같을 것이다.

project-root/
|-- backend/       // NestJS 백엔드 애플리케이션
|   |-- src/
|   |-- prisma/
|   |-- test/
|   |-- .env
|   |-- nest-cli.json
|   |-- package.json
|   |-- tsconfig.json
|   `-- README.md
|
|-- frontend/      // Nuxt3 프론트엔드 애플리케이션
|   |-- assets/
|   |-- components/
|   |-- layouts/
|   |-- pages/
|   |-- plugins/
|   |-- static/
|   |-- store/
|   |-- nuxt.config.js
|   |-- package.json
|   `-- README.md
|
`-- README.md      // 프로젝트 전체 설명

 

 

그럼 먼저 NestJS 프로젝트부터 시작해보자

 

NestJS 프로젝트 생성 및 백엔드 설정

예전에 NestJS를 학습하면서 아주 작은 프로젝트를 만들어본 경험이 있다. 근데 꽤 오래 전이라 nest 버전도 낮을 것 같아서 터미널에서 한 번 찾아봤다.

 

잉? nest가 설치되어 있지 않다.. 아마 회사에서 노트북을 최신 맥북으로 바꿔주면서 새 맥북에서는 nest를 사용하지 않았었나보다.. 처음부터 다시 시작하는 마음으로!

아마 예전에 내가 nest를 다웠을 때에는 8버전이었던 것 같은데 지금은 10이구나.  깃허브에 들어가보니 가장 최신으로는 10.3.6인 듯 하다.

 

이제 프로젝트를 위한 폴더를 만들고 이 폴더에서 nestJS를 설치해보자.

nest new '프로젝트명' 명령어로 backend 생성

 

아 그런데 생각해보니 github를 전혀 고려하지 않고 있었다. 일단 깃허브에 레포지토리를 먼저 생성하자.

 

그러고 나서 git remote add origin [github 주소]로 깃허브와 로컬을 연결한다.

 

이 프로젝트는 나 혼자서 진행하기 때문에 모든 코드를 하나의 레포지토리에서 관리하는 것이 편할 것이다. 그래서 backend 디렉토리의 경우 NestJS 프로젝트를 생성할 때 자동으로 git이 생성되기 때문에 이를 삭제해야 한다.

cd backend
rm -rf .git

 

그러고 나서 다시 push를 하면 원격 레포에 잘 올라간 것을 확인할 수 있다.

 

다음으로는 postgreSQL과 함께 사용할 Prisma를 설치해야 한다. 작년에 문서를 봤을 때에는 자기들은 ORM이 아니라는 철학을 내걸었던 것 같은데 지금 보니 아예 PRISMA ORM이 되어 있네 ㅋㅋ

 

암튼 backend 프로젝트에서 prisma를 설치하자.

npm install prisma --save-dev

 

다음으로 Prisma Client를 설치한다. 이 패키지는 실제로 데이터베이스와 상호작용을 담당한다.

npm install @prisma/client

 

다음으로 prisma를 초기화한다.

npx prisma init

 

이 명령어를 입력하면 프로젝트에 자동으로 prisma/schema.prisma 파일이 생성된다.

 

다음으로 prisma 모듈이 있어야 한다. 디렉토리에서 직접 생성할 수도 있지만, CLI를 통해 모듈을 편리하게 생성할 수 있다.

nest g mo "모듈명"

마찬가지로 nest g s prisma 명령어를 입력해서 service 파일도 만들 수 있다. 자세한 CLI 명령어들은 공식 문서 보기

 

그리고 nestJS에서 prisma의 연동을 위해서 service 파일을 다음과 같이 작성한다(nestJS 문서 참고).

// .src/prisma/prisma.service.ts

import { Injectable, OnModuleInit } from '@nestjs/common';
import { PrismaClient } from '@prisma/client';

@Injectable()
export class PrismaService extends PrismaClient implements OnModuleInit {
  async onModuleInit() {
    await this.$connect();
  }
}

 

프리즈마의 모듈은 다음과 같이 작성한다. cli로 작성하면 자동으로 완성되는 부분들이 있어서, 해당 모듈을 외부에서 사용이 가능하도록 exports만 추가하면 된다.

import { Global, Module } from '@nestjs/common';
import { PrismaService } from './prisma.service';

@Global()
@Module({
  providers: [PrismaService],
  exports: [PrismaService],
})
export class PrismaModule {}

 

CLI로 모듈을 만들면 편리한 점! app.module에 imports가 자동으로 된다.

// .src/app.module.ts

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { PrismaModule } from './prisma/prisma.module';

@Module({
  imports: [PrismaModule], // <-- CLI로 생성 시 자동으로 imports됨
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

 

이제 prisma와 이 nestJS 프로젝트를 연동해야 한다. 문서에서는 다음과 같이 설명하고 있다.

 

backend 디렉토리에서 .env에서 DATABASEURL에 postgre의 계정 user와 password, database와 schema명을 내거에 맞게 수정하면 된다. 나는 이전에 pgAdmin4를 사용하면서 구축해놨던 환경설정들이 있어서, runpick이라는 네이밍의 db와 schema만 생성해서 DATABASE_URL에 적용했다.

pgAdmin4 에서 Database 및 schema를 미리 생성

 

그리고 prisma 코드에서 연동이 잘 되는지 확인하기 위해 테스트용으로 임시 User 모델을 만들었다.

generator client {
  provider = "prisma-client-js" // nestJS와 postgreSQL 매핑해주는 놈
}

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

// db와 연동이 잘 되나 테스트로 model 작성
model User {
  id String @id @default(cuid())
  @@map("users")
}

 

npx prisma db push 명령어를 입력해서 해당 모델을 db에 적용해본다.

터미널에서는 우선 정상적으로 잘 된 것을 확인할 수 있다

 

pgAdmin4에서 확인해보니 해당 모델이 정상적으로 생성된 것을 확인할 수 있다.

 

 

대충 세팅은 이제 끝난 것 같다. 다음으로 이전에 설계했던 erd를 스키마로 작성해보자.