강좌보면서 proxy 설정하고 back 폴더 npm run dev, alecture 폴더 npm run build 했는데 회원가입 버튼을 누르니 콘솔창에 시간차로 계속 Access to XMLHttpRequest at 'https://sleact.nodebird.com/api/users' from origin 'http://localhost:3095' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.app.js:2 GET https://sleact.nodebird.com/api/users net::ERR_FAILED 200 (OK)(익명) @ app.js:2e.exports @ app.js:2e.exports @ app.js:2l.request @ app.js:2r.forEach.l.<computed> @ app.js:2(익명) @ app.js:2r.Z @ 678.js:1(익명) @ app.js:2(익명) @ app.js:2(익명) @ app.js:2(익명) @ app.js:2o @ app.js:2(익명) @ app.js:2(익명) @ app.js:2D @ app.js:2[신규] Edge에서 Copilot을 사용하여 콘솔 오류 설명: 클릭 오류를 설명합니다. 자세한 정보 다시 표시 안 함signup:1 Access to XMLHttpRequest at 'https://sleact.nodebird.com/api/users' from origin 'http://localhost:3095' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.app.js:2 GET https://sleact.nodebird.com/api/users net::ERR_FAILED 200 (OK)(익명) @ app.js:2e.exports @ app.js:2e.exports @ app.js:2l.request @ app.js:2r.forEach.l.<computed> @ app.js:2(익명) @ app.js:2r.Z @ 678.js:1(익명) @ app.js:2(익명) @ app.js:2(익명) @ app.js:2(익명) @ app.js:2o @ app.js:2(익명) @ app.js:2setTimeoutonErrorRetry @ app.js:2(익명) @ app.js:2(익명) @ app.js:2(익명) @ app.js:2u @ app.js:2Promise.thenc @ app.js:2(익명) @ app.js:2o @ app.js:2(익명) @ app.js:2(익명) @ app.js:2D @ app.js:2signup:1 Access to XMLHttpRequest at 'https://sleact.nodebird.com/api/users' from origin 'http://localhost:3095' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.319.js:1 undefinedapp.js:2 POST https://sleact.nodebird.com/api/users net::ERR_FAILED라는 오류가 발생합니다. copilot을 실행시켜보니 Access-Control-Allow-Origin과 Origin이 같아야하는데 Access-Control-Allow-Origin 부분이 누락되었다고 나옵니다. 네트워크 200번대는 실행에는 성공한거라고 들었는데... 도움주시면 감사하겠습니다!제 webpack.config.ts 첨부하겠습니다. import path from 'path'; //import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; import webpack, { Configuration as WebpackConfiguration } from "webpack"; import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server"; //import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; interface Configuration extends WebpackConfiguration { devServer?: WebpackDevServerConfiguration; } import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; const isDevelopment = process.env.NODE_ENV !== 'production'; const config: 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: ['IE 10'] }, debug: isDevelopment, }, ], '@babel/preset-react', '@babel/preset-typescript', ], env: { development: { plugins: [require.resolve('react-refresh/babel')], }, }, }, exclude: path.join(__dirname, 'node_modules'), }, { test: /\.css?$/, use: ['style-loader', 'css-loader'], }, ], }, plugins: [ // 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, devMiddleware: { publicPath: '/dist/' }, static: { directory: path.resolve(__dirname) }, 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; 

PS C:\Users\Master\inflearn\lecture-frontend-dev-env> npx eslint --initYou can also run this command directly using 'npm init @eslint/config@latest'.@eslint/create-config: v1.4.0√ How would you like to use ESLint? · problems√ What type of modules does your project use? · esm√ Which framework does your project use? · none√ Does your project use TypeScript? · javascript√ Where does your code run? · browserThe config that you've selected requires the following dependencies:eslint, globals, @eslint/js√ Would you like to install them now? · No / Yes√ Which package manager do you want to use? · npm☕Installing...npm WARN idealTree Removing dependencies.eslint in favor of devDependencies.eslintadded 2 packages, changed 1 package, and audited 799 packages in 2s111 packages are looking for funding run npm fund for details 설치가 됐는데 .eslintrc.js파일에 아무것도 안 뜨고 eslint.config.mjs파일이 설치됐어요

