69,300원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
babel.config.js 폴리필 관련 질문있습니다.
위의 글을 읽어보니 현재 기준 버전의babel-preset-env 에서 async await도 지원을해준다는사실을 알게되었습니다.헌데 강의 시점!!! 영상에서 궁금한것이있습니다선생님께서Promise의 처리를위해useBuiltIns:"usage",corejs:{ version:2} 를 설정해주셨고해당 설명을 통해 require구문 추가가 가능케 하셨고npm install code-js@2 를 통해 설치까지 해주셨습니다 헌데 영상기준으로async await 처리하기위해npm install regenerator-runtime 을 설치해주셨는데왜 regenerator-runtime은corejs에서 처럼 babel.config.js에서 설정을 안해주셔도되는건지 궁금합니다제 생각으론 폴리필의 추가는 babel.config.js에서 하는 것으로 알고있고 그렇다면 npm 설치 뿐만아니라코드상 옵션 설정도 해줘야할것같은데 그런 부분이 없는데도잘 빌드가되어서 이상하다고 생각해서 질문드립니다!!저는 아래 스크린샷처럼 regenerator-runtime을 추가해줘야한다고 생각했습니다
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
질문 드립니다
강의명: 플러그인강의에서 설명해주신 대로 제대로 동작하지 않는데 뭐가 문제인지 모르겠어서 질문 드립니다ㅜㅜ <강의 내용><작성><오류>
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
자주 사용하는 로더 > bg.png
bg.png 를 해시적용하는 부분에서 options:{publicPath: './dist/',name: '[name].[ext]?[hash]'}이후 npm run build 시 이미지가 적용이 안됩니다..콘솔에러도 안나고 그냥 이미지가 뜨지만 않을 뿐이라뭐가 문젠지도 모르고 답답해서 질문을 올리게 되었습니다..
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
빌드시 오류가 발생합니다
npm run build이 부분에서 계속 오류가 발생합니다..ㅜㅜPS D:\lecture-frontend-dev-env> npm run buildDebugger attached.> lecture-frontend-dev-env@1.0.0 build> webpackDebugger attached.[webpack-cli] [Error: EISDIR: illegal operation on a directory, open 'D:\lecture-frontend-dev-env\dist\main.js'] { errno: -4068, code: 'EISDIR', syscall: 'open', path: 'D:\\lecture-frontend-dev-env\\dist\\main.js'}Waiting for the debugger to disconnect...Waiting for the debugger to disconnect...
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
강의 잘 들었습니다. 감사합니다!
안녕하세요. 진행하신 강의는 웹팩4이므로 저는 웹팩5로 진행하면서 정말 많은 공부가 되었습니다! 한 가지만 빼고 강의 코드를 웹팩5으로 변환시키는 것을 성공하였는데요. BannerPlugin을 사용하기 전에 직접 번들링 코드에 배너를 넣는 부분은 실패했습니다ㅠ 웹팩5에서는 더 이상 assets['main'js].source 함수를 사용하지 않는 것 같았습니다. 해당 함수를 재정의해봤지만 배너가 붙지 않더라구요. 공식문서를 뒤져보면서 이것저것 시도해봤지만 성공하지 못했습니다ㅠ 혹시 여기에 대한 해답이 있으시다면 공유 가능할까요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
webpack dev server 실행시 html 수정했을때 최신화 반영안됨..
안녕하세요! webpack dev server 실행후, css코드나, js 코드는 수정후 저장하면 브라우저에서 바로 반영이 되지만, html파일을 수정하게 되면, 새로고침을 해야만 수정내용이 반영됩니다. 따로 옵션을 주어야 하는걸까요?....
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
tsconfig.json
혹시 webpack.config.js 파일도 tsconfig.json 영향을 받나요? tsconfig.json의 경우 파일 확장자가 ts인 파일에만 타입스크립트 컴파일러가 변환시켜주는 것으로 알 고 있는데 webpack.config.json에서플러그인을 로드할 때 경로에 모듈을 찾을 수 없으며, tsconfig.json의 moduleResolution을 node로 설정하라고 나옵니다 ㅜㅜ
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
웹 뷰가 정상적으로 보이지 않는 문제
안녕하세요! 김정환님 강의 열심히 듣고 있습니다. 좋은 강의 감사합니다! 다름이 아니라, 이번 강의 실습 그대로 빌드까지 완료하고 live-server와 lite-server 모두 띄어보았는데 이상하게도 검색창만 나오고 아래 결과 컨텐츠는 나오지가 않습니다. 혹시 어느 부분이 잘못되어 그러는 것인지 알 수 있을까요? branch는 1-webpack/1-entry이며, models, views 폴더는 모두 있습니다. 웹 뷰 사진 첨부드립니다. 코드도 첨부 드립니다. // webpack.config.js const path = require("path"); module.exports = { mode: "development", entry: { main: "./src/app.js", }, output: { path: path.resolve("./dist"), filename: "[name].js", }, };
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
csp 오류
안녕하세요, htmlWebpackPlugin 관련 질문이 있어서 글 남깁니다. 현재 webpack5, htmlWebpackPlugin5 를 사용해서 예제를 진행하고 있는데, 위와 같은 csp 오류가 발생해서 질문드립니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
HtmlWebpackPlugin - templateParameters 관련 질문
안녕하세요, 선생님의 강의 열심히 듣고 있는 직장인입니다 :) 항상 친절하고 디테일 하신 설명에 감명 받고 있습니다. 다름이 아니라 Webpack-plugin 강의를 듣다가 궁금한 점이 생겨서 처음 질문글을 남기게 되었는데요. HtmlWebpackPlugin 의 templateParameters 설정할 때, 이미 webpack.config.js에서 상단에 mode :'development'를 설정하고 npm run build 시 앞에 NODE_ENV=development 라고 명시하지 않아도 app.js에서 process.env.NODE_ENV 출력 시 development가 나오는 것을 확인할 수 있었는데, 왜 templateParameters를 통해 env 값을 유동적으로 title로 나타내주고 싶을 땐 꼭 앞에 NODE_ENV=development로 값을 명시해야하는건가요?? 그냥 npm run build만 하면 안나오더라고요.. 궁금해서 여쭤봅니다!! 미리 답변에 감사드립니다 ㅎㅎ
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
버전 관리 질문
아래 질문 답변에서, npm install css-loader@3 file-loader@5 style-loader@1 해당 코드와 같이 종속성 설치를 하도록 권하고 있는데, 각각 버전들이 어떻게 호환 맞는지 어디서 확인할 수 있나요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
강의가 안나와요
The media could not be loaded, either because the server or network failed or because the format is not supported. 이렇게 나오는데 어떻게 하나요? 문의하기를 찾아도 화면에서 메뉴를 찾을 수가 없어서 여기 남깁니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (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로 실습 진행하시는분들은 참고해주세요 ~
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
npm install node 버전 충돌문제.
안녕하세요 강의 잘듣고 있습니다!! npm install 도중 문제가 발생하여서 문의드립ㄴ디ㅏ. 실행 환경 mac big sur node v 16.13.2 node-sass에서 node 16버전을 지원안해서 그러는 문제 같은데 구글링결과 xcode-select --print-path sudo rm -r -f /Library/Developer/CommandLineTools xcode-select --install이 해결방법을 가장 많이 쓰시던데 저는 해결되지 않아서요..node 14로 마이그레이션 하는 방법뿐일까요?혹시 번거롭지 않으시다면 최신 버전으로 실습파일 재업로드 해주실 수 있나 문의드립ㄴ다 ㅠ
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
file-loader를 이용할 때 png 파일이 깨지는 현상 .
강의의 버전과는 다르게, 최신버전의 webpack v5.70.0 을 사용하고 있습니다. 강의 내용을 따라 하다보면 file-loader를 이용해서, bg.png와 times-circle.png를 dist파일로 옮겨놔야 하는데 이 때, jpg는 정상적으로 파일이 옮겨지는 반면에 png파일은 작동하지 않습니다. 이와 관련해서 찾아보니, v5 버전 이후 [file-loader, url-loader, raw-loader]는 webpack의 기본 모듈로 채택되면서 더 이상 v6버전의 webpack과 호환이 되지 않는다고 합니다. 그러니, [file-loader,url-loader]를 설치하지 마시고 이 링크 `https://webpack.js.org/guides/asset-modules` 를 참고 하시어 사용 방법을 확인해보시는게 좋은 것 같습니다. 아래는 url-loader를 현 강의의 예제와 동일하게 url-loader를 사용하는 방법입니다. 1-webpack/2-loader 브런치 실습 예제에서 사용 하실 수 있습니다. 2-loader의 times-circle.png 파일은 7kb 정도이니, 아래의 코드를 이용하면 times-circle.png 파일은 데이터 스트링으로 url() 함수의 인자로 전달 된 것을 볼 수 있을 겁니다. const path = require('path'); module.exports = { mode: 'development', entry: { main: './src/app.js' }, output: { filename: '[name].js', path: path.resolve('./dist'), assetModuleFilename: '[hash][ext][query]' //file-loader output }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { //url-loader 사용시 test: /\.(jpe?g|gif|png)$/i, type: 'asset', parser: { dataUrlCondition: { maxSize: 8 * 1024 // 8kb } } }, // { //file-loader 만 사용시 // test: /\.(jpe?g|gif|png)$/i, // type: 'asset/resource', // } ] } }
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
IIFE관련 질문드립니다!
var math = math || {}; (function() { function sum(a, b) { return a + b; } math.sum = sum; })(); 위와같이 즉시실행함수로 감싸서 스코프의 제한을 두는건 이해 했는데 math변수 자체가 전역스코프에 선언 돼 있기 때문에 결국 sum이라는 함수가 전역객체 내의 math의 메소드로 선언된거 처럼 보입니다. 제가 궁금한 것은 즉시실행함수로 스코프를 제한하여도 결국 math가 전역공간에 선언돼 있어 어디서든 math에 접근이 가능한 상태가 됩니다. 따라서 var math = math || {}; function sum(a, b) { return a + b; } math.sum = sum; 위와 같이 작성한 내용이랑 크게 어떤차이가 있는지 잘 모르겠어서 질문드립니다...!
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
npm i 질문.
올려주신 강의자료를 적용해보려고 로컬에서 다운받아 사용하려는데 패키지 설치단계에서 오류가 발생합니다 ㅠ..
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
CopyWebpackPlugin질문
두가지의 질문을 드리자면.. 1. 기존에 빌드된 결과물을 사용중이라면 빌드 프로세스에서 제외시킨후 CopyWebpackPlugin통해 복사하여 빌드 결과물에 넣어주면서 빌드시간을 단축시키고 번들 하나의 용량을 줄일 수 있게되는걸로 이해했습니다. 예를들어서 axios를 통해 설명해주셨는데 그러면 혹시 지금 사용하고있는 패키지들이 빌드된 결과물인지 아닌지를 어떻게 판단하여 CopyWebpackPlugin에 적용시킬 수있는건가요? 일일이 node-modules에서 min.js를 찾아 판단하는 방식은 아닐것같아 여쭤봅니다! 2.이렇게 빌드과정에서 제외시킴으로써 왜 script로 직접 추가해줘야하는 과정이 추가되는지 모르겠습니다..
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
NODE_ENV 질문
이전 플러그인 강의내용에서 DefinePlugin을 적용하게되면 process.env.NODE_ENV의 값이 webpack설정파일의 mode값으로 설정된다고 이해했습니다. 그래서 mode : "development" 를 설정하게되면 NODE_ENV값이 "development"로 설정되구요. 근데 이번강의에서 production환경과 development환경을 구분짓기위해 아래와 같이 설정파일을 수정하고 const mode = process.env.NODE_ENV || "development" // 기본값을 development로 설정 module.exports = { mode, } build 명령어부분에 NODE_ENV = "production" 를 설정해주셨는데 이렇게 설정하면 DefinePlugin을 사용하지 않아도 되는게 아닌지 궁금합니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
절대경로 질문.
3:39에서 웹팩에서 설정한 api서버로 요청 보내실떄 app.get("/api/users", ...) 이렇게 설정을하셨는데 만약 window운영체제에서 작성중이시라면 localhost:8080/api/users로 작성하셔야 되는건가요?