웹이 알아들을 수 있는 언어 : html / css / js
그렇다면 JSX코드나 styled-component 코드나 scss코드는 누가 처리해 주지,,?
--> 번들러!!
번들러가 나오게 된 이유...
아주아주 옛날에 짜던 코드
export, import를 통해 코드를 분리할 수 없었던 그 시절..
선배림들은 html 파일 안에 여러 개의 <script> 태그를 사용해 소스를 로드했다.
<html>
<script src= "a"/>
<script src="b"/>
</html>
이러면 a script 파일과 b 스크립트 파일에 같은 이름의 변수가 선언되어 있을 경우 충돌이 발생했다.
(스코프가 구분이 안 돼서!!!)
따라서 전역변수(var) / 즉시 실행함수 표현식 등을 사용해 스코프를 구분하고 코드를 조직화했다.
--> 전역변수를 써야 하고 애플리케이션이 커질수록 유지보수 어러워짐
ES6
import, export 지원! 모듈화가 가능해졌다.
서로 다른 모듈로 만들어서 갖다 쓸 수 있게 됨!
namespace 오염 확률도 줄었다. 이름 겹칠 일 없어!
코드 재사용성이 높아졌고 유지 보수가 쉬워졌다.
그러나...
모둘별로 HTTP 요청을 하니 HTTP 요청이 너무 많아져 페이지 로딩 속도가 느려졌다 ㅠㅠ
파일 경로는 또 왜 이리 복잡해.. 파일이 많아져서 복잡해!!
최종 배포되는 코드 크기가 커지며 웹 사이트 로딩 속도에 영향을 미칠 수 있었다 ㅠㅠ
구형 브라우저에서는 안 돌아가...
트랜스파일러
일단 브라우저 상관없이 동작하게 하자!
한 번 컴파일하면 구형 브라우저에서도 돌아가는 JS 코드를 만들어내는 도구이다.
가장 유명한 건 babel.
최신 js 문법으로 작성해도 babel이 구형 브라우저한테 해석해 줌.
태스크 러너
ts처럼 전처리가 필요한 언어들을 컴파일하고 코드를 축소하고 하나의 파일로 묶고 하는 과정들이 필요하니
태스크 러너로 자동화하자!
태스크 러너가 린팅, 빌딩, 테스팅 다 해준다!
근데 파일을 하나로 전문적으로 묶는 기술이 필요할 것 같은데?
번들러
js 모듈을 단일 js 파일로 만들어주는 도구!
개발자가 의존성 관리 이런 거 하지 말고 번들러가 알아서 import, export 경로 짜게 해벌임.
대표적으로 webpack, vite 등이 있다.