컴파일러? 번들러?

오랜만에 개념정리 차원에서 React 기술 용어 모음집을 읽었다.

 

 

익숙하지만 애매하게 개념이 잡히지 않는 두 개념이 있었다. 

바로 컴파일러와 번들러이다. 사내에서는 거의 건들일이 없기 때문에.

알고는 있지만, 크게 수정해본적이 없는 친구들이라 그런지, 개념이 잡히지 않았다.

이참에 개념을 잡아보는 시간을 가져보려고한다.  

 

컴파일러 

• Compiler는 특정 프로그래밍 언어로 쓰여있는 문서를 다른 프로그래밍 언어로 옮기는 언어 번역 프로그램을 말한다. 원래의 문서를 소스 코드(원시 코드)라고 부르고, 출력된 문서를 목적 코드라 하고 부른다- wiki 참고
• 대표적인 예로 C++코드를 기계어로 바꿔주는 것이다. 

컴파일러는 언어 번역 프로그램이다. 즉 파파고나, 구글 번역기 처럼 특정 대상이 이해할수 있도록 번역해주는 역할을 한다. JS 입장에서 생각해보자. 브라우저마다 JS 실행하는 엔진이 다르다. Chrome은 v8, Safari는 SpyderMonkey 이처럼 각각 실행하는 엔진이 다르다. 무엇보다 구형 브라우저에서는 최신 문법을 사용할수 없기 때문이다. 브라우저마다 실행하는 JS엔진이 다르기에 우리는 각 엔진에 맞는 JS 언어로 변경해줘야한다. 바로 이러한 역할을 하는 것이 JS 컴파일러이다. 우리는 JS 컴파일러 덕분에 다른 브라우저 생각하지 않고 최신 버전의 JS을 사용할수 있다.

 

대표적인 JS 컴파일러로는 Babel이 있다.

번들러 

• 번들러(Bundler)는 분리된 JS와 CSS 모듈 코드를 브라우저에 최적화된 여러 개의 파일로 결합한다. 
• 대표적으로 Webpack과 Browserify가 있다. 

번들러는 JS,CSS를 최적화된 여러개의 파일로 결합하는 프로그램이다. JS 모듈의 역사를 본다면 이해가 쉬울텐데, 간략해서 설명하면 이렇다. JS 파일이 늘어날수로 네트워크 통신이 많아지게 되는데. 이런 경우 리소스 낭비가 매우 심했기 때문에, 네트워크 통신을 최소화하기 위해 모둘 번들러를 사용한다. 

 

정리 및 느낀점

개념은 이정도만 잡아도 완벽하다. 하지만 필자가 이해가 되지 않았던 부분은 따로 babel package.json에서 실행했던 적이 없고, 모듈 번들러인 webpack으로만 실행했더니 알아서 컴파일 후 번들링까지 다 되었기 때문에. 모듈 번들링이 컴파일까지 같이 해주는줄 착각하고 있었기 때문이였다. 결국 webpack이 번들링을하면서 babel plugin을 사용하여 컴파일 후 번들링을 한 것이다.  

 

이렇게 보니 webpack 참 대단하다!