NETAMlog[6] Prisma와 GraphQL 추가하기

오늘의 한 일(이라 적고 지난주에 한 일이라 읽는다)

이 프로젝트를 위해 여러가지를 검색하다 Vercel의 Prisma 연동와 Prisma의 GraphQL 연동를 찾게 되었고 역시 로컬 파일만 가지고 블로그를 만드는 건 좀 별로인 것 같아서 외부 데이터베이스를 사용하기로 결정했습니다.
특히, 평소에 사용해보고 싶었던 GraphQL를 사용해보고 싶어 이에 대한 부분도 공부하여 추가하였습니다.
그리고 데이터를 외부 DB에서 가져오게 되면서 사이트 내부에서 글을 추가하기 위해 로그인 기능도 next-auth를 통해 추가하였습니다.

Prisma 사용하기

Prisma는 ORM 중 하나로 관계형 데이터베이스와 더 편하게 소통할 수 있는 방법으로 관계형 데이터베이스를 NoSQL 데이터베이스같은 느낌으로 사용할 수 있게 해준다고 보시면 됩니다.
관계형 데이터베이스로는 Postgresql을 사용했는데 다른 것을 써도 되지만 postgresql 데이터베이스를 무료로 호스팅해주는 서비스가 있어 사용하게 되었습니다.
저는 테스트용으로는 Heroku에서 호스팅하고 실제 블로그를 호스팅할때는 Supabase에서 호스팅할 생각입니다.

GraphQL 사용하기

GraphQL은 REST와 같은 API를 정의하는 방법 중 하나이지만 REST와는 다르게 원하는 데이터를 특정해서 가져올 수 있다는 장점이 있습니다.
예를 들어 유저의 정보를 가져올 때 REST는 전부 가져온 다음 필요한 것들을 사용하지만 GraphQL은 애초에 필요한 것들만 가져오는 것입니다.
GraphQL은 데이터 전송량과 처리 과정을 줄일 수 있어 많은 관심을 가지고 있는 기술 중 하나입니다.
GraphQL을 사용하기 위해서는 이 API를 돌릴 서버 프레임워크가 필요한 데 이중 가장 유명한 것은 Apollo라는 것으로 Next.JS의 경우 apollo-server-micro를 사용합니다.
그리고 GraphQL 엔드포인트(통신 방법을 정의한 것)을 그냥 작성해도 되지만 코드 우선 방식을 통해 더 예측가능하고 타입 지정을 더 명확하게 할 수 있는 nexus를 통해 각종 스키마와 통신 방법을 정의하였습니다.

Next-Auth 사용하기

Next-Auth는 Next.JS에서 각종 데이터베이스와 로그인 방법을 쉽게 사용하기 위한 라이브러리로 저는 깃허브와 Prisma를 기본으로 사용하였습니다. (참고로 카카오와 네이버도 지원합니다.)
이 라이브러리는 사용 자체는 간단해서 개발자 문서만 보고 바로 사용하는데 큰 무리는 없지만 글을 작성하고 있는 시점에서 v3에서 v4로 전환하는 과정인데 아직 v4에 살짝 문제가 있는지 로그인 기능이 왔다갔다하네요.
로그인 기능에서 한 가지 추가한 점은 저만 로그인할 수 있게 해놓았다는 점입니다.
기본적으로 next-auth는 이런 기능이 없지만 깃허브는 동일 유저네임을 지원하기 않기 때문에 제 깃허브 유저네임이 아니면 로그인이 안 되도록 막아놓았습니다.
(근데 살짝 야매라서 좀 더 좋은 방법이 있는지 계속 찾아보는 중입니다. 그래도 잘 작동하긴 합니다.)

과정에 대한 생각

사실 Prisma가 워낙 잘 되어있어서 굳이 GraphQL까지 쓸 필요는 없었을 것 같은데 그래도 공부하기 위한, 그리고 (나름의?) 최신 기술들을 사용해보기 위한 프로젝트여서 최대한 넣어보자 라는 느낌으로 추가해보았습니다.
그런데 역시 자바스크립트는 라이브러리가 많은 만큼 건드릴 수 없는 에러가 많은 것이 참 마음을 불편하게 만드네요.
그리고 이거 하다가 마지막에 커밋을 해야하는데 vscode의 깃 탭에서 뭘 잘못 건드려서 아직 푸시를 안한 커밋들이 날라갔더라고요(아마 fetch나 pull과 같은 걸 눌렀나봅닌다).
그래서 계속 당황하면서 깃 커밋들 불러오는 법, 사라진 깃 커밋 찾는 법들을 찾다가 git reflog (https://stackoverflow.com/questions/10099258/how-can-i-recover-a-lost-commit-in-git 참고)를 찾고 겨우 새 브랜치를 만들어서 해결했습니다.
보통 커맨드라인을 조심하라고 하는데 전 GUI를 조심해야할 것 같네요…