5주차 - 데이터 연동

본격적인 백엔드와의 데이터 연동을 진행했고, 많은 어려움을 겪었다. 우선 로그인 쪽을 백엔드와 연동했는데 오류로 고생을 했다. 어떻게 하는게 맞는지 잘 몰라서 삽질을 많이 한것 같다.

구글 로그인 연동

기존 프론트에서 firebase로 진행했던 부분을 백엔드와 연동하면서 계속 404 오류가 떠서 원인을 찾는데 시간이 걸렸다. 몇 일 고민한 뒤 백엔드 멘토님과 3자 대면으로 오류를 해결했는데 유저가 처음 로그인 했을 경우에는 404오류가 나는게 맞고 404가 떴을 때 프론트에서 POST요청으로 유저 정보를 백엔드로 보내 주면 되는것 이었다. 그 이후에 또 401오류가 났는데 자바 스프링 오류로 속성값의 첫 단어가 한 글자인 경우 @JsonProperty 어노테이션을 붙이지 않으면 오류가 나는것 같았다. 멘토님의 도움으로 해결 할 수 있어서 다행이었다.

AuthProviders.jsx

import React, { useEffect, useState, useMemo } from 'react';
import { onAuthStateChanged } from 'firebase/auth';
import { auth } from '../service/firebase';

export const AuthContext = React.createContext();

export const defaultHeaders = {
  'Content-Type': 'application/json',
  Accept: 'application/json',
};

export default function AuthProviders({ children }) {
  const [currentUser, setCurrentUser] = useState(null);
  useEffect(() => {
    onAuthStateChanged(auth, async user => {
      if (user) {
        // 토큰을 가져온다.
        const token = await user.getIdToken();
        console.log(token, 'AuthProvider Token');
        // Header에 인증 정보 추가
        defaultHeaders.Authorization = `Bearer ${token}`;
        setCurrentUser(user);
        // 로그인 시도 (백엔드 API 구현 필요)
        const res = await fetch('/users/me', {
          method: 'GET',
          headers: defaultHeaders,
        });

        // 로그인 성공시 user를 넘겨줌
        if (res.status === 200) {
          const loginUser = await res.json();
          setCurrentUser(loginUser);
        } else if (res.status === 404) {
          await fetch('/users', {
            method: 'POST',
            headers: defaultHeaders,
            body: JSON.stringify({
              uNickname: user.displayName,
            }),
          });
        }
      } else {
        setCurrentUser(null);
      }
    });
  }, []);

  const contextValue = useMemo(
    () => ({
      currentUser,
    }),
    [],
  );

  return (
    <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
  );
}

API연동

실데이터를 연동하면서 데이터 형식이 맞지 않아서 전체 데이터를 불러오지 못하는 상황이라 다시 데이터를 맞추는 작업을 진행하고 있는데 프론트 수정과 API 수정이 동시에 이루어지다 보니까 작업하기 어려운 상황이 많아서 API 연동을 좀 더 늦게 시작했어도 되지 않나 싶다.

README.md

프로젝트를잘 설명하려면 README를 잘 정리해야 한다고 해서 여러 탬플릿도 찾고 기술뱃지도 달아서 좀 꾸며보는 작업을 진행했다. 아직 프로젝트가 완성된건 아니라서 임시로 템플릿만 만들어서 어떤 느낌인지만 확인하는 용도로 만들어 놓았다. 프로젝트가 끝나면 사용기술과 기능 등 프로젝트를 전반적으로 점검하면서 다시 정리하는 시간이 필요 할 것 같다.

개발진행 상황

현재 데이터를 붙여보고는 있는데 json-server로 Mock데이터를 만들어서 작업했던 것과 형식이 다르게 와서 실데이터 연동에 어려움을 겪고 있다.
CORS문제를 비롯해서 여러 문제가 한번에 나타나면서 삽질 중에 있다.

느낀 점

데이터가 어떻게 올 지 좀 더 생각해서 데이터를 만들었어야 했고, 작업하면서 백엔드 쪽과 대화를 많이 나눠서 진행했으면 좀 더 원활하게 작업할 수 있었을 텐데 각자 기능을 구현하는게 급해서 커뮤니케이션을 잘 못해서 아쉽다.

profile
Hello!

0개의 댓글