네카라쿠배 기본 역량 | CRA없이 react 앱 구성하기 | 4. webpack 적용하기
Vložit
- čas přidán 27. 08. 2024
- 강의 관련하여 질문은 유튜브 댓글 또는, 아래 오픈카톡방에서 주시면 되겠습니다 (관리자가 부족하여, 즉각적인 답변은 어려울 수도 있습니다ㅠㅠ이는 추후 개선하도록 할 예정입니다)
강의 관련 질문을 할 때는 github 주소를 함께 올려주시면 좋아요! 에러가 발생한 상황을 보다 구체적으로 제시해주신다면, 더욱 정확한 답변을 드릴 수 있습니다 :)
1️⃣ 소스 코드 repo 링크
github.com/fro...
2️⃣ 프론트맨 오픈카톡방 링크
open.kakao.com...
프론트 관심없었는데, 이 채널 접하고 공부욕심이 생기네요. 학교 종강 후 가장 의미있는 시간을 이 채널과 함께 지낼 것 같습니다 :) 감사합니다
빌드 환경에 관해선 의식하지 않고 썼던 터라, 내부 동작 원리를 정확히 이해하지 못해 항상 찝찝한 마음이 남아있었습니다. 이 강의 시리즈 덕분에 앙금처럼 남아있던 부분이 하나씩 사라져 가는 느낌이 들어 정말 시원합니다! 다른 댓글에 달아주신 실무 관련한 예시를 들어주신 것도 상당히 와닿는 설명이었습니다. 어려운 내용을 쉽게 풀어주시는 능력이 있으신 것 같아, 강의 외에도 배워가는게 많습니다:)
멋진 강의 감사합니다!
시청해주셔서 감사합니다 😀😀
좋은 강의 감사합니다👍🏻👍🏻👍🏻
나중엔 네트워크 관련 강의도 보고 싶습니다~ 좋은 강의 감사합니다!
추가로 터미널에서 실명 나와요
네트워크 강의 제작도 추후 고민해보겠습니다 :) 터미널에 실명나오는 것은 저도 사실 가릴까 했지만, 귀찮아서 그냥 올리고 있어요ㅎㅎ 신경써주셔서 감사합니다
좋은 강의 감사합니다!
"webpack에서는 javascript만 처리할 수 있기 때문에 다른 파일은 전처리가 필요"
예전 다른 강의에서는 loader를 여러개 사용하는 예시가 있었을때 그냥 파일 별로 사용하는 구나 했는데,
이제 왜 그렇게 사용했는지 이해할 수 있었습니다
감사합니다
질문이 있습니다.
script type="module"을 사용하면 영상과는 다르게 CORS(null) 에러가 나타납니다.
비슷하게 코드를 작성했는데 강의 당시와 다른 패치 때문인지? 이유가 궁금합니다.
그리고 util함수를 포함해서 빌드를 했는데 network 탭에는 app.js만 나타납니다
@@swj-f2z 혹시 VSC에서 Live Server 익스텐션 사용해보시겠어요? 로컬에서 그냥 실행하면 CORS에러가 발생할 수 있습니다. Live Server를 통해 localhost 서버를 띄워서 실행해보세요!
@@user-fw2se9ms4i 제가 다음 영상의 webpack 플러그인과 모드에서 변경되는 코드를 미리 입력해서 에러가 나타났습니다. 해당 영상에서의 코드처럼 작성하면 live server없이도 정상적으로 동작합니다.
답변 감사합니다
잘보고 있습니다!
직접 구성하는 걸 단계별로 보다보니 커스텀할 수 있다는 장점이 있지만
알고 있는 옵션이 없다면 하나 넣고 돌려보고, 오류 발생하면 해당하는 옵션 찾아서 추가하고, 또 돌려보고, 이걸 반복하는게 쉽지 않을 것 같다는 생각이 듭니다. (물론 그래서 이렇게 강의를 통해 기본적인 옵션을 알아보고 있지만요 ㅎㅎ)
실무에서는 어떤식으로 구축해나가는지도 궁금합니다.
초기 기본 셋팅을 하고 필요할 때마다 찾아보고 점진적으로 추가해나가게 되나요?
필요한 옵션을 잘찾는 방법도 있을까요?
좋은 강의 감사합니다!!
CRA나 vite으로 시작하여 필요한 옵션을 점진적으로 추가하는 프로젝트가 많습니다 :) 해당 강의처럼 맨땅에서 시작하는 경우는...일단 저는 아직 경험해보지는 못했습니다ㅎㅎ
webpack.js.org/awesome-webpack/
위 링크는 webpack에 추가 가능한 플러그인, 로더들을 정리해 놓은 페이지입니다. 쭉 보시고 이거 괜찮다 싶은거 있으면 추가하시는 것도 좋습니다.
제 경우, 크롬 확장 프로그램을 개발하기 위해 vite으로 셋팅한 프로젝트가 있었는데, 웹 스토어에 등록하려면 빌드 결과물이 특정 구조를 갖춰야 했거든요 (zip파일로 압축을 한다던가, root path에 manifest.json 파일이 있어야 한다던가 등등) 그 때, 필요한 폴더 구조를 갖춰주고, zip파일로 압축하는 로직들을 직접 플러그인으로 정의하여 추가한 경험이 있습니다.
@@user-fw2se9ms4i 친절하고 자세한 답변 감사드립니다 🥹
실무에선 모든걸 커스텀 할거라는 생각을 전제로 깔고 있었네요..! 상황에 따라 템플릿으로 시작하는게 효율적일거라는 걸 간과했습니다.
크롬 확장 프로그램 개발에도 관심이 있는데 사례로 들어주셔서 반갑네요 ㅎㅎ 수요가 있다면 확장 프로그램 개발 컨텐츠도 좋을 것 같아요!
개인적으로 개발해놓은 확장 프로그램이 있어, 그걸 공유해드리면 좋을 것 같네요 :) webpack 강의 영상 제작만 마치고, 바로 공유해드리겠습니다 ㅎㅎ
webpack말고 다른걸 깊이 보는게 시간상 이득일것 같네요..
vite도 아니고 swc도 아니고 esbuild도 아닌 webpack 이라...
강의 취지를 이해 못하신듯
ㅋㅋㅋ 아직도 글 안삭제했네
요새는 vite도 많이 쓰죠~ vite 내부적으로는 rollup이라는 번들러를 사용하고 있지만, webpack이나 rollup이나 근본적으로 사용되는 개념과, 목적은 크게 다르지 않다고 생각합니다 :) 다만 "어떤 목적의 프로그램을 번들링 할 것이냐"와 같은 철학적인 차이가 있을 뿐이죠. 아직까지는 rollup보다 webpack이 더 많이 사용되고 있고, vite보다 CRA로 만들어진 프로젝트가 더 많으니 webpack을 먼저 보셔도 좋을 것 같다는 사견을 드립니다ㅎㅎ 시청해주셔서 감사합니다!
웹팩 배우면 좋죠 ㅎ 뭐든 알아서 나쁠거있겠습니까? 다만 어차피 새로 구성해볼거면 다른 번들러가 어떤가해서 답글을 단거고 이게 맞다 틀리다가 아닌 다르다로 보는게 맞지않나요? 취지를 뭐요?ㅋㅋㅋ
안그래도 vite에 대한 댓글이 많이 달려서 한창 보고 있었거든용ㅎㅎ해당 강의 완료되는대로 vite을 다루는 영상도 올려보겠습니다 :) 그 때 시청해주시면 감사하겠습니다! 다같이 힘내서 슈퍼 개발자 돼 봅시다!!
CRA를 제외한다면, vite번들러를 쓴다면, 저런과정 없이 쉽게 react 프로젝트 생성이 되는데, webpack을 반드시 써야하는 상황이 있나요?
시청해주셔서 감사합니다 :) CRA나 vite을 쓰지 말아야하는 상황은 제 경험상 없던 것 같습니다. 다만, 해당 강의를 제작한 의도는 CRA와 vite을 사용하면 안될 상황이 있기 때문이라기 보단, CRA나 vite없이 개발 환경을 셋팅해보면서 기술적인 이해를 넓혀보는데에 초점을 두고 있습니다!
vite은 엄밀히 말하면 번들러라기 보단, 빌드 도구로 보는게 적절할 것 같아요 :) 내부적으로는 Rollup이라는 번들러를 사용하고 있죠. 강의를 통해 기술적인 이해를 넓히다 보면 왜 CRA보다 vite이 요새 많이 쓰이고 있는지, 왜 개발 환경이 더 좋은지 등등 보다 깊이 있는 비교가 가능해질 것으로 보입니다.
구체적인 강의 제작 의도는 아래 영상 확인하시면 되겠습니당 :)
czcams.com/video/V4j-207Umco/video.html