PS C:\Users\Master\inflearn\lecture-frontend-dev-env> npm run build> lecture-frontend-dev-env@1.0.0 build> webpack --progress70% building 0/0 modules 0 activeC:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\babel-loader\lib\cache.js:22const findCacheDirP = import("find-cache-dir");^TypeError: Invalid host defined optionsat Object.<anonymous> (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\babel-loader\lib\cache.js:22:23)at Module._compile (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)at Module.load (node:internal/modules/cjs/loader:1119:32)at Module._load (node:internal/modules/cjs/loader:960:12)at Module.require (node:internal/modules/cjs/loader:1143:19)at require (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)at Object.<anonymous> (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\babel-loader\lib\index.js:19:15)at Module._compile (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)at Module.load (node:internal/modules/cjs/loader:1119:32)at Module._load (node:internal/modules/cjs/loader:960:12)at Module.require (node:internal/modules/cjs/loader:1143:19)at require (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)at loadLoader (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\loader-runner\lib\loadLoader.js:18:17)at iteratePitchingLoaders (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\loader-runner\lib\LoaderRunner.js:169:2)at runLoaders (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\loader-runner\lib\LoaderRunner.js:365:2)at NormalModule.doBuild (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModule.js:295:3)at NormalModule.build (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModule.js:446:15)at Compilation.buildModule (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\Compilation.js:739:10)at C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\Compilation.js:981:14at C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModuleFactory.js:409:6at C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModuleFactory.js:155:13at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)at C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModuleFactory.js:138:29at C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModuleFactory.js:346:9at process.processTicksAndRejections (node:internal/process/task_queues:77:11)Node.js v18.18.2

