리액트26 Next.js Layout과 Firebase로 AuthGuard 구현하기(feat. cookie) 🔥Next.js Layout과 Firebase로 AuthGuard 구현하기(feat. cookie)Next.js App Router에서 Layout을 활용해 메인페이지 하위에 공통 레이아웃을 적용해 AuthGuard를 적용해보자.메인페이지 하위 폴더 내에는 무조건 로그인을 해야 접속할 수 있게!!0. 폴더구조1. 로그인 시 토큰 저장로그인 시 Firebase에서 발급된 JWT 토큰을 쿠키에 저장해 인증 상태를 유지한다.npm install cookies-nextconst onSubmit = async (data: FormData) => { try { const userCredential = await signInWithEmailAndPassword( auth, d.. 2024. 12. 1. Zod + React Hook Form = 회원가입 뚝-딱! ✅Zod, React Hook Form으로 회원가입 만들기❓Zod기존에 yup을 사용하다가 zod도 많이 쓰는 걸 봐서 사용해봤다. zod는 타입스크립트와의 호환성이 뛰어나다. zod는 타입 추론을 자동으로 지원하므로, 별도의 타입을 명시하지 않고도 스키마에서 바로 타입을 추론할 수 있다.type FormData = z.infer; // signupSchema로부터 타입 자동 추론0. zod 설치npm install react-hook-form zod @hookform/resolvers1. 회원가입 스키마 만들기zodResolver를 이용해 zod 스키마로 유효성 검사를 해준다.import { z } from 'zod'export type SignupInput = z.inferexport const si.. 2024. 11. 27. 구글 간편 로그인 구현하기 🎉구글 간편 로그인 구현하기✅구글 로그인 절차1. 인가 코드 발급: 사용자가 구글 로그인 버튼 클릭 → 구글 서버로 인가 코드 요청 → 사용자 인증 및 동의 후, 구글이 인가 코드를 애플리케이션에 리다이렉트.2. 토큰 발급: 애플리케이션이 인가 코드로 구글에 토큰 발급 요청 → 구글이 애플리케이션에 액세스 토큰 발급.3. 사용자 정보 확인: 애플리케이션이 사용자 토큰으로 사용자 정보 요청 → 회원 여부 확인 후, 필요 시 회원 등록 → 애플리케이션 로그인 처리.4. 서비스 로그인: 애플리케이션이 세션 발급 → 사용자가 로그인 완료 후 애플리케이션 화면으로 이동.위를 바탕으로 구글 소셜 로그인을 구현해보자.✅구현 순서1. 앱 등록하기아래 링크로 들어가 Oauth 클라이언트 ID를 생성해준다.https:/.. 2024. 9. 7. 카카오 간편 로그인 구현하기 카카오 간편 로그인 구현하기✅카카오 로그인 절차인가 코드 발급: 사용자가 카카오 로그인 버튼 클릭 → 카카오 서버로 인가 코드 요청 → 사용자 인증 및 동의 후, 카카오가 인가 코드를 서비스에 리다이렉트.토큰 발급: 서비스가 인가 코드로 카카오에 토큰 발급 요청 → 카카오는 서비스에 사용자 토큰 발급.회원 확인 및 등록: 서비스가 사용자 토큰으로 사용자 정보 요청 → 회원 여부 확인 후, 필요시 회원 등록 → 서비스 로그인 처리.서비스 로그인: 서비스가 세션 발급 → 사용자 클라이언트에서 로그인 완료 및 서비스 화면으로 이동.위를 바탕으로 카카오 소셜 로그인을 구현해보자.1. 앱 등록하기아래 링크로 들어가 애플리케이션을 추가한다.https://developers.kakao.com/console/app2... 2024. 8. 24. Toast 공통 컴포넌트 만들기 (feat.react-toastify) react-toastify로 토스트 구현하기공통컴포넌트로 만들기 (성공, 실패, 에러, 멘트 프롭으로 받기)https://fkhadra.github.io/react-toastify/icons Icons | React-ToastifyBuilt-in iconsfkhadra.github.io error)react-toastify의 타입스크립트 사용 시, position 속성이 string 타입으로 정의되어 있어서 발생하는 오류다. position 속성은 ToastPosition 타입으로 설정해야 한다.import React from 'react';import { ToastContainer, ToastPosition, toast } from 'react-toastify';import 'react-toastify.. 2024. 8. 8. axios interceptors 설정하기(feat.cookie) 🍪axios interceptors 설정하기(feat.cookie)1. axios 인터셉터 설정const axiosInstance = axios.create({ baseURL: process.env.NEXT_PUBLIC_API_URL, headers: { 'Content-Type': 'application/json', },});2. 요청 인터셉터 설정axiosInstance.interceptors.request.use( async (config: InternalAxiosRequestConfig) => { const excludedUrls = ['/auth/tokens']; if (excludedUrls.some((url) => config.url?.includes(url))) {.. 2024. 8. 6. react-hook-form + yup = 회원가입/로그인(feat.쿠키) ✨회원가입react-hook-form & yup으로 폼 제출하기👇🏻기본 틀 const { register, handleSubmit, formState: { errors, isValid }, trigger, } = useForm({ resolver: yupResolver(authSchema), mode: 'all', }); // confirmPassword를 제외하고 폼 제출 const onSubmit: SubmitHandler = ({ confirmPassword, ...data }) => { console.log('폼 제출', data ); }; return ( .. 2024. 8. 2. input 공통 컴포넌트로 만들기 (feat. react-hook-form + yup) 리액트 훅 폼+yup을 사용해 input 공통 컴포넌트 만들기✨초기작업타입에 따라 input 분기처리하기import { passwordOffIcon, passwordOnIcon } from '@/libs/utils/Icon';import Image from 'next/image';import React, { useState } from 'react';import { FieldError, UseFormRegisterReturn } from 'react-hook-form';type InputProps = { label: string; name: string; type?: 'text' | 'password'; placeholder: string; register: UseFormRegisterRetur.. 2024. 8. 1. 라이브러리 없이 state로 폼 만들기 주요 기능폼 POST 요청폼 입력값 유효성 + 오류 메시지 출력하기아이돌 검색등록 후 list 페이지로 이동✅api GET으로 있는 아이돌 목록 띄우기페이지사이즈를 크게해서 모든 데이터를 다 불러오기… // get: 리스트 보여주기 const getIdolsData = async () => { setLoading(true); const result = await getIdols({ pageSize: 10000 }); const idolsList = result.list; // 기존 아이돌 리스트 뒤에 연달아 나와야 함 setIdolsData(idolsList ); }; useEffect(() => { getIdolsData(); }, []);🌻폼 채우고 데이터 .. 2024. 7. 31. 이전 1 2 3 다음 반응형
