settings/ts 폴더 front로 바꿔서 진행할 경우 셋팅 강의 하나도 들을 필요없이 바로 섹션2부터 진행해도 되는건가요?

강좌에서 언급한대로 직접 세팅하기보다는 그냥 settings/ts 폴더 클론받아서 하시는 것을 추천드립니다. 직접 세팅하기에는 버전이 자꾸 달라져서 세팅법이 바뀌고, 입문자분들한테는 버겁습니다. 폴더가 많아서 헷갈리니 back 폴더는 백엔드 용으로 남겨두시고, setting/ts 폴더를 front 폴더로 바꾼 뒤 나머지 폴더는 전부 지워버리세요. 라는 말씀에 따라다음과 같이 세팅을 했는데,alecture 폴더로 들어가 npm init 을 하라고 하시는 부분이 이해가 어렵습니다.

웹소켓 커넥션은 유지되어 데이터까지 들어오지만 view update는 브라우저 focus되어야만 발생하는걸 보여주셨는데요 원인과 대중적인 해결방법이 있는지 궁금합니다(사파적 방식x, 대중적인 정파적 방식o)

useEffect가 잘못짜면 디버깅이 골치아파서 관리에 신경을 쓰는데요. 제로초님의 useEffect 사용패턴이 궁금합니다 deps가 같은 것 끼리는 전부 묶어둔다deps가 같아도 로직 범주가 다르면 분리한다 저는 보통 2번을 선호하는데 useEffect 많아져서 드러워집니다. 그렇다고 1번은 더 머리가 아픈데,, 제로초님의 기준이나 이 문제에 대한 나름의 best practice가 있으신지 궁금합니다  

강의에서 말씀주시는 것 처럼 가급적 라이브러리를 쓰고 싶은데요. 제가 경력이 짧아서인지 라이브러리 서치에 애를 먹습니다 "가장 대중 픽" 찾는다고 할 때 어떤 방법으로 접근하시는지 궁금합니다제 생각엔 다운로드 수..는 순위가 아닌 절대량이라 모호하고 이 기능은 요즘 이게 좋더라하는 얘기를 나누는 커뮤니티가 따로 있으려나요? npm이나 구글링해서 나오는 무수한 라이브러리들 다 비교하는건 거시기한 상황입니다

react 개발하다보면 대부분의 파일에서 export default 하나만을 하게 되는데요. 아래 2가지 패턴 중 2번을 주로 사용하시는 것 같아서 이유가 있으신지 궁금합니다export default function ABC()const ABC = () => {}export default ABC; 저는 1번을 강하게 선호하고 왜 굳이 하나의 함수에 대한 정의를 둘로 나눠 거리를 벌리는지 이해가 안 가는데요, 코딩 고수(?)들이 주로 2번 패턴을 사용하셔서 이유가 궁금합니다

npm run dev시 새로운 에러가 발생하여 재질문 드립니다.http://localhost:3090/Login 연결시, 크롬에서 Failed to compile. 가 발생하였습니다.Module not found: Can't resolve '@utils/fetcher' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/layouts' layouts/workspace.tsx터미널 메세지입니다.ERROR in ./pages/Login/index.tsx 17:0-39Module not found: Error: Can't resolve '@hooks/useInput' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/Login'@ ./layouts/App.tsx 7:9-31@ ./client.tsx 9:0-32 12:95-98ERROR in ./pages/Login/index.tsx 19:0-37Module not found: Error: Can't resolve '@utils/fetcher' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/Login'@ ./layouts/App.tsx 7:9-31@ ./client.tsx 9:0-32 12:95-98ERROR in ./pages/SignUp/index.tsx 17:0-39Module not found: Error: Can't resolve '@hooks/useInput' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/SignUp'@ ./layouts/App.tsx 11:9-32@ ./client.tsx 9:0-32 12:95-98ERROR in ./pages/SignUp/index.tsx 23:0-37Module not found: Error: Can't resolve '@utils/fetcher' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/SignUp'@ ./layouts/App.tsx 11:9-32@ ./client.tsx 9:0-32 12:95-98 ㅡtsconfig.json 파일입니다"paths": { "@hooks/*": ["hooks/*"], "@components/*": ["components/*"], "@layouts/*": ["layouts/*"], "@pages/*": ["pages/*"], "@utils/*": ["utils/*"], "@typings/*": ["typings/*"] }ㅡwebpack.config.ts 파일입니다resolve: { extensions: ['.js', '.jsx', '.front', '.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'), // 경로 폴더들 }, },ㅡ현재 터미널 경로입니다/Desktop/study/react/zerocho/sleact/setting/frontts 폴더에서 설정 후, front 라는 폴더명으로 바꾸어서 진행중입니다. 감사합니다

