webpack 기능과 속성 중에 대한 질문입니다

안녕하세요 sgyos000님, 좋은 질문 주셨네요! :) 질문하신거 답변 드릴게요.

1. 강의 중간에 나왔던 lodash 기능이 index.html에서 DOM과 같은 역할로 보이는데 왜? 언제? 사용해야하는지 궁금합니다!

A) Lodash는 웹팩의 역할에 대해서 이해하기 위해 사용한 자바스크립트 유틸리티 라이브러리입니다. 강의에서도 안내해 드린 것처럼 크게 의미를 두고 사용한 건 아니구요. 대신 실제 회사에서 웹 서비스를 개발할 때는 정말 많이 활용되는 자바스크립트 유틸 라이브러리입니다. 아마 프런트엔드에서 가장 많이 작업하는게 서버에서 데이터를 불러와 가공한 후 화면에 그려주는 일일텐데요. 여기서 배열과 객체를 다룰 때 연산하게 되는 코드들을 라이브러리에서 API로 쉽게 해결할 수 있도록 도와줍니다 :)

2. webpack의 결과파일에서 왜 즉시실행함수를 활용하는지 궁금합니다!

A) 오 이것도 굉장히 좋은 질문인데요.. 제가 강의에 따로 언급을 안했나 보네요 ㅜㅜ 자바스크립트 모듈화라는 관점에서 2000년 초반부터 ES6가 등장하는 2015년 전까지는 자바스크립트 모듈화를 할 수 있는 언어 패턴 자체가 즉시 실행함수를 이용한 모듈화만 가능했습니다. 관련해서 AMD, Common.js 이런 것도 있는데요 관련해서 아래 글 하나 안내해 드릴테니 읽어보시면 좋을 것 같아요 :) jQuery를 포함한 꽤 오래된 자바스크립트 라이브러리의 내부 구조는 모두 즉시 실행함수로 되어 있습니다 :)

• 자바스크립트 모듈화 관련 글 - 네이버 D2

3. plugin 속성을 활용하면 결과물에 변형을 있다는 것은 알겠지만 언제 활용되는지 어떤 상황에 유용한지 알고 싶습니다!

A) 플러그인은 실제 웹 서비스를 운영함에 있어 필수로 사용되는 기능입니다. 가장 간단한 플러그인은 JS, HTML, CSS 압축 플러그인이 있구요. 배포하기 전에 용량을 최소화 하기 위해 압축 플러그인을 사용합니다. 웹팩 3까지는 배포할 때 해당 플러그인을 개발자들이 일일이 설정해 줬어야 했는데 웹팩 4부터는 해당 플러그인을 구성하지 않고도 mode를 production으로 설정하면 해당 플러그인 효과가 적용되도록 변경되었습니다. 그 이외에도 웹 리소스 최적화나 파일 이동, 분리, 삭제 등 여러 기능들이 존재합니다 :)

4. 웹팩 실행시 3가지 mode가 있는데 production 배포할때 / development 개발할때 / none ...? 어떤 상황에 무얼 써야하는지 알겠지만 어떻게 다른건지 그리고 왜 그 상황에 써야 하는건지 궁금합니다. (그리고 none은 어떤 상황에 쓰이는건가여..)

A) 3번 질문 답변에 어느 정도 대답이 된 것 같은데요. 각 모드의 차이점은 웹팩을 실행했을 때의 나오는 빌드 결과물의 형상이 다릅니다. 아마 더 자세한 건 모드 별로 실행한 다음에 결과물 파일을 직접 보시면 더 이해하시기 수월할 거에요 :) 빌드 결과물에 아무 가공도 하지 않은 상태를 의미합니다 :)

---

굉장히 좋은 질문만 추려서 남겨주셨네요 ㅎㅎ 남은 강의도 재밌게 들으시구요. 혹시 강의가 괜찮으셨다면 수강평에 응원도 좀 부탁드리겠습니다 :) 감사합니다!