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

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

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

• 다양한 버전의 웹 브라우저에서 모두 동작되게 하려면 최소 버전을 지원하면된다 가상의 예시를 들면
  • Chrome 1 버전 : ECMAScript(ES) 2 버전까지 지원
  • Chrome 2 버전 : ECMAScript(ES) 4 버전까지 지원
  • Firefox 1 버전 : ECMAScript(ES) 3 버전까지 지원
  • Internet Explorer 1 버전 : ECMAScript(ES) 1 버전까지 지원
• 위와 같은 상황일때 우리가 개발한 JS 이 최소로 지원해야할 버전(저버전)은 ECMAScript(ES) 1 버전

  JavaScript는 ECMAScript라는 "표준"에 따라 만들어진 언어.
  ES(ECMAScript)는 JavaScript의 문법과 동작을 정의한 규칙 같은 것.

1.1. 다양한 웹 브라우저에서의 저버전 ES 지원을 위해 Babel 과 Polyfill

• 어떤 ES 버전(브라우저의 버전을 기준한것)으로 개발하더라도 Babel 트랜스파일러를 통해 저버전 ES 버전으로 변환 가능
• 일부분은 트랜스파일링으로 전환할 수 없는 로직이 있는데 그런것들은 Polyfill 로 자체 구현체 추가

  

  트랜스파일러(Transpiler) : 한 프로그래밍 언어에서 다른 버전의 언어로 변환하는 도구 (Bable 등등)
  Babel : JavaScript 트랜스파일러(transpiler)로, 최신 JavaScript 코드를 구형 브라우저에서도 실행할 수 있도록 변환.
  Polyfill: 특정 기능을 지원하지 않는 환경에 해당 기능을 추가해주는 코드(또는 라이브러리)

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

타입스크립트는 자바스크립트에 정적 타입 검사를 추가하는 언어. 즉, 컴파일 타임에 타입을 검사하여 자바스크립트의 동적 타입 언어에서 발생할 수 있는 오류를 미리 잡을수 있다. 타입스크립트로 작성된 코드는 JS로 변환되어야만 실행될 수 있으며, 이 변환 작업을 트랜스 파일링이라고 함.

• 타입스크립트 로더 : 타입스크립트로 작성된 TS 파일을 자바스크립트 파일 JS 로 변환. 단, 성능 이슈
  • 바벨을 통해 컴파일을 수행해야하는데, 이에 타입스크립트 로더로 추가로 컴파일한다면 매우 느려질것
  • 조금 정신나간 솔루션이긴하지만, 어자피 IDE 가 알아서 정적 타입체킹 및 컴파일 에러낼테니 타입스크립트 로더 스킵
    • 타입스크립트 로더를 스킵하는 이유 : 타입스크립트 로더는 타입스크립트 문법을 자바스크립트로 변환하는 역할
      하지만 Babel을 사용하면, Babel이 이미 자바스크립트 변환을 잘 하므로, 타입스크립트 로더를 중복으로 사용하는것이 비효율적이됨.
    • 따라서 IDE(통합 개발 환경)을 통해 타입 검사를 자동으로 수행하고, 컴파일러가 에러를 내기 때문에 타입스크립트 로더를 생략하고 Babel만 사용해도 충분히 안정성을 보장할수 있다.

    • 과거방식 : TS → Typescript Loader (Transpiler) → JS → Babel (Transpiler) → JS
    • 현재방식 : TS → Babel (Transpiler) → JS

1.2.1. Zod : Runtime Typechecking ↔ Typescript : Static Typechecking

앞선 타입스크립트는 정적 타입체커로 컴파일 타임 혹은 IDE 를 통해 코드에 문법적 위반사항을 찾아 에러를 반환

• 타입스크립트의 단점은 런타임에서 외부로부터 데이터를 가져왔을때, 문법적 위반사항을 찾지 못한다는것
  • 외부로부터 데이터를 가져왔을때 : 파일을 읽었을때나, API 혹은 유저로부터 Form 데이터를 받아왔을때
• 이런 타입스크립트의 사각지대를 보완하기 위한 런타임 타입체커로 여러 Validation 라이브러리들이 있다.
  • Joi : Node 백엔드 진영에서 많이 사용되었던 동적 체킹(Type-safe Validation) 라이브러리
    • 엄격한 에러 핸들링 및 개발자 각자의 용례에 맞게 맞춤 활용 가능 (Customization Capabilities)
      • Feature-Rich and Battle-Tested
  • Zod : Typescript 의 정적 체킹을 제공함과 동시에 + 동적 체킹(Type-safe Validation)도 제공
    - 에러 메세지 및 에러 핸들링도 간편하고, 다양한 Validation API 통해 웬만한 모든 타입 체크 가능
    - Powerful and Type-Safe 강력하고 타입 안전한 방식으로 데이터를 검증하며, 에러 메시지와 에러 핸들링이 간편
    - 단점이라면 타입스크립트를 필수로 사용해야한다 compilerOptions 내 "strict": true

    컴파일 타임과 런타임의 정의

    컴파일 타임: 코드가 실행되기 전에 발생하는 모든 작업을 포함합니다.
    컴파일러가 코드에서 오류를 발견하고, 최적화를 진행하며, 최종적으로 실행 가능한 파일을 만들어내는 시점입니다.
    이를 통해 오류를 미리 발견하고, 최적화된 성능을 보장할 수 있습니다.

    ---

    런타임: 실행 중에 발생하는 시간입니다.
    프로그램이 실제로 실행되면서 발생하는 오류를 의미합니다.
    예를 들어, API 요청을 보내거나 사용자가 입력한 값에 따라 동적인 오류가 발생할 수 있습니다.
    예시: 자바스크립트에서 API 응답을 받아 처리할 때 발생하는 오류는 런타임에 발생합니다.