안녕하세요 어느 날 갑자기 로그인 페이지가 무한 새로고침 현상이 발생 됩니다 백엔드 쪽에는 로그 /api/users 304로 새로고침마다 계속 응답해줘서 문제가 없는 것 같고 프런트쪽 문제인 것 같은데 개발자 도구를 볼 수 없을정도로 계속 새로고침 되서 당황스럽네요 ㅠㅠ 그래서 제로초님 깃허브 front/App/index.tsx, front/LogIn/index.tsx 코드 전체 붙여넣어도 동일 현상이 발생됩니다... 무언가 라이브러리 충돌이 있나 싶은데 package.json 코드입니다{ "name": "artus-sleact-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack serve --env development", "build": "cross-env NODE_ENV=production webpack", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "ethan", "license": "MIT", "dependencies": { "@emotion/babel-plugin": "^11.11.0", "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", "@loadable/component": "^5.16.4", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15", "autosize": "^6.0.1", "axios": "^1.7.2", "cross-env": "^7.0.3", "css-loader": "^7.1.2", "dayjs": "^1.11.12", "gravatar": "^1.8.2", "react": "^17.0.2", "react-custom-scrollbars": "^4.2.1", "react-dom": "^17.0.2", "react-mentions": "^4.4.10", "react-refresh": "^0.14.2", "react-router": "^5.3.4", "react-router-dom": "^5.3.4", "react-toastify": "^7.0.4", "regexify-string": "^1.0.19", "socket.io-client": "^4.7.5", "style-loader": "^4.0.0", "swr": "^2.2.5", "ts-node": "^10.9.2", "typescript": "^5.5.3", "webpack-bundle-analyzer": "^4.10.2", "webpack-cli": "^5.1.4" }, "devDependencies": { "@babel/core": "^7.24.7", "@babel/preset-env": "^7.24.7", "@babel/preset-react": "^7.24.7", "@babel/preset-typescript": "^7.24.7", "@types/autosize": "^4.0.3", "@types/loadable__component": "^5.13.9", "@types/node": "^20.14.9", "@types/react-custom-scrollbars": "^4.0.13", "@types/react-mentions": "^4.1.13", "@types/react-router": "^5.1.20", "@types/react-router-dom": "^5.3.3", "@types/socket.io-client": "^1.4.35", "@types/webpack": "^5.28.5", "@types/webpack-bundle-analyzer": "^4.7.0", "@types/webpack-dev-server": "^4.7.2", "@types/gravatar": "^1.8.6", "@types/react": "^17.0.80", "@types/react-dom": "^17.0.25", "babel-loader": "^9.1.3", "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", "eslint-config-react-app": "^7.0.1", "eslint-plugin-flowtype": "^8.0.3", "eslint-plugin-import": "^2.29.1", "eslint-plugin-jsx-a11y": "^6.9.0", "eslint-plugin-prettier": "^5.1.3", "eslint-plugin-react": "^7.34.4", "fork-ts-checker-webpack-plugin": "^9.0.2", "prettier": "^3.3.2", "webpack": "^5.92.1", "webpack-dev-server": "^4.15.2" } }

"devDependencies": { "webpack": "^4.41.5", "webpack-cli": "^3.3.10" }수업과 동일한 명령어를 실행하려면 강의 내용과 동일한 버전을 사용하시면 문제 없이 실행됩니다. 버전이 바뀜에 따라 --help 결과물과 명령어 옵션들이 다소 변경되네요. (webpack major version이 4여도 변경 여부가 있습니다) 수업 노트에 webpack@4.41.5 버전을 사용하도록 안내해주시면 어떨까요? 

11:00쯤 file-loader부분입니다 질문. 해쉬로바뀐 이미지가 왜 로딩이 안되나요?? 

안녕하세요. 강의에서 배운 내용 응용해서 사이드 프로젝트 만드는 중인데 Module not found: Error: Can't resolve './App' in '/Users/taetae/Documents/github/PicKIvy/frontend/src' 오류가 고쳐지지 않아 질문드립니다. (시도해본 해결방법들)[ Tsconfig.json ]“jsx": "react-jsx" 으로 설정됐는지 확인 -> 그래도 안됌“paths" 확인>  "baseUrl": "src",  (원래 “.”이었음)    "paths": {      "@pages/*": ["pages/*"],      "@components/*": ["components/*"],      "@layouts/*": ["layouts/*"],      "@hooks/*": ["hooks/*"],      "@utils/*": ["utils/*"],      "@typings/*": ["typings/*"]    }, 패스에 전부 src/붙여서  "@pages/*": [“src/pages/*"], 해봤는데 안됨 “moduleResolution": "node", 확인 -> 그래도 안됌 [ Web pack.config]Extensions: [ “.tsx”] 으로 설정됐는지 확인 -> 그래도 안됌package-lock.json지우고 다시 Npm install안됌 ( rm -rf node_modules package-lock.json ->npm cache clean --force -> npm install ) [ index.tsx ]import App from './App'; 을 import App from './App.tsx; ‘ 로 해봤는데 안됌[ 폴더구조, tsconfig ][ 웹팩 ]import path from 'path'; import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; import webpack, { Configuration as WebpackConfiguration } from 'webpack'; import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; // import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server'; interface Configuration extends WebpackConfiguration { devServer?: WebpackDevServerConfiguration; } const isDevelopment = process.env.NODE_ENV !== 'production'; const config: Configuration = { name: 'PicKivy', mode: isDevelopment ? 'development' : 'production', devtool: isDevelopment ? 'inline-source-map' : 'hidden-source-map', resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'], alias: { '@hooks': path.resolve(__dirname, 'src/hooks'), '@components': path.resolve(__dirname, 'src/components'), '@layouts': path.resolve(__dirname, 'src/layouts'), '@pages': path.resolve(__dirname, 'src/pages'), '@utils': path.resolve(__dirname, 'src/utils'), '@typings': path.resolve(__dirname, 'src/typings'), }, }, entry: { app: './src/index.tsx', }, target: ['web', 'es6'], module: { rules: [ { test: /\.tsx?$/, loader: 'babel-loader', exclude: /node_modules/, options: { presets: [ [ '@babel/preset-env', { targets: { browsers: ['> 0.25%', 'not dead'] }, // 최신 브라우저 타겟팅 debug: isDevelopment, }, ], '@babel/preset-react', '@babel/preset-typescript', ], plugins: [ '@babel/plugin-transform-runtime', isDevelopment && 'react-refresh/babel', '@emotion/babel-plugin', ].filter(Boolean), }, }, { test: /\.css$/, use: ['style-loader', 'css-loader'], }, { test: /\.(png|jpg|gif|svg)$/, type: 'asset/resource', }, ], }, plugins: [ new ForkTsCheckerWebpackPlugin({ async: false, }), new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production' }), ], output: { path: path.join(__dirname, 'dist'), filename: '[name].[contenthash].js', publicPath: '/dist/', }, devServer: { historyApiFallback: true, port: 3000, devMiddleware: { publicPath: '/dist/' }, static: { directory: path.resolve(__dirname, 'public') }, proxy: { '/api/': { target: 'http://localhost:3000', 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; 코드 복붙하니까 코드가 이상하게 나와서 캡쳐본도 올립니다. (test: /\.tsx? 아래부분부터) [ App, index ]@page 하니까 에러떠서 ./로 했습니다. 이것때문에 계속 못하고 있는데 저에게 답을 알려주시면 감사하겠습니다...ㅠ.ㅜ

babel-loader 만 webpack.config.js에 설정하면 제가 적었던 babel.config.js는 저절로 인식이되는것인가요?

new HtmlWebpackPlugin({ template: "./src/index.html", templateParameters: { env: process.env.NODE_ENV === "development" ? "(개발용)" : "" }, minify: process.env.NODE_ENV === "production" ? { collapseWhitespace: true, removeComments: true, } : false }), new CleanWebpackPlugin({ }), ...(process.env.NODE_ENV === "production" ? [new MiniCssExtractPlugin({filename: "[name].css"})] : []) ]왜 MiniCssExtractPlugin에서는 spread operator를 쓰고 삼항연산자를 쓴 건가요? 위에 HtmlWebpackPlugin에서 한것처럼 그냥 process.env.NODE_ENV 삼항연산자를 쓰면 되는게 아닌가요?추가적으로 spread operator를 쓴 이유를 알고 싶습니다!!

안녕하세요. eslint 강의를 듣고 있습니다. 답변해주시면 감사하겠습니다!버전은 아래와 같습니다."@eslint/js": "^9.9.1", "@stylistic/eslint-plugin-js": "^2.6.4", "webpack": "^5.93.0", "webpack-cli": "^5.1.4" eslint 공식홈에 no-extra-semi 사용법을 확인하면 아래와 같이 나와있습니다.https://eslint.org/docs/latest/rules/no-extra-semi#rule-detailsThis rule was deprecated in ESLint v8.53.0. Please use the corresponding rule in @stylistic/eslint-plugin-js.8.53.0 버전부터 deprecated가 되어서 stylistic 플러그인을 사용해서 쓰라고 되어 있습니다. 그래서 아래와 같이 설정을 했습니다.// eslint.config.js import js from "@eslint/js"; import stylisticJs from '@stylistic/eslint-plugin-js' export default [ js.configs.recommended, { plugins: { '@stylistic/js': stylisticJs, }, } ];그런데, no-extra-semi rule이 동작을 하지 않고 아래와 같이 rules안에 명시를 해줘야만 동작을 합니다. 플러그인만 명시하면 되는게 아니라 사용할 rule을 하나하나 명시해줘야만 하는건가요?// eslint.config.js import js from "@eslint/js"; import stylisticJs from '@stylistic/eslint-plugin-js' export default [ js.configs.recommended, { plugins: { '@stylistic/js': stylisticJs, }, rules: { "@stylistic/js/no-extra-semi": "error" } } ]; 그리고 추가적으로 궁금한 것은 deprecated 되었다고 했는데 왜 아래와 같이 eslint에서 "no-extra-semi" 를 사용할 수 있는걸까요?// eslint.config.js import js from "@eslint/js"; import stylisticJs from '@stylistic/eslint-plugin-js' export default [ js.configs.recommended, { rules: { "no-extra-semi": "error" } } ];

제가 백엔드 강의는 수강한 적이 없어서요, 대신 노드js 교과서 책을 구매해서 가지고 있는데..우선 프론트는 네트리파이로 배포 완료했습니다https://admirable-donut-f22cc6.netlify.app/백엔드 배포는 선생님 책 노드js 교과서 722쪽 AWS 배포하기 부터 보면서 하면 별 문제없지 진행할 수 있을까요? 추가적으로 백엔드쪽 코드 수정이 필요할지..배포할 레포 구조는 아래 처럼 루트 폴더 하위에 백엔드, 프론트 폴더 각각 있습니다

1) "webpack": "^5.94.0", "webpack-cli": "^5.1.4"node_modules/.bin/webpack --mode development --entry ./src/app.js --output-path ./dist다른 질문글에 open index.html 을 했는지 모르겠지만 저는 잘 안되더라구요차이점은 ./dist/main.js 에서 ./dist 입니다.main.js를 /dist/main.js/main.js 이렇게 만들어버리더라구요그래서 요상한 에러들 때문에 해맸었습니다.2) 제가 봤던 에러는 크롬 디버깅창에 main.js를 그대로 로딩하지않고 마치html처럼 <!DOCTYPE html> 이 첫줄에 추가된 체로 로딩이 되어서 unexpected token "<" 와 같은에러를 봤습니다.혹시 왜 js를 html로 랩핑? 해서 읽어온 이유를 아시나요?

