공지사항에 적혀있는 https://www.inflearn.com/questions/417079
게시글 토대로 작업해보아도 에러가 발생해서 약간 수정했습니다.
리액트 버전업으로 app div에 마운트 하는 구문 수정하니 에러 안났고, BrowserRouter는 위치를 App 내부로 옮겼습니다.
client.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "@layouts/App";
ReactDOM.createRoot(document.getElementById("app") as HTMLElement).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
BrowserRouter를 App의 제일 큰 wrapper로 변경했고, Redirect는 Navigate로 대체했습니다.
참고로 replace가 있어야만 url이 변경되고 없으면 그냥 LogIn 컴포넌트만 불러오더라구요.
App.tsx
import React from "react";
import { Routes, Route, Navigate, BrowserRouter } from "react-router-dom";
import SignIn from "@pages/SignIn";
import SignUp from "@pages/SignUp";
const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Navigate replace to="/signin" />} />
<Route path={"/login"} element={<SignIn />} />
<Route path={"/signup"} element={<SignUp />} />
</Routes>
</BrowserRouter>
);
};
export default App;
Webpack dev server 실행시 SocketClient is not a constructor 오류발생
위 오류는 webpack-cli 와 @pmmmwh/react-refresh-webpack-plugin 라이브러리를 버전업 시키니 해결되었습니다.
해결방법을 공지로 올려주셨던 제로초님, 이전의 해결법을 올려주셨던 유동규님 모두 감사합니다.