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`  

안녕하세요. 강의를 보고, 회사 프로젝트(vue+ts)도 분석하면서 프로젝트를 재설치 및 셋팅을 연습하고 있습니다. 그러던 중 궁금한 점이 몇 가지 생겼습니다.   1. npm 모듈을 설치하는데 vs code의 확장 프로그램과 겹쳐지는 게 있는데, 두가지를 중복해서 설치하지 않아도 될 것 같다는 생각이 들어서요. 두가지를 모두 설치해야 할까요? 아니면 때에 따라 하나만 설치하나요? ex) 확장 프로그램 / npm 모듈 Prettier - Code formatter <===> prettier ESLint <===> eslint 등등...   2. package.json에서 이름이 비슷한 npm 모듈이 있는데, 서로 하는 일이 다른가요? vue용, ts용과 일반?용을 다르게 설치한걸까요? 하나만 설치하면 안되는건가요? 중복 설치라면 말씀해주세요 ㅜㅜ ex) lodash <===> vue-lodash <===> @types/lodash-es @typescript-eslint/eslint-plugin <===> eslint와 eslint-plugin-vue <===> @vue/cli-plugin-eslint 등등...   3. sass 컴파일 현재 로컬에 확장 프로그램 Live Sass Compiler 가 설치되어 있고, 프로젝트 npm 모듈 sass와 sass-loader가 설치되어 있습니다. sass 사용을 위해선 npm 모듈 sass 설치가 필수 인가요? 그리고 Live Sass Compiler / sass-loader는 둘 가 sass를 css로 컴파일 해준다고 알고 있는데, 둘 다 설치해야 하나요? node를 사용하지 않는 프로젝트를 위해 Live Sass Compiler를 로컬에 설치해놓고, node를 사용하는 프로젝트 시에는 sass-loader를 npm 모듈로 설치하는 건가요?     선임분들이 셋팅해놓은 플젝만 해보아서 저의 질문이 제대로 된 질문인지도 모르겠습니다.ㅜㅜ   구글링을 해보았는데, 원하는 답변이 나오지 않아서 이렇게 질문을 올립니다. 구글링을 너무 대충한거라면.... 키워드라도 말씀 부탁드립니다. 다시 한번 찾아보겠습니다.   확인 부탁드립니다. 감사합니다!  

강의 대로 따라가다라 에러가나서 구글링해서 제가 임의로 수정하였습니다. eslint 사용해본 경험이 없어 제가 임의로 한 설정에 의구심이 드네요  eslint-config-prettier, eslint-plugin-prettier 설치하고 .eslintrc { "parser": "@babel/eslint-parser", "parserOptions" :{ "ecmaVersion" : 2020, "sourceType" : "module", "ecmaFeatures" : { "jsx" : true } }, "env": { "browser" : true, "node" : true, "es6" : true }, "extends" : [ "airbnb", "plugin:prettier/recommended" ], "plugins" : [ "import", "react-hooks" ], "rules": { "jsx-a11y/label-has-associated-control": "off", "jsx-a11y/anchor-is-valid": "off", "no-console": "off", "no-underscore-dangle": "off", "react/forbid-prop-types": "off", "react/jsx-filename-extension": "off", "react/jsx-one-expression-per-line": "off", "react/jsx-wrap-multilines": "off", "react/no-array-index-key": "off", "object-curly-newline": "off", "linebreak-style": "off", "arrow-body-style": "off", "comma-dangle": "off", "consistent-return": "off", "operator-linebreak": "off", "react/function-component-definition" : "off", "jsx-a11y/no-noninteractive-element-interactions" : "off", "jsx-a11y/click-events-have-key-events" : "off" } } PostImages.js 에서 img 태그에 onClick={onZoom} 하는 부분에서 jsx-a11y 에러가 나서 그냥 off 했는데 상관없는지,  eslintrc 설정은 문제없는지 봐주시면 감사하겠습니다.

import {path } from "path";   export const module = { mode: "development", entry: { main: "./src/app.js", // 번들 시작점. }, output: { filename: "[name].js", // name자리에 위의 main이 들어온다. path: path.resolve("./dist"), }, };   왜 config파일을 설정할떄는 위처럼 import,export 문법을 사용할 수 없는건가요..?

제로초님 안녕하세요? 이번 강의에 eslint 적용 후에 다른 분들처럼 피바다가 나서 질문을 드립니다.   지금까지 해본 것 1. 제로초님의 .eslintrc 파일 적용 2. prepare/front/package.json 파일 내 eslint 관련 내용 적용 3. IntelliJ 재시작 4. IntelliJ내 설정 적용하기 위의 사진처럼 적용을 하였습니다. 이렇게 에러가 나고 있습니다. 위의 사진처럼 파일하나당 적용을 할 수 있을 것 같은데 그것은 방법이 아닌 것 같습니다. 아무래도 .eslintrc가 IDE에서 적용이 안되는 것으로 보입니다.혹시나 첫번째 사진에 제가 설정을 잘못한 것인지 알고 싶습니다.'인텔리제이 eslint 프로젝트 설정'로 검색하여 나온 방법대로 하였는데 에러가 나서 질문드립니다.https://github.com/hyunjoogo/react-nodebird제 깃헙주소는 이것입니다.

강의를 듣다가 우연히 저는 eslint 가 실행이 안되는(?)것 같아 질문드립니다. 제 것엔 왜 빨간 밑줄이 그어지지 않을까요?eslint 는 그냥 vscode 확장프로그램으로 깔았습니다.

webpack 5 부터는 url-loader가 아닌 asset/inline을 사용한다는데 asset/inline에서 로더를 실행할 파일 크기 제한을 어떻게 하나요? url-loader에서 limit 옵션을 asset/inline에서는 어떻게 주는지 궁금하네요!

안녕하세요 다름이 아니라 .eslintrc를 적용하는 와중에 다른 js파일들에서 에러가 생겨서 문의드립니다.   vscode 실행 시, js 파일 import구문에 빨간 밑줄이 쳐지면서   Parsing error: Must use import to load ES Module: /Users/seolranlee/study/react/react-nodebird/front/node_modules/eslint-scope/lib/definition.js require() of ES modules is not supported. require() of /Users/seolranlee/study/react/react-nodebird/front/node_modules/eslint-scope/lib/definition.js from /Users/seolranlee/study/react/react-nodebird/front/node_modules/babel-eslint/lib/require-from-eslint.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename definition.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/seolranlee/study/react/react-nodebird/front/node_modules/eslint-scope/package.json.eslint   상기와 같은 에러 설명이 뜨는데요..ㅠㅠ 스택 오버 플로우에 검색하니 비슷한 현상이 있어서 따라 해결해 보았는데도 문제현상이 해결되지않아서 직접 문의드려요.   https://stackoverflow.com/questions/69554485/eslint-error-must-use-import-to-load-es-module   현재 프로젝트 내 .eslintrc 내용도 함께 전달드립니다.   { "parser": "babel-eslint", "parserOptions": { "ecmaVersion": 2020, "sourceType": "module", "ecmaFeatures": { "jsx": true } }, "env": { "browser": true, "node": true, "es6": true }, "extends": [ "airbnb" ], "plugins": [ "import", "react-hooks" ], "rules": { "jsx-a11y/label-has-associated-control": "off", "jsx-a11y/anchor-is-valid": "off", "no-console": "off", "no-underscore-dangle": "off", "react/forbid-prop-types": "off", "react/jsx-filename-extension": "off", "react/jsx-one-expression-per-line": "off", "object-curly-newline": "off", "linebreak-style": "off" // "no-param-reassign": "off" } } 혹시 몰라 package.json 내용도 전달드려요.   { "name": "react-nodebird-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next -p 3060", "build": "next build" }, "author": "seolranlee", "license": "ISC", "dependencies": { "@ant-design/icons": "^4.7.0", "antd": "^4.16.13", "axios": "^0.24.0", "faker": "^5.5.3", "immer": "^9.0.6", "next": "^9.5.5", "next-redux-wrapper": "^7.0.5", "prop-types": "^15.7.2", "react": "^17.0.2", "react-dom": "^17.0.2", "react-redux": "^7.2.6", "react-slick": "^0.28.1", "redux": "^4.1.2", "redux-devtools-extension": "^2.13.9", "redux-saga": "^1.1.3", "shortid": "^2.2.16", "styled-components": "^5.3.3" }, "devDependencies": { "babel-eslint": "^10.1.0", "eslint": "^8.1.0", "eslint-config-airbnb": "^18.2.1", "eslint-plugin-import": "^2.25.2", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-react": "^7.26.1", "eslint-plugin-react-hooks": "^4.2.0" } }

before함수 에러 나시는분들 업그레이드 되면서 onBeforeSetupMiddleware로 변경되었습니다. 참고하세요

vscode 익스텐션으로 eslint와 prettier를 적용해서 하게되면  npm으로 설치하지 않아도 적용이 되던데 npm으로 eslint, prettier를 설치하고 eslintrc, prettierrc 설정파일 만들어서 옵션설정하는것과 단순히 익스텐션으로만 적용하는것에 차이가 무엇일까요?? 질문 > 팀프로젝트를 한다고하면 eslint와 prettier를 npm으로 설치해서 설정하는 방법과 익스텐션으로만 설정해주는것에 차이가 어떤지 궁금합니다!

강의대와 질문게시판에 있는 내용을 참고하여 eslint를 수정했는데.... 뒤에 이런 빨간 물결표가 생깁니다;; 프로젝트를 실행 할때 문제는 되지 않지만 앞으로 프로젝트를 계속 이어갈때 오류들을 찾기 힘들거같습니다 ㅠ 어떤 설정이 문제고 어떤거 때문에 이런 현상이 발생하는지 모르겠습니다;;

저는 왜 제로초님처럼 didpatch가 없는 걸 잡아 주지않을까요?.. 느낌이 recommended 했던때랑 비슷한거 같아요.. 확장 프로그램으로는 Eslint, Prettier-eslint 깔려있어요 밑에는 제 파일들 입니다. <eslint> {   "parser": "babel-eslint",   "parserOptions": {     "ecmaVersion": 2021,     "sourceType": "module",     "ecmaFeatures": {       "jsx": true     },     "env": {       "browser": true,       "node": true,       "es6": true     },     "extends": [       "airbnb",       "plugin:prettier/recommended"     ],     "plugins" : [       "import",       "react-hooks",       "prettier"     ],     "rules": {       "prettier/prettier": "error",       "jsx-a11y/label-has-associated-control": "off",       "jsx-a11y/anchor-is-valid": "off",       "no-console": "off",       "no-underscore-dangle": "off",       "react/forbid-prop-types": "off",       "react/jsx-filename-extension": "off",       "react/jsx-one-expression-per-line": "off",       "object-curly-newline": "off",       "linebreak-style": "off",       "no-param-reassign": "off"     }   } } <package.json> {   "name": "react-nodebird-front",   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": {     "dev": "next"   },   "author": "",   "license": "MIT",   "dependencies": {     "@ant-design/icons": "^4.6.2",     "antd": "^4.16.6",     "axios": "^0.21.1",     "next": "^10.2.3",     "next-redux-wrapper": "^7.0.2",     "prop-types": "^15.7.2",     "react": "^17.0.2",     "react-dom": "^17.0.2",     "react-hook-form": "^7.11.0",     "react-redux": "^7.2.4",     "react-slick": "^0.28.1",     "redux": "^4.1.0",     "redux-devtools-extension": "^2.13.9",     "redux-saga": "^1.1.3",     "styled-components": "^5.3.0"   },   "devDependencies": {     "babel-eslint": "^10.1.0",     "eslint": "^7.30.0",     "eslint-config-airbnb": "^18.2.1",     "eslint-config-prettier": "^8.3.0",     "eslint-plugin-import": "^2.23.4",     "eslint-plugin-jsx-a11y": "^6.4.1",     "eslint-plugin-prettier": "^3.4.1",     "eslint-plugin-react": "^7.24.0",     "eslint-plugin-react-hooks": "^4.2.0",     "prettier-eslint": "^13.0.0"   } } <setting.json> {     "javascript.updateImportsOnFileMove.enabled": "always",     "editor.wordWrap": "on",     "workbench.preferredLightColorTheme": "Dracula Soft",     "workbench.iconTheme": "material-icon-theme",     "javascript.preferences.quoteStyle": "single",     "typescript.preferences.quoteStyle": "single",     "liveServer.settings.donotShowInfoMsg": true,     "editor.fontSize": 17,     "files.autoSaveDelay": 500,     "editor.mouseWheelZoom": true,     "liveServer.settings.fullReload": true,     "editor.tabSize": 2,     "javascript.format.enable": false,     "workbench.sideBar.location": "right",     "explorer.confirmDelete": false,     "explorer.confirmDragAndDrop": false,     "terminal.integrated.tabs.enabled": true,     "editor.accessibilitySupport": "off",     "eslint.alwaysShowStatus": true,     "eslint.workingDirectories": [     {         "mode": "auto"     } ], "window.zoomLevel": 1, "workbench.colorTheme": "Default Light+", "files.autoSave": "afterDelay", "[json]": {     "editor.quickSuggestions": {         "strings": true     },     "editor.suggest.insertMode": "replace" } }

안녕하세요 proxy 동작에 대해 궁금해서 질문드립니다. 원래는 8080 -> 8081로 요청해서 CORS 에러가 나지만 위와같이 설정하게 되면 요청은 프록시 서버로 가고 프록시 서버가 8081로 위장해서 서버로부터 데이터를 받아와서 웹팩 데브 서버에게 전달해주는 구조인건가요??