swr, gravatar 에러

제로초님! 말씀 주신대로 다음 강의를 듣고 를 코드에 추가하였더니 위의 에러메세지들이 해결되었습니다. 그런데 이번에는 이런 에러가 발생하였습니다. (사진) 를 다시 빼보면 이부분은 에러가 사라지고 mutate(false, false) , userData.email , userData.nickname 부분에 에러가 발생합니다. 깃헙의 소스코드를 보고 혹시나 싶어 url 부분을 'api/users'로 변경해보았지만 에러는 그대로입니다.. ㅜㅜ // db.ts export interface IUser { id: number; nickname: string; email: string; Workspaces: IWorkspace[]; } // fetcher.ts import axios from 'axios'; const fetcher = (url: string) => { axios.get(url, { withCredentials: true }).then((response) => response.data); }; export default fetcher;

npm run dev - webpack-cli 에러

적어주신대로 입력해봤는데 에러가 납니다.. configuration 타입에 문제가 있는건가요? (사진) 아래는 터미널에서 npm run dev 했을 때 에러이고, [webpack-cli] Failed to load 'C:\Users\user\Desktop\coding\sleact\client\webpack.config.ts' config [webpack-cli] webpack.config.ts:80:5 - error TS2322: Type '{ historyApiFallback: true; port: number; static: { publicPath: string; }; }' is not assignable to type 'Configuration'. Object literal may only specify known properties, and 'static' does not exist in type 'Configuration'. 80 static: { publicPath: '/dist/' }, ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ node_modules/@types/webpack-dev-server/index.d.ts:352:9 352 devServer?: WebpackDevServer.Configuration; ~~~~~~~~~ The expected type comes from property 'devServer' which is declared here on type 'Configuration' npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! client@1.0.0 dev: `cross-env TS_NODE_PROJECT="tsconfig-for-webpack-config.json" webpack serve --env development` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the client@1.0.0 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\user\AppData\Roaming\npm-cache\_logs\2021-08-26T14_46_22_658Z-debug.log 아래는 webpack.config.ts 파일 내용입니다. 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: [ // ts와 webpack 동시에 돌아가게 해주는 플러그인 new ForkTsCheckerWebpackPlugin({ async: false, // eslint: { // files: "./src/**/*", // }, }), new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production' }), ], output: { path: path.join(__dirname, 'dist'), filename: '[name].js', publicPath: '/dist/', }, devServer: { historyApiFallback: true, // react router port: 3090, // publicPath: '/dist/', static: { publicPath: '/dist/' }, // proxy: { // '/api/': { // target: 'http://localhost:3095', // changeOrigin: true, // }, // }, }, }; if (isDevelopment && config.plugins) { config.plugins.push(new webpack.HotModuleReplacementPlugin()); config.plugins.push(new ReactRefreshWebpackPlugin()); // config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'server', openAnalyzer: true })); } if (!isDevelopment && config.plugins) { // config.plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true })); // config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' })); } export default config;

npm run build 에러

이 부분 말씀이신거죠~? if (isDevelopment && config.plugins) { config.plugins.push(new webpack.HotModuleReplacementPlugin()); config.plugins.push(new ReactRefreshWebpackPlugin()); // config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'server', openAnalyzer: true })); } if (!isDevelopment && config.plugins) { // config.plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true })); // config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' })); }

npm run build 에러

말씀해주신 파일 보고 emotion 추가 설치했습니다! 그런데 여전히 화면에 아무것도 렌더링이 되지 않고 개발자 도구 열어보니 이런 에러가 있습니다..ㅠㅠ 이것도 설치 문제일까요..? (사진) "dependencies": { "@emotion/babel-plugin": "^11.3.0", "@types/react": "^17.0.19", "@types/react-dom": "^17.0.9", "cross-env": "^7.0.3", "css-loader": "^6.2.0", "react": "^17.0.2", "react-dom": "^17.0.2", "style-loader": "^3.2.1", "ts-node": "^10.2.1", "typescript": "^4.3.5", "webpack-cli": "^4.8.0" }, "devDependencies": { "@babel/core": "^7.15.0", "@babel/preset-env": "^7.15.0", "@babel/preset-react": "^7.14.5", "@babel/preset-typescript": "^7.15.0", "@types/node": "^16.7.1", "@types/webpack": "^5.28.0", "babel-loader": "^8.2.2", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^3.4.1", "prettier": "^2.3.2", "react-refresh": "^0.10.0", "webpack": "^5.51.1" }

npm run build 에러

아~ setting 폴더 안의 package.json이 아니라 완성본에 있는 package.json 파일 보구 설치해야하는건가보네요

dist 폴더가 생기지 않습니다.

아아! 덕분에 의문이 해결되었습니다. 답변 감사합니다❤