Next9 구글 간편 로그인 구현하기 🎉구글 간편 로그인 구현하기✅구글 로그인 절차1. 인가 코드 발급: 사용자가 구글 로그인 버튼 클릭 → 구글 서버로 인가 코드 요청 → 사용자 인증 및 동의 후, 구글이 인가 코드를 애플리케이션에 리다이렉트.2. 토큰 발급: 애플리케이션이 인가 코드로 구글에 토큰 발급 요청 → 구글이 애플리케이션에 액세스 토큰 발급.3. 사용자 정보 확인: 애플리케이션이 사용자 토큰으로 사용자 정보 요청 → 회원 여부 확인 후, 필요 시 회원 등록 → 애플리케이션 로그인 처리.4. 서비스 로그인: 애플리케이션이 세션 발급 → 사용자가 로그인 완료 후 애플리케이션 화면으로 이동.위를 바탕으로 구글 소셜 로그인을 구현해보자.✅구현 순서1. 앱 등록하기아래 링크로 들어가 Oauth 클라이언트 ID를 생성해준다.https:/.. 2024. 9. 7. 카카오 간편 로그인 구현하기 카카오 간편 로그인 구현하기✅카카오 로그인 절차인가 코드 발급: 사용자가 카카오 로그인 버튼 클릭 → 카카오 서버로 인가 코드 요청 → 사용자 인증 및 동의 후, 카카오가 인가 코드를 서비스에 리다이렉트.토큰 발급: 서비스가 인가 코드로 카카오에 토큰 발급 요청 → 카카오는 서비스에 사용자 토큰 발급.회원 확인 및 등록: 서비스가 사용자 토큰으로 사용자 정보 요청 → 회원 여부 확인 후, 필요시 회원 등록 → 서비스 로그인 처리.서비스 로그인: 서비스가 세션 발급 → 사용자 클라이언트에서 로그인 완료 및 서비스 화면으로 이동.위를 바탕으로 카카오 소셜 로그인을 구현해보자.1. 앱 등록하기아래 링크로 들어가 애플리케이션을 추가한다.https://developers.kakao.com/console/app2... 2024. 8. 24. path를 따라가는 로딩화면 구현하기 ✈️ path를 따라가는 로딩화면 구현하기Next.js에서 페이지 전환 시 로딩 화면을 띄워주고 싶을 때가 있다.특히 초기 로딩이 느릴 때 사용자에게 "로딩 중입니다"라는 신호를 주는 건 UX적으로 꽤 중요하니까! 근데 문제는... 모든 페이지 이동마다 로딩 화면이 보이면 오히려 거슬린다.CSR 기반 라우팅이라 한 번 방문한 페이지는 정말 빨리 열리는데, 그 짧은 순간에도 로딩이 보이면 되려 방해됨 😅 그래서 처음 방문한 페이지에서만 로딩이 나오고, 이후에는 로딩 없이 자연스럽게 이동되도록 구현해봤다.비행기 애니메이션 SVG 컴포넌트import React from 'react';type LoadingProps = { width?: number;};export default function Loadin.. 2024. 8. 16. ReferenceError: document is not defined (feat. Next.js + lottie) 프로젝트 잘 진행하다가 dev실행했을 때 갑자기 오류가 났다.... 팀원이 lottie를 적용한 toastify를 수정 후 그 PR이 develop 브랜치에 머지 후에 갑자기 아래와 같은 오류가 발생했다.. 보니 lottie가 문제. document is not defined 오류는 Next.js의 서버 측 렌더링(SSR) 환경에서 클라이언트 전용 코드가 실행될 때 발생한다. Lottie 애니메이션을 사용할 때 이 오류가 발생하는 이유는 Lottie 라이브러리가 DOM 요소에 접근하려고 하기 때문이다.해결하기 위해서는 클라이언트 측에서만 Lottie 애니메이션을 렌더링하도록 설정해야 한다.해결 방법) Lottie 컴포넌트 클라이언트 전용으로 설정하기// Lottie 컴포넌트를 클라이언트에서만 렌더링하도록.. 2024. 8. 14. 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-toa.. 2024. 8. 8. [모던 리액트 Deep Dive] 15장. 마치며 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com[15장] 마치며15.1 리액트 프로젝트를 시작할 때 고려해야 할 사항✨유지보수 중인 서비스라면 리액트 버전을 최소 16.8.6에서 최대 17.0.2로 올려두자리액트 16.8에서 훅이 소개됐고, 훅 덕분에 함수형 컴포넌트의 개념이 정립됐다.17 버전은 기능 출.. 2024. 7. 31. [모던 리액트 Deep Dive] 11장. Next.js 13과 리액트 18 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com [11장] Next.js 13과 리액트 18Next는 SSR 구조에 많은 변화가 있는 리액트 18을 채택함기존 Next의 큰 약점이었던 레이아웃 지원을 본격적으로 지원하기 시작했고, 바벨을 대체할 러스트 기반 SWC를 뒤이어 웹팩을 대체할 Turbopack까.. 2024. 7. 27. [모던 리액트 Deep Dive] 4장. 서버 사이드 렌더링 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com [4장] 서버 사이드 렌더링4.1 서버 사이트 렌더링이란?✨싱글 페이지 애플리케이션의 세상📍싱글페이지 애플리케이션이란렌더링과 라우팅에 필요한 대부분의 기능을 브라우저의 자바스크립트에 의존하는 방식최초에 첫 페이지에서 데이터를 모두 불러온 이후에는 페이지 전.. 2024. 7. 10. Parsing error: Cannot find module 'next/babel' Next 강의 프로젝트 설치를 했는데 위와 같은 오류가 떴다."Babel 모듈을 찾을 수 없다"✨해결방법1. .babelrc 파일 생성{ "presets": ["next/babel"], "plugins": []} .eslintrc.json 파일 수정{"extends": ["next/babel", "next/core-web-vitals"]}해결 완~^^ 2024. 5. 27. 이전 1 다음
