웹팩 관련하여 질문 하나 드려도 괜찮을까요?개발환경을 스스로 설정하기 위해서 리액트를 사용한 프로젝트에서 웹팩을 사용해보며 배우고 있습니다. A컴포넌트에서 A.css AA.css   B컴포넌트에서 B.css, BB.css를 각각 import하여 사용하고 있는 상태에서 번들링을 하면  A.css + AA.css + B.css + BB.css가 합쳐진 Css 파일이 만들어지는데 제가 하고 싶은 것은 A컴포넌트에서 import 하는  A.css + AA.css 가 번들링 된 Css 파일, B.css + BB.css 가 번들링 된 Css파일 이렇게 각각 을 얻는데 계속해 실패하고 있습니다만 어떤 개념을 통해 해결해 갈 수 있을지 공식문서와 검색을 통해서 얻어내지 못하고 있어 질문을 남깁니다. 감사합니다. (A컴포넌트와 B컴포넌트는 서로 import하지 않으며  부모나 자식 컴포넌트가 겹치지도 않는 상태 입니다.)

안녕하세요 판교님, 질문이 있습니다   1. 웹팩4 또는 5 등등 버전마다 호환이 되는 게 있고 안되는 버전이 있는 것 같습니다. npm install css-loader@3 file-loader@5 style-loader@1 각각의 로더들이 호환되는지 여부를 어디서 체크할 수 있나요? (웹팩4에서는 어디까지 호환되는지를 찾고 있는데 공식문서를 봐도 해답을 못찾겠네요)

이전 강의에서 devDependancies에 있는 라이브러리들은  npm run build될때 배포가 되지않는다는 식으로 알려주셨었는데  이 강의에서는 package.json 파일에서  webpack은 devDependancies에 있는데  "scripts" : {      "build" : "webpack" }  이라고 써서 돌아가는 것인가요??? 이해가 되지않습니다 ㅠㅠㅠ

npm run build 한 후 localhost에서 어떻게 확인하나요...?

  제목처럼 webpack5부터는 css-minimizer-webpack-plugin이 사용한다고 합니다 https://www.npmjs.com/package/optimize-css-assets-webpack-plugin npm 문서확인해보시면 css-minimizer-webpack-plugin 를 이용하라고 권고하네요 webpack5로 실습 진행하시는분들은 참고해주세요 ~

const {data, error, revalidate}=useSWR(주소, fetcher)  -> 주소: fetcher 함수 실행을 요청할 주소 fetcher: 어떤 기능을 수행할 지 정의해 둔 함수 요청이 성공되면, revalidate 함수가 실행된 뒤, data로 응답을 받아와서 응용할 수 있다. 이렇게 이해했는 데 맞을까요? 그리고, fetcher는 하나가 아니라 여러가지를 만들어도 괜찮을까요? get을 할 수 있는 fetcher, post를 할 수 있는 fetcher 등   나눠서 사용할 수 있을까요?   그리고 프로젝트를 함께 진행하고 있는 친구가  회원가입을 하기 위해 post를 해줬고, 성공 시 response로 관련 데이터를 보내주는데 /api/user에 굳이 userData를 넣어서 또 get으로 받아볼 수 있도록 해야 하냐고 물어보던데  당연히 필요한 거 아닌가..? 라는 생각이 들지만 명확한 근거를 모르겠어서 질문드립니다.  

안녕하세요 강사님! 웹팩 강의 너무 잘 보고 있습니다!!   드리고 싶은 질문은, 제가 webpack-dev-server실행 시 index.html을 안불러오고 main.js를 통해 App.vue를 실행시키고 싶은데, 옵션을 어떻게 설정해야 할까요? 참고하고 있던 소스가 vue-cli를 사용하고 있어서 vue.config.js 옵션 설정과는 조금 다른지 헷갈리네요..!

안녕하세요 Vue 끝장내기 강의를 먼저 듣고 온 뷰린이입니다. 먼저 올려주신 강의들 너무너무 잘 듣고 있습니다. 다름이 아니라 웹팩 등장배경에 관련한 이야기를 하시면서 파일 단위의 자바스크립트 모듈 관리의 필요성을 언급하셨습니다. 저는 해당 부분을 '모듈 관리 기능을 commonJS와 AMD와 같은 라이브러리로 사용하다가 그 필요성이 더욱 강조되면서 ES6부터는 언어 레벨까지 구현되었다.' 로 받아들였습니다. 그래서 어떤 관점에서 모듈 기능의 필요성이 웹팩의 등장 배경과 관련이 있는지 이해가 잘 되지 않습니다. 답변 부탁드리며 항상 좋은 강의 감사드립니다!

`webpack.config.js` 사용하지 않고, `package.json`안에 `scripts`를 이용하여 강의 내용처럼 커스텀명령어 입력 후 $ npm run build 했는데 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build" : "webpack --mode=none --entry=src/index.js --output=public/output.js" },   [webpack-cli] Error: Unknown option '--output=public/output.js' 터미널에서 output 에러가 생기는데 원인이 뭔지 찾이 못해 문의드립니다.

npm run build 잘 되다가 vue-loader를 설치하고 나서 오류가 납니다. 왜 모듈을 찾을 수 없다고 나올까요?

