묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결타입스크립트 입문 - 기초부터 실전까지
왜 api쪽에는 왜 에러가 안나는지 궁금합니다.
같은 index.ts 파일 내 코드인데도 tsconfig 설정이 적용되지 않고, eslint 설정까지 더 해주어야 타입 에러를 체크하는지 궁금합니다.
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
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 커맨드 사용 불가소스 자체에 붉은 색, 노란 색 줄은 생기지 않으나 코드가 자동 정렬 되지 않음입니다.
-
해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
개발환경에서 assets 파일 참조관련 질문
요약개발환경에서 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할 땐 이미지 파일이 코드에서 사용중인 것만 빌드 되나요? 답변 주시면 감사하겠습니다.
-
미해결Nuxt.js 시작하기
'TypeError: this.oprions.parse is not a function'오류
vue 파일에서 eslint 오류가 나는데 구글링 하여 따라해봐도 오류가 사라지지 않습니다ㅜ
-
미해결타입스크립트 입문 - 기초부터 실전까지
eslint format on save 설정을 안하는 이유가 뭔지 궁금해요!
eslint 처음 설정부터 궁금했던 건데 .eslintrc.js 파일에는 "source.fixAll.eslint": true 설정도 돼있는데 왜 format on save는 체크 안하시는건지 궁금합니다..!저는 어떻게 해도 eslint 옵션이 하나도 적용되지 않고 있어요ㅜㅜ 그래서 그냥 prittier 켜고 했는데 eslint로만 하려고하면 자동으로 줄바꿈되고 자동으로 코드가 예쁘게 정리되지않아요원래 그런건가요? 감사합니다..!
-
미해결Nuxt.js 시작하기
Nuxt 3 에서 eslint, prettier 사용 방법
안녕하세요. Nuxt 강의 잘 보았습니다. 그런데 지금은 또 vue3가 공식이 되어버려서... Vue3 와 함께 Nuxt 3를 사용해 보려합니다. 그런데, Nuxt3 는 처음 프로젝트를 생성할때 Nuxt2 처럼 언어, 렌더링모드, linting tools 등 기본 환경을 설정하는 과정이 없네요? 그러다 보니 linting tools 사용을 위해서 어떤 패키지를 설치해야 할지 모르겠습니다. 혹시 Nuxt3 는 자체적으로 eslint와 prettier를 내장하고 있나요? 아니면 어떤 패키지를 설치해야 할지 알 수 있을까요?
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
강의 잘 들었습니다. 감사합니다!
안녕하세요. 진행하신 강의는 웹팩4이므로 저는 웹팩5로 진행하면서 정말 많은 공부가 되었습니다! 한 가지만 빼고 강의 코드를 웹팩5으로 변환시키는 것을 성공하였는데요. BannerPlugin을 사용하기 전에 직접 번들링 코드에 배너를 넣는 부분은 실패했습니다ㅠ 웹팩5에서는 더 이상 assets['main'js].source 함수를 사용하지 않는 것 같았습니다. 해당 함수를 재정의해봤지만 배너가 붙지 않더라구요. 공식문서를 뒤져보면서 이것저것 시도해봤지만 성공하지 못했습니다ㅠ 혹시 여기에 대한 해답이 있으시다면 공유 가능할까요?
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
csp 오류
안녕하세요, htmlWebpackPlugin 관련 질문이 있어서 글 남깁니다. 현재 webpack5, htmlWebpackPlugin5 를 사용해서 예제를 진행하고 있는데, 위와 같은 csp 오류가 발생해서 질문드립니다.
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
eslint 설치 오류
터미널에 이렇게 입력했는데... 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
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
webpack5부터 optimize-css-assets-webpack-plugin 말고 css-minimizer-webpack-plugin 사용
제목처럼 webpack5부터는 css-minimizer-webpack-plugin이 사용한다고 합니다 https://www.npmjs.com/package/optimize-css-assets-webpack-plugin npm 문서확인해보시면 css-minimizer-webpack-plugin 를 이용하라고 권고하네요 webpack5로 실습 진행하시는분들은 참고해주세요 ~
-
미해결Slack 클론 코딩[실시간 채팅 with React]
npm i -D eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-ally 설치시 에러
안녕하세요, eslint 플러그인들 설치하다가 에러가 났는데, 다시 설치해봐도 똑같은 에러만 반복이 됩니다.. 버전을 낮추라는것 같긴 한데, 버전을 낮추게되면 파일 여기저기에서 에러가 발생할까봐 무섭네요 에러를 어떻게하면 해결할 수 있을까요? `npm i -D eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-ally`
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
vscode 확장 프로그램과 npm 모듈
안녕하세요. 강의를 보고, 회사 프로젝트(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 모듈로 설치하는 건가요? 선임분들이 셋팅해놓은 플젝만 해보아서 저의 질문이 제대로 된 질문인지도 모르겠습니다.ㅜㅜ 구글링을 해보았는데, 원하는 답변이 나오지 않아서 이렇게 질문을 올립니다. 구글링을 너무 대충한거라면.... 키워드라도 말씀 부탁드립니다. 다시 한번 찾아보겠습니다. 확인 부탁드립니다. 감사합니다!
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
VScode에서 prettier, eslint 설정시 에러
강의 대로 따라가다라 에러가나서 구글링해서 제가 임의로 수정하였습니다. 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 설정은 문제없는지 봐주시면 감사하겠습니다.
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
webpack.config.js 파일 구성 질문.
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 문법을 사용할 수 없는건가요..?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
eslint 적용 후 에러 및 IntelliJ eslint 적용방법 질문
제로초님 안녕하세요? 이번 강의에 eslint 적용 후에 다른 분들처럼 피바다가 나서 질문을 드립니다. 지금까지 해본 것 1. 제로초님의 .eslintrc 파일 적용 2. prepare/front/package.json 파일 내 eslint 관련 내용 적용 3. IntelliJ 재시작 4. IntelliJ내 설정 적용하기 위의 사진처럼 적용을 하였습니다. 이렇게 에러가 나고 있습니다. 위의 사진처럼 파일하나당 적용을 할 수 있을 것 같은데 그것은 방법이 아닌 것 같습니다. 아무래도 .eslintrc가 IDE에서 적용이 안되는 것으로 보입니다.혹시나 첫번째 사진에 제가 설정을 잘못한 것인지 알고 싶습니다.'인텔리제이 eslint 프로젝트 설정'로 검색하여 나온 방법대로 하였는데 에러가 나서 질문드립니다.https://github.com/hyunjoogo/react-nodebird제 깃헙주소는 이것입니다.
-
미해결웹 게임을 만들며 배우는 React
eslint? 빨간줄이 안생겨요
강의를 듣다가 우연히 저는 eslint 가 실행이 안되는(?)것 같아 질문드립니다. 제 것엔 왜 빨간 밑줄이 그어지지 않을까요?eslint 는 그냥 vscode 확장프로그램으로 깔았습니다.
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
asset/inline
webpack 5 부터는 url-loader가 아닌 asset/inline을 사용한다는데 asset/inline에서 로더를 실행할 파일 크기 제한을 어떻게 하나요? url-loader에서 limit 옵션을 asset/inline에서는 어떻게 주는지 궁금하네요!
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
import 문법 오류
안녕하세요 다름이 아니라 .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" } }
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
eslint 질문
vscode 익스텐션으로 eslint와 prettier를 적용해서 하게되면 npm으로 설치하지 않아도 적용이 되던데 npm으로 eslint, prettier를 설치하고 eslintrc, prettierrc 설정파일 만들어서 옵션설정하는것과 단순히 익스텐션으로만 적용하는것에 차이가 무엇일까요?? 질문 > 팀프로젝트를 한다고하면 eslint와 prettier를 npm으로 설치해서 설정하는 방법과 익스텐션으로만 설정해주는것에 차이가 어떤지 궁금합니다!
-
미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
eslint설정 후 빨간 물결표 밑줄이 생깁니다;;
강의대와 질문게시판에 있는 내용을 참고하여 eslint를 수정했는데.... 뒤에 이런 빨간 물결표가 생깁니다;; 프로젝트를 실행 할때 문제는 되지 않지만 앞으로 프로젝트를 계속 이어갈때 오류들을 찾기 힘들거같습니다 ㅠ 어떤 설정이 문제고 어떤거 때문에 이런 현상이 발생하는지 모르겠습니다;;