Options next-auth를 사용하여 jwt를 사용하려면 NextAuthOptions 사용하여야 한다. OAuth를 구현하면서 기존에는 GoogleProvider만 사용하였던 Option을 좀 더 사용해보자. Option은 API 경로에서 초기화할 때 NextAuth.js에 전달된다. https://next-auth.js.org/configuration/options Options | NextAuth.js Environment Variables next-auth.js.org 사용자가 로그인을 완료 하면 Authorization Server가 파라미터의 redirect_url로 authorization code를 포함하여 리다이렉팅 시키며 NextAuth는 client_id, client_secret..

Prisma는 Django ORM, Sequelize 등과 같은 자바스크립트와 타입스크립트 커뮤니티에서 주목받고 있는 차세대 ORM(Object Relational Mapping) 프레임워크이다. Prisma는 어떤 데이터베이스를 사용하든 동일한 방식으로 데이터 모델링을 할 수 있도록 자체적인 스키마 문법을 제공하고 있다. 설치 우선 라이브러리를 설치 해주고, prisma cli를 사용하여 간단한 db작업을 위한 sqlite를 사용해보자. yarn add -D prisma npx prisma init --datasource-provider sqlite 설치를 완료하고나면 .env파일과 prisma폴더가 생성된다. database 경로를 위한 환경변수인데 나는 .env파일을 삭제하고 기존에 있던 .env...

https://wonillism.tistory.com/321 Web Socket 그리고 Socket.io 이전에 express와 js를 이용하여 간단한 chat app을 만들어 본적이 있는데, 이번에는 nextjs를 이용해서 chat app을 만들어보려고 한다. https://wonillism.tistory.com/246 socket.io 기본 채팅 서비스 만들기 (1) https: wonillism.tistory.com WebSocket에 대해 간단히 정리한 글이다. Socket.io의 공식문서를 확인하면서 Chat App 프로젝트에 연결해보자. https://socket.io/docs/v4/server-api/ Server API | Socket.IO Server socket.io 기본 코드 서버에서..

이전에 express와 js를 이용하여 간단한 chat app을 만들어 본적이 있는데, 이번에는 nextjs를 이용해서 chat app을 만들어보려고 한다. https://wonillism.tistory.com/246 socket.io 기본 채팅 서비스 만들기 (1) https://socket.io/get-started/chat Get started | Socket.IO Get started In this guide we’ll create a basic chat application. It requires almost no basic prior knowledge of Node.JS or Socket.IO, so it’s ideal for users of all knowledge levels. Introd..

어느정도 구조 파악이 됐으니 구글 소셜 로그인을 구현해보자. next-auth https://next-auth.js.org/ NextAuth.js Authentication for Next.js next-auth.js.org next-auth는 next 전용 라이브러리로 인증 로직을 보다 쉽게 구현할 수 있도록 해준다. 마치 django의 drf 같은 녀석인가?? 설치부터 해주자. > yarn add next-auth 공식문서를 확인해보면 API route를 만들어주기 위해 pages/api/auth/[...nextauth].js 에 위와 같이 설정할 수 있다고 나와있다. 하지만 지금 나는 Next 13 버전을 쓰고 있으므로 nextjs의 공식문서를 확인해보면 app/api 디렉토리 아래의 route 파..

https://wonillism.tistory.com/318 [NextJS] NextJS 13 예전에 NextJS로 SSR은 아니고, SSG로 프로젝트를 한 번 진행해본적이 있었다. 간단한 프로젝트이기도 했고, SSR이 목적도 아니었어서, 어렵지 않게 해결할 수 있었다. NextJS를 한 번 써보자라고 생각 wonillism.tistory.com 앞서 보았던 app Routing Conventions 에 있던 Routing File을 자세히 알아보자. 확실히 프레임워크라 그런지 React에서는 일일이 해야했던 작업들을 미리 정의해둔 기능들이 많았다. 이전에 Nest 튜토리얼을 맛봤을 때는 이게 왜 이렇게 작동하는지 왜 필요한지 감이 잘 안왔었는데, React를 쓰다가 Next를 써보니 확실히 느낌이 왔다..

예전에 NextJS로 SSR은 아니고, SSG로 프로젝트를 한 번 진행해본적이 있었다. 간단한 프로젝트이기도 했고, SSR이 목적도 아니었어서, 어렵지 않게 해결할 수 있었다. NextJS를 한 번 써보자라고 생각이 들어서 무심코 yarn create next-app 을 입력했는데 왠걸... NextJS를 익숙할 만큼 접하지는 않았지만, 매우 어색한느낌이었다. 이유인 즉슨 NextJS에서 13버전을 출시하면서 라우팅 방식이 변경되었다. 기존에는 page 방식이었다면, 13부터는 app 방식이라고 한다. 아직 뭔말인지는 모르겠지만... NextJS 13이 궁금해서 못참겠다... 신기술 못참지!!! 13으로 가즈아~ 우선 NextJS의 공식 블로그를 확인해보자. https://nextjs.org/blog/n..

구독 채널의 최신 영상을 가져오고싶은데, youtube API에 구독자의 최신 영상을 한 번에 가져오는 방법은 없는 듯 하다. Subscriptions: list 는 현재 내가 구독중인 채널의 정보를 받아올 수 있다. 생각하고 있는 로직은 Subscriptions: list를 통해 구독 채널 정보 리스트를 받아온 다음, 그 안에 있는 채널 id를 사용하여 해당 채널의 최신 영상을 받아오는 방법을 생각하고 있다. export const getSubscriptionsList = async () => { const accessToken = getAccessToken(); const params = { part: "snippet", mine: true, maxResults: 5, }; try { const re..