메인 플젝 진행 중 - 03 : 무한 스크롤과 + 휠 이미지 슬라이드 + 구글 OAUTH

메인 플젝 기회기 단계 중 우리가 구현하고 싶은 부분에 대해서 추가적으로 공부해야 할 필요성을 느껴서 급하게 블로깅을 합니다. 

 

현재 체크해야 할 부분이 크게 3가지가 있습니다. 

1. 무한 스크롤

2. 휠 스크롤 이미지

3. 구글 OAuth

 

 

   Chapger 01. 무한 스크롤

 

몇 달 전에 수업에서 무한 스크롤 구현을 도전 해보세요! 라고 했을 때, 저는 그냥 데이터를 불러왔고 그대로 화면에 쭈 - 욱 조회 되는 것을 보고 이게.. 무한 스크롤..? 이라고 생각을 했었습니다.. 하지만 어림도 없죠 ! 이런게 무한 스크롤일리가 없죠!

 

그렇게 잊고 있던 중 다시 구현해야 할 상황이 생기게 된 것입니다. 무한 스크롤 (Infinite Scroll) 은 화면을 보던 중 특정 페이지가 하단에 도달 했을 때, API 가 호출 되며 콘텐츠가 끊기지 않고 계속 로드되는 UX( 사용자 경험) 방식입니다. 그냥 다 불러와서 보여주는 방식이 아니라 특정 지점에 도달 했을 때마다 API 를 호출해서 " 스크롤 " 행위 만으로 대량의 데이터를 끊임없이 볼 수 있게 해주는 기능입니다. 

 

 

준비물 : 

- 특정 지점을 구분하기 위한 page 값과  size 값

 - 대량의 더미 데이터 

 

 

방법 : 

1. 직접 커스텀 훅을 통한 구현 방법

2. Intersection Observer API 구현 방법 

 

Intersection Observer API 

브라우저 Viewport (사용자가 보고 있는 화면 부분 ) 와 Target(무한 스크롤이 실행되어야 할 포인트) 으로 설정한 요소의 교차점을 관찰하여 그 Target이 ViewPort에 포함되는지와 같은 변경 사항을 비동기적으로 구별하는 기능을 제공합니다. 

 

 

직접 구현해보고 싶어서 따로 글도 열었습니다. 코드의 흐름이나 좀더 상세한 이야기는 아래의 링크로 이동해주세요! 

<작성 중 - 내용 무-> React에서 무한 스크롤을 구현해봅시다.

 

 

 

# 참고 블로그 

[1] 카카오 실전 Infinite Scroll with React 

[2] MDN_Intersection Obsesrver API

[3] 실무에서 느낀 점을 곁들인 Intersection Observer API 정리

 

 

 

 

 

   Cahpter 02. 휠 스크롤 이미지

 

 

 

https://codepen.io/mrspok407/pen/bwLwvL

https://wsss.tistory.com/2016

 

 

 

 

 

   Chapter 03 . 구글 OAuth

 구글 OAuth

Thirdy-Party 프로그램에게 리소스 소유자를 대신하여 리소스 서버에서 제공하는 자원에 대한 접근 권한을 위임하는 방식입니다. 

 

 

저희가 궁금한 것은 이것입니다. 구글 OAuth 를 진행 할 때 A소속과 B소속으로 선택할 수 있는 단계를 넣어서 각 유저가 어느 소속인지에 대한 정보를 백엔드 서버 쪽에 함께 넘길 수 있는가 입니다. 

 

제가 이해한 구글 OAuth 의 흐름은 다음과 같습니다. 

 

Google에서 가져온 흐름 설명 사진입니다.

 

##  구글 OAuth 흐름 

1. Google API  Console 에서  OAuth 2.0  사용자 인증 정보를 가져옵니다. 

프로젝트를 생성하고 구글로부터 해당 프로젝트에서 구글 OAuth 를 사용하겠다는 인증을 받아야 하는 것 같습니다. 

 

 

 

2. Google 승인 서버에서 액세스 토큰을 받습니다.

자바 스크립트는 Google로의 브라우저 리디렉션을 사용하여 액세스 토큰을 요청합니다.

 

 

3. 사용자가 부여한 액세스 범위를 검사합니다.

자바 스크립트는 Google로의 브라우저 리디렉션을 사용하여 액세스 토큰을 요청합니다.

 

 

4. 액세스 토큰을 API로 전송합니다. 

액세스 토큰을 HTTP 승인 요청 헤더에 담아 Google API로 토큰을 전송합니다. 

토큰을 URI 쿼리 문자열 매개변수로 보낼 수 있지만 안전의 위험으로 권장하지 않습니다. 

 

액세스 토큰은 요청의 scope 에 설명된 작업 및 리소스 집합에만 유효합니다.  = Google Calendar API 에 액세스 토큰이 발급되면 Google 주소록 API 에 대한 액세스 권한이 부여되지 않습니다. 그러나 유사한 작업을 위해 액세스 토큰을 Google Calendar API 에 여러번 보낼 수 있습니다. 

 

5. 필요한 경우 액세스 토큰을 갱신합니다 - refreshtoken 

액세스 토큰은 수명이 제한 되어 있습니다. 그러나 갱신 토큰을 사용ㅇ하면 새 액세스 토큰을 가져올 수 있습니다.!

 

https://velog.io/@leesoeun98/OAuth%EC%9D%98-%EA%B0%9C%EB%85%90-%EB%B0%8F-%ED%9D%90%EB%A6%84-%EC%A0%95%EB%A6%AC

 

참고 사이트 

[1] 구글 OAuth doc