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

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

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

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" } } ];

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로 랩핑? 해서 읽어온 이유를 아시나요?

따라하며 배우는 리액트 테스트코드 강의에서 eslint가 적용되었다고 하는 파일자체를 받아 npm install을 헀는데,eslint가 작동되지않습니다.extension에서도 eslint를 받았고, npm install을 한 상태에서test()let test = () => {}와 같은 오류가 발생될 코드를 작성해도 eslint가 반응하지 못하는데 이유가 뭘까요 강의에는 설정이 적용되어있다고 하는데

같은 index.ts 파일 내 코드인데도 tsconfig 설정이 적용되지 않고, eslint 설정까지 더 해주어야 타입 에러를 체크하는지 궁금합니다.

안녕하세요 강의 보고 실습 중, ESLint가 정상 작동하지 않는 것으로 보여문의 드립니다.현재 상황 (버전)npm Version : 9.6.4Vue Version : 3.2.47VsCode Version : 1.77.3설치된 확장 플러그인Auto Rename TagCSS PeekESLintHTML CSS SupportHTML to CSS autocompletionindent-rainbowKorean Language Pack For visual Studio CodeVue Language Features (Volar)Vue VSCode Snippets플러그인 충돌이 발생 할 수 있어, 기존 VS Code 전체 초기화 후 재 설치 하였습니다.강의에 나온 내용으로 .eslintrc.cjs 수정 및 Eslint.validate도 변경하였으며,오타가 있을 수 있어서 노션에 있는 코드를 그대로 복사 붙여 넣기 하였습니다.Format on save 도 체크 해제 되어 있습니다.현재 문제점이라고 생각하는 부분은npm run lint 커맨드 실행 시 PS > npm run lint> learn@0.0.0 lint> eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignoreOops! Something went wrong! :(ESLint: 8.39.0ReferenceError: Cannot read config file: \.eslintrc.cjsError: OfflineAudioCompletionEvent is not defined at Object.<anonymous> (\.eslintrc.cjs:15:70) at Module._compile (node:internal/modules/cjs/loader:1254:14) at Module._extensions..js (node:internal/modules/cjs/loader:1308:10) at Module.load (node:internal/modules/cjs/loader:1117:32) at Module._load (node:internal/modules/cjs/loader:958:12) at Module.require (node:internal/modules/cjs/loader:1141:19) at module.exports [as default] (node_modules\import-fresh\index.js:32:59) at loadJSConfigFile (\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:2562:47) at loadConfigFile (\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:2646:20) at ConfigArrayFactory.loadInDirectory (\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:2856:34)에러가 출력 됩니다.구글 검색하여 npm install eslint 등 추가로 모듈을 설치 하였으나, 실행이 되지 않습니다.이 이외에는 사실상 Error Line, Warn Line 등 소스 코드에 노란 줄이나 붉은 줄은 나오지 않아사용에는 큰 불편함은 없으나, 자동 줄 정렬이 되지 않아 소스가 상당히 지저분하며, 복습 시 소스 분석에 어려움을 겪고 있어 질문 드립니다.항상 좋은 강의 감사드립니다.요약npm run lint 커맨드 사용 불가소스 자체에 붉은 색, 노란 색 줄은 생기지 않으나 코드가 자동 정렬 되지 않음입니다.   

요약개발환경에서 src/assets/.... 에 있는 이미지 파일을 제대로 참조하는 방법이 궁금합니다. 구성요소프로젝트의 구성요소는 아래와 같습니다.public[index.html, favicon.ico]src[assets[image0, image1...], index.js 등] 설치된 패키지는 아래와 같습니다. "webpack": "^5.75.0", "webpack-cli": "^5.0.1", "webpack-dev-server": "^4.11.1" // 본 강의에선 4.x.x 버전을 사용하지만... // 5 version을 공부해야해서... 죄송합니다 😥 설명dev server를 실행시켜 개발할 때,js 파일을 수정하면 바로 반영이 되는 걸 확인했습니다. 그런데 이미지 파일의 경우 다른 파일을 참조하도록 하면 해당 파일을 불러오지 못합니다. 그리고 build된 파일을 참조합니다.예로들어 정적 이미지 파일이 ./src/assets/image_0.jpg 라면,dev server로 실행시켜 확인하면 HOST/dist/assets/images/[hash][ext][query].jpg 이렇게 되어있습니다. (경로가 다름)그리고 build를 하면 분명 assets 디렉토리엔 다수의 이미지 파일이 존재함에도 불구하고 코드에서 사용된 이미지 파일만 build됩니다.그러면 만약 코드내부에서 동적으로 다른 static image 파일을 참조하게 된다면 해당 이미지가 없기 때문에 오류가 날텐데 이런건 어떻게 처리해야하나요? 코드const path = require('path'); const { BannerPlugin, DefinePlugin } = require('webpack'); const childProcess = require('child_process'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const isDevMode = (process.env.NODE_ENV || 'development').trim() === 'development'; console.log('is DEV mode?', isDevMode); console.log('__dirname: ', __dirname); module.exports = { mode: isDevMode ? 'development' : 'production', // entry: webpack 시작되는 부분이라고 생각하면 된다. entry: { main: './src/index.js', }, /** * output * entry point를 기준으로 * 모든 .js 파일을 합쳐서 하나의 bundle 파일로 만드는데, * 이걸 어디에 저장할 것인지 지정하는 option */ output: { path: path.resolve(__dirname, 'dist'), filename: isDevMode ? '[name].js' : 'main.[contenthash].js', chunkFilename: '[id].chunk.js', assetModuleFilename: 'images/[hash][ext][query]', clean: true, }, devServer: { port: 3000, hot: true, client: { overlay: { errors: true, warnings: false, }, }, // static: { // directory: path.resolve(__dirname, './src/assets/'), // }, }, /** * module * test에 설정한 파일들을 inspect 하여, * 조건에 맞는 파일들에 대해 loader 들을 실행하여 해석함 */ module: { rules: [ { test: /\.(sa|sc|c)ss$/i, exclude: [/node_modules/], use: [ // creates 'style' nodes from JS strings isDevMode ? 'style-loader' : { loader: MiniCssExtractPlugin.loader, options: { publicPath: '', }, }, // translates css into common JS 'css-loader', 'postcss-loader', // complies sass to css 'sass-loader', ], }, { test: /\.(png|svg|jpg|jpeg|gif)$/i, exclude: [/node_modules/], type: 'asset/resource', parser: { dataUrlCondition: { // 크기가 8kb 미만인 파일은 inline 모듈로 처리되고 그렇지 않으면 resource 모듈로 처리됩니다. maxSize: 4 * 1042, }, }, // generator: { // publicPath: './assets/', // outputPath: './assets/', // }, }, { test: /\.js$/, exclude: [/node_modules/], loader: 'babel-loader', }, { test: /\.(woff|woff2|eot|ttf|otf)$/i, exclude: [/node_modules/], type: 'asset/resource', }, ], }, plugins: [ /** * 개발할 때 API 서버주소, * 배포했을 때 API 서버주소를 설정하는 Plugin */ // new DefinePlugin({ // NODE_ENV: 'development', // }), new BannerPlugin({ banner: `Build Date: ${new Date().toLocaleString()} Commit Version: ${childProcess.execSync('git rev-parse --short HEAD')} Author: ${childProcess.execSync('git config user.name')}`, }), new HtmlWebpackPlugin({ template: './public/index.html', templateParameters: { env: isDevMode ? '개발용' : '배포용', }, minify: !isDevMode ? { collapseWhitespace: true, removeComments: true, } : false, }), ...(!isDevMode ? [ new MiniCssExtractPlugin({ filename: isDevMode ? '[name].css' : '[name].[contenthash].css', chunkFilename: isDevMode ? '[id].css' : '[id].[contenthash].css', }), ] : []), ], };  결론즉 정리하자면,개발모드일 때 정적 이미지 파일을 참조하도록 설정을 어떻게 해야하나요?왜 build할 땐 이미지 파일이 코드에서 사용중인 것만 빌드 되나요? 답변 주시면 감사하겠습니다. 

vue 파일에서 eslint 오류가 나는데 구글링 하여 따라해봐도 오류가 사라지지 않습니다ㅜ

eslint 처음 설정부터 궁금했던 건데 .eslintrc.js 파일에는 "source.fixAll.eslint": true 설정도 돼있는데 왜 format on save는 체크 안하시는건지 궁금합니다..!저는 어떻게 해도 eslint 옵션이 하나도 적용되지 않고 있어요ㅜㅜ 그래서 그냥 prittier 켜고 했는데 eslint로만 하려고하면 자동으로 줄바꿈되고 자동으로 코드가 예쁘게 정리되지않아요원래 그런건가요? 감사합니다..!

안녕하세요. Nuxt 강의 잘 보았습니다. 그런데 지금은 또 vue3가 공식이 되어버려서... Vue3 와 함께 Nuxt 3를 사용해 보려합니다. 그런데, Nuxt3 는 처음 프로젝트를 생성할때 Nuxt2 처럼 언어, 렌더링모드, linting tools 등 기본 환경을 설정하는 과정이 없네요? 그러다 보니 linting tools 사용을 위해서 어떤 패키지를 설치해야 할지 모르겠습니다. 혹시 Nuxt3 는 자체적으로 eslint와 prettier를 내장하고 있나요? 아니면 어떤 패키지를 설치해야 할지 알 수 있을까요?  

안녕하세요. 진행하신 강의는 웹팩4이므로 저는 웹팩5로 진행하면서 정말 많은 공부가 되었습니다!   한 가지만 빼고 강의 코드를 웹팩5으로 변환시키는 것을 성공하였는데요. BannerPlugin을 사용하기 전에 직접 번들링 코드에 배너를 넣는 부분은 실패했습니다ㅠ 웹팩5에서는 더 이상 assets['main'js].source 함수를 사용하지 않는 것 같았습니다. 해당 함수를 재정의해봤지만 배너가 붙지 않더라구요.   공식문서를 뒤져보면서 이것저것 시도해봤지만 성공하지 못했습니다ㅠ 혹시 여기에 대한 해답이 있으시다면 공유 가능할까요?

안녕하세요, htmlWebpackPlugin 관련 질문이 있어서 글 남깁니다.   현재 webpack5, htmlWebpackPlugin5 를 사용해서 예제를 진행하고 있는데,  위와 같은 csp 오류가 발생해서 질문드립니다.  

터미널에 이렇게 입력했는데... npm install eslint-plugin-testing-library eslint-plugin-jest-dom --save-dev ------------------------------------- 192 packages are looking for funding   run `npm fund` for details 6 high severity vulnerabilities To address all issues (including breaking changes), run:   npm audit fix --force Run `npm audit` for details. 위와 같이 나오고, 설치가 진행되지 않습니다. 어떻게 해야할까요? --------------------------------------------------- yarn으로 설치하니까... 되는데, 이렇게 해도 되나요? $ yarn add --dev eslint-plugin-testing-library yarn add eslint-plugin-jest-dom

  제목처럼 webpack5부터는 css-minimizer-webpack-plugin이 사용한다고 합니다 https://www.npmjs.com/package/optimize-css-assets-webpack-plugin npm 문서확인해보시면 css-minimizer-webpack-plugin 를 이용하라고 권고하네요 webpack5로 실습 진행하시는분들은 참고해주세요 ~

안녕하세요, eslint 플러그인들 설치하다가 에러가 났는데, 다시 설치해봐도 똑같은 에러만 반복이 됩니다.. 버전을 낮추라는것 같긴 한데, 버전을 낮추게되면 파일 여기저기에서 에러가 발생할까봐 무섭네요 에러를 어떻게하면 해결할 수 있을까요? `npm i -D eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-ally`