[웹 개발 개념 및 동작 방법 - 프론트엔드 편] 프론트엔드 자바스크립트 프레임워크 동작 원리

번들러의 정의와 필요성, 동작 방법

유저가 웹 브라우저에서 웹 페이지를 보기 위해 JS 파일을 모두 다운로드하면, 컴퓨터가 터지지않을까?

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

번들러 동작 원리와 Webpack 과 Vite(ESBuild 기반)

번들러 기본 동작은 모든 페이지에 정의 및 연결된 모든 JSX 들을 한데 묶어서 번들링

• Webpack 세부설정을 통해 각 페이지별로 정의 및 연결된 모든 JSX 들을 한데 묶어 번들링 가능
  • Code Splitting : 메인 페이지마다 묶어서, 매 페이지 접근시마다 전체 번들링 JS 안가져오도록
• Vite 는 알아서 각 페이지별로 꼭 필요한 JSX 및 라이브러리 모듈들만 번들링
  • Code Splitting = Dynamic Import : 메인 페이지 내 서브 페이지마다 필요한 라이브러리만 번들링
    • Vite : 모듈 번들러 (Turbopack 과 경쟁) Webpack 과 모듈 번들러계의 경쟁자인 ESBuild 를 래핑한 (보완한) 모듈 번들러
      Dependencies(패키지, 라이브러리) 와 Source Code(소스 코드)** 를 분리하여 번들링Dependencies(라이브러리) : ESBuild 통해 미리 트랜스파일링, 필요에 따라 ESM 비동기 로드**
      Source Code(소스 코드) : 엔트리 포인트에 해당하는 파일은 서버 요청시 바로 반환

---

트랜스파일러와 컴파일러의 정의, 필요성, 동작 방법 및 차이점

트랜스파일러 : 고버전 JS/TS 를 → 저버전 JS 로 변환

컴파일러는 A → B (완전히 다른 언어) | 트랜스파일러는 A → A’ (조금만 다른 언어, apostrophe)

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

• 다양한 웹 브라우저에서의 저버전 ES 지원을 위해 Babel 과 Polyfill
  • 어떤 ES 버전으로 개발하더라도 Babel 트랜스파일러를 통해 저버전 ES 버전으로 변환 가능
  • 일부분은 트랜스파일링으로 전환할 수 없는 로직이 있는데 그런것들은 Polyfill 로 자체 구현체 추가
    • Babel 트랜스파일을 가능하게 해주는 자바스크립트 라이브러리
      
    • Polyfill 이전 브라우저에서 기본 지원하지 않는 최신 기능을 제공하는 데 필요한 코드
      

---

Typescript 사용 이유 및 동작 원리

Typescript → 정적 타입체킹을 통한 동적 타입언어인 JS 안정성 보장

• 인터페이스, 제네릭 등을 지원하여 객체지향 프로그래밍에 도움
• 컴파일 단계에서 오류 확인 가능
• 어떤 타입의 값이 필요한지 쉽게 파악할 수 있어 코드 흐름을 이해하기 쉬움
  → 협업에 능함
  

---

프론트엔드 자바스크립트 프레임워크 정리

JS 를 통한 DOM 조작을 풍부하게 → Javascript Framework (번들링 + 컴파일/트랜스파일 + 렌더링)

• Javascript Framework = Rendering System
  • 심화 : 3 Main Feature of a Framework = MVC
    • View : Rendering (HTML ~= DOM)
    • Model : Data Handling
    • Controller : Event Handling

---