해당 스택 사용배경

현재 홈페이지를 Next.js 로 변경할 계획을 가지고 있다. 기존 Node.js 서버에서 사용하는 pg-promise를 이용하기보다 조금 더 편한 라이브러리를 사용하고자 해서 데이터베이스를 연결하는 쉬운 방법들을 검색했다. 그래서 찾게 된 것이 Prisma이다. 물론 API 서버를 새로 만들어서 바로 연결하는 방법을 사용할지는 모르겠지만 ( * Grqphql을 사용할지도 ) 일단은 리액트 기반의 Next.js를 빠르게 도입하기 위해서 위 스택을 사용해서 디비 연결을 하려고 한다.

Prisma 설치

• Prisma CLI 설치 : https://www.prisma.io/docs/concepts/components/prisma-cli/installation
• Prisma Client 설치 : https://www.prisma.io/docs/concepts/components/prisma-client

npm install prisma --save-dev

위와 같이 Prisma를 설치해 준 후

• npm으로 설치 했을 경우

  npx prisma init

• yarn으로 설치 했을 경우

  yarn run prisma init

위 명령어를 입력 한 후에는 아래와 같이 prisma 폴더와 .env 파일이 생긴다.

데이터베이스 연결

.env 파일에 들어가게 되면

위와 같이 데이터 베이스 주소를 입력할 수 있게 해준다.

각자 맞는 주소를 입력하면 되는데 내 경우에는 AWS RDS 주소를 넣어주었다.

Example URL

postgres://${user}:${password}@${host}:${port}/${database}

URL 주소 참조 : https://eggerapps.at/postico/docs/v1.5.3/postico-url-scheme.html

첫번째 방법으로 주소를 입력해서 해당되는 곳에 ${ } 안에 해당되는 데이터를 넣어서 데이터베이스 연결을 했다.
굉장히 쉽고 문제가 있는 곳을 바로바로 알려 준다.

API 서버 연결하기

잘 연결 되었는지 확인 하기 위하여api 서버를 연결해보자

위와 같은 파일 구조로 만들면

http://localhost:3000/api/sightings/create

위와 같은 url로 서버 연결 테스트를 할 수 있다.

import type {NextApiRequest, NextApiResponse} from "next";
import {PrismaClient} from "@prisma/client";

export default async function (req: NextApiRequest, res: NextApiResponse) {
  console.log(req.body);
  res.json({sighting: 'saved'});
}

타입스크립트를 이용한다면 next에서는 위와 같은 타입을 지정해 줘야 한다.

Rest API 테스트 툴을 사용해서 테스트 해볼수 있는데 나는 예전부터 사용하던 Postman을 이용했는데 요즘에는 Insomnia도 많이 사용하는 것 같다.
크게 중요한것은 아니니 사용하기 편한 툴을 사용하면 될것 같다.

Body - raw - JSON 형태로 설정을 해주고 아래와 같이 JSON으로 보내주면 결과값을 받을 수 있다.

req로 받은 값과 res로 보낸 값이 잘 전달되는것을 볼 수 있다.