Frontend/Next.js
-
NextAuth를 이용해서 Github 로그인을 간단하게 구현할 수 있다. 1. next-auth를 설치한다 yarn add next-auth 2. github에 OAuth 셋팅하기 github 로그인을 이용하기 위해서는 github에 가서 약간의 설정을 해줘야한다. New OAuth App를 클릭해서 권한을 만들어준다. 표시한 부분을 입력해준다. Client ID와 그 아래 Secret key가 필요하다. 3. NextAuth.js 공식문서 참고해서 적용하기 그리고 나서 NextAuth.js 공식 문서에 있는거 그대로 따라해주면 된다. Getting Started | NextAuth.js The example code below describes how to add authentication to a ..
NextAuth 사용해서 Github 로그인 구현하기NextAuth를 이용해서 Github 로그인을 간단하게 구현할 수 있다. 1. next-auth를 설치한다 yarn add next-auth 2. github에 OAuth 셋팅하기 github 로그인을 이용하기 위해서는 github에 가서 약간의 설정을 해줘야한다. New OAuth App를 클릭해서 권한을 만들어준다. 표시한 부분을 입력해준다. Client ID와 그 아래 Secret key가 필요하다. 3. NextAuth.js 공식문서 참고해서 적용하기 그리고 나서 NextAuth.js 공식 문서에 있는거 그대로 따라해주면 된다. Getting Started | NextAuth.js The example code below describes how to add authentication to a ..
2023.11.24 -
📌 공식문서 Routing: Route Groups | Next.js Route Groups can be used to partition your Next.js application into different sections. nextjs.org 📌 이게 뭔가? 일단 나는 nested 되는 레이아웃을 가지고 싶지 않았다. 그리고 1depth 페이지에서는 모두 같은 레이아웃을 가지고 있었다. 이걸 어떻게 적용해야할까 고민하다가 드디어 찾았다. 1. Root Layout 설정 일단 내가 지금 혼자 공부하고 있는 프로젝트에서 공통인 부분은 이미지에 표시한 헤더와 푸터이다. 저 부분이 RootLayout이다. 2. 각 메뉴 Sub Layout (?) 설정방법은? 하지만 나의 문제는 각 메뉴(기관소개의 이용안내..
Route Groups에 대해서📌 공식문서 Routing: Route Groups | Next.js Route Groups can be used to partition your Next.js application into different sections. nextjs.org 📌 이게 뭔가? 일단 나는 nested 되는 레이아웃을 가지고 싶지 않았다. 그리고 1depth 페이지에서는 모두 같은 레이아웃을 가지고 있었다. 이걸 어떻게 적용해야할까 고민하다가 드디어 찾았다. 1. Root Layout 설정 일단 내가 지금 혼자 공부하고 있는 프로젝트에서 공통인 부분은 이미지에 표시한 헤더와 푸터이다. 저 부분이 RootLayout이다. 2. 각 메뉴 Sub Layout (?) 설정방법은? 하지만 나의 문제는 각 메뉴(기관소개의 이용안내..
2023.11.15 -
Next.js 프로젝트를 하고 있는 중에 async키워드와 'use client' 를 같이 쓰니 에러가 났다. 서버 사이드 렌더링과 클라이언트 사이드 렌더링 때문에 생긴 오류라고 생각이 된다. 그래서 찾아보았다!! 언제 서버 컴포넌트, 클라이언트 컴포넌트를 쓰는 것 일까? 공식문서에 따르면 Fetch data는 서버 컴포넌트 내가 해당 컴포넌트에서 쓰려고 했던 Event Listeners와 Lifecycle Effects은 클라이언트 컴포넌트라고 해서 생긴 오류였다. 해결방법 일단 내가 해결한 방법은 상위 컴포넌트에서 Fetch Data를 해서 하위 컴포넌트에 props로 넘겨줬다. 근데 찾아보니까 children을 이용한 방법이 있었다. 한번 적용해봐야겠다. Configuring: TypeScript ..
Next.js에서 async와 'use client'를 같이 사용할 때Next.js 프로젝트를 하고 있는 중에 async키워드와 'use client' 를 같이 쓰니 에러가 났다. 서버 사이드 렌더링과 클라이언트 사이드 렌더링 때문에 생긴 오류라고 생각이 된다. 그래서 찾아보았다!! 언제 서버 컴포넌트, 클라이언트 컴포넌트를 쓰는 것 일까? 공식문서에 따르면 Fetch data는 서버 컴포넌트 내가 해당 컴포넌트에서 쓰려고 했던 Event Listeners와 Lifecycle Effects은 클라이언트 컴포넌트라고 해서 생긴 오류였다. 해결방법 일단 내가 해결한 방법은 상위 컴포넌트에서 Fetch Data를 해서 하위 컴포넌트에 props로 넘겨줬다. 근데 찾아보니까 children을 이용한 방법이 있었다. 한번 적용해봐야겠다. Configuring: TypeScript ..
2023.11.07