안녕하세요. webpack 강의를 모두 수강하고 프로젝트에 적용하던 중 몇 가지 의문점이 생겨 질문 드립니다. 1️⃣ devServer 시작시 이유없이 요청이 발생합니다. 아래는 webpack.config.js 설정입니다. const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack'); require('dotenv').config(); module.exports = {   mode: 'none',   entry: './index.js',   output: {     filename: 'bundle.js',     path: path.resolve(__dirname, 'dist'),   },   devServer: {     port: 9000,     proxy: {       '/api': {         target: 'https://newsapi.org/v2',         changeOrigin: true,         logLevel: 'debug',         pathRewrite: { '^/api': '' },       },    },   },   plugins: [     new HtmlWebpackPlugin({       template: 'index.html',     }),     new webpack.DefinePlugin({       'process.env': {         API_KEY: JSON.stringify(process.env.API_KEY),       },     }),   ], }; 앞에서 예제로 사용한 코드에 추가적으로 .env를 사용하기 위해 dotenv 라이브러리를 설치하여 적용하였습니다. 그런데 server 실행 후, 개발자 도구를 열어보면 아래와 같은 오류가 발생합니다. 제 코드 어딘가에 잘 못 입력한 부분이 있어서 그런걸까요? (index.html은 webpack.config.js와 같은 레벨에 있습니다.) 2️⃣ proxy가 동작하지 않습니다. News API를 통해 뉴스 데이터를 받아오려 했는데 CORS 문제가 발생하여 webpack devServer에 proxy 설정을 하였습니다. 제 생각으론 request url중 '/api/...'가 포함되는 요청들에대해 '/api' 는 ''으로 그리고 앞에 target으로 지정한 'https://newsapi.org/v2'가 붙어서 request 될거라 예상했습니다.그런데 제 예상과 달리 여전히 'http://localhost:9000/api/top-headlines...'으로 요청하고 있었고 debug를 출력해보니 아래처럼 나왔습니다. [HPM] Rewriting path from "/api/top-headlines?country=kr&apiKey=93e..." to "/top-headlines?country=kr&apiKey=93e..." [HPM] GET /api/top-headlines?country=kr&apiKey=93e694811aac419db735d29a23b26c57 ~> https://newsapi.org/v2 Vue CLI로 webpack.confing를 셋팅 했을 때는 이런 문제가 발생하지 않았는데 직접 구현하려하니 원인을 잘 모르겠습니다. 😥 아이디어나 조언 주시면 감사하겠습니다.

제가 이 강의를 듣고 이해한게 맞는지 궁금해서 질문올립니다! dedupingInterval을 사용하지 않으면 swr이 재요청 하는 기준이 다른 텝을 갔다가 오는 경우 재요청을 보내게 되고 dedupingInterval 옵션을 추가하게 되면 그 시간안에는 탭을 갔다와도 재요청을 보내지 않고 캐시해서 그대로 데이터를 사용하다가 그 시간이 끝나면 다시 재요청을 보내는 것이 맞는지 궁금합니다!

저번에 mutate를 이용해서 서버에서 가져오는 데이터를 바로 data에 집어 넣는 식으로 했었는데, 그걸 유지했더니 리다이렉트 할때 에러가 나는 군요. .then((response) => { mutate(response.data) }) 리다이렉트를 할 때 워크스페이스 페이지가 열림과 동시에 user를 가져와야 에러가 안 생기는데, mutate를 쓰면 워크스페이스 페이지가 열릴 때 서버에 요청을 안보내네요... 그래서 실습 코드 뒤져보다가 revalidate를 쓴 걸 보고 revalidate를 쓰도록 코드를 수정했더니 workspace 들어가자마자 user 요청을 보내네요. 아직 알쏭달쏭 합니다. swr은 로컬 스토리지를 쓸때 디버깅을 하기가 어려운 것 같아요.

안녕하세요 zerocho님. 이번 강의에서 [프론트엔드 세팅하기] 챕터 관련해서 질문드립니다. 강의 후반부에서 babel이 image, css 파일 등을 js파일로 변환한다고 하셨는데 그게 아니라 webpack의 loader(style-loader, file-loader) 가 js파일로 번들링 해주는거 아닌가요? 혹시 제가 모르는 부분이 있나해서 이렇게 문의드립니다. 혹시 참고할만한 문서가 있다면 같이 주시면 도움 될 것 같습니다:) 감사합니다.

커스텀 훅 useInput에서 Dispatch<SetStateAction<T>>에 관한 설명을 어디서 찾아볼수 있을까요?

버전 5가 되면서 package.json 파일에서 입력하는게 아니고  npx husky add .husky/pre-commit "npx eslint app.js --fix" 이런식으로 생성해서 하는 것으로 바뀐것 같네요. (여기서는 npx를 안넣어주면 실행이 안되네요...) 아니면 package.json에서 하는 방법이 있는데 제가 못찾은 것 일수도 있구용... ps. npm install husky@4 로 설치하면 기존의 방식대로 할 수 있네요.. 문제는 lint-staged를 어떻게 쓰는지 모르겠네요...

