(공유) react18, router6 썼을때 기본구조 및 소켓컨스트럭터 에러

공지사항에 적혀있는 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 라이브러리를 버전업 시키니 해결되었습니다.

해결방법을 공지로 올려주셨던 제로초님, 이전의 해결법을 올려주셨던 유동규님 모두 감사합니다.