KAKAO API를 사용한 LOGIN 기능

로그인이 이뤄지는 과정

프론트에서 카카오 서버에 인가 코드를 받기 위한 통신 ->
카카오 서버에서 프론트로 인가 코드를 전달 ->
프론트에서 백엔드로 인가 코드를 전달하기 위한 통신 ->
백엔드에서 발급한 토큰을 프론트에 전달 ->
프론트 localstorage에 저장

준비

1. 통신을 하기 위해 사용할 키값으로 JavaScript 키와
   REST API 키 둘 중 하나를 정해 사용해야 했는데,
   백엔드 분과 REST API를 사용하기로 사전에 합의 후 작업을 진행했다.

2. 작업을 하며 매번 번거롭게 주소를 작성하고 싶지 않아
   주소를 변수로 만들어 사용.
   유저의 ID는 .env 파일에 저장해 github에 업로드 되지 않도록 했다.

내가 할 일

로그인 버튼을 클릭 시 카카오 로그인 페이지로 이동하며,
이동 후 계정 정보를 입력해 로그인을 하면 redirect가 일어난다.
내가 할 일은 redirect가 일어난 후 카카오와 백엔드와 통신해
로그인 처리를 하는 것이었다.

어려웠던, 그리고 알게된 부분

1. queryString형식으로 데이터를 처리하기

javascript 형식이 아닌 REST API로 카카오에 유저 데이터를
보내려면 queryString 형식으로 만들어 body에 담아 전달해야 한다는
말을 멘토님께 들었다.

queryString 형식으로 만드는 방법을 혼자서 해결해 보려
몇 시간을 소비하고 난 후, 혼자서는 해결이 불가능하다고 판단해
나와 비슷한 작업을 하는 분들에게 여쭤보며 작업을 진행했다.

그렇게 얻어낸 코드

2. 인가 코드 가져오기

유저 데이터를 queryString으로 만들어 주는 코드를 작성했으니
body에 넣을 데이터를 작성해야했다.

다른 부분은 수월하게 작성했는데, 인가 코드를 받아와 놓고도
어떻게 코드를 가져와야 할 지를 몰라 구글링을 통해 알아봤고
그 결과, url에서 원하는 값만 받아올 수 있는
searchParams라는 메서드를 알게 되었다.
(명확히 말하면 URLSearchParams 함수를 통해
해시값 (key,value)으로 만드는 것이다.)

그런데 이 코드를 본 멘토님은 useSearchParams 메서드를
말씀해주시며 코드의 간결화를 강조하셨고, 사용법에 대해
설명해주셔서 곧바로 적용해 쉽게 인가 코드를 가져올 수 있었다.

3. useNavigate 사용

10월까지는 link 나 this.props.history.push등의 사용으로
페이지 이동을 해왔다.
하지만 얼마 전 있었던 react-router-dom v6 업데이트로
페이지 이동이 정말 간편해졌는데, 바로 useNavigate를 사용하는 것이다.

import { useNavigate } from 'react-router-dom';

function practice() {
  const navigate = useNavigate();
  
  function goingMain() {
    navigate('/main');
  }
  return (
    <div>
      <button onClick={goingMain}>메인 페이지 이동</button>
    </div>
  );
}

export default practice;

2. 서버로 이미지와 댓글을 업로드