본격적인 백엔드와의 데이터 연동을 진행했고, 많은 어려움을 겪었다. 우선 로그인 쪽을 백엔드와 연동했는데 오류로 고생을 했다. 어떻게 하는게 맞는지 잘 몰라서 삽질을 많이 한것 같다.
기존 프론트에서 firebase로 진행했던 부분을 백엔드와 연동하면서 계속 404 오류가 떠서 원인을 찾는데 시간이 걸렸다. 몇 일 고민한 뒤 백엔드 멘토님과 3자 대면으로 오류를 해결했는데 유저가 처음 로그인 했을 경우에는 404오류가 나는게 맞고 404가 떴을 때 프론트에서 POST요청으로 유저 정보를 백엔드로 보내 주면 되는것 이었다. 그 이후에 또 401오류가 났는데 자바 스프링 오류로 속성값의 첫 단어가 한 글자인 경우 @JsonProperty 어노테이션을 붙이지 않으면 오류가 나는것 같았다. 멘토님의 도움으로 해결 할 수 있어서 다행이었다.
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 연동을 좀 더 늦게 시작했어도 되지 않나 싶다.
프로젝트를잘 설명하려면 README를 잘 정리해야 한다고 해서 여러 탬플릿도 찾고 기술뱃지도 달아서 좀 꾸며보는 작업을 진행했다. 아직 프로젝트가 완성된건 아니라서 임시로 템플릿만 만들어서 어떤 느낌인지만 확인하는 용도로 만들어 놓았다. 프로젝트가 끝나면 사용기술과 기능 등 프로젝트를 전반적으로 점검하면서 다시 정리하는 시간이 필요 할 것 같다.
현재 데이터를 붙여보고는 있는데 json-server로 Mock데이터를 만들어서 작업했던 것과 형식이 다르게 와서 실데이터 연동에 어려움을 겪고 있다.
CORS문제를 비롯해서 여러 문제가 한번에 나타나면서 삽질 중에 있다.
데이터가 어떻게 올 지 좀 더 생각해서 데이터를 만들었어야 했고, 작업하면서 백엔드 쪽과 대화를 많이 나눠서 진행했으면 좀 더 원활하게 작업할 수 있었을 텐데 각자 기능을 구현하는게 급해서 커뮤니케이션을 잘 못해서 아쉽다.