목차
전체 과정
- 개발자가 소스코드를 작성한다. (Ts, Html, css, sass, scss etc)
- Babel을 통해 모든 브라우저에서 호환 가능한 문법의 코드로 변환한다.
- 소스코드를 하나로 묶는 Bundling을 진행한다.
- 원격 저장소에 Deploy한다.
- 사용자는 Domain을 통해 원격지에게 정적 파일에 대해 Http 요청을 보낸다.
- 프론트 서버는 준비해둔 정적 파일을 응답한다.
- 브라우저는 원격지로부터 html, css, js, asset을 다운로드 한다.
- 다운로드가 끝나면 다운로드 Javascript가 실행된다.
이 시점에서 두개의 방향이 갈리는 것이다. 간단히 말하면, 하나는 파일을 받아서 브라우저에서 컴파일을 하고 렌더하느냐, 아니면 바로 렌더하느냐의 차이다.
JIT 컴파일러
- C, C++은 컴파일을 진행하고 실행한다. 그 대신 실행하는 시점에 필요한 부분을 즉석에서 컴파일 하는 것을 말한다.
- 인터프리터 언어는 라인 바이 라인으로 읽고 직접 기계어로 번역하는 과정을 거친다.
- 이 중간에서 인터프리터 언어가 성능 향상을 목적으로 처음 실행될 때, 자주 쓰이는 코드를 캐싱한다. 그리고 그다음 부터는 이 캐싱된 코드를 가져다 쓰는 방식.
- 단점은 초기 구동 시에 소스 코드를 컴파일 하는데 시간과 메모리를 소모한다. 정적 컴파일된 프로그램에 비해 실행 속도면에서 손해를 보는 것이 사실
- 실행 디바이스에서 번역해야 한다.
- 실제 테스트를 하는 과정에서 사용한다.
AOT 컴파일러
- 소스 코드를 미리 컴파일 하는 방식
- 디바이스에게 미리 번역해서 저장해두고 실행만 하게 한다.
- 더 빠른 렌더가 가능하다.
- 컴파일러를 제거하여 번들 사이즈가 많이 작아진다.
- 프로덕션에서 자주 사용된다.