69,300원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
TypeError: ((process.env.NODE_ENV === "production") && [MiniCssExtractPlugin]) is not iterable
TypeError: ((process.env.NODE_ENV === "production") && [MiniCssExtractPlugin]) is not iterable문제 없어보이는데 계속 저 에러가 발생하네요npm run build 만 입력하면 production이 아니니까 타야할거같은데 환경변수를 집어넣어주면 에러가 발생안하고 안넣어주면 에러가 발생합니다. const path = require("path"); const webpack = require("webpack"); const childProcess = require("child_process"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const isProduction = process.env.NODE_ENV === "production"; module.exports = { mode: "development", entry: { mainSrc: "./app.js", }, output: { path: path.resolve("./dist"), filename: "[name].js", }, module: { rules: [ { test: /\.css$/, use: isProduction ? [MiniCssExtractPlugin.loader, "css-loader"] : ["style-loader", "css-loader"], }, { test: /\.(png|jpg|gif|svg)$/, type: "asset/resource", }, { test: /\.js$/, loader: "babel-loader", exclude: "/node_modules/", }, ], }, plugins: [ new webpack.BannerPlugin({ banner: ` Build Date : ${new Date().toLocaleString()} Commit Version : ${childProcess.execSync("git rev-parse --short HEAD")} Author : ${childProcess.execSync("git config user.name")} `, }), new webpack.DefinePlugin({ TWO: "1+1", TWO_STRING: JSON.stringify("1+1"), "api-domain": JSON.stringify("http://dev.api.domain.com"), }), new HtmlWebpackPlugin({ template: "./src/index.html", templateParameters: { env: process.env.NODE_ENV === "development" ? "개발용" : "운영", }, minify: process.env.NODE_ENV === "production" && { collapseWhitespace: true, removeComments: true, }, }), new CleanWebpackPlugin(), ...(process.env.NODE_ENV === "production" && [ new MiniCssExtractPlugin({ filename: "[name].css", }), ]), ], };
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
혹시 웹팩 5 내용으로 강의 업데이트는 안되는건가요?
혹시 웹팩 5 내용으로 강의 업데이트는 안되는건가요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
에러없이 png안뜨시는 분들
webpack-cli3, webpack4, loader는 @2로 install 하시면 강의와 같이 잘 나옵니다. 저는 참고로 모든 웹팩, 로더 버전 최신으로 깔았다가 png가 안나왔네요.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
Error: Cannot find module 'node:crypto'
"devDependencies": { "eslint": "^8.56.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-prettier": "^5.1.2", "husky": "^8.0.3", "lint-staged": "^15.2.0", "prettier": "^3.1.1", "webpack": "^4.41.5", "webpack-cli": "^3.3.10" },일때module.exports = { env: { node: true, browser: true, }, extends: ["eslint:recommended", "plugin:prettier/recommended"], globals: { Atomics: "readonly", SharedArrayBuffer: "readonly", }, parserOptions: { ecmaVersion: "latest", sourceType: "module", }, plugins: ["prettier"], rules: { "prettier/prettier": "error", }, }; 노드 버전이 원인인가요 ?14 버전 입니다..
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
DefinePlugin 관련; env와 관련하여, (21.06.22 16:15, aloha_jh) 답변포함
DefinePlugin 보고 이런생각이 들었습니다.React.js나 Next.js로 프론트엔드 개발을 할 때, 서버주소를 보통 env || env.develop 등으로 관리했습니다. 강의와 답변을 보기 전에는 이러한 라이브러리 및 프레임워크가 env 파일을 웹팩으로 설정하여 자동으로 불러오게 만들어 주는것이라고 여겼습니다. console.log(process.env.NODE_ENV);설정한 부분을 콘솔에 기록하는 부분의 코드가 동일했기 때문입니다. 그런데 답변을 보니 DefinePlugin과 env 설정이 다른 것으로 보여서 개념상의 차이가 어떤 부분인지 싶어 질문드립니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
깃허브 확인 문의
git clone git@github.com:jeonghwan-kim/lecture-fronted-dev-env.gitCloning into 'lecture-fronted-dev-env'...git@github.com: Permission denied (publickey).fatal: Could not read from remote repository. 이런 오류가 뜨면서 파일이 안받아지는데 어떻게 해야할까요? ㅠ
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
강의 업데이트가 필요해보입니다..
여러 패키지를 강의에서 사용하는데 그동안 패키지들이 버젼업이 많이 된만큼 강의에서 진행하는 부분과 차이가 있는 부분들이 꽤많네요.. husky도 이제 package.json에서 수정하는게아니라 추가하는 커맨드 사용해서 하구요강의가 업데이트된다면 더 퀄리티좋은 강의가 될것같습니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
폴더를 prettier로 돌렸을 때 나오는 에러 구문에 대한 질문
npx prettier ./src --write해당 구문이 적용되나요? 첫 시도에서는 성공했는데 그 이후로 부터는 실패 구문이 아래와 같이 뜨더라구요.[error] No matching files. Patterns tried: ./src !**/node_modules/** !./node_modules/** !**/.{git,svn,hg}/** !./.{git,svn,hg}/**안내 답변 가능하신가요?
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
해쉬값과 캐쉬 갱신
'웹팩 기본편 - 자주 사용하는 로더'를 학습하고 있습니다.로더들 중에, file-loader에 대해 학습하다가 질문이 생겼습니다.웹팩이 .png파일을 발견하면 file-loader를 실행할 것이고, 로더가 동작하고 나면 아웃풋에 설정한 경로로 이미지 파일을 복사합니다. 그리고 파일명이 해쉬코드로 변경 됩니다. 수업시간에 강사님께서 쿼리스트링이 매번 바뀌는 해시값으로 설정된다고 하셨는데, 그러면 빌드를 할때마다 해시값이 매번 바뀌는 건가요?그리고 이게 캐시 관점에서 어떤 도움을 주는지 궁금합니다. 파일명이 해쉬코드로 변경되는게 캐쉬 갱신을 위한 처리로 보인다고 하셨는데, 정확히 어떤점에서 캐쉬 갱신에 도움을 주는지 이해가 잘 안가서요ㅠㅠ알려주시면 감사하겠습니다!
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
Hash 에러 발생
안녕하세요 강사님.제가 npm run build로 빌드를 하려고 할때마다 다음과 같은 에러가 생기더라구요..[에러 내용]$ npm run build > sample@1.0.0 build > webpack node:internal/crypto/hash:69 this[kHandle] = new _Hash(algorithm, xofLen); ^ Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:69:19) at Object.createHash (node:crypto:138:10) at module.exports (C:\Users\power\OneDrive\inflearn\devEnv\sample\node_modules\webpack\lib\util\createHash.js:135:53) at NormalModule._initBuildHash (C:\Users\power\OneDrive\inflearn\devEnv\sample\node_modules\webpack\lib\NormalModule.js:417:16) at handleParseError (C:\Users\power\OneDrive\inflearn\devEnv\sample\node_modules\webpack\lib\NormalModule.js:471:10) at C:\Users\power\OneDrive\inflearn\devEnv\sample\node_modules\webpack\lib\NormalModule.js:503:5 at C:\Users\power\OneDrive\inflearn\devEnv\sample\node_modules\webpack\lib\NormalModule.js:358:12 at C:\Users\power\OneDrive\inflearn\devEnv\sample\node_modules\loader-runner\lib\LoaderRunner.js:373:3 at iterateNormalLoaders (C:\Users\power\OneDrive\inflearn\devEnv\sample\node_modules\loader-runner\lib\LoaderRunner.js:214:10) at Array.<anonymous> (C:\Users\power\OneDrive\inflearn\devEnv\sample\node_modules\loader-runner\lib\LoaderRunner.js:205:4) at Storage.finished (C:\Users\power\OneDrive\inflearn\devEnv\sample\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16) at C:\Users\power\OneDrive\inflearn\devEnv\sample\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9 at C:\Users\power\OneDrive\inflearn\devEnv\sample\node_modules\graceful-fs\graceful-fs.js:123:16 at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' } Node.js v20.3.0위의 에러가 왜 발생했는지 찾아봤고 원인과 해결방법을 다음 링크에 정리했습니다.[정리 링크] https://github.com/SeoMiYoung/Learning/issues/6결론적으로, npm run build를 하기전에export NODE_OPTIONS=--openssl-legacy-provider위의 명령어를 한번 쳐주고, npm run build를 하면, 제대로 빌드가 작동되더라구요..!그런데 VSCode를 다시 껐다 켜면, 또 다시 위의 명령어를 입력해준 다음에 빌드를 해야되더라구요..아마, 위의 명령어는 Node.js실행시, OpenSSL의 레거시 프로바이더를 사용하도록 환경변수를 설정해주는 명령어인데, 해당 명령어는 임시적으로 현재 세션에서만 레거시 프로바이더를 사용하도록 해주는 명령어이다보니, VSCode를 껐다 켜는것처럼, 재부팅하거나 새로운 세션을 시작하는 경우에는 환경변수가 초기화되어 다시 설정해줘야되는 것 같아서 그런 것 같더라구요..!재부팅할때마다 빌드하기전에 해당 명령어를 치고 시작하는게 번거롭습니다..혹시 해결 방법이 없을까요??[참고: 버전 정보]{ "name": "sample", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, "author": "", "license": "ISC", "description": "", "dependencies": { "css-loader": "^4.3.0", "file-loader": "^6.2.0", "react": "^18.2.0", "style-loader": "^1.3.0" }, "devDependencies": { "webpack": "^4.46.0", "webpack-cli": "^3.3.12" } }
- 해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
webpack.config.js에서의 CommonJS방식에 대한 질문
안녕하세요!수업시간에 보면 webpack.config.js 웹팩 설정파일을 CommonJS방식으로 작성하였는데요,웹팩은 Node.js에서 동작하는 프로그램이고,Node.js가 사용하는 모듈시스템이 CommonJS이므로 웹팩 설정파일을 CommonJS로 작성한 건 이해했습니다.그런데 문득 드는 궁금증이,CommonJS 모듈 시스템을 채택했던 NodeJS 환경에서 ES Module을 사용하려면 Babel과 같은 트랜스파일러(transpiler)를 사용했어야 했는데요. NodeJS 버전 13.2부터 ES모듈 시스템에 대한 정식 지원이 시작됨에 따라 다른 도구 없이 NodeJS에서 손쉽게 ES Module을 사용할 수 있게 되었잖아요..?그렇다면 노드버전 13.2부터는 webpack.config.js 를 CommonJS가 아닌, ES Module방식으로 작성해도 상관없는건가요?
- 해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
웹팩 버전
안녕하세요.현재 웹팩의 가장 최신버전이 5버전으로 알고 있는데,해당 강의에서는 4버전으로 진행하더라고요.제가 잘 몰라서 그런데.. 4버전으로 공부해도 상관은 없겠죠?
- 해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
웹팩-cli 버전을 명시하지 않으면 왜 에러가 날까요?
안녕하세요? 웹팩 cli를 처음 깔아보는 수강생입니다..npm install -D webpack@4 webpack-cli위의 코드처럼 그냥 webpack-cli를 깔면, 에러가 발생하는데요...그래서수업시간에 webpack-cli를 버전3을 사용한다는 글을 보고, 다음과 같이 명령어를 바꿔서 쳐보았더니npm install -D webpack@4 webpack-cli@3정상적으로 설치가 되었습니다. 왜 버전을 명시해주지 않으면 에러가 발생하나요?
- 해결됨프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
import해오는 두가지 방법에 대해 제가 잘 이해한건지 확인받고 싶습니다!!
강사님께서, 수업중에 import해오는 방법을 두가지를 언급하셨는데요,import * as math from './math.js'; // [방법1] 모든 export를 math라는 객체로 가져오기 import { sum } from './math.js'; // [방법2] sum함수만 가져오기방법1로 import할 경우, sum함수를 사용하기 위해서 math.sum(,) 이렇게 써야하지만,방법2로 import할 경우, 그냥 바로 sum(,)으로 사용하면 되나요? 저는 일단 그렇게 이해하고 있는데그러면 import * as math1 from './math1.js'; import * as math2 from './math2.js';이렇게 math1.js와 math2.js에서 각각 sum함수를 만들고, 그걸 app.js에서 위와 같이 import해서 사용했을 때,math1.sum(,) 그리고 math2.sum(,) 이렇게 쓰면 되니깐, 이름이 sum으로 같아도 충돌이 안나겠네요? 그러나 방법2방식으로 import { sum } from './math1.js'; import { sum } from './math2.js';이렇게 가져온다면, 둘다 sum(,)으로 호출하게 되니깐, 이름 충돌이 발생하겠네요?제가 이해한것이 맞는지 확인부탁드려요ㅠㅠ
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
파일 구조는 다르지만 저도 myWebpackLoader 콘솔이 2번이 찍혔는데요.!
지금 이런식으로 저는 파일구조가 되어있는데 저도 파일구조의 상태에서 npm run build를 했을때 콘솔창에 2번 myWebpackLoader에 작성한 문구가 나왔습니다. 이렇게 되면, index.js에서 한번 사용된거고 main.js에서 한번 사용된게 맞을까요.. ? 저 main.js는 output으로 build될때 만들어지도록 설정해놓은 파일인데, 로더가 output의 확장자와 겹칠때도 작동을 하는건가..? 싶어서 여쭙습니다!
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
mode=production 빌드 시 문제 발생
안녕하세요, 원인을 도저히 모르겠어서 질문 남깁니다.mode를 production으로 했을 때만 아래 사진처럼 에러가 나는데요, 코드상에 문제가 있는지 한번 봐주실 수 있을까요?mode=development에서는 보시다시피 잘 나옵니다.아래는 소스코드입니다.package.json{ "name": "lecture-frontend-dev-env", "version": "1.0.0", "description": "\"프론트엔드 개발 환경의 이해\" 강의 자료입니다.", "main": ".eslintrc.js", "devDependencies": { "@babel/cli": "^7.21.0", "@babel/core": "^7.21.0", "@babel/preset-env": "^7.20.2", "babel-loader": "^9.1.2", "css-loader": "^6.7.3", "html-webpack-plugin": "^5.5.0", "mini-css-extract-plugin": "^2.7.2", "sass": "^1.58.3", "sass-loader": "^13.2.0", "style-loader": "^3.3.1", "webpack": "^5.75.0", "webpack-cli": "^5.0.1" }, "scripts": { "dev": "webpack --mode=development --config webpack.config.js", "build": "webpack --mode=production --config webpack.config.js" }, "repository": { "type": "git", "url": "git+https://github.com/jeonghwan-kim/lecture-frontend-dev-env.git" }, "keywords": [], "author": "", "license": "ISC", "bugs": { "url": "https://github.com/jeonghwan-kim/lecture-frontend-dev-env/issues" }, "homepage": "https://github.com/jeonghwan-kim/lecture-frontend-dev-env#readme", "dependencies": { "core-js": "^3.29.0" } }webpack.config.jsconst path = require("path"); const webpack = require("webpack"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = (env, argv) => { const title = argv.mode === "development" ? "(개발용)" : ""; return { entry: { main: "./src/app.js", }, output: { filename: "[name].js", path: path.resolve(__dirname, "dist"), clean: true, }, module: { rules: [ { test: /\.s[ac]ss$/i, use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"], }, { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: "asset", parser: { dataUrlCondition: { maxSize: 20 * 1024, // 20kb }, }, generator: { publicPath: "../dist/", }, }, { test: /\.js$/i, exclude: /node_modules/, use: { loader: "babel-loader", options: { configFile: path.resolve(__dirname, "babel.config.js") }, }, }, ], }, plugins: [ new webpack.BannerPlugin({ banner: `빌드 날짜: ${new Date().toLocaleString()}`, }), new HtmlWebpackPlugin({ template: "./src/index.html", templateParameters: { env: title }, }), new MiniCssExtractPlugin(), ], }; };babel.config.jsmodule.exports = { presets: [ [ "@babel/preset-env", { targets: { ie: 11 }, useBuiltIns: "usage", corejs: 3, }, ], ], };다른 폴더 및 파일은 건드리지 않았습니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
node_modules/.bin/webpack 오류가 납니다
node_modules/.bin/webpack --help 하면 이러한 오류가 나는데 이건 왜그런걸까요?
- 해결됨프론트엔드 개발환경의 이해와 실습 (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할 땐 이미지 파일이 코드에서 사용중인 것만 빌드 되나요? 답변 주시면 감사하겠습니다.
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
안녕하세요 웹팩 명령어실행중에 오류가 나서요
webpack설치를 했는데 webpack 명령어 자체를 인식하지 못해성...처음에는 ouput을 인식못하다가 이젠 webpack을 인식하지 못하네용.ㅠ도와주세용
- 미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
babel sass 문제 풀이 관련
안녕하세요.김정환 강사님 수업을 잘 듣고 있는 학생입니다..!현재 처음 npm run build를 할 때 문제가 다르게 나와서 어떻게 해결해야 할지 모르겠습니다.처음에만 아래처럼 뜨는 건가 싶어서 sass-loader 하고 node-sass를 설치를 하고 webpack 까지 완료를 해놓아도 아래와 같은 app.js에서 문제가 계속해서 발생하고 있는데 혹시 어떻게 해결을 해야 할 수 있을까요..ㅠ <pakage.json><git checkout 이후 첫 npm run build 실행시><app.js>