파피루스

1. 원하는 로티 파일 찾아서 다운받기https://lottiefiles.com/featured-free-animations Featured Free Lottie Animations - Curated Motion DesignsExplore our featured free Lottie animations, handpicked for quality and creativity. Discover free animations to enhance your projects with stunning motion graphics.lottiefiles.com 2. 다운받은 파일을 프로젝트 내의 폴더로 옮기기 3. lottie player 설치npm i react-lottie-player  4. Lottie renderin..

앞서 말하자면 아래 url로 접속하면 튜토리얼이 잘 되어 있다.https://console.cloud.google.com/customer-identity/providers?project=calendar-with&walkthrough_id=identity-platform--sign-in-user-email 1. Identity Toolkit API 를 사용 설정한다.2. identity platform 을 사용설정한다 (추가하려는 프로젝트명이 맞는지 확인한다) (링크)3. 공급업체 추가하기 4. 테스트용 사용자 추가하기나는 사용자 aaa@test.aa , aaaa1111 의 정보로 게정을 추가했다.  5. API 키로 Identity Platform 클라이언트 SDK 초기화  6. 구글에서 제공한 테스트 ..

Next Client Component = React const { name } = useParams(); Next Server componenttype PageProps = {  params: { slug: string }  searchParams: { [key: string]: string | string[] | undefined }};export default function Page({  params,  searchParams } : PageProps ) {  return My Page}  Next app router 1. GETimport { type NextRequest } from 'next/server'   export function GET(request: NextRequest) {   ..

사용자가 애플리케이션(클라이언트)을 통해 리소스 서버에 접근하기 위해 권한을 부여받는 과정 flow사용자 요청: 사용자가 클라이언트에게 로그인 및 권한을 요청합니다.인증 요청: 클라이언트가 사용자 대신 인증 서버로 인증 요청을 보냅니다.사용자 인증 및 승인: 인증 서버는 사용자를 인증하고, 사용자가 권한 부여를 승인합니다.Authorization Code 발급: 인증 서버는 클라이언트에게 인증 코드를 발급합니다.Access Token 요청: 클라이언트는 인증 코드를 사용하여 인증 서버에 액세스 토큰을 요청합니다.Access Token 발급: 인증 서버가 클라이언트에게 액세스 토큰을 발급합니다.자원 요청: 클라이언트가 액세스 토큰을 사용하여 자원 서버에 리소스를 요청합니다.자원 반환: 자원 서버가 요청된 ..

문제- 구성한 endpoint가 잘 동작하는지 테스트해보니 아래처럼 400 오류가 난다. (redirect_uri_mismatch) 해결일단 나는 두가지를 수정 했고, 이후 정상적으로 동작하는 것 확인했다.1. oauth client id 발급 시, redirect uri 구성을 잘못함- 승인된 redirection uri에 액세스 토큰 발급 후, 연결할 내 페이지 정보를 넣어주어야 한다.- 넣은 정보를 endpoint link 구성할 때 redirect_uri 의 value값으로 넣어주어야 한다.2. redirect_uri 의 value 값을 encode 해서 넣어야 함  위처럼 변경하고 나면, Link 형태로 만들어서 클릭해도, 콜백 페이지로 잘 이동한다.  관련 글 : https://reeny404..

액세스 토큰을 받기 위해 oauth client id를 이전에 발급받았다. (link) [next/react] google 로그인 구현하기 (1) : oauth client id 발급 받기구글 로그인을 구현하기 위해 설정부터 해보자 1. 사용자 인증 정보, oauth client id를 발급받자아 동의 화면이 없어서 oauth client id 발급이 어렵다고 한다...0. 동의화면 구성하기 1. 다시 처음에 시reeny404.tistory.com  액세스 토큰 발급받기 하단의 endpoint와 매개변수를 조합하여, 본인의 link를 만들자 - 보기 좋게 줄바꿈 넣어두었지만, 실제 쓸 때는 공백없이 한줄로 link 연결시키면 됨- redirect_uri, client_id 의 value 수정 필수- re..

구글 로그인을 구현하기 위해 설정부터 해보자 1. 사용자 인증 정보, oauth client id를 발급받자https://console.cloud.google.com/apis/credentials아 동의 화면이 없어서 oauth client id 발급이 어렵다고 한다...0. 동의화면 구성하기 1. 다시 처음에 시도했던 oauth client id 발급 받자    참고 문서 : https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow?hl=ko

0. vscode extension에서 prettier, eslint 설치 1. 기본 포맷터를 prettier로 설정 2. fomat on save : 체크하기  3. tsx 파일 Single Quote 설정3-1. eslint 설정 3-2. .prettierrc 설정 4. 완성! 이제 저장하면 tsx 파일의 quote 들 모두 자동으로 single quote으로 fomatting 된다