[TIL] webpack과 path 메서드

오늘 배운 것

 

패캠 리액트 강의를 산 지 한달만에 켜 봤는데 환경설정에서부터 어리둥절했다.

웹팩이.. 뭐란 말인가.. 셋업되는 모양을 모아하니 scss 쓰던 거랑 비슷해 보이는데 확실한 정의가 필요해서 검색했다.

블로그 글 'webpack'을 쓰는 이유 : https://ingg.dev/webpack/

설명에 나온 path 모듈도 자주 보여서 한번 검색해 봤다. 쓰는 이유가 신기했다. https://www.daleseo.com/js-node-path/  

• 모듈화 구현 기법 발전 과정
  • 자바스크립트에서 script 태그를 이용해 외부 스크립트 파일을 가져올 수는 있었지만, 파일마다 독립적인 스코프를 갖지 않고 하나의 전역 객체를 공유했다 => 변수이름 충돌 등 스코프 문제 발생, 의존성 문제가 해결되지 않아 모듈화 구현이 어려웠다
  • 즉시실행함수표현(IIFE)을 변수에 할당해 사용하면서 스코프 문제는 해결됐지만, 즉시 실행되므로 모듈화는 아직 안 됐다
  • CommonJS와 AMD가 등장
    • CommonJS : 자바스크립트를 브라우저 말고 서버사이드에서도 쓰려고 만든 것. Node.js에서 이를 사용.
      • exports 키워드로 모듈을 만들고 require() 함수로 임포트하는 방식
      • 장점
        1. 전역/지역 스코프가 분리된다
        2. (script 태그처럼) 파일을 통째로 가져오는 게 아니라 필요한 함수나 변수를 가져온다
        3. export, require 사용으로 의존성 관리가 편해졌다
      • 단점: 클라에서 필요한 모듈을 다 내려받을 때까지 아무것도 못 함 (동기적으로 실행)
    • AMD(Asynchronous Module Definition) : 비동기로 로딩되는 환경에서 모듈을 사용하려고 만듦.
      • define 함수 내에 코드를 작성해 스코프를 분리 (정확히는 뭔지 모르겠다)
    • ES6 모듈 : export 키워드로 모듈을 만들고 import로 가져온다
      • 클라이언트 사이드 js에서도 동작하는 모듈 기능을 추가해, script  태그에 type="module" 속성을 추가하면 모듈로 사용할 수 있다.
      • 하지만 아직 모든 브라우저에서 지원하지 않기 때문에 의존적인 모든 것들을 브라우저와 무관하게 사용하게 해 주는 모듈이 필요하다 => 이것이 웹팩!
  • Webpack 등장 : 여러 개의 파일을 하나로 합쳐주는 모듈 번들러
    
    • 라이브러리 설치 시 --save-dev 옵션이나 -D 옵션을 사용하면 package.json에서 dependencies가 아니라 devDependencies에 기록되어, 개발환경에 쓰이는 것을 분리하여 설치할 수 있다
    • package.json의 script에 웹팩 명령어를 추가하고, 명령어를 실행하면 결과물이 dist 디렉토리에 저장된다
    • webpack.config.js는 웹팩이 실행될 때 참조하는 설정 파일. 프로젝트 폴더 최상단에 만들어 두면 자동으로 참조된다.

---

회고

요며칠 하도 지루했다 보니까 꾸벅꾸벅 졸면서도 새 강의 듣는 게 은근 재밌다.

앞으로 지루할 때 종종 틀어서 들어야겠다.