안녕하세요. 강의를 보고, 회사 프로젝트(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로 위장해서 서버로부터 데이터를 받아와서 웹팩 데브 서버에게 전달해주는 구조인건가요??

안녕하세요 수업 내용대로 file-loader를 이용하여 백그라운드 이미지를 불러오는 실습을 진행하다가 에러가 발생하여 질문 드립니다. 강의에서는 file-loader를 사용하지 않고 .css 파일에서 style-loader와 css-loader만 사용하고 빌드했을 경우에는 에러가 나야하는데 저는 에러가 나지 않고 브라우저에서 열어 봤을 때에 바로 백그라운드 이미지가 나옵니다. 또한 file-loader가 포함된 코드를 webpack.config.js에 추가했을때에는 빌드는 잘 되는데 오히려 브라우저에서 백그라운드 이미지가 나오지 않습니다. style-loader와 css-loader에서 file-loader의 역할을 대신해주도록 업데이트가 된걸까요..?  아래에 패키지 버전과 코드를 남겨드립니다. 패키지 버전 "dependencies": { "css-loader": "^6.2.0", "file-loader": "^6.2.0", "style-loader": "^3.2.1" } } app.js import * as math from './math.js' import './app.css' console.log(math.sum(1,2)); app.css body { background-image: url(bg.png); } webpack.config.js (백그라운드 이미지 뜨는 경우) const path = require('path'); module.exports = { mode: 'development', entry: { main: './src/app.js' }, output: { path: path.resolve('./dist'), filename: '[name].js' }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, ] } } webpack.config.js (백그라운드 이미지 뜨지 않는 경우) const path = require('path'); module.exports = { mode: 'development', entry: { main: './src/app.js' }, output: { path: path.resolve('./dist'), filename: '[name].js' }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.png$/, // .png 확장자로 마치는 모든 파일 loader: "file-loader", options: { publicPath: "./dist/", // prefix를 아웃풋 경로로 지정 name: "[name].[ext]?[hash]", // 파일명 형식 }, }, ] } } 아래와 같은 코드에서 빌드했을 때에 dist/main.js 코드 입니다. /* * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). * This devtool is neither made for production nor for readable output files. * It uses "eval()" calls to create a separate source file in the browser devtools. * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) * or disable the default devtool with "devtool: false". * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). */ /******/ (() => { // webpackBootstrap /******/ "use strict"; /******/ var __webpack_modules__ = ({ /***/ "./node_modules/css-loader/dist/cjs.js!./src/app.css": /*!***********************************************************!*\ !*** ./node_modules/css-loader/dist/cjs.js!./src/app.css ***! \***********************************************************/ /***/ ((module, __webpack_exports__, __webpack_require__) => { eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/getUrl.js */ \"./node_modules/css-loader/dist/runtime/getUrl.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(/* asset import */ __webpack_require__(/*! bg.png */ \"./src/bg.png\"), __webpack_require__.b);\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1___default()(___CSS_LOADER_URL_IMPORT_0___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"body {\\n background-image: url(\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \");\\n}\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://npm-sample/./src/app.css?./node_modules/css-loader/dist/cjs.js"); /***/ }), /***/ "./node_modules/css-loader/dist/runtime/api.js": /*!*****************************************************!*\ !*** ./node_modules/css-loader/dist/runtime/api.js ***! \*****************************************************/ /***/ ((module) => { eval("\n\n/*\n MIT License http://www.opensource.org/licenses/mit-license.php\n Author Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\n// eslint-disable-next-line func-names\nmodule.exports = function (cssWithMappingToString) {\n var list = []; // return the list of modules as css string\n\n list.toString = function toString() {\n return this.map(function (item) {\n var content = cssWithMappingToString(item);\n\n if (item[2]) {\n return \"@media \".concat(item[2], \" {\").concat(content, \"}\");\n }\n\n return content;\n }).join(\"\");\n }; // import a list of modules into the list\n // eslint-disable-next-line func-names\n\n\n list.i = function (modules, mediaQuery, dedupe) {\n if (typeof modules === \"string\") {\n // eslint-disable-next-line no-param-reassign\n modules = [[null, modules, \"\"]];\n }\n\n var alreadyImportedModules = {};\n\n if (dedupe) {\n for (var i = 0; i < this.length; i++) {\n // eslint-disable-next-line prefer-destructuring\n var id = this[i][0];\n\n if (id != null) {\n alreadyImportedModules[id] = true;\n }\n }\n }\n\n for (var _i = 0; _i < modules.length; _i++) {\n var item = [].concat(modules[_i]);\n\n if (dedupe && alreadyImportedModules[item[0]]) {\n // eslint-disable-next-line no-continue\n continue;\n }\n\n if (mediaQuery) {\n if (!item[2]) {\n item[2] = mediaQuery;\n } else {\n item[2] = \"\".concat(mediaQuery, \" and \").concat(item[2]);\n }\n }\n\n list.push(item);\n }\n };\n\n return list;\n};\n\n//# sourceURL=webpack://npm-sample/./node_modules/css-loader/dist/runtime/api.js?"); /***/ }), /***/ "./node_modules/css-loader/dist/runtime/getUrl.js": /*!********************************************************!*\ !*** ./node_modules/css-loader/dist/runtime/getUrl.js ***! \********************************************************/ /***/ ((module) => { eval("\n\nmodule.exports = function (url, options) {\n if (!options) {\n // eslint-disable-next-line no-param-reassign\n options = {};\n }\n\n if (!url) {\n return url;\n } // eslint-disable-next-line no-underscore-dangle, no-param-reassign\n\n\n url = String(url.__esModule ? url.default : url); // If url is already wrapped in quotes, remove them\n\n if (/^['\"].*['\"]$/.test(url)) {\n // eslint-disable-next-line no-param-reassign\n url = url.slice(1, -1);\n }\n\n if (options.hash) {\n // eslint-disable-next-line no-param-reassign\n url += options.hash;\n } // Should url be wrapped?\n // See https://drafts.csswg.org/css-values-3/#urls\n\n\n if (/[\"'() \\t\\n]|(%20)/.test(url) || options.needQuotes) {\n return \"\\\"\".concat(url.replace(/\"/g, '\\\\\"').replace(/\\n/g, \"\\\\n\"), \"\\\"\");\n }\n\n return url;\n};\n\n//# sourceURL=webpack://npm-sample/./node_modules/css-loader/dist/runtime/getUrl.js?"); /***/ }), /***/ "./src/bg.png": /*!********************!*\ !*** ./src/bg.png ***! \********************/ /***/ ((module, __unused_webpack_exports, __webpack_require__) => { eval("module.exports = __webpack_require__.p + \"3d9f2814733b516c33db.png\";\n\n//# sourceURL=webpack://npm-sample/./src/bg.png?"); /***/ }), /***/ "./src/app.css": /*!*********************!*\ !*** ./src/app.css ***! \*********************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleDomAPI.js */ \"./node_modules/style-loader/dist/runtime/styleDomAPI.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertBySelector.js */ \"./node_modules/style-loader/dist/runtime/insertBySelector.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ \"./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertStyleElement.js */ \"./node_modules/style-loader/dist/runtime/insertStyleElement.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleTagTransform.js */ \"./node_modules/style-loader/dist/runtime/styleTagTransform.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_app_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../node_modules/css-loader/dist/cjs.js!./app.css */ \"./node_modules/css-loader/dist/cjs.js!./src/app.css\");\n\n \n \n \n \n \n \n \n \n \n\nvar options = {};\n\noptions.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());\noptions.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());\n\n options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \"head\");\n \noptions.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());\noptions.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());\n\nvar update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_app_css__WEBPACK_IMPORTED_MODULE_6__.default, options);\n\n\n\n\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_app_css__WEBPACK_IMPORTED_MODULE_6__.default && _node_modules_css_loader_dist_cjs_js_app_css__WEBPACK_IMPORTED_MODULE_6__.default.locals ? _node_modules_css_loader_dist_cjs_js_app_css__WEBPACK_IMPORTED_MODULE_6__.default.locals : undefined);\n\n\n//# sourceURL=webpack://npm-sample/./src/app.css?"); /***/ }), /***/ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js": /*!****************************************************************************!*\ !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***! \****************************************************************************/ /***/ ((module) => { eval("\n\nvar stylesInDom = [];\n\nfunction getIndexByIdentifier(identifier) {\n var result = -1;\n\n for (var i = 0; i < stylesInDom.length; i++) {\n if (stylesInDom[i].identifier === identifier) {\n result = i;\n break;\n }\n }\n\n return result;\n}\n\nfunction modulesToDom(list, options) {\n var idCountMap = {};\n var identifiers = [];\n\n for (var i = 0; i < list.length; i++) {\n var item = list[i];\n var id = options.base ? item[0] + options.base : item[0];\n var count = idCountMap[id] || 0;\n var identifier = \"\".concat(id, \" \").concat(count);\n idCountMap[id] = count + 1;\n var index = getIndexByIdentifier(identifier);\n var obj = {\n css: item[1],\n media: item[2],\n sourceMap: item[3]\n };\n\n if (index !== -1) {\n stylesInDom[index].references++;\n stylesInDom[index].updater(obj);\n } else {\n stylesInDom.push({\n identifier: identifier,\n updater: addStyle(obj, options),\n references: 1\n });\n }\n\n identifiers.push(identifier);\n }\n\n return identifiers;\n}\n\nfunction addStyle(obj, options) {\n var api = options.domAPI(options);\n api.update(obj);\n return function updateStyle(newObj) {\n if (newObj) {\n if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap) {\n return;\n }\n\n api.update(obj = newObj);\n } else {\n api.remove();\n }\n };\n}\n\nmodule.exports = function (list, options) {\n options = options || {};\n list = list || [];\n var lastIdentifiers = modulesToDom(list, options);\n return function update(newList) {\n newList = newList || [];\n\n for (var i = 0; i < lastIdentifiers.length; i++) {\n var identifier = lastIdentifiers[i];\n var index = getIndexByIdentifier(identifier);\n stylesInDom[index].references--;\n }\n\n var newLastIdentifiers = modulesToDom(newList, options);\n\n for (var _i = 0; _i < lastIdentifiers.length; _i++) {\n var _identifier = lastIdentifiers[_i];\n\n var _index = getIndexByIdentifier(_identifier);\n\n if (stylesInDom[_index].references === 0) {\n stylesInDom[_index].updater();\n\n stylesInDom.splice(_index, 1);\n }\n }\n\n lastIdentifiers = newLastIdentifiers;\n };\n};\n\n//# sourceURL=webpack://npm-sample/./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?"); /***/ }), /***/ "./node_modules/style-loader/dist/runtime/insertBySelector.js": /*!********************************************************************!*\ !*** ./node_modules/style-loader/dist/runtime/insertBySelector.js ***! \********************************************************************/ /***/ ((module) => { eval("\n\nvar memo = {};\n/* istanbul ignore next */\n\nfunction getTarget(target) {\n if (typeof memo[target] === \"undefined\") {\n var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself\n\n if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\n try {\n // This will throw an exception if access to iframe is blocked\n // due to cross-origin restrictions\n styleTarget = styleTarget.contentDocument.head;\n } catch (e) {\n // istanbul ignore next\n styleTarget = null;\n }\n }\n\n memo[target] = styleTarget;\n }\n\n return memo[target];\n}\n/* istanbul ignore next */\n\n\nfunction insertBySelector(insert, style) {\n var target = getTarget(insert);\n\n if (!target) {\n throw new Error(\"Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.\");\n }\n\n target.appendChild(style);\n}\n\nmodule.exports = insertBySelector;\n\n//# sourceURL=webpack://npm-sample/./node_modules/style-loader/dist/runtime/insertBySelector.js?"); /***/ }), /***/ "./node_modules/style-loader/dist/runtime/insertStyleElement.js": /*!**********************************************************************!*\ !*** ./node_modules/style-loader/dist/runtime/insertStyleElement.js ***! \**********************************************************************/ /***/ ((module) => { eval("\n\n/* istanbul ignore next */\nfunction insertStyleElement(options) {\n var style = document.createElement(\"style\");\n options.setAttributes(style, options.attributes);\n options.insert(style);\n return style;\n}\n\nmodule.exports = insertStyleElement;\n\n//# sourceURL=webpack://npm-sample/./node_modules/style-loader/dist/runtime/insertStyleElement.js?"); /***/ }), /***/ "./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js": /*!**********************************************************************************!*\ !*** ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js ***! \**********************************************************************************/ /***/ ((module, __unused_webpack_exports, __webpack_require__) => { eval("\n\n/* istanbul ignore next */\nfunction setAttributesWithoutAttributes(style) {\n var nonce = true ? __webpack_require__.nc : 0;\n\n if (nonce) {\n style.setAttribute(\"nonce\", nonce);\n }\n}\n\nmodule.exports = setAttributesWithoutAttributes;\n\n//# sourceURL=webpack://npm-sample/./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js?"); /***/ }), /***/ "./node_modules/style-loader/dist/runtime/styleDomAPI.js": /*!***************************************************************!*\ !*** ./node_modules/style-loader/dist/runtime/styleDomAPI.js ***! \***************************************************************/ /***/ ((module) => { eval("\n\n/* istanbul ignore next */\nfunction apply(style, options, obj) {\n var css = obj.css;\n var media = obj.media;\n var sourceMap = obj.sourceMap;\n\n if (media) {\n style.setAttribute(\"media\", media);\n } else {\n style.removeAttribute(\"media\");\n }\n\n if (sourceMap && typeof btoa !== \"undefined\") {\n css += \"\\n/*# sourceMappingURL=data:application/json;base64,\".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), \" */\");\n } // For old IE\n\n /* istanbul ignore if */\n\n\n options.styleTagTransform(css, style);\n}\n\nfunction removeStyleElement(style) {\n // istanbul ignore if\n if (style.parentNode === null) {\n return false;\n }\n\n style.parentNode.removeChild(style);\n}\n/* istanbul ignore next */\n\n\nfunction domAPI(options) {\n var style = options.insertStyleElement(options);\n return {\n update: function update(obj) {\n apply(style, options, obj);\n },\n remove: function remove() {\n removeStyleElement(style);\n }\n };\n}\n\nmodule.exports = domAPI;\n\n//# sourceURL=webpack://npm-sample/./node_modules/style-loader/dist/runtime/styleDomAPI.js?"); /***/ }), /***/ "./node_modules/style-loader/dist/runtime/styleTagTransform.js": /*!*********************************************************************!*\ !*** ./node_modules/style-loader/dist/runtime/styleTagTransform.js ***! \*********************************************************************/ /***/ ((module) => { eval("\n\n/* istanbul ignore next */\nfunction styleTagTransform(css, style) {\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n while (style.firstChild) {\n style.removeChild(style.firstChild);\n }\n\n style.appendChild(document.createTextNode(css));\n }\n}\n\nmodule.exports = styleTagTransform;\n\n//# sourceURL=webpack://npm-sample/./node_modules/style-loader/dist/runtime/styleTagTransform.js?"); /***/ }), /***/ "./src/app.js": /*!********************!*\ !*** ./src/app.js ***! \********************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _math_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./math.js */ \"./src/math.js\");\n/* harmony import */ var _app_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./app.css */ \"./src/app.css\");\n\n\n\nconsole.log(_math_js__WEBPACK_IMPORTED_MODULE_0__.sum(1,2));\n\n//# sourceURL=webpack://npm-sample/./src/app.js?"); /***/ }), /***/ "./src/math.js": /*!*********************!*\ !*** ./src/math.js ***! \*********************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"sum\": () => (/* binding */ sum)\n/* harmony export */ });\nfunction sum(a,b) {\n return a+b;\n}\n\n//# sourceURL=webpack://npm-sample/./src/math.js?"); /***/ }) /******/ }); /************************************************************************/ /******/ // The module cache /******/ var __webpack_module_cache__ = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ // Check if module is in cache /******/ var cachedModule = __webpack_module_cache__[moduleId]; /******/ if (cachedModule !== undefined) { /******/ return cachedModule.exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = __webpack_module_cache__[moduleId] = { /******/ id: moduleId, /******/ // no module.loaded needed /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = __webpack_modules__; /******/ /************************************************************************/ /******/ /* webpack/runtime/compat get default export */ /******/ (() => { /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = (module) => { /******/ var getter = module && module.__esModule ? /******/ () => (module['default']) : /******/ () => (module); /******/ __webpack_require__.d(getter, { a: getter }); /******/ return getter; /******/ }; /******/ })(); /******/ /******/ /* webpack/runtime/define property getters */ /******/ (() => { /******/ // define getter functions for harmony exports /******/ __webpack_require__.d = (exports, definition) => { /******/ for(var key in definition) { /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); /******/ } /******/ } /******/ }; /******/ })(); /******/ /******/ /* webpack/runtime/global */ /******/ (() => { /******/ __webpack_require__.g = (function() { /******/ if (typeof globalThis === 'object') return globalThis; /******/ try { /******/ return this || new Function('return this')(); /******/ } catch (e) { /******/ if (typeof window === 'object') return window; /******/ } /******/ })(); /******/ })(); /******/ /******/ /* webpack/runtime/hasOwnProperty shorthand */ /******/ (() => { /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) /******/ })(); /******/ /******/ /* webpack/runtime/make namespace object */ /******/ (() => { /******/ // define __esModule on exports /******/ __webpack_require__.r = (exports) => { /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); /******/ } /******/ Object.defineProperty(exports, '__esModule', { value: true }); /******/ }; /******/ })(); /******/ /******/ /* webpack/runtime/publicPath */ /******/ (() => { /******/ var scriptUrl; /******/ if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + ""; /******/ var document = __webpack_require__.g.document; /******/ if (!scriptUrl && document) { /******/ if (document.currentScript) /******/ scriptUrl = document.currentScript.src /******/ if (!scriptUrl) { /******/ var scripts = document.getElementsByTagName("script"); /******/ if(scripts.length) scriptUrl = scripts[scripts.length - 1].src /******/ } /******/ } /******/ // When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration /******/ // or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic. /******/ if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser"); /******/ scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/"); /******/ __webpack_require__.p = scriptUrl; /******/ })(); /******/ /******/ /* webpack/runtime/jsonp chunk loading */ /******/ (() => { /******/ __webpack_require__.b = document.baseURI || self.location.href; /******/ /******/ // object to store loaded and loading chunks /******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched /******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded /******/ var installedChunks = { /******/ "main": 0 /******/ }; /******/ /******/ // no chunk on demand loading /******/ /******/ // no prefetching /******/ /******/ // no preloaded /******/ /******/ // no HMR /******/ /******/ // no HMR manifest /******/ /******/ // no on chunks loaded /******/ /******/ // no jsonp function /******/ })(); /******/ /************************************************************************/ /******/ /******/ // startup /******/ // Load entry module and return exports /******/ // This entry module can't be inlined because the eval devtool is used. /******/ var __webpack_exports__ = __webpack_require__("./src/app.js"); /******/ /******/ })() ;

밑 질문에서 알려주신 코드대로 적용을 해봤는데, 저렇게 흐릿하게 표시가되고, 마우스를 올리면 unknown configuration setting 이라고 나옵니다 ㅠㅠ vs code 우측 하단에 ESLint 클릭하는 곳도 나오지 않습니다

eslint 확장 프로그램을 사용하지 않고 강의에서 말씀주신 eslint 라이브러리들로 적용해보려 하는데 방법을 모르겠네요 블로그 찾아가며 하나씩 적용해보고 있긴 한데 ..  settings.json에서 일정 코드를 입력해야 적용이 완료되는 것은 맞나요?  그리고 npm으로 적용된 eslint라면 서버를 구동해야만 eslint가 적용이 되나요? 적용 됐는지 안됐는지도 구분이 안되네요

실습 풀이1 변수, 함수 타입 영상에서 1_todo>src>index.ts 파일에 todoItems 부분에 object[] 에서 오류가 자꾸 나는데요.. @typescript/ban-type 에러가 납니다 ㅠ 어떻게 해결하면 될까요 선생님?

안녕하세요, 강의를 듣다가 제 컴퓨터에서는 자동완성이 되지 않아서 질문드립니다. 현재 컴퓨터에는 eslint도 설치되어 있고, typescript와 기초적인 babel 설정(ES6구문을 사용하기 위함)이 되어 있습니다. 하지만 제 컴퓨터에서 코딩할 때 bodyParser를 입력할 때 자동완성 기능이 제공되지 않아 상당히 불편한 상황입니다. 혹시 자동완성 기능이 잘되기 위해 필요한 설정이나 플러그인 같은 것들이 있을까요?? 제 설정 코드들도 아래에 첨부하겠습니다.

안녕하세요. 이번 유튜브 강의 잘 듣고 있습니다. 감사합니다.  마지막 좋아요 강의를 듣고 확인하려고 서버를 구동시켰는데, 갑자기 아래와 같은 메세지가 나오기 시작했는데요.  검색을 해서 해결하려고 노력을 해 봤으나 잘 안 되네요.  해결 방법을 좀 알고 싶습니다.  - 터미널 화면 - 웹 화면

버전 5가 되면서 package.json 파일에서 입력하는게 아니고  npx husky add .husky/pre-commit "npx eslint app.js --fix" 이런식으로 생성해서 하는 것으로 바뀐것 같네요. (여기서는 npx를 안넣어주면 실행이 안되네요...) 아니면 package.json에서 하는 방법이 있는데 제가 못찾은 것 일수도 있구용... ps. npm install husky@4 로 설치하면 기존의 방식대로 할 수 있네요.. 문제는 lint-staged를 어떻게 쓰는지 모르겠네요...

npm install -D @babel/preset-env  라 적혀 있는데 실제론 npm install @babel/preset-env  라고 하기도 하고....  -D가 dev에 추가한다. 라고는 알고 있는데, 실제로 바벨 프리셋들은 dev에 했을 때와 아닐때 차이가 없나요? 아니면 차이점으로 어떤 것들이 있나요?