안녕하세요 제로초님점점 npm run dev 할 떄마다 빌드 속도가 엄청 느려지는 것 같아서요아래 단계에서만 한 5분 있어야 success 뜨더라구요구글링, 지피티로도 알아보았지만 해결되지 않아 질문 드립니다단서 될만할지는 모르겠지만 제 윈도우 pc 사양이랑 설치된 패키지 내역입니다// package.json { "name": "sleact-ts-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack serve --env development", "build": "cross-env NODE_ENV=production webpack" }, "author": "ZeroCho", "license": "MIT", "dependencies": { "@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0", "@loadable/component": "^5.16.4", "@mui/icons-material": "^5.16.5", "@mui/material": "^5.16.5", "@types/gravatar": "^1.8.6", "@types/react": "^18.2.42", "@types/react-dom": "^18.3.0", "autosize": "^6.0.1", "axios": "^0.26.1", "core-js": "^3.15.1", "cross-env": "^7.0.3", "gravatar": "^1.8.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router": "^6.25.1", "react-router-dom": "^6.25.1", "socket.io-client": "^2.5.0", "swr": "^2.2.5", "typescript": "^4.4.2" }, "devDependencies": { "@babel/core": "^7.13.8", "@babel/preset-env": "^7.13.8", "@babel/preset-react": "^7.12.13", "@babel/preset-typescript": "^7.13.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.0", "@types/autosize": "^4.0.3", "@types/fork-ts-checker-webpack-plugin": "^0.4.5", "@types/loadable__component": "^5.13.9", "@types/node": "^16.11.26", "@types/react-router-dom": "^5.3.3", "@types/socket.io-client": "^1.4.35", "@types/webpack": "^5.28.0", "@types/webpack-dev-server": "^4.0.3", "autoprefixer": "^10.4.19", "babel-loader": "^8.2.2", "css-loader": "^6.2.0", "eslint": "^8.13.0", "eslint-config-prettier": "^8.1.0", "eslint-config-react-app": "^7.0.1", "eslint-plugin-flowtype": "^8.0.3", "eslint-plugin-import": "^2.29.1", "eslint-plugin-jsx-a11y": "^6.9.0", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.35.0", "fork-ts-checker-webpack-plugin": "^7.2.3", "postcss": "^8.4.39", "postcss-loader": "^8.1.1", "prettier": "^2.2.1", "react-refresh": "^0.12.0", "sass": "^1.77.8", "sass-loader": "^15.0.0", "style-loader": "^3.2.1", "tailwindcss": "^3.4.4", "ts-node": "^10.0.0", "webpack": "^5.24.2", "webpack-cli": "^4.5.0", "webpack-dev-server": "^4.0.0" } }