위의 script_vue 디렉토리는 1강에서 했던 작업물들입니다.       vue 버전과 vue-template-compiler(2.6.14) 버전을 동일 하게 하고 나서 webpack을 실행하니, [webpack-cli] Failed to load '/Users/joo/Desktop/zero_view/webpack.config.js' config [webpack-cli] Error: Cannot find module 'vue/compiler-sfc' 이런 에러가 나서 vue/compiler-sfc을 설치 한 후, 다시 vue는 (3.2.31)최신버전으로 하고 vue-temp는 (2.6.14)버전으로 하고 나서 웹팩빌드 하니 에러 없이 app.js 파일을 생성했습니다. 그리고 numberbaseball.html 파일을 실행하니, Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor     at eval (main.js:7:1)     at Object../main.js (app.js:19:1)     at __webpack_require__ (app.js:153:41)     at app.js:205:37     at app.js:207:12 위에 내용과 같은 에러가 크롬콘솔창에 뜹니다. 관련해서 검색 해도 잘 나오질 않네요 ㅜ

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 문법을 사용할 수 없는건가요..?

채팅방에서 새로운 데이터를 입력한 후, 스크롤을 위로 올려 다음 페이지를 로드하면 다음 페이지 값의 일부가 사라져서 출력되는 것 같습니다. 사진에서 5를 새로 입력했습니다. 그리고 나서 위에 닿을 때까지 천천히 스크롤하여 새로운 페이지를 불러오면 8 다음에 있어야 할 9를 불러오지 못했습니다. 테스트는 강좌 깃헙의 front 폴더와 back 폴더에 있는 코드로 진행 했습니다.  버그인 것인지, 페이지를 불러오는 과정에서 문제가 생긴건지 궁금합니다ㅠㅠ.. 

안녕하세요.  현재 "DM채팅하기" 강의를 진행하기 전에도 시크릿모드로 두개를 띄워서 해보면 지금도 채팅 통신이 가능한데 이상태에선 계속 서버로 보냈다가 다시 가져오고 그런 상태이기 때문에 소켓통신으로 바꾸려고 socket.on 을 추가하는 것인가요?   그러니까 useEffect(()=>socket?.on('dm', onMessage) 이부분을 하는 이유가 http프로토콜을 소켓 프로토콜로 바꾸는 개념인가요?   동작 방식이 좀 헷갈리네요.. 제가 이해한 부분이 맞을까요?  

App 파트에서 workspace다음 와일드카드/* 를 표시해주셔야 합니다     workspace 안에서는 path에 /workspace/:workspace를 쓰면 App에서 workspace/:workspace/* 가 있어서 두개가 중복되기때문에 바로 /channel/:channel 로 path를 작성하시면 됩니다.  

webpack 5 부터는 url-loader가 아닌 asset/inline을 사용한다는데 asset/inline에서 로더를 실행할 파일 크기 제한을 어떻게 하나요? url-loader에서 limit 옵션을 asset/inline에서는 어떻게 주는지 궁금하네요!

안녕하세요! 지금까지는 문제 없이 잘 진행하고 있었으나 계속 찾아보고, alecture 폴더 내에 있는 소스코드와 비교를 해보아도 어떤 코드가 문제인지 모르겠어서 질문 글을 남기게 되었습니다.   해당 섹션 마지막에서 액시오스 코드를 작성하고 백엔드에 워크 스페이스를 생성하도록 요청하는 부분이 있는데요, const onCreateWorkspace = useCallback((e) => { console.log('ok'); e.preventDefault(); console.log(newWorkspace); if (!newWorkspace || !newWorkspace.trim()) return; console.log('b'); if (!newUrl || !newUrl.trim()) return; console.log('c'); axios.post('/api/workspaces', { workspace: newWorkspace, url: newUrl, }, { withCredentials: true, }, ).then((response) => { revalidate(); setShowCreateWorkspaceModal(false); setNewWorkspace(''); setNewUrl(''); }).catch((error) => { console.dir(error); toast.error(error.response?.data, { position: 'bottom-center' }); }); }, []); 워크스페이스 이름과, 워크스페이스 url 을 넣고 생성하기 버튼을 누르면 반응이 없어서 위 코드처럼 console.log 를 찍어서 확인해보니 newWorkspace 에 아무런 값이 담기지가 않고 있습니다. 해당 소스코드 및 라인 : https://github.com/Kuass/sleact/blob/master/setting/ts/layouts/Workspace/index.tsx#L32 입니다. onCreateWorkspace = useCallback 에 event 객체도 콘솔에 찍어서 보았으나 값은 정상적으로 있는데.. 왜 이럴까요 강사님 ㅠㅠ..

HtmlWebpackPlugin이 css파일과 js파일에 대해서 link태그와 script태그 부분을 자동화한다는 점은 이해했습니다.  그렇다면 배포하고 싶은 html파일이 5개가 있을 때 이 5개의 html파일들을 각각 new HtmlWebpackPlugin의 객체로 설정해야 css파일 및 js파일들에 대해서 자동으로 설정해주나요?  좋은강의 감사합니다.

자꾸 이와 같은 에러 가뜹니다. react-router-dom에 Switch와 Redirect을 export없다고 합니다....

영상에서 개발모드와 프로덕션 모드를 각각 빌드하면 모드별로 파일이 다르게 빌드되는데 개발모드에서 아래 두개를 사용한다 하셨고 namedChunksPlugin, namedModulePlugin 프로덕션모드에서 FlagDependecyPlugin, FlagIncludedChunkPlugin.... 등등을 사용한다고 했는데제가 직접 설치하고 설정한것이 아닌데도 자동으로 설정이 되어있는건가요?