cannot get/ 에러 원인

Question

1. npm run dev를 실행하면 아래와 같은 코드가 나오고 compiled successfully 라고 뜹니다. 하지만 상단에 보시면, project is running at : ________빈칸 & 컴포넌트 내부에 작성한 문자가 아닌, 로컬을 열면 cannot get / 이 뜨는데 원인이 뭘까요 ? 2. devServer:{ port: 3090, publicPath:'/dist/' } 윗 코드 작성 자체가 에러가 뜹니다..(빨간밑줄) 해결시도1) publicPath코드 삭제 해결시도2) static :{}안에 넣어주기 시도해봤는데도 cannot get/ 이 뜨네요 아래는 webpack.config,ts파일 입니다 ```js import path from 'path' ; // import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; import webpack from 'webpack' ; // import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; // import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; const isDevelopment = process . env . NODE_ENV !== 'production' ; const config : webpack . Configuration = { name : 'sleact' , mode : isDevelopment ? 'development' : 'production' , devtool : ! isDevelopment ? 'hidden-source-map' : 'eval' , resolve : { extensions : [ '.js' , '.jsx' , '.ts' , '.tsx' , '.json' ], alias : { '@hooks' : path . resolve ( __dirname , 'hooks' ), '@components' : path . resolve ( __dirname , 'components' ), '@layouts' : path . resolve ( __dirname , 'layouts' ), '@pages' : path . resolve ( __dirname , 'pages' ), '@utils' : path . resolve ( __dirname , 'utils' ), '@typings' : path . resolve ( __dirname , 'typings' ), }, }, entry : { app : './client' , }, module : { rules : [ { test : / \. tsx ? $ / , loader : 'babel-loader' , options : { presets : [ [ '@babel/preset-env' , { targets : { browsers : [ 'last 2 chrome versions' ] }, debug : isDevelopment , }, ], '@babel/preset-react' , '@babel/preset-typescript' , ], }, exclude : path . join ( __dirname , 'node_modules' ), }, { test : / \. css ? $ / , use : [ 'style-loader' , 'css-loader' ], }, ], }, plugins : [ ], output : { path : path . join ( __dirname , 'dist' ), filename : '[name].js' , publicPath : '/dist/app.js' , }, devServer : { port : 3090 , static : { publicPath : '/dist/' } , }, }; // devServer: { // historyApiFallback: true, // port: 3090, // devMiddleware: { publicPath: '/dist/' }, // static: { directory: path.resolve(__dirname) }, // proxy: { // '/api/': { // target: 'http://localhost:3095', // changeOrigin: true, // ws: true, // }, // }, // }, // }; // if (isDevelopment && config.plugins) { // config.plugins.push(new webpack.HotModuleReplacementPlugin()); // config.plugins.push( // new ReactRefreshWebpackPlugin({ // overlay: { // useURLPolyfill: true, // }, // }), // ); // config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'server', openAnalyzer: false })); // } // if (!isDevelopment && config.plugins) { // config.plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true })); // config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' })); // } export default config ; ``` 아래는 package.json파일입니다 ```js { "name" : "sleact-front" , "version" : "1.0.0" , "description" : "" , "main" : "index.js" , "scripts" : { "dev" : "cross-env TS_NODE_PROJECT= \" tsconfig-for-webpack-config.json \" webpack serve --env development" }, "author" : "dahee" , "license" : "MIT" , "dependencies" : { "@babel/core" : "^7.16.0" , "@babel/preset-env" : "^7.16.0" , "@babel/preset-react" : "^7.16.0" , "@babel/preset-typescript" : "^7.16.0" , "@types/react" : "^17.0.34" , "@types/react-dom" : "^17.0.11" , "babel-loader" : "^8.2.3" , "cross-env" : "^7.0.3" , "css-loader" : "^6.5.1" , "react" : "^17.0.2" , "react-dom" : "^17.0.2" , "style-loader" : "^3.3.1" , "typescript" : "^4.4.4" , "webpack" : "^5.63.0" }, "devDependencies" : { "@types/node" : "^16.11.7" , "@types/webpack" : "^5.28.0" , "@types/webpack-dev-server" : "^4.3.1" , "eslint" : "^8.2.0" , "eslint-config-prettier" : "^8.3.0" , "eslint-plugin-prettier" : "^4.0.0" , "prettier" : "^2.4.1" , "ts-node" : "^10.4.0" , "webpack-cli" : "^4.9.1" , "webpack-dev-server" : "^4.4.0" } } ``` 아래는 tsconfig-for-webpack-config.son파일입니다. ```js { "compilerOptions" : { "module" : "commonjs" , "moduleResolution" : "Node" , "target" : "es5" , "esModuleInterop" : true } } ```

김병훈 · Answer

제가 겪었던 문제와 동일한 것 같아 링크 첨부합니다! https://www.inflearn.com/chats/343209