안녕하세요 제로초님components 의 alias 경로가 오류가 나서요 질문 드립니다저는 src 폴더를 추가해서 한번 더 감싼 구조에서 이에 맞게 alias 경로를 세팅했는데요import { TextField, Button } from '@components'; 이렇게 불러오면 components 폴더의 index 파일이 자동으로 인식되는 걸로 알고 있는데, 에러가 뜨더라구요그래서 import { TextField, Button } from '@components/index'; 로 해야 정상적으로 불러오던데 왜 index를 별도로 입력해야 하는지 모르겠어서요반면 @assets alias 경로에 있는 icons는 index 입력 없이 index 파일을 잘 불러와서 문제가 없더라구요 // webpack.config.ts alias: { '@assets': path.resolve(__dirname, './src/assets'), '@hooks': path.resolve(__dirname, './src/hooks'), '@components': path.resolve(__dirname, './src/components'), '@layouts': path.resolve(__dirname, './src/layouts'), '@pages': path.resolve(__dirname, './src/pages'), '@utils': path.resolve(__dirname, './src/utils'), '@typings': path.resolve(__dirname, './src/typings'), }, // tsconfig.json "paths": { "@assets/*": ["./src/assets/*"], "@hooks/*": ["./src/hooks/*"], "@components/*": ["./src/components/*"], "@layouts/*": ["./src/layouts/*"], "@pages/*": ["./src/pages/*"], "@utils/*": ["./src/utils/*"], "@typings/*": ["./src/typings/*"] }  

