다른 QnA 글들이나 정한님 답변 글도 다 읽어봤습니다.현재 강의를 들을때에 개발 환경을 구축하는 것에 대해서 어려움을 많이 토로하는것 같은데요그래서 해당 강의를 강의만 들으면서 현재 시점의 빌드 도구(ex vite, rollup.js , parcel, etc...)들과 달라진 점이 무엇인지 AI와 학습하는 정도로만 한다면 배움을 적게 가져갈까요 ? 추후에 해당 강의 업데이트라던지 혹은 다른 강의를 올리실 예정이 있는지도 궁금합니다. 감사합니다 정한님

npm run build 실행시 위와 같은 메시지만 뜨고 하단의 app.js 화면같이 뜹니다. 다른분의 응답처럼 이거 경로도 바꿔봤고요. 실행하면 개발자 도구에서 요렇게 되는데요? html 출력과 app.js가 강사님과 다른이유 문의드립니다. 그리고 다른분응답에 github에서 소스 비교해보라고 남기신 글도 있던데 주소도 궁금합니다. 감사합니다. 

안녕하세요, 강의 잘 듣고 있습니다!최근 개인 프로젝트로 래핑 라이브러리를 만들고 있고 번들러로 Rolldown을 사용하고 있습니다.강의에서 언급된 Rollup과 구조가 유사하고 기본 개념은 거의 동일하다고 알고 있습니다. Rolldown을 사용하고 있는 상황에서 Webpack이나 Rollup의 구조를 먼저 이해하는 것이 학습에 도움이 될까요? 학습 우선순위나 접근 방식을 어떻게 잡는게 좋을지 궁금합니다.

요즘에는 Webpack 외에도 Rollup, Rolldown, tsup, tsdown, Vite, esbuild 등 다양한 번들러가 있는 것으로 알고 있습니다.실무에서는 어떤 기준으로 각 번들러를 선택하게 되는지, 그리고 실제로 어떤 도구들이 많이 사용되는지 궁금합니다.예를 들어,UI 컴포넌트 라이브러리를 만들 때는 어떤 번들러를 주로 사용하는지,Lodash 같은 유틸리티 라이브러리에서는 어떤 번들러가 효율적인지이런 식의 상황별 선택 기준이나 실무 사용 경향을 알고 싶습니다.제가 찾아보기로는 Vite는 개발 서버에 강하고, Rollup은 라이브러리 번들에, esbuild나 tsup은 속도에 특화되어 있다고 하더라고요.실무에서는 이런 특성을 어떤 기준으로 판단해 선택하는지 조금 자세하게 알고싶습니다!그리고 조금 시간이 지난 강의여도 정말 얻을게 많은 강좌라고 생각합니다. 오히려 제가 최신버전으로 고쳐보며 정말 많은 것을 배우고 있습니다. 질문 남기면서 좋은 강의 항상 만들어주셔서 감사하다는 말씀도 함께 전달드립니다!강사님의 팁이 녹아져있는 실전 프로젝트 같은 것도 나중에 기회가 된다면 들어보고 싶습니다!

settings/ts 폴더 front로 바꿔서 진행할 경우 셋팅 강의 하나도 들을 필요없이 바로 섹션2부터 진행해도 되는건가요?

강좌에서 언급한대로 직접 세팅하기보다는 그냥 settings/ts 폴더 클론받아서 하시는 것을 추천드립니다. 직접 세팅하기에는 버전이 자꾸 달라져서 세팅법이 바뀌고, 입문자분들한테는 버겁습니다. 폴더가 많아서 헷갈리니 back 폴더는 백엔드 용으로 남겨두시고, setting/ts 폴더를 front 폴더로 바꾼 뒤 나머지 폴더는 전부 지워버리세요. 라는 말씀에 따라다음과 같이 세팅을 했는데,alecture 폴더로 들어가 npm init 을 하라고 하시는 부분이 이해가 어렵습니다.

안녕하세요. 좋은 강의 감사합니다.캐싱 관련해서 이해가 잘 안 되는 부분이 있어 질문드립니다.강의에서는 modules[moduleId][0].call의 첫 번째 인자로 module.exports를 넘겨주는 것이 캐싱과 관련 있다고 설명해주셨는데요.제가 코드를 보기엔 module.exports가 thisArg로 전달되긴 하지만, 실질적인 캐싱은 함수 내부에서 세 번째 인자인 module 객체를 직접 수정하면서 (module.exports = { add };) 이뤄지는 것으로 보입니다.즉, thisArg로 전달된 module.exports는 실제로 의미 있는 쓰임새가 없고, 캐싱은 module.exports를 직접 설정함으로써 발생하는 것 아닌가 싶은데, 혹시 제가 잘못 이해한 걸까요?

