일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- 티스토리챌린지
- 셋팅
- 구글 로그인
- 모던 자바스크립트
- 자주 까먹는
- domain
- Next
- React
- 오블완
- js
- array정적메서드
- 리터럴
- 모던자바스크립트
- 코드카타
- 소셜 로그인
- git
- 스파르타코딩클럽
- 프로젝트 셋팅
- 코딩테스트
- vscode
- 코테
- error
- 프로그래머스
- nextjs
- CORS
- 내일배움캠프
- deep dive
- useRouter
- vercel
- 초기셋팅
- Today
- Total
목록Today I Learned (106)
파피루스
에러 응답 원인google api console 에서 사용하겠다고 설정한 영역 밖의 API를 호출해서 에러가 난다. 순서대로 설명하자면, 1. calendar API만 사용하겠다고 설정2. access Token 발급3. people API 사용하겠다고 설정4. 발급받았던 token으로 people API 요청5. 403 forbidden (permission denied)즉, 사용 설정 이후에 token을 받야하는데, 반대로 token 발급 후 사용하겠다고 선언 해서 오류가 떴다 해결accessToken을 재발급 받자!→ accessToken 요청 url에 propmt=consent 를 추가하면 권한 요청을 필수로 하게된다.https://accounts.google.com/o/oauth2/v2/aut..
이전 글: https://reeny404.tistory.com/120 [next/react] google 로그인 구현하기 (2) : 액세스 토큰 받기액세스 토큰을 받기 위해 oauth client id를 이전에 발급받았다. (link) [next/react] google 로그인 구현하기 (1) : oauth client id 발급 받기구글 로그인을 구현하기 위해 설정부터 해보자 1. 사용자 인증 정보reeny404.tistory.com 이전에 액세스 토큰까지 무사히 잘 받아왔다면, 이제 받은 토큰을 이용해서 google 로그인 정보를 가져오자! 로그인 정보?: 내가 개발하는 사이트에 저장할 email이나 nickname 정보를 말한다.구현중인 서비스의 소셜 회원가입/로그인 정책 상 필요한 데이터들 ..
쓰로틀링(Throttling)과 디바운스(Debouncing)는 자주 발생하는 이벤트를 제어하여 성능을 최적화하는 기법으로, 주로 스크롤, 리사이즈, 텍스트 입력 같은 빈번한 사용자 상호작용에 사용됩니다. 두 기법 모두 불필요한 함수 호출을 줄여 성능 문제를 방지하지만, 그 동작 방식과 적용 상황이 다릅니다.1. 디바운스 (Debouncing)디바운스는 마지막 이벤트가 발생한 후 일정 시간이 지나기 전까지는 함수 호출을 미루는 기법입니다. 사용자가 계속해서 이벤트를 발생시키는 동안 함수 호출은 지연되며, 마지막 이벤트 이후 일정 시간이 지나면 비로소 함수가 실행됩니다.동작 방식이벤트가 발생할 때마다 타이머를 설정합니다.만약 새 이벤트가 이전 타이머가 끝나기 전에 발생하면, 이전 타이머를 취소하고 새로운 ..
SSR (Server-Side Rendering)과 CSR (Client-Side Rendering)은 웹 애플리케이션을 렌더링하는 두 가지 방식으로, 각각 고유한 장점과 단점이 있습니다.1. SSR (Server-Side Rendering)SSR은 웹 페이지의 HTML을 서버에서 미리 생성하여 클라이언트(브라우저)로 전달하는 방식입니다. 사용자가 페이지를 요청하면, 서버가 HTML을 렌더링하고 클라이언트로 전송합니다.특징HTML은 서버에서 완성된 형태로 전달됨클라이언트 측에서 별도의 JavaScript 로직이 없더라도 페이지가 바로 보임장점빠른 초기 로드 시간: 서버에서 완성된 HTML을 전송하기 때문에 초기 로딩이 빠릅니다. 특히 저사양 기기나 느린 네트워크 환경에서 이점이 큽니다.SEO 최적화: 검..
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..
사용자가 애플리케이션(클라이언트)을 통해 리소스 서버에 접근하기 위해 권한을 부여받는 과정 flow사용자 요청: 사용자가 클라이언트에게 로그인 및 권한을 요청합니다.인증 요청: 클라이언트가 사용자 대신 인증 서버로 인증 요청을 보냅니다.사용자 인증 및 승인: 인증 서버는 사용자를 인증하고, 사용자가 권한 부여를 승인합니다.Authorization Code 발급: 인증 서버는 클라이언트에게 인증 코드를 발급합니다.Access Token 요청: 클라이언트는 인증 코드를 사용하여 인증 서버에 액세스 토큰을 요청합니다.Access Token 발급: 인증 서버가 클라이언트에게 액세스 토큰을 발급합니다.자원 요청: 클라이언트가 액세스 토큰을 사용하여 자원 서버에 리소스를 요청합니다.자원 반환: 자원 서버가 요청된 ..