강사님의 깃헙 클론 받고, npm i -> build 폴더 삭제 -> npm run build 실행해주었습니다 그런데 콘솔창을 확인하면 저는 main.bundle.js로 나옵니다. 무엇이 문제일까요?

npm install -D @babel/preset-env  라 적혀 있는데 실제론 npm install @babel/preset-env  라고 하기도 하고....  -D가 dev에 추가한다. 라고는 알고 있는데, 실제로 바벨 프리셋들은 dev에 했을 때와 아닐때 차이가 없나요? 아니면 차이점으로 어떤 것들이 있나요? 

현업에 지쳐서 개발에 손놓고 있다가 장기효님 강의 듣고 다시 시작해보려고 합니다 :) 번거로우시겠지만, 쿠폰 부탁 드리겠습니다!

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

초반에 프로젝트 생성 파트를 보고있습니다. node.js를설치후 강좌에서 본것처럼 npm 을 타이핑 하였지만 Uncaught ReferenceError: npm is not defined 이라는 메세지만 나타납니다. 그리고 프로젝트 생성하실때 강좌에서는 mkdir sample 그리고 cd sample후에 sample npm init를 치시면 프로젝트 생성 이 되는데 저는 mkdir sample을 타이핑하면 Uncaught SyntaxError: Unexpected identifier이 나타납니다. 이유를 알고싶습니다. 강좌보고 5분만에 막히네요 ㅜㅜ;;

저도 앞의 질문자와 거의 같은 상황인데요. 번거롭게 매 번 sudo를 입력해야하나요? 강사님은 sudo를 입력하지 않아도 install이 잘되는데... 비법을 알려주세요~~!!! ^_^

module.exports = function myWebpackLoader (content){     console.log("실행");     return content.replace('console.log(','alert('); } 으로 빌드하면 실행 콘솔 찍은것 2번 나오고 [webpack-cli] Compilation finished뜹니다 npx lite-server로 서버 구동하여 확인하면 알랏이 안뜨고 콘솔로 3이 뜹니다 일부러 module.exports = function myWebpackLoader (content){     console.log("실행");     return content.replace('console','alert('); } 이런식으로 콘솔글자를 바꿔서 빌드하면 You may need an additional loader to handle the result of these loaders. | import * as math from './math.js'; > alert(.log(math.sum(1,2)); 라는 에러가 뜹니다 replace가 동작을 하는것 같긴 한데 왜 콘솔을 알랏으로 바꾸지 못하는것일까요?

npm run dev 실행되지 않고 에러가 뜨는데 한번 봐주실 수 있나요..?

안녕하세요 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();       })   } 이 방식을 사용하면 똑같이 나오는데 버전이 바뀐 것인가요?

안녕하세요. 수업 잘 듣고 있습니다. 질문이 있어 글을 올립니다. 만약 targets : {ie: 11}을 지원하게 된다면  ie 11보다 최신 브라우저인 사파리, 오페라, 엣지,크롬들은 전부 지원된다고 보면 되나요? 그리고 ie11도 버전이 있는것으로 알고 있는데 ie11의 모든버전을 제공하는 것이겠죠?

우선 좋은 강의 감사합니다. 😄 개발 환경을 구현하고 나서 그 후에 이 환경에서 어떤 방식으로 개발을 진행하는지 궁금합니다. 기본적인 프로젝트 구조나, routing 등 프론트엔드 실무에서 사용하는 여러가지들을 해당 환경에 적용하는 방법을 알 수 있을까요? 항상 구조가 짜여져 있는 환경에서 개발을 하다가 직접 환경을 구성하는 연습을 해보니 감이 잘 잡히지 않네요... ㅠ

버튼을 연타하게 되면 1000초뒤에 동시다발적으로 setTimeout이 실행되고, changeHand()의 interval에는 마지막에 저장된 timeout값만 덮어써지게 되서 엄청 빠른속도로 가위바위보가 돌아가는 문제가 있더라구요~. 이부분은 어떻게 체크해야 효율적일지 시간되실때 알려주시면 감사드리겠습니다.~ !

ARNING in configurationThe 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/ERROR in multi ./app/index.js dist/bundle.jsModule not found: Error: Can't resolve 'dist/bundle.js' in '/Users/imac.suntae/Projects/Z_Study/LearnWebpack/getting-started'@ multi ./app/index.js dist/bundle.js이런 오류가 뜹니다.검색해보니 package.json 에서 scripts부분을 수정하고 명령어도 다른 형식을 실행해야 하던데 어떻게 된건가요?

webpack 과 webpack-cli 패키지를 프로젝트 디렉토리에 설치해도 무관하겠죠?꼭 전역적으로 설치해야 하는 이유가 있나요?