69,300원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
질문
삭제된 글입니다
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
이전에 코드를 올려달라고 하셔서 코드 올립니다.
질문도 같이 올리겠습니다~ ================== 이전 질문입니다. sass 실습 파트입니다. ====================== 강의랑 똑같이 한 것 같은데 계속 오류가 떠서 자력으로 해결하기가 어려워 질문을 합니다.. <에러 리포트 > 0 info it worked if it ends with ok 1 verbose cli [ 1 verbose cli 'C:\\Program Files\\nodejs\\node.exe', 1 verbose cli 'C:\\Users\\AndrewLee\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js', 1 verbose cli 'run', 1 verbose cli 'build' 1 verbose cli ] 2 info using npm@6.14.4 3 info using node@v13.12.0 4 verbose run-script [ 'prebuild', 'build', 'postbuild' ] 5 info lifecycle lecture-frontend-dev-env@1.0.0~prebuild: lecture-frontend-dev-env@1.0.0 6 info lifecycle lecture-frontend-dev-env@1.0.0~build: lecture-frontend-dev-env@1.0.0 7 verbose lifecycle lecture-frontend-dev-env@1.0.0~build: unsafe-perm in lifecycle true 8 verbose lifecycle lecture-frontend-dev-env@1.0.0~build: PATH: C:\Users\AndrewLee\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\AndrewLee\Desktop\example_web\lecture-frontend-dev-env\node_modules\.bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\bin;C:\Users\AndrewLee\bin;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\iCLS;C:\Program Files\Intel\Intel(R) Management Engine Components\iCLS;C:\Program Files\Oculus\Support\oculus-runtime;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\Intel\WiFi\bin;C:\Program Files\Common Files\Intel\WirelessCommon;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\WINDOWS\System32\OpenSSH;C:\Program Files\dotnet;C:\Program Files\Microsoft SQL Server\130\Tools\Binn;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\GtkSharp\2.12\bin;C:\Program Files\Java\jdk1.8.0_201\bin;C:\Program Files\Git\cmd;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn;C:\Program Files (x86)\Microsoft SQL Server\140\Tools\Binn;C:\Program Files\Microsoft SQL Server\140\Tools\Binn;C:\Program Files\Microsoft SQL Server\140\DTS\Binn;C:\Program Files (x86)\Microsoft SQL Server\150\DTS\Binn;C:\Program Files\Perforce;C:\Program Files\PuTTY;C:\Program Files\nodejs;C:\Program Files\nodejs;C:\Users\AndrewLee\Desktop\파이썬\Scripts;C:\Program Files\Java\jdk1.8.0_201\bi;C:\Users\AndrewLee\AppData\Local\Microsoft\WindowsApps";C:\Program Files\Intel\WiFi\bin;C:\Program Files\Common Files\Intel\WirelessCommon;C:\Program Files\Java\jdk1.8.0_201;C:\Users\AndrewLee\AppData\Local\GitHubDesktop\bin;C:\Users\AndrewLee\AppData\Local\Programs\Microsoft VS Code\bin;C:\Bitnami\wampstack-7.3.15-2\mysql\bin;C:\Program Files\heroku\bin;C:\Users\AndrewLee\AppData\Roaming\npm 9 verbose lifecycle lecture-frontend-dev-env@1.0.0~build: CWD: C:\Users\AndrewLee\Desktop\example_web\lecture-frontend-dev-env 10 silly lifecycle lecture-frontend-dev-env@1.0.0~build: Args: [ '/d /s /c', 'webpack --progress' ] 11 silly lifecycle lecture-frontend-dev-env@1.0.0~build: Returned: code: 2 signal: null 12 info lifecycle lecture-frontend-dev-env@1.0.0~build: Failed to exec build script 13 verbose stack Error: lecture-frontend-dev-env@1.0.0 build: `webpack --progress` 13 verbose stack Exit status 2 13 verbose stack at EventEmitter.<anonymous> (C:\Users\AndrewLee\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16) 13 verbose stack at EventEmitter.emit (events.js:315:20) 13 verbose stack at ChildProcess.<anonymous> (C:\Users\AndrewLee\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14) 13 verbose stack at ChildProcess.emit (events.js:315:20) 13 verbose stack at maybeClose (internal/child_process.js:1026:16) 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5) 14 verbose pkgid lecture-frontend-dev-env@1.0.0 15 verbose cwd C:\Users\AndrewLee\Desktop\example_web\lecture-frontend-dev-env 16 verbose Windows_NT 10.0.17763 17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\AndrewLee\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "build" 18 verbose node v13.12.0 19 verbose npm v6.14.4 20 error code ELIFECYCLE 21 error errno 2 22 error lecture-frontend-dev-env@1.0.0 build: `webpack --progress` 22 error Exit status 2 23 error Failed at the lecture-frontend-dev-env@1.0.0 build script. 23 error This is probably not a problem with npm. There is likely additional logging output above. 24 verbose exit [ 2, true ] <webpack.config.js> const path = require("path"); const webpack = require("webpack"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); process.env.NODE_ENV = process.env.NODE_ENV || "development"; module.exports = { mode: "development", entry: { main: "./src/app.js" }, output: { filename: "[name].js", path: path.resolve("./dist") }, module: { rules: [ { test: /\.(scss|css)$/, use: [ process.env.NODE_ENV === "production" ? MiniCssExtractPlugin.loader : "style-loader", "css-loader", "sass-loader" ] }, { test: /\.(png|jpg|svg|gif)$/, loader: "url-loader", options: { name: "[name].[ext]?[hash]", limit: 10000 } }, { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }, plugins: [ new webpack.BannerPlugin({ banner: `빌드 날짜: ${new Date().toLocaleString()}` }), new HtmlWebpackPlugin({ template: "./src/index.html", templateParameters: { env: process.env.NODE_ENV === "development" ? "(개발용)" : "" }, minify: process.env.NODE_ENV === "production" ? { collapseWhitespace: true, // 빈칸 제거 removeComments: true // 주석 제거 } : false, hash: process.env.NODE_ENV === "production" }), new CleanWebpackPlugin(), ...(process.env.NODE_ENV === "production" ? [new MiniCssExtractPlugin({ filename: `[name].css` })] : []) ] }; 나머지는 커밋한 시점에서 손댄 부분이 없습니다 ㅠ 좋은 강의 해주셔서 감사합니다. 코드는 https://github.com/JoonsongLee/question.git 에 zip 파일로 올렸습니다
- 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
질문입니다.
삭제된 글입니다
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
질문입니다.
강의 중간중간에 나머지 연산자에 대한 내용을 자주 언급하시는데 구글링을 해도 마땅한 정보를 찾을 수가 없어서.. 이것이 무슨 뜻이고 어떤 기능인지 설명 좀 해주시거나 구글에서 어떤 키워드로 검색해야 학습이 가능한지 알고 싶습니다. 2. webpack으로 dist 폴더를 생성한 후에 index.html 파일안에 input 태그의 가장 중요한 속성인 type 속성이 사라진 것을 확인했는데 이건 어떤 문제인지 알 수 있을까요? < webpack.config.js> const path = require("path"); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const {CleanWebpackPlugin} = require('clean-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); process.env.NODE_ENV = process.env.NODE_ENV || "development" module.exports = { mode: "production", entry: { main: "./src/app.js" }, output: { filename: "[name].js", path: path.resolve("./dist") }, module: { rules: [ { test: /\.css$/, use: [ process.env.NODE_ENV==="production" ? MiniCssExtractPlugin.loader: "style-loader" , "css-loader"] }, { test: /\.(png|jpg|svg|gif)$/, loader: "url-loader", options: { name: "[name].[ext]?[hash]", limit: 10000 // 10Kb } } ] }, plugins:[ new webpack.BannerPlugin({ banner : `빌드 날짜 : ${new Date().toLocaleString()}` }), new HtmlWebpackPlugin({ template: './src/index.html', templateParameters :{ env:process.env.NODE_ENV === 'development'?'(개발용)' :'', } }), new CleanWebpackPlugin(), ...(process.env.NODE_ENV==='production' ? [new MiniCssExtractPlugin({ filename :'[name].css' })] :[]), ] /** * TODO: 아래 플러그인을 추가해서 번들 결과를 만들어 보세요. * 1. BannerPlugin: 결과물에 빌드 시간을 출력하세요. * 2. HtmlWebpackPlugin: 동적으로 html 파일을 생성하세요. * 3. CleanWebpackPlugin: 빌드 전에 아웃풋 폴더를 깨끗히 정리하세요. * 4. MiniCssExtractPlugin: 모듈에서 css 파일을 분리하세요. */ }; <index.html> in dist <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>검색</title> <link href="main.css?9d95228d2bede0c25351" rel="stylesheet"> </head> <body> <div id="app"> <header> <h2 class="container">검색</h2> </header> <div class="container"> <form class="FormView"> // type 속성 어디갓지 <input placeholder="검색어를 입력하세요" autofocus> <button type="reset" class="btn-reset"></button></form> <div class="content"> <div id="tabs"></div> <div id="search-keyword"></div> <div id="search-history"></div> <div id="search-result"></div> </div> </div> </div> <script type="text/javascript" src="main.js?9d95228d2bede0c25351"></script> </body> </html> 좋은 강의 감사합니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
질문입니다.
4.4 url-loader 사용하는 이미지 갯수가 많다면 네트웍 리소스를 사용하는 부담이 있고 사이트 성능에 영향을 줄 수도 있다. 만약 한 페이지에서 작은 이미지를 여러 개 사용한다면 Data URI Scheme을 이용하는 방법이 더 낫다. 이미지를 Base64로 인코딩하여 문자열 형태로 소스코드에 넣는 형식이다. url-loader는 이러한 처리를 자동화해주는 녀석이다. 강의자료를 잘 이해한 것이 맞는지, 혹시나 추가 설명을 해주실 수 있을 까요 ? 네트워크로 웹 브라우저가 웹 서버에 자원들을 받아 내는 과정에서 이미지 또한 요청을 하는데 매번 이미지를 받아내기 위해선 각 이미지마다 네트워크 통신을 하는 것이 손해이기때문에 사용한다는 것으로 이해 했습니다. 그런데 Data URI Scheme를 써도 결국엔 웹 브라우저가 네트워크를 통해 웹서버로부터 이미지를 받는 것이고 그 사실 자체를 변화가 없는 것이 아닌가요? 이걸 쓴다고 무엇이 이득이라는 건지 잘 이해가 안갑니다. 어떤 방법을 통하던 이미지는 웹 서버로 부터 받아야 하는 것이고 이미지 갯수가 많다면 네트워크 리소스 부담이 많아 지는 것은 피할 수 없는 것이 아닌가 싶거든요. 좋은 강의 감사합니다
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
강사님 안녕하세요
강의를 너무 잘 듣고 있습니다. 최근에 배운 것을 정리해보고자 블로그를 시작하였는데 내용이 너무 좋아서 강의 자료를 저만의 방식으로 2차 가공해서 업로드를 하고 싶은데 혹시 허락을 받을 수 있을까요? 글 서두 혹은 말미에 링크와 저작권에 대한 내용을 확실히 기재할 예정입니다. 좋은 강의 감사드립니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
webpack-dev-server 사용시 image 로드 실패
webpack-dev-server를 사용시 image 파일을 수업영상에서는 문제가 없는데 제가 따라하고 있는 연습 프로젝트에서는 제대로 로드하지 못하고 있습니다ㅜㅜ src/index.scss body { background-image: url('./img/lolche.png'); background-size: cover; } src/app.js import './index.scss' webpack.config.js module.exports = { mode: 'development', entry: { main: './src/app.js' }, output: { filename: '[name].js', path: path.resolve('./dist') }, module: { rules: [ { test: /\.(css|scss)$/, use: [ process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'sass-loader' ] }, { test: /\.png$/, loader: 'url-loader', options: { publicPath: './dist/', name: '[name].[ext]', limit: 10000 } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ } ] }, plugins: [ new webpack.BannerPlugin({ banner: () => `빌드 날짜: ${new Date().toLocaleString()}` }), new HtmlWebpackPlugin({ template: './src/index.html', templateParameters: { env: process.env.NODE_ENV === 'development' ? 'development' : 'production' }, minify: process.env.NODE_ENV === 'production' ? { removeComments: true } : false }), // new CleanWebpackPlugin(), ...( process.env.NODE_ENV === 'production' ? [new MiniCssExtractPlugin({filename: `[name].css`})] : [] ) ], devServer: { contentBase: path.join(__dirname, "dist"), publicPath: "/" } } npm rub build시 문제없이 html, css, js, png 파일이 /dist 폴더 내에 생성되는데 npm start로 실행시 다른 건 다 문제가 없는데 image 파일을 제대로 불러오지 못합니다 GET http://localhost:8080/dist/lolche.png 404 (Not Found) 콘솔창에 위와 같은 에러를 뿜는데 제가 뭐를 잘못했을까요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
output filename 관련 질문이 있습니다.
안녕하세요, 우선 좋은 강의 정말 감사합니다! 제 질문은 웹팩 설정이 아래와 같이 되어있는데 output: { filename: '[name].js', 저는 entry 파일이 app.js 라 결과물도 app.js 로 나올 것이라 예상을 했는데 main.js 로 떨어지더라구요. 이는 webpack의 기본 설정이라고 생각하면 될까요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
안녕하세요 강의를 수강중입니다.
안녕하세요 webpack 강의 잘 보고 있습니다. 강의 내용이 webpack4로 되어 있어서 인프런 강의 중에서는 가장 최신 버전을 사용하시는거 같아서 너무 좋내요 혹시 webpack Devtool 관련해서 강의내용을 조금더 추가해 주실수는 없으실까요? devtool 설정 및 디버깅설정을 dev와 prod를 나눌때 어떻게 하는지 궁금한 부분이 많아서요^^ 남은 강의도 완강 하겠습니다 감사합니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
자주사용하는 플러그인과 동일한 영상이 올라온거같습니다!
1-webpack/3-plugin 브런치에서 과제 진행입니다!