69,300원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결프론트엔드 개발환경의 이해와 실습 (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 문법을 사용할 수 없는건가요..?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
빌드에서 svg만 되고 png와 ttf는 안되어서 문의드립니다.
강사님 안녕하세요? 빌드에서 svg만 되고 png와 ttf는 안되어서 문의드립니다. 해당 코드 입니다. { test: /\.png?$/, use: [ { loader: 'file-loader', options: { name: 'images/[name].[ext]?[hash]', } }, ], }, { test: /\.svg?$/, use: [ { loader: 'file-loader', options: { name: 'images/[name].[ext]?[hash]', } }, ], }, { test: /\.ttf?$/, use: [ { loader: 'file-loader', options: { name: 'images/[name].[ext]?[hash]', } }, ], }, 제가 예상되는 것은 코드 문제가 없다면, svg는 index.ts같은 폴더 내에 존재, png는 리소스와 index.ts가 다른 폴더에 존재, ttf는 index.ts가 없습니다. 코드 상에는 문제가 없는지 궁금합니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
절대경로를 사용하는 이유는 무엇인가요?
loader 파일을 입력할때 절대경로를 사용하는 이유가 무엇인가요? 없어도 동작에는 문제없는것 같아서요! module: { rules: [ { test: /\.js$/ use: [path.resolve('./my-webpack-loader.js')], // './my-webpack-loader.js' }, ], }, };
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
asset/inline
webpack 5 부터는 url-loader가 아닌 asset/inline을 사용한다는데 asset/inline에서 로더를 실행할 파일 크기 제한을 어떻게 하나요? url-loader에서 limit 옵션을 asset/inline에서는 어떻게 주는지 궁금하네요!
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
각 강의별 패키지 버전 공유 요청
안녕하세요, 강사님. 강의 잘 듣고 있습니다. 매 강의 떄마다 강의대로 패키지 설치하다 보니 최신버전이 설치되고 그러다보니 패키지간 버전 호환성이 안맞아 에러 나고 그 원인 찾기 위해 패키지 버전 확인하고...... 이런 삽질의 연속입니다. 전체 강의에서 사용한 각 패키지 버전 open 좀 해주세요.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
webpack loader 관련 질문
안녕하세요 정환님. webpack loader 관련해서 질문이 있습니다. // webpack.config.js module: [ rules: [ { test: ~~~~, 이렇게 작성할 때, loader: ~~~, use: [~~] 두 가지 방식으로 작성하는 거 같은데요. 혹시 무슨 차이가 있을까요? use : [{ loader: ~~~, options: {...} }] 이렇게도 작성하는 것 같더라고요
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
npx 명령어
강의 중에 npx lite-server을 터미널에 입력하셨는데 혹시 npx와 npm의 차이점을 알 수 있을까요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
npm i 로 설치되는 packges.json의 디펜던시 내용에 대해 궁금합니다.
이미 다른사람이 만들어둔 pagacke.json을 저의 로컬에 복사해와서, npm i 로 설치를 하게되면 package.json의 dependencies와 devDependencies에 있는 모든 라이브러리들이 설치가 되는건지, dependencies에만 있는것들이 설치가 되는건지 헷갈립니다. 아니면 devdependencies가 개발할때만 사용하는거니까 devDependencies에 있는 목록만 설치가 되나요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
강의에서 보여지는 링크는 어디에 가면 볼 수 있나요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
개발모드 vs 프로덕션 모드
영상에서 개발모드와 프로덕션 모드를 각각 빌드하면 모드별로 파일이 다르게 빌드되는데 개발모드에서 아래 두개를 사용한다 하셨고 namedChunksPlugin, namedModulePlugin 프로덕션모드에서 FlagDependecyPlugin, FlagIncludedChunkPlugin.... 등등을 사용한다고 했는데제가 직접 설치하고 설정한것이 아닌데도 자동으로 설정이 되어있는건가요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
webpack 5에서 before 함수 안되시는분들 onBeforeSetupMiddleware로 변경됨
before함수 에러 나시는분들 업그레이드 되면서 onBeforeSetupMiddleware로 변경되었습니다. 참고하세요
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
정적 파일의 캐쉬는 브라우저가 알아서 해주는건가요? 개발자는 따로 해줄것이 없는건가요?
안녕하세요, 강의 유익하게 보고있는 수강생입니다. 이미지 파일명이 해시값으로 변경되는 부분에서 브라우저에서 정적파일 CSS, JS, Font, Image파일들은 성능을 위해서 캐시해준다고 하였는데 그 캐시?라는것은 브라우저가 알아서 하는건지 아니면 개발자가 캐시라는것을 해줘야하는건지 궁금합니다. 저는 프론트엔드 주니어라,, 캐시가 정확히 어떤것인지 잘 모르는것 같아요...예전에 성능 최적화에 관해 공부했던 내용중에 캐시전략을 잘 짜는것이 성능을 향상시키는데 도움이 된다고 했는데 잘 이애하지 못하고 있다가 이번 웹팩 개발환경셋팅을 공부하면서 다시한번 캐시에 대해 나와 궁금해서 여쭤봅니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
커스텀 명령어와 내장 명령어의 차이
안녕하세요. 강의 잘 듣고 있습니다. 커스텀 명령어의 경우 `npm run ~` 으로 실행하며, 내장 명령어 실행은 `npm ~` 으로 실행한다. 라고 설명해 주셨는데, 내장 명령어로 실행할 경우 커스텀 명령어보다 더 빠르게 동작한다던지 하는 두 가지 동작방식의 차이점이 있을까요? 감사합니다~
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
webpack build
안녕하세요. 좋은 강의 감사드립니다. 에러를 해결하지 못하여 질문드립니다. babel을 따로 실행 시 문제가 없었는데 webpack.config.js에 babel-loader를 추가 한 후, 빌드 시 에러가 발생합니다. 에러 메세지 입니다. Error: [BABEL] /Users/duwon/front_edu/bundler_tutorial/app.js: Could not find plugin "proposal-class-static-block". Ensure there is an entry in ./available-plugins.js for it. (While processing: "/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/preset-env/lib/index.js [./app.js] 2.88 KiB {main} [built] [failed] [1 error] ERROR in ./app.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: [BABEL] /Users/duwon/front_edu/bundler_tutorial/app.js: Could not find plugin "proposal-class-static-block". Ensure there is an entry in ./available-plugins.js for it. (While processing: "/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/preset-env/lib/index.js") at getPlugin (/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/preset-env/lib/index.js:67:11) at /Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/preset-env/lib/index.js:258:62 at Array.map (<anonymous>) at /Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/preset-env/lib/index.js:258:43 at /Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/helper-plugin-utils/lib/index.js:22:12 at /Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/core/lib/config/full.js:199:14 at Generator.next (<anonymous>) at Function.<anonymous> (/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/core/lib/gensync-utils/async.js:26:3) at Generator.next (<anonymous>) at step (/Users/duwon/front_edu/bundler_tutorial/node_modules/gensync/index.js:261:32) at evaluateAsync (/Users/duwon/front_edu/bundler_tutorial/node_modules/gensync/index.js:291:5) at Function.errback (/Users/duwon/front_edu/bundler_tutorial/node_modules/gensync/index.js:113:7) at errback (/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/core/lib/gensync-utils/async.js:70:18) at async (/Users/duwon/front_edu/bundler_tutorial/node_modules/gensync/index.js:188:31) at onFirstPause (/Users/duwon/front_edu/bundler_tutorial/node_modules/gensync/index.js:216:13) at Generator.next (<anonymous>) at cachedFunction (/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/core/lib/config/caching.js:68:46) at cachedFunction.next (<anonymous>) at loadPresetDescriptor (/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/core/lib/config/full.js:292:44) at loadPresetDescriptor.next (<anonymous>) at recurseDescriptors (/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/core/lib/config/full.js:107:30) at recurseDescriptors.next (<anonymous>) at loadFullConfig (/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/core/lib/config/full.js:142:6) at loadFullConfig.next (<anonymous>) at Function.transform (/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/core/lib/transform.js:25:45) at transform.next (<anonymous>) at step (/Users/duwon/front_edu/bundler_tutorial/node_modules/gensync/index.js:269:25) at /Users/duwon/front_edu/bundler_tutorial/node_modules/gensync/index.js:273:13 at async.call.result.err.err (/Users/duwon/front_edu/bundler_tutorial/node_modules/gensync/index.js:223:11) at /Users/duwon/front_edu/bundler_tutorial/node_modules/gensync/index.js:189:28 감사합니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
scss 파일에서 background-image 로 이미지 import 가 안됩니다!
안녕하세요! 강의 보고 여러가지 바꿔보다가 궁금한 점이 생겨서 댓글 남겼습니다. 저는 scss 에서 image url 을 사용하여서 바꿔보려고 했는데, 브라우저에서 확인해보니 제대로 반영이 되지 않는 것 같습니다 JS 에서 img 태그를 만든 이후에는 이미지가 제대로 나오지만 SCSS 에서 background-image 로 작성 시에는 이미지가 나오지 않습니다 dist 폴더에는 웹팩 빌드 결과물 웹팩 설정파일입니다. 항상 강의 잘 보고 있습니다! 시간되실 때 답변해주시면 감사하겠습니다 :)
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
npm run build 시 _cof.js 에서의 에러
ERROR in Error: /Users/imseonghu/실습/lecture-frontend-dev-env/node_modules/core-js/modules/_cof.js?:9 module.exports = function (it) { ^ TypeError: Cannot assign to read only property 'exports' of object '#<Object>' 이런 에러가 발생합니다. node_modules 와 dist 폴더도 삭제하여 다시 설치 후 시도했지만 똑같은 에러메시지가 나와서요,,, 구글링 결과 ECMA 방식과 사용하는 Common.js 형식이 섞여서 문제가 되는 것이라하는데, 제가 common.js 형식을 사용하고 있는건 아닌 것 같습니다. 혹시 비슷한 에러를 겪으신 분들 없나요.? 참고: https://avengersrhydon1121.tistory.com/229
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
npm과 npx 차이에 대해서 궁금합니다.
강사님 강의를 보다보면 제가 npx를 자주 사용하시는데 npx를 쓰는 이유를 인터넷에 검색해보니 npm run 스크립트를 더 편하게 사용하기 위해서라는 이유가 있더군요. 그런데 납득이 되지 않는 것이 $ npx prettier app.js 보다 $ prettier app.js로도 실행이 가능한데, npx를 쓰는 이유가 정말 npm run 스트립트를 사용하지 않기 위해서라는게 맞나요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
캐럿 표기법 질문있습니당
안녕하세요 강사님 캐럿 표기법에 궁금한 점이 있습니다. package.json 에서 어떤 패키지의 버전이 ^1.2.3 으로 표시돼 있으면, 1.9.x 까지 호환이 된다는 뜻인가요?그렇다면 ^1.2.3 으로 표시돼 있어도, 1.9.x 까지의 기능(?)과 내용을 사용할 수 있다는 뜻일까요? 감사합니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
HtmlWebpackPlugin 설치 후 npm run build 시 에러 발생할 때 대처
이런 에러가 발생하여 계속 애먹었습니다. 에러 메시지를 봐도 무엇인 문제인지 모르겠어서 , package.json의 html-webpack-plugin의 버전을 확인했는데, 강사님의 깃헙에서 확인한 버전보다 훨씬 높게 지정돼 있더라구용. 제 로컬에서 높게 설치된 버전을 강사님 깃헙에 나온 버전과 맞추니 에러해결되고 빌드도 정상적으로 됐습니다. $ yarn add html-webpack-plugin@^3.2.0 위 명령어를 실행시키면 html-webpack-plugin 의 버전이 수정되면서 에러가 해결됐습니다. 혹시 비슷한 문제를 겪는 분이 있을까 하여 글로 남겨둡니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
compiler 는 어디서 주입되는 건가요?.?
안녕하세요 MyWebpackPlugin 클래스의 apply() 메서드에 compiler 를 인자로 넣는 것을, compiler 객체를 주입하는 것이라 하셨습니다. 그래서, webpack.config.js 에서 해당 클래스를 new 키워드와 함께 생성할 때 compiler 인자를 주입하는 줄 알았는데, 인자를 따로 넣지 않더라구요,, 혹시 compiler 는 MyWebpackPlugin에 명시적으로 주입되는 것이 아니라 다른 곳에서 자동으로 주입되는 건가용?.?