안녕하세요! 일단 멋진 강의 감사합니다. 정말 잘 듣고있습니다 🙂강의 수강 중 하나 제안하고 싶은게 생겨서 질문 남기게 되었습니다. 이벤트 캡쳐링과 버블링에 대한 개념을 쉽게 설명해주셨는데요, 이 캡쳐링과 버블링이 실제 코드 동작시에 어떤 영향을 주는지도 설명에 포함되면 좋을것 같았습니다!예를들면 버블링의 경우는 클릭이벤트가 타겟요소에 부모까지 영향을 받아서 의도치 않는 동작이 발생될 수 있고, 그걸 막기 위해서 강의에서처럼 stopPropagation()을 해주는걸로 알고 있습니다.그렇다면 캡쳐링에 경우는 어떤 경우에 문제가 되고 언제 stopPropagation()을 사용하면 좋은지 궁금해지더라구요.강사님의 귀에 쏙쏙 박히는 설명에 한 줄 추가되면 좋을것 같아 의견 남겨보았습니다. 오늘도 고생 많으셨습니다~~

웹소켓 커넥션은 유지되어 데이터까지 들어오지만 view update는 브라우저 focus되어야만 발생하는걸 보여주셨는데요 원인과 대중적인 해결방법이 있는지 궁금합니다(사파적 방식x, 대중적인 정파적 방식o)

useEffect가 잘못짜면 디버깅이 골치아파서 관리에 신경을 쓰는데요. 제로초님의 useEffect 사용패턴이 궁금합니다 deps가 같은 것 끼리는 전부 묶어둔다deps가 같아도 로직 범주가 다르면 분리한다 저는 보통 2번을 선호하는데 useEffect 많아져서 드러워집니다. 그렇다고 1번은 더 머리가 아픈데,, 제로초님의 기준이나 이 문제에 대한 나름의 best practice가 있으신지 궁금합니다  

강의에서 말씀주시는 것 처럼 가급적 라이브러리를 쓰고 싶은데요. 제가 경력이 짧아서인지 라이브러리 서치에 애를 먹습니다 "가장 대중 픽" 찾는다고 할 때 어떤 방법으로 접근하시는지 궁금합니다제 생각엔 다운로드 수..는 순위가 아닌 절대량이라 모호하고 이 기능은 요즘 이게 좋더라하는 얘기를 나누는 커뮤니티가 따로 있으려나요? npm이나 구글링해서 나오는 무수한 라이브러리들 다 비교하는건 거시기한 상황입니다

react 개발하다보면 대부분의 파일에서 export default 하나만을 하게 되는데요. 아래 2가지 패턴 중 2번을 주로 사용하시는 것 같아서 이유가 있으신지 궁금합니다export default function ABC()const ABC = () => {}export default ABC; 저는 1번을 강하게 선호하고 왜 굳이 하나의 함수에 대한 정의를 둘로 나눠 거리를 벌리는지 이해가 안 가는데요, 코딩 고수(?)들이 주로 2번 패턴을 사용하셔서 이유가 궁금합니다

npm run dev시 새로운 에러가 발생하여 재질문 드립니다.http://localhost:3090/Login 연결시, 크롬에서 Failed to compile. 가 발생하였습니다.Module not found: Can't resolve '@utils/fetcher' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/layouts' layouts/workspace.tsx터미널 메세지입니다.ERROR in ./pages/Login/index.tsx 17:0-39Module not found: Error: Can't resolve '@hooks/useInput' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/Login'@ ./layouts/App.tsx 7:9-31@ ./client.tsx 9:0-32 12:95-98ERROR in ./pages/Login/index.tsx 19:0-37Module not found: Error: Can't resolve '@utils/fetcher' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/Login'@ ./layouts/App.tsx 7:9-31@ ./client.tsx 9:0-32 12:95-98ERROR in ./pages/SignUp/index.tsx 17:0-39Module not found: Error: Can't resolve '@hooks/useInput' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/SignUp'@ ./layouts/App.tsx 11:9-32@ ./client.tsx 9:0-32 12:95-98ERROR in ./pages/SignUp/index.tsx 23:0-37Module not found: Error: Can't resolve '@utils/fetcher' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/SignUp'@ ./layouts/App.tsx 11:9-32@ ./client.tsx 9:0-32 12:95-98 ㅡtsconfig.json 파일입니다"paths": { "@hooks/*": ["hooks/*"], "@components/*": ["components/*"], "@layouts/*": ["layouts/*"], "@pages/*": ["pages/*"], "@utils/*": ["utils/*"], "@typings/*": ["typings/*"] }ㅡwebpack.config.ts 파일입니다resolve: { extensions: ['.js', '.jsx', '.front', '.tsx', '.json'], alias: { '@hooks': path.resolve(__dirname, 'hooks'), '@components': path.resolve(__dirname, 'components'), '@layouts': path.resolve(__dirname, 'layouts'), '@pages': path.resolve(__dirname, 'pages'), '@utils': path.resolve(__dirname, 'utils'), '@typings': path.resolve(__dirname, 'typings'), // 경로 폴더들 }, },ㅡ현재 터미널 경로입니다/Desktop/study/react/zerocho/sleact/setting/frontts 폴더에서 설정 후, front 라는 폴더명으로 바꾸어서 진행중입니다. 감사합니다

