아슬아슬하게 일어나서 8시 58분 쯤 스터디 카페 도착
정보처리기사 실기 시즌이 다가와서 오랜만에 계획에 넣었는데 분량 조절을 실패해서 토익 공부를 빼버렸기에
어길 시 벌칙을 하는 ToDo랑 선택사항의 ToDo를 구별할 필요성이 생겼다
TIL
프로젝트
1. next-auth ( 구글, 카카오, 네이버 Provider )
프로젝트에서 로그인을 우선으로 구현하려고 했는데 Next.js에서는 next-auth로 auth 공급자를 관리하는 기능이 있어서 적용하였다
우선 Google Cloud에서 프로젝트를 생성하고 client id와 client secret을 생성해야 하는데 이부분은 생략하겠다(네이버 카카오도 마찬가지로 시크릿 키를 생성해야 한다)
src/app/api/auth/[...nextauth]/route.ts 경로에 다음 코드를 작성한다
import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'
import KakaoProvider from 'next-auth/providers/kakao'
import NaverProvider from 'next-auth/providers/naver'
const handler = NextAuth({
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID || '',
clientSecret: process.env.GOOGLE_CLIENT_SECRET || '',
}),
KakaoProvider({
clientId: process.env.KAKAO_CLIENT_ID || '',
clientSecret: process.env.KAKAO_CLIENT_SECRET || '',
}),
NaverProvider({
clientId: process.env.NAVER_CLIENT_ID || '',
clientSecret: process.env.NAVER_CLIENT_SECRET || '',
}),
],
})
export {handler as GET, handler as POST}
[...nextauth]는 가변 동적 라우팅을 하는 부분으로 auth/ 이하 경로를 배열 형식으로 담아준다
|| "" 를 입력해준 이유는 Typescript를 사용하면 undefined가 될 수 있기 때문에 그럴 경우 빈 문자열을 주어 string으로 제한해야 한다
components/provider/AuthProvider.tsx 에 다음과 같이 작성한다
'use client'
import React, {ReactNode} from 'react'
import {SessionProvider} from 'next-auth/react'
interface AuthProviderProps {
children: ReactNode
}
const AuthProvider = ({children}: AuthProviderProps) => {
return <SessionProvider>{children}</SessionProvider>
}
export default AuthProvider
이제 AuthProvider 컴포넌트를 최상위 레이아웃인 app/layout.tsx에서 사용한다
import type {Metadata} from 'next'
import {Inter} from 'next/font/google'
import './globals.css'
import AuthProvider from '@/components/provider/AuthProvider'
const inter = Inter({subsets: ['latin']})
export const metadata: Metadata = {
title: '',
description:
'',
}
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
<html lang="en">
<body className={inter.className}>
<AuthProvider>{children}</AuthProvider>
</body>
</html>
)
}
이제 페이지를 만들어서 로그인 session을 사용할 수 있다
'use client'
import {signIn, signOut, useSession} from 'next-auth/react'
import React from 'react'
const Login = () => {
const session = useSession()
console.log(session)
return (
<div>
{session.data ? (
<li>
<button onClick={() => signOut()}>Sign out</button>
</li>
) : (
<>
<li>
<button onClick={() => signIn('google')}>Sign in with Google</button>
</li>
<li>
<button onClick={() => signIn('kakao')}>Sign in with Kakao</button>
</li>
<li>
<button onClick={() => signIn('naver')}>Sign in with Naver</button>
</li>
</>
)}
</div>
)
}
export default Login
2. axios vs react-query
이 부분은 아직 자세히 학습하진 않았고 왜 react-query를 도입하고 axios는 왜 사용하지 않는 지에 대해 알아본 내용이다
여태까지 진행했던 모든 https 통신을 사용한 프로젝트는 axios로 구현했는데 baseUrl, 인터셉터, timeout등의 기능을 사용할 수 있는 장점 때문이었다.
이번 프로젝트는 동영상을 다루기도 하고 Next.js로 데이터 페칭을 다루다 보니 react-query를 도입할지를 결정해야 했는데
react-query에서는 자체적으로 캐싱, 상태관리, 리프레시를 다루기 때문에 axios를 사용할 필요 없고 fetch를 권장한다고 한다
'TIL' 카테고리의 다른 글
| 스타트업 프론트엔드 개발자 발표 면접 후기 (0) | 2024.03.16 |
|---|---|
| [TIL] WebRTC (0) | 2024.03.12 |
| [TIL] 2/21 axios 모듈화, gif 파일 생성 (0) | 2024.02.21 |
| 블록체인 부트캠프 후기 (코드스테이츠) (0) | 2024.01.14 |
| 스타트업 풀스택 개발자 면접 후기 (0) | 2023.11.16 |
댓글