모듈 번들러, 트랜스 파일러

모듈 번들러

지금의 프론트엔드 개발은 모듈단위로 파일을 엮어서 개발하는 방식이다. 즉, 모듈은 서로 의존성을 띄고 있는데 이런 점에서 다음과 같은 문제점이 생긴다.

• 수많은 모듈의 순서를 어떻게 처리 할 것인가? (의존성 처리)
• 모듈이 많아 질 수록 HTTP 요청이 많아질 텐데, 이로 인한 오버헤드는 어떻게 해결 할 것인가?

위의 문제들을 해결하기 위해 등장한 것이 모듈 번들러로 각각의 모듈 의존성을 해결하여 하나의 자바스크립트 파일로 만드는 도구이다.

의존성이란...?
1. 의존은 변경에 의해 영향을 받는 관계를 의미한다.
2. 한 클래스가 다른 클래스의 메서드를 실행할 때 이를 '의존한다'라고 한다.
3. A가 B를 사용해야만 A의 역할을 수행 할 수 있는 경우이다.

오버헤드란...?
프로그램의 실행흐름 도중에 동떨어진 위치의 코드를 실행시켜야 할 때, 추가적으로 시간, 메모리, 자원이 사용되는 현상이다.

트랜스 파일러

트랜스 파일링이란 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 행위를 말하고, 이를 해주는 것이 트랜스 파일러이다. 모든 브라우저가 ES6+의 기능을 제공하지 않기 때문에, 이를 ES5 코드로 변환시키는 과정이 필요하기 때문에 필요하다. ES6+ 기능 뿐만 아니라 JSX를 자바스크립트로 변환시킨다거나(Babel) 타입스크립트를 자바스크립트로 변환을 시키는 역할(타입스크립트 트랜스 파일러)도 트랜스 파일러의 기능 중 하나이다.

*보통 프론트엔드 프레임워크, 라이브러리를 사용해서 개발할 때, 모듈 번들러에 트랜스 파일러를 추가해서 사용하는 방식을 사용한다.