Login.tsx에서 swr로 호출한 users의 data 값을 return 직전에 console 로그로 찍어봤는데요네트워크 탭에서는 users 요청은 한번 밖에 없었는데undefined와 false가 연달아서 찍히더라구요다른 질문에서 답변해주신 내용을 보니 데이터 로딩중엔 undefined라고 말씀해주셨는데, 맨 처음 컴포넌트가 렌더링될 때 useSWR이 api를 호출하게 되고 이때 console.log(data)는 아직 데이터가 로딩 중이라서 undefined가 찍히게 되고, 이후 데이터 로딩이 완료되면 useSWR이 다시 호출되어? false가 찍히는 프로세스로 이해했는데 맞는걸까요그렇다면 useSWR로 api호출 시 무조건 최소 2번 렌더링될 수 밖에 없는걸까요?// Login.tsx import React, { useState, useCallback, useEffect } from 'react'; import { TextField, Button } from '@components/index'; import { Link, Navigate } from 'react-router-dom'; import { useInput } from '@hooks/useInput'; import { LogoSlack } from '@assets/icons/'; import axios from 'axios'; import useSWR from 'swr'; import fetcher from '@utils/fetcher'; const Login = () => { // useSWR은 get으로 요청한 데이터를 받아와서 저장한다. // mutate : 내가 원할 때 SWR 호출하기 const { data, error, mutate } = useSWR('http://localhost:3095/api/users', fetcher, { dedupingInterval: 5000, // 주기적으로 호출하지만, dedupingInterval 기간 내에는 캐시에서 불러온다 }); const [logInError, setLogInError] = useState(false); const [email, setEmail, onChangeEmail] = useInput(''); const [password, setPassword] = useInput<string>(''); const onChangePassword = useCallback( (e: React.ChangeEvent<HTMLInputElement>) => { setPassword(e.target.value); }, [email, password, data], ); const onSubmit = useCallback( (e) => { setLogInError(false); axios .post( 'http://localhost:3095/api/users/login', { email, password }, { withCredentials: true, }, ) .then(() => { mutate(); }) .catch((error) => { setLogInError(error.response?.status === 401); }); }, [email, password], ); console.log(data); // if (data) return <Navigate to="/workspace/channel" />; return ( <div className="max-w-[400px] mx-auto px-[20px]"> <h1 className="flex justify-center pt-[60px] pb-[20px]"> <LogoSlack /> <span className="blind">Slack</span> </h1> <TextField label="이메일 주소" type="email" value={email} onChange={onChangeEmail} /> <TextField label="비밀번호" type="password" value={password} onChange={onChangePassword} /> {logInError && <p className="mb-[20px] mt-[-10px] text-red-500 font-normal">로그인 실패</p>} <Button text="로그인" onClick={onSubmit} /> <p className="mt-[10px] text-center"> Slack을 처음 사용하시나요? <Link to="/sign" className="ml-[4px] text-blue-600"> 회원가입 </Link> </p> </div> ); }; export default Login;

커스텀 훅에서 사용된 제네릭에 대해서 공부하다가 궁금한게 생겨서요.아래 테스트 코드에서'+' 연산자는 'T' 및 'T' 유형에 적용할 수 없습니다. 라는 에러 코드가 발생하는 이유가 이해가 안 가서요위 함수는 사용한다면 아래 처럼 숫자 또는 문자인 타입으로 쓰일텐데, 그러면 return 값에서 + 연산자가 number + number 또는 문자열 + 문자열로 실행되어 문제가 없을 것 같은데 에러가 뜨는 이유가 모르겠어서요add<number>(1, 2); add<string>('1', '2');지피티에 질문해보니 함수 오버로드를 쓰거나 return 값에 any를 쓰라곤 하는데 잘못된 방법 같고 extends로 타입 제한을 걸어도 같은 에러가 뜹니다function add<T extends number | string>(x: T, y: T): T { return x + y; }제가 참고한 제네릭 레퍼런스 자료입니다https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Generic-%ED%83%80%EC%9E%85-%EC%A0%95%EB%B3%B5%ED%95%98%EA%B8%B0#%EC%A0%9C%EB%84%A4%EB%A6%ADgenerics_%EC%86%8C%EA%B0%9C

