CGV 클론코딩 Trouble shooting

Front-End Github 

# Troble-shooting

1 ) Cannot read properties of undefined

리액트에서 가장 자주 보는 오류 메시지이다. 이 오류는 값이 정의되지 않아 읽을 수 없을 때 발생한다.

includes 로 배열을 돌리기 전에 값이 불러와지지 않아 오류 발생.

Uncaught TypeError: Cannot read properties of undefined (reading 'classList')

해결)

{seats.A.map((item,index) => <ChoPersonscreen key={index} onClick ={() =>selectSeat(item)}  reserveseat = {Reserved?.a&&Reserved?.a.includes(item)} selected = {selectedSeat === (item)}/>)}

&& 연산자를 사용, 앞 뒤로 false 값을 찾고, false가 없다면 뒤에 있는 값을 출력한다.

조건식에 false가 있는 경우 null이 되고 렌더링 하지 않으며, 렌더링 하지 않으니 오류도 출력 되지 않는다.

 

2) Kakao 소셜 로그인

전체적인 흐름

순서

1. 카카오 로그인을 요청하면 Redirect URI를 통해 파라미터에 인가코드를 받는다

2. 파라미터에 온 인가코드를 저장하여 백엔드 서버로 보내준다. 

3. 백엔드 서버에서 카카오에 POST로 인가코드를 보내면 Response로 토큰을 받아서 프론트엔드에 전달하게 되고,

4. 클라이언트가 로그인을 하면 성공. 셋팅 한 대로 로컬 스토리지에 토큰이 저장되면 된다. 

 

과정

1. Kakao developers에서 카카오 소셜로그인을 선택하고 내 React 애플리케이션을 등록한다. 

2.REST API키를 받고 Redirect URI에 카카오로부터 인가코드를 받을 URI를 등록한다. 나의 경우 카카오 로딩 페이지라는 컴포넌트로 리다이렉트 될 수 있도록 했다. Redirect URI는 프론트엔드에서 접근 가능한 주소여야 한다고 한다.

//KakaoLoading.jsx

import React from "react";
import styled from "styled-components";
import { useDispatch } from "react-redux";
import { getKakao } from "../redux/modules/user";
import { useEffect } from "react";

const KakaoLoading = () => {
  const dispatch = useDispatch();
  const params = new URLSearchParams(window.location.search); //주소뒤의 ? 가 파라미터를 전달해준다는 뜻//?code=..이면 주소창이 전달해주는 파라미터의 이름은 code 이다.
  let code = params.get("code");
  console.log(code); //주소창에서 localhost3000/loading/?code= ....  에서 code= "~~~" 가져오기

  useEffect(() => {
    //주소창에서 뗀 code를 토큰가져오는 함수에 보내줌
    dispatch(getKakao(code));
  }, []);

  return (
    <Div>
      <img src="https://cdn.jjalbot.com/2021/12/tPaZBIZ-K/tPaZBIZ-K.gif" />
    </Div> // 스피너 gif
  );
};

export default KakaoLoading;

3.로그인 버튼을 만든다. 

//OAuth.js

const REST_API_KEY = "Kakao에서 받은 REST API"; 
const REDIRECT_URI = "http://www.localhost:3000/loading/"; //Redirect를 loading페이지로 함

export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;

4. KAKAO_AUTH_URL을 import 해서 로그인 버튼에 붙여준다.

5.카카오 로그인 버튼 이미지 주소도 긁어와서 a태그 안에 붙여줌.

//카카오 로그인 미들웨어    //엑스트라리듀서 안씀

export const getKakao = createAsyncThunk(
  "user/getKakao",
  async (code, thunkAPI) => {
    //주소창의 code 뽑아낸걸 payload로 받음
    try {
      const data = await instance.get(`/auth/kakao?code=${code}`); //서버주소+코드정보 로 get요청을 보내면 response에 토큰을 받을수있다.
      const ACCESS_TOKEN = data.data.data;
      localStorage.setItem("token", ACCESS_TOKEN); //로컬스토리지에 토큰저장
      window.location.assign("/"); //토큰 저장하면 자동으로 메인화면으로 이동
      return data;
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  }
);

6. 카카오 로그인 누르면 개인 정보 제공 동의하기를 누르고 

7. Get이 성공적이라면 로딩페이지에서 메인페이지로 들어가고 로컬스토리지에 토큰이 저장되어야한다.

 

문제 발생 : 에러코드 404 -> 500

404 에러로 서버에서 찾을수 없는 페이지에 사용자가 접근하려 했을 때 받는 에러 메시지가 떴다. 로딩페이지에서 param으로 받은 code는 잘 전송이 되었다.

404 에러 해결 후 500 에러가 떴다.

 

문제의 원인

 

1. 백엔드에서 Redirect URL를 백엔드 서버 주소로 등록.

2. REST API KEY가 일치 하지 않았음

3. 백엔드 알고리즘 과정에서 오류

 

해결한 과정

1. API 주소는 BE에서 작성한대로 "/auth/kakao" 로  잘 썼는지 확인해보기

2. "/auth/kakao/"로 붙여보기도 함

3. 서버 주소 끝에 "/" 가 붙어있어서 중복으로 "/"가 들어간건 아닌지 확인

4. 카카오에서 받은 Rest API Key가 잘못된 것은 아닌지 확인

5. Redirect URI 도 혹시모르니 확인

6. useEffect로 미들웨어로 잘 dispatch 해주고 있는지 확인

7. 마지막으로 BE분과 API가 맞는지 확인해보았고 동일한 API를 등록 해 놓지 않았음 -> 수정

8. 그러고 500에러가 떴는데 정보는 잘 전달 되었지만 생일을 형변환하는 과정에서 알고리즘 과정에서 오류가났다.

9. 이번엔 닉네임을 가져오는 과정에서 알고리즘상 오류로 500에러.

10. 백엔드쪽 알고리즘을 손본 후에 정상적으로 로그인이 가능해짐!

 

# 해결

1. 404 error: 프론트와 백에서 각각다른 REST IP와 redirect_uri 사용하고 있어서 수정해주었다.

2. 500 error : 백엔드쪽 알고리즘 수정을 통해 닉네임을 가져오지 못해 났던 500 error를 해결하였다.