3. KakaoTalk -> Web Page ✍️
Callback with Tokens ☝️
✅ a) 카카오톡에서의 콜백 처리 방법을 익혀야 한다.
✅ b) 콜백으로부터 토큰을 추출하는 방법을 이해해야 한다.
🟠 토큰 받기 flow
- '인가 코드'로 '토큰 발급' 요청 ⚠️
사용자가 '인가 코드'를 요청하면, Redirect URI에 인가 코드가 쿼리 스트링의 형태로 추가된다. 따라서 인가 코드는 Redirect 경로에서 useLocation을 통해 확인하게 된다.
'토큰 발급 요청'은 '인가 코드'를 전제로 하기 때문에, '토큰 발급 요청'에 대한 로직은 Redirect 파일에 작성되어야 한다. Redirect 경로에 도달하는 순간 곧바로 토큰 발급 요청이 진행되기 위해서는 useEffect를 활용하는 것이 맞겠다.
- '필수 파라미터'를 포함하여 'POST'로 요청 ⚠️
기본정보에서 제시하는 URL에 '토큰 발급'을 요청하게 된다. 이때, POST 메서드로 요청을 하되, URL에 '필수 파라미터'가 포함되어야 한다. 요청의 구체적인 방식을 후술하고자 한다.
- '요청'의 구체적인 방법 ⚠️
3-1. Request header
header에는 Content-type이 포함되어야 한다. 세부적인 내용은 위와 같다.
3-2. Request body
- 코드 ⚠️
🟠 useEffect 복습(의존성 배열의 효과)
0. 의존성 배열이란?
setup 코드 내에 있는 reactive value의 list가 의존성 배열이다. props, state, variables 등이 reactive value라고 할 수 있다.
1. useEffect(() => {})
parameter에 의존성 배열을 추가하지 않으면, 컴포넌트가 렌더링 될 때마다 useEffect hook이 반복적으로 호출된다. 매우 비효율적인 방식이기에, 거의 사용되지 않는 패턴이라고 할 수 있다.
2. useEffect(() => {}, [])
parameter에 의존성 배열이 명목상으로만 존재하는 형태이다. 첫 번째 렌더링(=마운트) 때 한 번만 실행되며 어떠한 의존성도 감지하지 않는다. 컴포넌트의 마운트 시에만 실행되는 특성상, 초기화 로직이나 전역 데이터 가져오기와 같은 작업에 사용되는 패턴이다.
3. useEffect(() => {}, [value])
parameter에 의존성 배열이 존재하고, 해당 의존성 배열이 특정 value를 바라보고 있는 패턴이다. 특정 state나 props의 변경에 반응하여 특정 동작을 수행할 때 사용된다. value 변경에 대응하는 효율적인 방식이라고 볼 수 있다.
