FACTS(사실, 객관) : 내가 한 일
(1) 투두리스트 (베이직반)
문제발생
화면이 표시되지 않는 문제
콘솔, eslint 그 어디에서도 에러는 안뜨는데 화면상에 아무것도 뜨지 않는 문제를 발견.
원인추론
언제부터 문제된건지? - 라우터 설정이후 (이전에는 정상적으로 표시됐음)
어디에서 문제된건지 모르겠어서 일단 여기저기 console.log를 찍어봄. 먼저 모든 화면에 뿌려주는 레이아웃 컴포넌트에
const RootLayout = () => {
console.log("dsfd"); // 디버깅용 콘솔로그
return (
<RootLayoutMain className="main-center">
<RootLayoutContents>
<Outlet />
</RootLayoutContents>
</RootLayoutMain>
);
};
찍었더니
콘솔에 잘 찍힌다!
아무래도 라우터 컴포넌트를 만들면서 잘못 작성한것 같아 그쪽을 위주로 확인
import { BrowserRouter, Routes, Route } from "react-router-dom";
import RootLayout from "./components/layout/RootLayout";
import Home from "./page/Home";
import TodoDetailPage from "./page/TodoDetailPage";
const Router = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<RootLayout />}>
<Route path="/" element={<Home />} />
<Route path="/:id" element={<TodoDetailPage />} />
</Route>
</Routes>
</BrowserRouter>
);
};
export default Router;
Router.jsx 문제 없는것 같다.
import RootLayout from "./components/layout/RootLayout";
import TodoProvider from "./context/TodoContext";
import Router from "./Router";
const App = () => {
return (
<RootLayout>
<TodoProvider>
<Router />
</TodoProvider>
</RootLayout>
);
};
export default App;
App.jsx 이상하다. Route.jsx에서 분명 <Route path="/" element={<RootLayout />}> 로 레이아웃을 넣어줬는데 여기에도 레이아웃이 있다.
해결방안
import RootLayout from "./components/layout/RootLayout";
import TodoProvider from "./context/TodoContext";
import Router from "./Router";
const App = () => {
return (
<TodoProvider>
<Router />
</TodoProvider>
);
};
export default App;
이렇게 감싸고 있던 <RootLayout>을 지우고 나니 화면에 정상적으로 표시된다.
(2) mbti 테스트 사이트 만들기
문제발생
로그인 페이지 외 다른 페이지로 이동이 안됨
원인추론
1. 잘못된 URL설정
=> 확인 결과 아님 !! 중복해서 사용되는 url을 컴포넌트로 만들어 넣는 과정에서 모든 컴포넌트를 확인했는데 아니었음 ㅠ
2. ProtectedRoute의 잘못된 설정
=> 확인 결과 아님 !!
import { Navigate } from "react-router-dom";
const ProtectedRout = ({ user, children }) => {
if (!user) {
return <Navigate to="/login" />;
}
return <>{children}</>;
};
export default ProtectedRout;
이런 프로텍트 라우트를 설정했는데 이 부분을 주석처리하고도 같은 문제가 계속됨
해결방안
튜터님께 질문하러가서 한가지 문제 상황에서 특징을 발견
=> 화면이 깜빡임 => 이런 문제는 useEffect 에 의한 것. 관련 코드를 수정해야한다.
확인 결과
레이아웃에 잘못 작성된 useEffect 코드를 발견
import { useEffect } from "react";
import { Link, Outlet, useNavigate } from "react-router-dom";
const Layout = ({ user, setUser }) => {
const navigate = useNavigate();
useEffect(() => {
if (!user) {
// 로그인 하지 않았다면
navigate("/login"); // 로그인 페이지로 이동
}
}, [user, navigate]);
이런게 레이아웃컴포넌트에 있으니 당연히 로그인페이지로 이동할수밖에
아마 컴포넌트를 착각해서 잘 못 작성한 코드 같다
해당 useEffect 코드를 삭제하니 정상적으로 다른 페이지로의 이동도 가능해졌다.
(3) mbti 테스트 사이트 만들기
문제발생
로그인 / 회원가입시 에러가 뜸
db.json에 이미 존재하지 않을 뿐더러 db.json에 회원가입한 내용이 쌓이지 않음
혹시나? 해서 같은 아이디로 로그인 해보니
잉??
근데 여전히 로그인은 되지 않음
원인추론
AuthURL의 잘못된 설정? 잘 모르겠음
해결방안
해결못함
FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌
너무어렵다!
제대로 굴러가던 코드도 이거저거 해보다가 망가뜨리고 아주 답답하다
FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것
문제 상황에서 화면이 깜빡인다! => useEffect 문제일 확률이 크다!
FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지