강의를 클론 받은 후, /sleact/setting/ts 경로에서 npm i 후 npx webpack을 입력하면 아래와 같이 에러가 나옵니다.다른 컴퓨터로 했을때는 작동 되지만, 제가 사용중인 컴퓨터에서는 작동되지 않습니다.npm i 입력 후 터미널 메세지ㅡup to date, audited 643 packages in 4s74 packages are looking for funding run npm fund for details26 vulnerabilities (3 low, 8 moderate, 12 high, 3 critical)To address issues that do not require attention, run: npm audit fixTo address all issues (including breaking changes), run: npm audit fix --forceRun npm audit for details. npx webpack 명령후 입력후 터미널 메세지[webpack-cli] Failed to load '/Users/kanghyun/Desktop/study/React/zerocho/sleact/setting/ts/webpack.config.ts' config[webpack-cli] SyntaxError: The requested module 'webpack' does not provide an export named 'Configuration' at ModuleJobSync.runSync (node:internal/modules/esm/module_job:387:37) at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:427:47) at loadESMFromCJS (node:internal/modules/cjs/loader:1565:24) at Module._compile (node:internal/modules/cjs/loader:1716:5) at Object.loadTS [as .ts] (node:internal/modules/cjs/loader:1826:10) at Module.load (node:internal/modules/cjs/loader:1469:32) at Function._load (node:internal/modules/cjs/loader:1286:12) at TracingChannel.traceSync (node:diagnostics_channel:322:14) at wrapModuleLoad (node:internal/modules/cjs/loader:235:24) at Module.require (node:internal/modules/cjs/loader:1491:12)

vivado 2017.4 webpack 설치 를 하려고 하는데 vivado 홈페이지에 들어가서 아카이브-> 2017.4를 눌러도 웹팩이 안뜨고 파일 크기가 큰 애들만 뜨는데,, 어떻게 설치해야하나요?

안녕하세요. login, singup, workspace 페이지에서 data 가 있는 경우, Redirect 하려는 함수에서 다음과 같은 에러가 공통으로 나타납니다. => 'void' 형식 식의 truthiness를 테스트할 수 없습니다.ts(1345) 어떻게 해야 할까요?

안녕하세요.현재 슬리액트, '회원가입 페이지 만들기' 파트를 듣고 있습니다.회원가입을 누르면,'TypeError: Cannot read properties of null'라는 에러가 발생합니다.DB, users 폴더에는 새로운 회원정보가 잘 드렁가 있습니다.DB에는 잘 저장되는데, 프론트엔드에서 발생하는 에러일까요? 코드는 제가 거의 건든게 없습니다. 현재 제로초님이 Github 에 올려주신 코드에서 '비밀번호가 입력이 잘못되었습니다' 이부분 검증하는 부분은 추가되어 있습니다.

1 . node 버전 12.4에 맞추기이전까지는 16버전으로 문제 없이 실행되었는데 이번 실습에서는 에러가 발생하여 다른 수강생분들이 남겨주신 질문 참고해서 12.4버전으로 낮추었더니 빌드 에러가 사라졌습니다.이때 맥 실리콘은 node 15 버전 미만은 지원하지 않아 nvm install 시 에러가 나는데요. 터미널에 아래와 같이 입력하면 해결되더라고요. Rosetta2 쉘을 사용하는거라고 합니다.arch -x86_64 zsh nvm install 12.4.0참고 주소 : https://velog.io/@jeb1225/nvm-%EC%97%90%EB%9F%AC-no-such-file-or-directory-CXXc2. sass 설치node-sass 지원이 종료되어 sass 1.83.4 버전으로 설치하였는데 잘 빌드되었습니다.이번 강의에서 유독 에러가 나서 해결하느라 시간이 들었는데 같은 에러 만나시는 분들께 도움이 될까 하여 공유드려요!

"clean-webpack-plugin": "^3.0.0", "html-webpack-plugin": "^4.5.2", "mini-css-extract-plugin": "^1.6.2",혹시 찾기 귀찮으신 분들이 있으실까하여 공유드립니다

폴더에 있는 패키지들이 모두 에러인데 axios쪽인거 같은데 어떻게 해결하면될까요..