Netflix 클론코딩 기록 남기기 (4) - Prisma + mongoDB

 넷플릭스 페이지를 비슷하게 만들어서 기능을 하게 하려면 당연히도 DB가 필요하다. 그래서 서버를 구축하기 위해서 Prisma와 mongoDB 를 사용하게 되었다. 물론 백엔드 부분은 지식이 전무했기에 그냥 유튜브에 설명 잘 되어있는 영상이 있어서 열심히 따라서 작성하였다 \(^~^)/. 내가 고른 건 아니지만 prisma와 mongoDB 를 사용하는 이유가 궁금해서 이유를 찾아봤다.

Next.js에서 MongoDB와 Prisma를 사용하는 이유

1. mongoDB는 NoSQL 데이터베이스로 실시간 데이터를 다루기에 좋다.
2. Next.js와 Prisma를 함께 사용하면 빠른 개발이 가능하다. Prisam를 통해 데이터베이스와의 상호작용을 추상화하고, 코드를 생성할 수 있다.
3. Prisma와 mongoDB를 사용하면 데이터베이스 보안을 강화할 수 있다. Prisma는 SQL injection과 같은 공격으로부터 보호해준다.
4. Prisma와 함께 사용하면 REST 또는 GraphQL API를 빠르게 구축할 수 있다. GraphQL을 사용하면 client가 필요한 데이터를 쉽게 요청할 수 있다.
5. Prisma를 사용하면 Typescript 코드를 통해 데이터베이스 쿼리 대신 데이터를 다룰 수 있게 한다.

Prisma와 MongoDB 사용법

1. 당연히 일단 설치를 하면 된다. (공식문서를 참고하면 유용하다 ^~^)
   https://www.prisma.io/nextjs 나는 Next.js를 사용했기에 위 문서를 참고했다.
   https://www.prisma.io/docs/getting-started/setup-prisma/add-to-existing-project/relational-databases-typescript-postgresql 위 문서 순서대로 따라 하면 참 좋다.
   https://www.mongodb.com/developer/languages/javascript/nextjs-with-mongodb/ 이거는 MongoDB 연결 문서이다.
2. prisma/schema.prisma 파일을 만들고 해당 파일에 나의 데이터베이스를 작성하면 된다.
3. mongoDB 사이트에 들어가서 데이터베이스를 만들어두고. env 파일에 DATABASE_URL에 링크를 입력하면 된다.
   (해당 사이트의 url이 아니라 vscode 연결을 누르면 연결을 위한 링크가 나온다!!)

이렇게 하면 일단 설치와 연동은 완료하였고 코드를 작성하면 된다.

 

NextAuth를 이용한 인증

api/auth/[... nextauth]. ts 파일을 만든 후 코드를 작성한다
https://next-auth.js.org/getting-started/example

Getting Started | NextAuth.js

나는 인증을 구현하기 위해 Next.js에서 제공하는 라이브러리인 NextAuth를 사용하였다.

import NextAuth from 'next-auth';
import Credentials from 'next-auth/providers/credentials';


export default NextAuth({
    // 이 위치에 구성 객체를 작성하면 된다.
})

 

유저의 이메일과 패스워드로 로그인을 하는 방식은 Credentials라고 한다. 그래서 Credentials를 불러오면 된다.

import NextAuth from 'next-auth';
import Credentials from 'next-auth/providers/credentials';

export default NextAuth({
    providers: [
        Credentials({
        	id: 'credentials',
            name: 'credentials',
            credentials: {
            	email: { label: "Email", type: "text", },
                password: { label: "Password", type: "password", }
        },
        async authorize(credentials) {
        
        },
    })
})

 

1. id, name

• 이 필드에는 사용자의 id와 name을 정의한다.
• 이는 id와 name이 사용자가 방법을 선택할 때 보이는 제목이 된다.
• 식별자로 적어둔 것으로 내가 사용한 방법을 적어두었지만 다른 이름을 적고 싶다면 바꿔도 될 거 같다!

2. credentials

• 이 필드에는 인증에 사용될 형식을 설정한다.
• 작성하는 사람이 원하는 대로 본인이 필요한 로그인 형식을 작성하면 된다.
• 나는 이 필드에 email과 password를 적었다.

3. authorize

• 로그인을 처리하는 함수이다. 이 함수에서 사용자가 입력한 credentials를 인자로 받아 로그인을 진행한다.
• 다른 방식으로 로그인을 추가하면 새로운 함수를 작성하면 될 거 같다!!

보통의 공식문서와 블로그들에는 Credentials라는 함수보다는 Providers.Credentials 혹은 CredentialsProvider 함수를 많이 사용한다. 하지만 CredentialsProvider 함수는 설정을 생성하기 위한 함수이고 Credentials 함수가 해당 함수 타입을 구현하여 구체적인 설정을 반환한다고 이해하여서 Credentials 함수를 사용하였다.

( 혹시 잘못 이해한 거면 알려주시면 감사합니다 ^~^ )

 

마지막으로 주의할 점!!

prisma로 schema를 작성할 때 Next.js에서 src 폴더가 있는 프로젝트를 사용 중이시라면 /prisma/schema.prisma 파일을 만들 때 꼭 src 폴더 내에 만들어야 한다! 나는 저걸 모르고 그냥 만들었다가 오류가 나와서 이틀 동안 찾아 헤맸다...