[JavaScript] 컴파일러와 트랜스파일러의 동작 원리 이해하기

 

 

---

 

개요

• 자바스크립트는 본래 인터프리터 방식으로 동작하는 런타임 언어로 소스 코드를 바로 실행하였지만, 빠른 업데이트와 브라우저 간 호환성을 위해 컴파일 기술을 통해 실행 속도를 최적화되고 있는 언어입니다.
• 또한, 개발 편의성을 높이기 위해 React와 Virtual DOM 같은 프레임워크와 트랜스파일러 기반의 언어들이 등장했습니다.
• 이러한 언어들이 어떻게 동작하는지 살펴보고, 소스 코드 처리 과정과 소스 변환 도구에 대해 알아보겠습니다.

 

컴파일러 언어와 인터프린터 언어

• 컴파일러 언어 : 컴파일 단계와 실행 단계가 분리된 언어
• 인터프리터 언어 : 컴파일 없이 프로그램 소스 코드를 바로 실행하는 언어

 

 

소스 코드 처리 도구

• Parser (파서)

 

Parser 란?

• 파싱(Parsing)을 하는 프로그램
• 컴파일러의 일부로 인터프린터에서 문장을 해석하기 위해 사용하는 프로그램을 파서라고 한다.
• 기계어로 번역되가 전 프로그램을 원시 프로그램이라고 하는데, 원시 프로그램을 HTML 언어로 해석할 수 있게 구문 분석을 하는 역할을 한다.

Parsing (파싱)은?

• 문장을 분석하고 문장을 이루고 있는 구성 요소들을 분해하고 구성 요소 사이 관계를 분석하여 문장의 구조를 알아내고, 데이터를 조립하여 원하는 데이터를 추출하는 작업
• 보통 컴파일 과정에서 프로그래밍 언어를 검사하는것을 파싱이라고 한다.
• 대표 파싱 기법: XML 파싱 기법은 DOM방식과, JSON 파싱 기법 등

 

소스 코드 변환 도구

• Complie (컴파일)
• Transpile (트랜스파일)

 

complie 란?

• 개발자가 작성한 코드를 소스 코드를 실행 가능한 기계어나 바이너리 코드로 변환하는 과정
• 높은 수준의 언어를 낮을 수준의 언어로 변환 (예, 프로그래밍 언어(c) → 어셈블리)

 

compiler (컴파일러) 는?

• 파싱된 결과를 기반으로 소스 코드를 컴파일하는 프로그램
• 주요 단계
  • 파싱
  • 코드 최적화
  • 코드 생성

 

트랜스파일(Transpile)과 트랜스파일러란?

• Transpiler(트랜스파일) : 추상화정도가 유사한 언어를 다른 언어로 컴파일하는 프로그램
• 예)
  • C ++ → C
  • ES6 → ES5 (Babel)
  • typescript / coffeescript → Javascript
  • sass / scss → css

 

 

리액트 컴파일러란?

• 리액트 컴파일러는 빌드 과정에서 사용되는 도구입니다.
• 리액트 19 프로젝트에서 리액트 도구 생태계가 제공하는 설정 옵션을 사용하여 명시적으로 설정해야 합니다.

리액트 컴파일러 주요 설정 요소 3가지

1. 바벨 플러그인: 컴파일 과정에서 코드 변환을 돕습니다.
2. ESLint 플러그인: 리액트 규칙 위반을 포착하고 보고하는 데 도움을 줍니다.
3. 컴파일러 코어: 코드 분석과 최적화를 수행하는 핵심 컴파일러 로직입니다. 바벨과 ESLint 플러그인 모두 코어 컴파일러 로직을 사용합니다.

 

 

컴파일 과정

1. 전처리(Preprocessing):
   1. 컴파일 과정이 시작되기 전에 전처리기(preprocessor)에 의해 소스 코드를 처리
   2. 이 단계에서는 주석 제거, 매크로 확장, 헤더 파일 삽입 등이 수행
2. 컴파일(Compilation)
   1. 컴파일러를 통해 어셈블리 파일로 변환
   2. 구문 분석(Syntax Analysis 또는 Parsing), 의미 분석(Semantic Analysis) 진행을 하며 변수, 함수 등의 식별자의 유효성을 검사와 타입 오류나 다른 의미적 오류를 검출
3. 어셈블리(Assembly)
   1. 어셈블러를 통래 오브젝트 파일로 변환
   2. 추상 구문 트리를 기계어나 어셈블리 코드로 변환하거나, 중간 코드를 생성
   3. 코드 실행 시간을 단축하거나 메모리 사용을 최적화하기 위해 목적 코드를 변형
4. 링킹(Linking)
   1. 여러 소스 파일을 하나의 실행 가능한 프로그램으로 결합한다
   2. 이 단계에서는 외부 라이브러리와의 연결
   3. 실행 파일에 필요한 리소스를 포함
5. 실행 파일 변환 완료
   1. 실행 코드(바이트 코드) 를 가지고 Node.js나 웹 브라우저에서 실행 한다.

 

리액트 컴파일 흐름

• 바벨 플러그인은 컴파일할 함수(컴포넌트 또는 훅)를 식별합니다. 나중에 컴파일 과정에 포함하거나 제외하는 방법을 배우기 위해 몇 가지 설정을 볼 것입니다. 플러그인은 각 함수에 대해 코어 컴파일러 로직을 호출하고 최종적으로 추상 구문 트리를 생성합니다.
• 그런 다음 컴파일러 코어는 바벨 AST를 IR 코드로 변환하고, 이를 분석하며, 규칙이 위반되지 않았는지 확인하기 위해 다양한 유효성 검사를 실행합니다.
• 다음으로, 사용하지 않는 죽은 코드를 제거하기 위해 여러 패스(pass) 처리 과정을 거쳐 최적화할 코드의 양을 줄이려고 시도합니다. 코드는 메모이제이션을 사용하여 추가로 최적화됩니다.
• 마지막으로, 코드 생성 단계에서 변환된 AST가 최적화된 자바스크립트 코드로 다시 변환됩니다.

 

 

컴파일타임과 런타임 비교

compile time (컴파일타임) vs runtime (런타임)

• 컴파일타임 : 컴파일 과정에서 소스 파일이 실행 파일로 만들어지는 전반적인 과정
  • 컴파일타임 에러 : 작성 후 발생하는 오류
    • syntax error
    • type check
• 런타임 : 컴파일 과정을 마치고, 실행 파일이 실행되어 종료하기 까지의 시간
  • 런타임 에러: 프로그램이 실행 중에 의도치 않은 상황으로 발생하는 오류
    • 0 나누기
    • null 참조 오류
    • 메모리 오류

 

 

 

 

https://junghan92.medium.com/%EB%B2%88%EC%97%AD-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%BB%B4%ED%8C%8C%EC%9D%BC%EB%9F%AC-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%99%84%EB%B2%BD-%EA%B0%80%EC%9D%B4%EB%93%9C-a6a0e96edc97

(번역) 리액트 컴파일러 사용법 — 완벽 가이드