Watch Me Code: React x Typescript로 Slack 클론코딩하기대시보드

노드의 버전이 다른 경우가 있는데 nvm으로 관리하시면 편합니다. nvm git repository

안녕하세요 로더블 적용후 npm start 하면 이러한 청크에러가 뜹니다. 해결방법이 무엇인지 모르겠습니다..   -     아래 코드는 run dev 했을때 터미널에 나타나는 코드 입니다. ```js > sleact-front@1.0.0 dev /home/dahee/projects/inflearn/sleact/alecture > cross-env TS_NODE_PROJECT="tsconfig-for-webpack-config.json" webpack serve --env development <w> [webpack-dev-server] "hot: true" automatically applies HMR plugin, you don't have to add it manually to your webpack configuration. <i> [webpack-dev-server] [HPM] Proxy created: /api/ -> http://localhost:3095 <i> [webpack-dev-server] Project is running at: <i> [webpack-dev-server] Loopback: http://localhost:3090/ <i> [webpack-dev-server] On Your Network (IPv4): http://172.30.1.10:3090/ <i> [webpack-dev-server] Content not from webpack is served from '/home/dahee/projects/inflearn/sleact/alecture' directory <i> [webpack-dev-server] 404s will fallback to '/index.html' @babel/preset-env: `DEBUG` option Using targets: { "chrome": "94" } Using modules transform: auto Using plugins: syntax-class-static-block syntax-private-property-in-object syntax-class-properties syntax-numeric-separator syntax-nullish-coalescing-operator syntax-optional-chaining syntax-json-strings syntax-optional-catch-binding syntax-async-generators syntax-object-rest-spread syntax-dynamic-import proposal-export-namespace-from { } syntax-top-level-await Using polyfills: No polyfills were added, since the `useBuiltIns` option was not set. asset app.js 1.73 MiB [emitted] (name: app) asset vendors-node_modules_emotion_styled_base_dist_emotion-styled-base_browser_esm_js-node_modules-55caac.js 170 KiB [emitted] (id hint: vendors) asset pages_SignUp_index_tsx.js 48.8 KiB [emitted] asset layouts_Workspace_index_tsx.js 3.2 KiB [emitted] asset pages_Login_index_tsx.js 3.15 KiB [emitted] runtime modules 31.4 KiB 16 modules orphan modules 10.3 KiB [orphan] 2 modules modules by path ./node_modules/ 1.59 MiB 219 modules modules by path ./pages/ 43 KiB ./pages/Login/index.tsx 1.19 KiB [built] [code generated] ./pages/SignUp/index.tsx 5.27 KiB [built] [code generated] ./pages/SignUp/styles.tsx 36.5 KiB [built] [code generated] modules by path ./layouts/ 3.3 KiB ./layouts/App/index.tsx 2.09 KiB [built] [code generated] ./layouts/Workspace/index.tsx 1.21 KiB [built] [code generated] ./client.tsx 1.26 KiB [built] [code generated] ./hooks/useinput.ts 1.33 KiB [built] [code generated] sleact (webpack 5.63.0) compiled successfully in 4851 ms   ```   아래는 App.js에 있는 라우팅 코드 입니다. ```js import loadable from '@loadable/component' import React from "react"; import { Route, Switch, Redirect } from "react-router-dom"; const LogIn = loadable(() => import('@pages/Login')); const SignUp = loadable(() => import('@pages/SignUp')); const Workspace = loadable(() => import('@layouts/Workspace')); const App = () => { return ( <Switch> <Redirect exact path="/" to="/login" /> <Route path="/login" component={LogIn} /> <Route path="/signup" component={SignUp} /> <Route path="/workspace/:workspace" component={Workspace} /> </Switch> ) } export default App;   ```   현재시점 webpack.config파일입니다 ```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', ], env: { development: { plugins: [['@emotion', { sourceMap: true }], require.resolve('react-refresh/babel')], }, production: { plugins: ['@emotion'], }, },   }, exclude: path.join(__dirname, 'node_modules'), }, { test: /\.css?$/, use: ['style-loader', 'css-loader'], }, ], }, plugins: [ new ForkTsCheckerWebpackPlugin({ async: false, }), new ReactRefreshWebpackPlugin(), new webpack.HotModuleReplacementPlugin() ], output: { path: path.join(__dirname, 'dist'), filename: '[name].js', publicPath: '/dist/app.js', }, devServer: { historyApiFallback: true, port: 3090, devMiddleware: { publicPath: "/dist/" }, static: { directory: path.resolve(__dirname) }, proxy : { '/api/': { changeOrigin: true, target:'http://localhost:3095' } } }, }; ```

소켓 연결 요청을 보내는 것 같기는 한데, connected가 false라서요. 소켓 연결 부분이 안되니까 다음 단계 진행이 힘드네요 ㅠㅠ    

  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 } } ```        

npm install --global --production windows-build-tools   만약 위 명령어로도 제대로 설치되지 않는다면 npm install --global --production windows-build-tools@4.0.0 특정한 버전으로 설치한 후 재부팅하고 설치를 진행해보세요.   참고 링크: https://www.inflearn.com/questions/15344  

제로초님 폴더 구조에서 컴포넌트 안에서 또 폴더로 구분하는 것도 좋은 방법일까요? 규모가 커져서 컴포넌트가 많아지고 오직 하나의 컴포넌트 안에서만 쓰이는 컴포넌트가 있다면 종속된 컴포넌트 안에다가 컴포넌트를 만들어서 쓰기도 하는지 궁금하네요 ~