TypeScript, Nest.js & Prisma

Flexyz·2023년 9월 24일

Look Back

목록 보기
1/1
post-thumbnail

이전 블로그에서 옮겨왔습니다.


WHY?

왜 TypeScript와 nest.js 인가?

지난 2차 프로젝트 때 백엔드를 담당한 팀원이 개발보다 데이터에 관심이 있었고
개발 관련하여 새로 배우는 걸 부담스러워 했다.
(플젝 기간의 반정도는 데이터 분석과 기획 위주로 담당, 이후 백엔드 합류)
당시 나도 자신이 없어서 일단 2차 프로젝트는 기존에 해본 것(JavaSctipt + express.js)으로
하기로 했다.

백엔드 코치님이 매 미팅시간에 타입스크립트와 nest.js를 써야한다고 말했는데
왜 그렇게 강권했는지 써보니 알 것 같다.

nest.js 는!

일단 엄청 편하다.
express.js 에서는 다 일일히 만들어야 했던 부분을 nest.js에서는 자동으로 해주는 부분이 많다.
(cli는 정말... 신세계임.)

단계적 경험의 필요성

다만 2차를 express.js 로 한 것은 결과적으로 잘한 일인 듯하다.

프로젝트 초반 일주일동안 완전히 처음부터 다시 만든 게 3번이다.
이 과정에서 2일은 swagger 에 매달렸으니 이틀에 한 번 꼴로 갈아 엎었다고 볼 수 있다.

1회차
MySQL + JavaSctipt + express.js(MVC 일반 구조) + docker + redis로 세션 DB에 저장
ORM을 적용하지 않고 순수(?) SQL문을 작성하였음
-> ORM을 적용하고 모듈형 구조로 변경, 세션 DB에 저장하지 말라고 피드백 받음

2회차
피드백을 적용하여
Sequelize ORM 적용, 모듈형 구조, class형, docker compose 스크립트 적용, yarn 적용
-> 같은 백엔드 담당이 class형은 읽을 수 없다고 함....

3회차
class형을 버리고 다시 함수형으로 전체 변경...

덕분에 공부가 되었다...

결국 swagger 적용은 포기했고 덕분에 Postman의 달인(?)이 되었고,
(적용 방법을 익혔으나 일일히 작성해야 하는데 시간이 없었...)
덕분에 express.js 는 자유도가 높은 대신 불편하다는 것
특히 스웨거 같은 걸 적용하기 너무 힘들다는 것을 뼈저리게 느끼게 되었다.

이 모든 걸 겪고 nest.js 만나니 어찌나 고마운지!
스웨거 적용은 2분이 걸렸다.
자동으로 알아서 만들어주더라. ㅜㅜ

TypeScript

이를 가능하게 한 것이 TypeScript!
처음에는 일일히 type을 지정해야 하는 것이 귀찮았는데
오히려 편한 부분이 더 많다.
JavaSctipt 는 달인이 아니고서는 사실 불안한 부분이 많다.
런타임 시 오류를 발견할 수 있다는 게 사실 현대의 프로그래밍 언어가 맞는가 싶다.
자유로운만큼 예외상황이 발생할 확률이 올라가는 것이다.

결론!

불편하고 일일히 손으로 해줘야 하는 것이 많은 것부터 해봐야 원리(?)를 이해하게 된다.
한땀한땀 유효성 체크를 하다가 joi를 만나고 기뻤던 것처럼!


목표

2차 프로젝트 재개발
JavaSctipt + express.js -> TypeScript + nest.js 전환

nest.js

node.js & express 기반의 프레임워크

1. 설치 - A

npm i -g @nestjs/cli

nest

nest new

데코레이터 : 클래스에 함수 기능을 추가 ex) @Get
controller : express 의 routes 랑 같은 기능 담당, url을 가져오는 역할
service : NestJS는 콘트롤러를 비지니스 로직과 구분 짓고 싶어함

1. 설치 - B

https://github.com/nestjs/typescript-starter/generate

내 깃으로 이동됨

git clone git@github.com:bmmaker/template-nest-ts-eslint.git

2. 모듈, 컨트롤러, 서비스 생성 / nest g

  • 한번에 생성
    만들고자 하는 리소스의 CRUD 보일러 플레이트 코드를 한 번에 생성
$ nest g resource [name] 

  • 모듈, 서비스, 컨트롤러 각각 생성

3. swagger 적용

https://docs.nestjs.com/openapi/introduction

npm install --save @nestjs/swagger
main.ts

import { NestFactory } from '@nestjs/core';
import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  const config = new DocumentBuilder()
    .setTitle('Cats example')
    .setDescription('The cats API description')
    .setVersion('1.0')
    .addTag('cats')
    .build();
  const document = SwaggerModule.createDocument(app, config);
  SwaggerModule.setup('api', app, document);

  await app.listen(3000);
  
  bootstrap();
}
$ npm run start:debug

http://localhost:3000/api 접속해 보면 스웨거 화면을 볼 수 있다.


4. Prisma

https://www.prisma.io/docs/reference/database-reference/connectrion-urls

  • 설치
$ npm install prisma --save-dev
$ npx prisma init

✔ Your Prisma schema was created at prisma/schema.prisma
  You can now open it in your favorite editor.

warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.

Next steps:
1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started
2. Set the provider of the datasource block in schema.prisma to match your database: postgresql, mysql, sqlite, sqlserver, mongodb or cockroachdb.
3. Run prisma db pull to turn your database schema into a Prisma schema.
4. Run prisma generate to generate the Prisma Client. You can then start querying your database.
  • .env 파일에 DATABASE_URL 추가
DATABASE_URL=mysql://root:password@localhost:3306/market
  • .\prisma\schema.prisma 수정 및 스키마 작성
generator client {
  provider = "prisma-client-js"
}

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

model User {
  id    Int     @default(autoincrement()) @id
  email String  @unique
  password String
  nickname String
  profile_image String?
  user_desc String?
  items Item[]
}

model Item {
  id        Int      @default(autoincrement()) @id
  item_name     String
  item_category   String?
  item_type   String?
  item_image   String?
  status   String? @default("inStock")
  open_chat   String?
  seller    User?    @relation(fields: [sellerId], references: [id])
  sellerId  Int?
}
  • 마이그레이션
npx prisma migrate dev
  • DB 생성 확인

  • prisma/client 설치

npm install @prisma/client

참고

https://nomadcoders.co/nestjs-fundamentals/lectures/1964
https://www.youtube.com/watch?v=7nXdkK4zYoQ&list=PLgOlaPUIbynqhTTm3H5ej_ZOg9ij7wbgb

profile
Think about a better architecture

0개의 댓글