69,300원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
80자 줄바꿈이 되지 않습니다.
룰러 80자로 세팅하고, prettier사용결과 console안의 내용이 80자 단위로 잘리지 않았는데 이렇게 나오는게 맞는건가요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
css-loader와 style-loader의 사용 예
안녕하세요. 저는 주로 css파일을 html에다 설정해주는데요, 그러면 css-loader나 style-loader는 딱히 필요 없는건가요? 저의 경우에는 스크립트에 css를 임포트하는 일이 없어서, 보통 어떤 경우에 이 두가지 로더를 사용하면 도움이 되는 건지 궁금합니다! 또, 나중에 플러그인에 나오는 MiniCssExtractPlugin을 사용하면 css파일을 한데 모아주고 자동으로 html에 설정 구문을 넣어주니까 그 때를 위해서 css-loader+MiniCssExtractPlugin조합으로 사용하는 경우에는 유용할 것 같은데요, 보통은 웹팩 구성할 때 이런 식으로 설정을 하는 것인지(?) 궁금합니다 !!
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
이미지를 import 하는 방법
저는 왜 2번처럼(쌤코드) 작성하면 이미지를 import하지 못하는 걸ㄲㅏ요? 결국 1번처럼 해서 nyancat.jpg가 로드 되긴 했습니다만... (webpack.config.js를 제외한 나머지 소스의 코드는 동일합니다) + 그리고 ${} 역할도 궁금합니다. 감사합니다,
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
windows10 NODE_ENV 설정 질문입니다.
webpack.config.js의 mode는 'production'으로 설정해놓은 상태이구요, vscode terminal에서 NODE_ENV=development npm run build명령어는 에러가 나서 ( + NODE_ENV=development npm run build + ~~~~~~~~~~~~~~~~~~~~ + CategoryInfo : ObjectNotFound: (NODE_ENV=development:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException ) $env:NODE_ENV="development"로 먼저 설정해주고 그 다음에 npm run build를 해주었습니다. 그 결과, 브라우저 타이틀은 (개발용)이 붙어 나왔는데 console에는 production이 찍혔습니다. 여기에서 제가 궁금한 점은, console에 찍는 process.env.NODE_ENV과 webpack.config.js의 templateParameters에서 사용하는 process.env.NODE_ENV의 변수명이 같은데 왜 다른 결과가 나오는 것인가 하는 것입니다. 저의 예상으로는 $env:NODE_ENV="development"을 해주었을때 webpack.config.js의 mode가 변경되고 그 값이 내부적으로 사용될 것이라고 생각했는데요, 결과적으로 보면 app.js에서는 mode를 사용하고, webpack.config.js에서는 독자적인 환경변수(?)를 사용하는 것인가요?? 그래도 process.env.NODE_ENV 라는 변수명을 똑같이 쓰고 있다는 점이 이해가 안갑니다. 그리고 윈도우에서 설정이 안되서 제가 검색해서 $env:~로 설정해서 처음 의도와는 다르게 설정이 된 것인가요? 처음 공부하다보니 이래저래 헷갈리는게 많네요 ^^;
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
config, plugin 함께 사용하는 것...
최근 이 둘을 같이 사용하였는데, 에러가 엄청 발생하고, 심지어 eslint, prettier가 conflict가 나면서 에러가 지워지지 않았습니다. 그래서 다시 강의를 듣다가 prettier 문서를 다시 읽어보았는데, eslint-config-prettier를 통합 방법으로 추천하고, plugin은 generally not recommended라고 표현하더라구요. https://github.com/prettier/eslint-config-prettier eslint-config-prettier 문서를 읽어보아도, 뭔가 plugin과 같이 쓰면 config가 끈 rule이 다시 abled된다고 합니다. 어떻게 사용하죠?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
i -D or i ? 뭘 해야할까요?
webpack 사이트에 loader파트는 dev로 install 하던데 뭐가 맞는건가요??
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
compiler.plugin 이 undefined라고 뜹니다.
안녕하세요 TypeError: compiler.plugin is not a function 위와 같은 에러가 떠서 compiler를 찍어봤더니 plugin이 존재하지 않아서 undefined라고 뜹니다. compiler.hooks.emit.tapAsync( 'emit', (compilation, callback) => { const source = compilation.assets['main.js'].source(); console.log(source); callback(); }) } 이 방식을 사용하면 똑같이 나오는데 버전이 바뀐 것인가요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
webpack 명령어 에러
운영체제는 윈도우 10이고, webpack cli 버전은 4.0.0 버전입니다. powershell에서는 아예 안되는 거 같아서 cmd에서 하는데요...하고보니까 화면처럼 나오네요... 뭐가 문제일까요? 대충 보면 아예 --output 명령어 자체를 이해를 못하는거 같은데... 정확한 이유를 모르겠습니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
캐시 무력화 질문입니다
이미지 파일의 파일명을 지정해줄 때 쿼리스트링으로 해시값을 설정해주는 이유가 궁금합니다! 배워가는 단계라 어떠한 이점이 있는지 모르겠습니다..
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
빌드시 proxy 질문
react나 vue를 사용할 경우 실제 배포시 proxy 설정만 해주어도 별도의 서버설정없이 통신이 가능한건가요 ?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
react-hooks
실무에서 훅스를 사용해서 프로젝트를 하기전에 eslint 작업을 하고 있습니다. 강의에서 나온 것처럼 밑의 규칙 모음 2개와 "eslint:recommended", "plugin:prettier/recommended", react와 react-hooks 관련된 규칙 모음을 사용하면 괜찮을까요? "plugin:react/recommended", "plugin:react-hooks/recommended", 아니면 airbnb와 같은 이미 만들어진 룰을 사용하는게 좋을까요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
undef
.eslintrc.js에서 이런 밑의 오류가 뜹니다. eslintignore라는 파일안에 .eslintrc.js를 넣으면 될까요? 'module' is not defined.eslintno-undef
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
CopyWebpackPlugin config가 업데이트되면서 바뀐거같네요.
혹시 현시점에서 CopyWebpackPlugin 빌드가 잘 안되시면 아래 문서에서 config 형식 한번 확인해보세용. https://webpack.js.org/plugins/copy-webpack-plugin/ 질문은 아니지만 헤매시는 분 있으실거같아서 여기에 남겨둡니당 😅
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
버전 관련 질문드립니다!
앞에 마이너 버전은 기존 버전과 호환되면서 기능이 추가된 경우라고 설명해주셨는데 ~0 사용시 마이너 버전이 갱신되면서 하위 호완성이 깨진다고 말씀하셨던데 마이너 버전끼리는 호환이 되는 상태이니까 깨지지 않는 것이 맞는 것같은데.. 궁금합니다!
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
node_modules 설정 중 에러가 났습니다 ㅜ
이미지처럼 VS_CODE 터미널에서 명령어 입력하니 에러문이 떴습니다. cmd 창에서도 해봤는데 이렇게 작동되지 않습니다 ㅜ 혹시 맥버전과 윈도우 버전이 다른 것인지 모르겠습니다
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
LTS로 서버를 구축하고, Current로 개발환경을 구축
강의 내용중에 LTS 버전으로 서버를 구축하고, Current 버전으로 개발환경을 구축한다는 의미가 궁금합니다. 개발환경일때는 불안정한 버전을 써도 된다는 건가요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
여기에 빨간줄은 왜뜨나요? ㅜㅜ
extends: ["eslint:recommended"] 추가할때부터 이러네요
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
NODE_ENV 관련 질문입니다.
html-webpack-plugin 을 사용할 때, process.env.NODE_ENV가 development임을 검사하는데 이 때 이 값은 webpack.config.js의 mode를 받아오는 것이 아닌건가요? 강의 영상에서처럼 빌드를 할 때 NODE_ENV=development npm run build를 하면 title에 (개발용)이 잘 붙어 나오는데, 그냥 npm run build시에는 붙어나오지 않네요. webpack.config.js에 mode: "development" 설정은 되어있구요. 어떻게 돌아가는 것인지 궁금합니다!
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
[추가 질문] 저는 regenerator-runtime없이 잘 번들링 됩니다.
혹시 버전이 올라서 그런건가요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
뭐 설치할때마다 자꾸 이상한 메시지가 뜹니다.
found 306 vulnerabilities (302 low, 1 moderate, 3 high) 이런게 뜨는데 왜 이런 건가요?