강의를 클론 받은 후, /sleact/setting/ts 경로에서 npm i 후 npx webpack을 입력하면 아래와 같이 에러가 나옵니다.다른 컴퓨터로 했을때는 작동 되지만, 제가 사용중인 컴퓨터에서는 작동되지 않습니다.npm i 입력 후 터미널 메세지ㅡup to date, audited 643 packages in 4s74 packages are looking for funding run npm fund for details26 vulnerabilities (3 low, 8 moderate, 12 high, 3 critical)To address issues that do not require attention, run: npm audit fixTo address all issues (including breaking changes), run: npm audit fix --forceRun npm audit for details. npx webpack 명령후 입력후 터미널 메세지[webpack-cli] Failed to load '/Users/kanghyun/Desktop/study/React/zerocho/sleact/setting/ts/webpack.config.ts' config[webpack-cli] SyntaxError: The requested module 'webpack' does not provide an export named 'Configuration' at ModuleJobSync.runSync (node:internal/modules/esm/module_job:387:37) at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:427:47) at loadESMFromCJS (node:internal/modules/cjs/loader:1565:24) at Module._compile (node:internal/modules/cjs/loader:1716:5) at Object.loadTS [as .ts] (node:internal/modules/cjs/loader:1826:10) at Module.load (node:internal/modules/cjs/loader:1469:32) at Function._load (node:internal/modules/cjs/loader:1286:12) at TracingChannel.traceSync (node:diagnostics_channel:322:14) at wrapModuleLoad (node:internal/modules/cjs/loader:235:24) at Module.require (node:internal/modules/cjs/loader:1491:12)

안녕하세요. login, singup, workspace 페이지에서 data 가 있는 경우, Redirect 하려는 함수에서 다음과 같은 에러가 공통으로 나타납니다. => 'void' 형식 식의 truthiness를 테스트할 수 없습니다.ts(1345) 어떻게 해야 할까요?

안녕하세요.현재 슬리액트, '회원가입 페이지 만들기' 파트를 듣고 있습니다.회원가입을 누르면,'TypeError: Cannot read properties of null'라는 에러가 발생합니다.DB, users 폴더에는 새로운 회원정보가 잘 드렁가 있습니다.DB에는 잘 저장되는데, 프론트엔드에서 발생하는 에러일까요? 코드는 제가 거의 건든게 없습니다. 현재 제로초님이 Github 에 올려주신 코드에서 '비밀번호가 입력이 잘못되었습니다' 이부분 검증하는 부분은 추가되어 있습니다.

1 . node 버전 12.4에 맞추기이전까지는 16버전으로 문제 없이 실행되었는데 이번 실습에서는 에러가 발생하여 다른 수강생분들이 남겨주신 질문 참고해서 12.4버전으로 낮추었더니 빌드 에러가 사라졌습니다.이때 맥 실리콘은 node 15 버전 미만은 지원하지 않아 nvm install 시 에러가 나는데요. 터미널에 아래와 같이 입력하면 해결되더라고요. Rosetta2 쉘을 사용하는거라고 합니다.arch -x86_64 zsh nvm install 12.4.0참고 주소 : https://velog.io/@jeb1225/nvm-%EC%97%90%EB%9F%AC-no-such-file-or-directory-CXXc2. sass 설치node-sass 지원이 종료되어 sass 1.83.4 버전으로 설치하였는데 잘 빌드되었습니다.이번 강의에서 유독 에러가 나서 해결하느라 시간이 들었는데 같은 에러 만나시는 분들께 도움이 될까 하여 공유드려요!

"clean-webpack-plugin": "^3.0.0", "html-webpack-plugin": "^4.5.2", "mini-css-extract-plugin": "^1.6.2",혹시 찾기 귀찮으신 분들이 있으실까하여 공유드립니다

폴더에 있는 패키지들이 모두 에러인데 axios쪽인거 같은데 어떻게 해결하면될까요.. 

강좌보면서 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 하니까 에러떠서 ./로 했습니다. 이것때문에 계속 못하고 있는데 저에게 답을 알려주시면 감사하겠습니다...ㅠ.ㅜ