[ASAC 6기] 웹 개발이란 무엇이며, 어떻게 동작하나? FE(3) - Javascript 프레임워크 동작 원리

✅라이브러리 VS. 프레임워크

🔹라이브러리: 단일 목적을 위한 단일 파일

🔹프레임워크: 다수 목적을 위한 라이브러리 집합

 

---

오만가자 자바스크립트 라이브러리를 종합해서 제공하는 프레임워크는 오만개의 자바스크립트 파일을 갖는다. 한 자바스크립트 프레임워크 내 워낙 다양한 기능을 제공하는 자바스크립트들이 있다보니 정말 많은 파일이 존재.

유저가 웹 브라우저에서 웹 페이지를 보기위해 오만개의 자바스크립트 파일을 다운로드하면, 컴퓨터가 터진다.

✅번들러: 다수의 JS를 하나의 JS파일로 압축

그래서 하나의 웹 페이지를 보여줄 때 다양한/다수의 JS라이브러리 파일을 하나의 JS파일로 압축해야한다.

-> 번들러를 통해 다양한/다수의 JS파일을 하나의 JS 파일로 묶는다.

 

하지만 다수의 JS파일을 하나로 번들링을 하면 파일 용량이 커지므로 쪼개는 기능도 있다.

-> code spliting: 메인 페이지마다 묶어서, 매 페이지 접근마다 전체 번들링 JS 안가져오도록

* 번들러 동작 원리와 webpack과 Vite는 심화 내용이므로 시간되 때 다시 정리*

 

 

✅트랜스파일러 / 컴파일러: 고버전 JS 혹은 TS를 저버전 JS로 변환

특정 버전의 자바는 특정 버전의 JVM에서 동작되는 JAVA와 달리 특정 버전의 자바스크립트는 다양한 ES버전의 웹 브라우저에서 동작되기 때문에 JS버전 호환성 문제가 발생한다.

 

다양한 버전의 웹 브라우저에서 모두 동작하게 하려면 최소 버전을 지원하면 된다. 가상의 예시를 들면

Chrome 1 버전 : ECMAScript(ES) 2 버전까지 지원
Chrome 2 버전 : ECMAScript(ES) 4 버전까지 지원
Firefox 1 버전 : ECMAScript(ES) 3 버전까지 지원
IE 1 버전 : ECMAScript(ES) 1 버전까지 지원

위와 같은 상황일때 우리가 개발한 JS이 최소로 지원해야할 버전(저버전)은 ECMAScript(ES) 1버전

 

하지만 나는 고버전으로 개발하고 싶다면 Babel을 활용하면된다.

 

🔷  [심화] 다양한 웹 브라우저에서의 저버전 ES지원을 위해 Babel과 Polyfill

Babel

어떤 ES 버전으로 개발하더라도 Babel 트랜스파일러를 통해 저버전 ES 버전으로 변환 가능하다.

💡컴파일러 VS. 트랜스파일러
컴파일러: 고수준언어-> 저수준언어
🔹컴파일에러: 고수준언어에서 문법에러가 있으면 저수준언어로 변화하지 못해 실행파일로 만들지 못하는데 이때 문법에러 같은 것이 컴파일에러이다.
트랜스파일러: 같은 수준의 언어를 버전만 낮춰주는 것.(고수준언어-> 고수준언어, 저수준언어-> 저수준언어)

 

Polyfill

하지만 Babel이 너무 구형버전의 언어로 변환하지 못하는 경우가 있다. 이때는 Polyfill을 사용하면 된다

polyfill은 Babel이 버전을 낮출 수 없는 로직을 채워주는 보충제라고 생각하자

 

🔷[심화] 정적 타입을 통한 JS안전성 보장: Typescript

자바스크립트에는 타입이 없다(동적타입언어). 협업에서 다른 사람 코드로 개발을 하다가 자신도 모르게 타입을 변경하면 이전에 동작하던 코드가 오류가 생길 수 있다...

이렇게 유지 보수가 어려워지는 문제가 발생하다보니 자바스크립트에 타입을 추가한 typestcript가 나오게 되고, 타입을 정적으로 정해서 타입이 변하지 않도록 유지 보수성을 높일 수 있게 되었다.

 

Typescript

자바스크립트에 타입이라는 확장 문법을 제공한다.

장점: 컴파일에러로 타입 에러를 발생시켜준다. 

    🔹자바스크립트에서는 런타임 에러가 나던 오류는 컴파일에러로 발생 시켜준다.

 

웹 브라우저에서는 js로 동작하므로 typescript로 개발하면 typescript를 js로 변환해주는 트랜스파일링을 해줘야한다.

그것이 타입스크립트 로더이다.

 

Typescript에서 저버전 JS까지의 변환과정

Typescript ->  Typescript Loader(Transpiler) ->  JS ->  Babel(Transpiler) -> JS

 

이렇게 변환과정이 길다면 빌드할때 느려지게된다. 따라서 Typescript Loader는 사용하지 않고, Typescript -> JS 변환과정을 IDE(VScode)에 맡긴다.