질문: 1.ts-node로 이어나가도 괜찮을까요?2. outdated 명령어 쳐보니 버전이 강의에서 한두개 추가설치했지만, 이제 빨간 글씨로 10개 정도 다 버전 업그레이드를 요구했습니다.제가 고쳐나가면서 나아가보면될지 궁금합니다.ㅡㅡㅡㅡㅡㅡㅡㅡ상황: 몇주전 타입스크립트를 다른 강의로 시작했습니다.최근 환경설정에서 ts-node 사용시 오류가 계속 떠서 그 강의가 tsx 사용을 권장했고, tsx로 입문했습니다.그래서 ts-node로 잘돌아갈지 의문입니다.

ERROR in app.js from TerserError: error:0308010C:digital envelope routines::unsupported구글링해보니 리액트밖에 안뜨네요.. 어떻게 해야 하나요?

예상하지 못한 부분에서 에러가 나와서 질문 남겨드립니다 !ChatBox.tsximport React, { useCallback, useEffect, useRef, VFC } from 'react'; import { ChatArea, EachMention, Form, MentionsTextarea, SendButton, Toolbox } from './styles'; import autosize from 'autosize'; import { Mention, SuggestionDataItem } from 'react-mentions'; import { useParams } from 'react-router'; import useSWR from 'swr'; import { IUser } from '@typings/db'; import fetcher from '@utils/fetcher'; import gravatar from 'gravatar'; interface Props { chat: string; onSubmitForm: (e: any) => void; onChangeChat: (e: any) => void; placeholder?: string; } const ChatBox: VFC<Props> = ({ chat, onSubmitForm, onChangeChat, placeholder }) => { const { workspace } = useParams<{ workspace: string }>(); const { data: userData, error, revalidate, mutate, } = useSWR<IUser | false>('/api/users', fetcher, { dedupingInterval: 2000, // 2초 }); const { data: memberData } = useSWR<IUser[]>(userData ? `/api/workspaces/${workspace}/members` : null, fetcher); const textareaRef = useRef<HTMLTextAreaElement>(null); useEffect(() => { if (textareaRef.current) { autosize(textareaRef.current); } }, []); const onKeydownChat = useCallback( (e) => { if (e.key === 'Enter') { if (!e.shiftKey) { e.preventDefault(); onSubmitForm(e); } } }, [onSubmitForm], ); const renderSuggestion = useCallback( ( suggestion: SuggestionDataItem, search: string, highlightedDisplay: React.ReactNode, index: number, focus: boolean, ): React.ReactNode => { if (!memberData) return; return ( <EachMention focus={focus}> <img src={gravatar.url(memberData[index].email, { s: '20px', d: 'retro' })} alt={memberData[index].nickname} /> <span>{highlightedDisplay}</span> </EachMention> ); }, [memberData], ); return ( <ChatArea> <Form onSubmit={onSubmitForm}> <MentionsTextarea id="editor-chat" value={chat} onChange={onChangeChat} onKeyPress={onKeydownChat} placeholder={placeholder} inputRef={textareaRef} allowSuggestionsAboveCursor > <Mention appendSpaceOnAdd trigger="@" data={memberData?.map((v) => ({ id: v.id, display: v.nickname })) || []} renderSuggestion={renderSuggestion} /> </MentionsTextarea> <Toolbox> <SendButton className={ 'c-button-unstyled c-icon_button c-icon_button--light c-icon_button--size_medium c-texty_input__button c-texty_input__button--send' + (chat?.trim() ? '' : ' c-texty_input__button--disabled') } data-qa="texty_send_button" aria-label="Send message" data-sk="tooltip_parent" type="submit" disabled={!chat?.trim()} > <i className="c-icon c-icon--paperplane-filled" aria-hidden="true" /> </SendButton> </Toolbox> </Form> </ChatArea> ); }; export default ChatBox;혼자서 해결해보려다가 못찾고 있어서 질문 남겨드려요 ㅠㅠ

이전 질문을 보면 react-mention 추천이 커서 아래로 나온다고 해서 공식 문서를 확인해봤습니다.결론적으로는 forceSuggestionsAboveCursor을 사용하면 됩니다. 해당 내용은 제로초님 sleact 레파지토리에 pull request 하였습니다.allowSuggestionsAboveCursor는 아래 공간이 부족하면 위에 배치가 '가능'하도록, 즉 워크스페이스 사람이 적으면 아래로 배치forceSuggestionsAboveCursor는 항상 위로 배치allowSuggestionsAboveCursor: Renders the SuggestionList above the cursor if there is not enough space belowforceSuggestionsAboveCursor: Forces the SuggestionList to be rendered above the cursor