웹팩 & 모듈

sanghun Lee·2020년 9월 15일
Modulewebpack생활코딩
0

Today I Learned

목록 보기
48/66
post-thumbnail

모듈(Module)이란?

단지 하나의 파일에 불과하며 스크립트 하나는 모듈 하나라고 보면 된다.

모듈에는 특수한 지시자 import 와 export가 있는데 이를 적용하면 다른 모듈을 불러와 모듈에 있는 함수를 호출하는 것과 같은 기능들의 공유가 가능하다.

모듈은 항상 엄격모드(use strict)로서 실행되고 그래서 선언되지 않은 변수에 값을 할당하는등의 코드는 에러를 발생시킨다.

모듈은 최초 호출 시 단 한번만 실행되므로 실행 후 결과는 이 모듈을 가져가는 모든 모듈에게 보내지게 된다.

script type = module?

브라우저 환경에서 type을 module로 설정해주면 독립적인 스코프가 생성된다.

<script type="module">
  // user는 해당 모듈 안에서만 접근 가능합니다.
  let user = "John";
</script>

module타입으로 설정하면 항상 지연실행이 된다
이게 무슨말이냐면

<script type="module">
  alert(typeof button); // 모듈 스크립트는 지연 실행되기 때문에 페이지가 모두 로드되고 난 다음에 얼럿 함수가 실행되므로
  // 얼럿창에 object가 정상적으로 출력됩니다. 모듈 스크립트는 아래쪽의 button 요소를 '볼 수' 있죠.
</script>

하단의 일반 스크립트와 비교해 봅시다.

<script>
  alert(typeof button); // 일반 스크립트는 페이지가 완전히 구성되기 전이라도 바로 실행됩니다.
  // 버튼 요소가 페이지에 만들어지기 전에 접근하였기 때문에 undefined가 출력되는 것을 확인할 수 있습니다.
</script>

<button id="button">Button</button>

모듈을 사용할 때는 HTML페이지가 와넌히 나타난 이후에 모듈이 실행된다는 점에 항상 유의해야한다는 말이다.

웹팩

브라우저 환경에서 모듈을 '단독’으로 사용하는 경우는 흔치 않습니다. 대개 웹팩(Webpack) 과 같은 특별한 빌드 툴을 사용해 모듈을 한 데 묶어(번들링) 프로덕션 서버에 올리는 방식을 사용한다.

번들러를 사용하면 모듈분해를 통제할 수 있으며 여기에 더하여 경로가 없는 모듈이나 css,html포맷의 모듈을 사용할 수 있게 해준다는 장점이 있다.

빌드툴의 역할은 아래와 같다.

  • html의<script type = "module">에 넣을 주요 모듈을 선택한다(진입점 선택)
  • 주요(major)모듈에 의존하고 있는 모듈분석을 시작으로 모듈간의 의존관계를 파악한다
  • 모듈 전체를 한데 모아 하나의 큰파일로 만든다
  • 변형이나 최적화도 함께 수행된다(불필요한 코드가 삭제됨(쓰임처없는것, 도달불가, console&debuggur코드, 버전에 따라 Babel을 사용하여 같은기능을 하는 낮은버전의 스크립트로의 변환 등..)

바벨

간단하게 말하면 es6의 문법을 지원하지 않는 웹브라우저에서 이를 사용할 수 있게 만들기 위해 구버전의 문법으로 변경해주는 툴이다.

버전이 상승됨에 따라 아래와 같이 presets 를 설정하는 것을 통해 예전에는 promise와 같은 것들이 번들이 되지 않는 문제를 해결할 수 있게 되었다고 한다.

중구난방으로 정리가 되고있다.

module.exports = {
  presets: ['@babel/preset-env']
};

초기세팅은 어마어마한 동기님께서 거의 다해주셔서.. 적을 내용이 적다.

아래는 팀원 전체가 공부하며 모아뒀던 링크들이다.

추후에 더 공부해서 업데이트를 해야겠다 !

Vue.js setting

profile
sanghun Lee
알고리즘 풀이를 담은 블로그입니다.
이전 포스트

커스텀훅(Custom Hook)

다음 포스트

[Vue] 기초구조, 생명주기 일부

0개의 댓글