브라우저에 따른 고려사항과 compile, transpile, interpreter

- 웹 페이지로 구현할 경우 사용자의 브라우저와 버전은 개발자와 다르게 항상 최신 버전 아니며 사파리, 크롬, 파이어폭스 등 다양하기 브라우저에서의 자바스크립트 표준인 ECMAScript의 문법 지원을 염두에 두어야 한다. 인터넷 익스플로러 11의 지원은 종료되었지만 여전히 어느정도 사용중이며 엣지 환경에서도 호환성 모드를 활성화하면 익스플로러 환경으로 페이지에 접근가능하며 셋톱박스와 같은 업데이트를 쉽게 할 수 없는 구형 기기에서도 ES5까지만 작동하는 경우가 있으므로 ES5 기준으로 transpile 된 코드를 파악하는 것이 중요.

- 사용자의 다양한 브라우저 환경, 최신 문법을 작성하고 싶은 개발자의 요구를 해결하기 위해 탄생한 것이 바로 바벨이며, 바벨은 JS의 최신 문법을 다양한 브라우저에서도 일관적으로 지원할 수 있도록 코드를 transpile 하며, 어떻게 transpile 하는지와 결과에 따라 어떤 코드가 생성되는지 이해하게 되면 향수 애플리케이션을 디버깅하는데 도움.

• compile: 한 언어로 작성된 소스코드를 다른 언어로 변환하는 작업.

        ex) C -> Assembly, Java -> Bytecode

• transpile: compile의 subset, 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 작업.

         ex) C ++ → C, ES6 → ES5 (Babel), typescript → javascript, sass / scss → css

• interpreter: 사람이 알아보기 쉬운 프로그래밍 언어로 작성한 코드를 한 줄 씩 기계어로 변환하는 작업. 인터프리터는 즉각적인 번역에 특화된 번역기로 번역 속도가 빠르지만 한 줄마다 새롭게 번역을 함. compiler와 같이 오브젝트 코드 생성과정이 없으므로 메모리 효줄이 좋지만, 프로그램을 매번 실행하기에는 느리며 실행 후 오류가 발생하면 실행을 중지시키므로 사용성이 문제 될 수 있다.

         ex) python, ruby, javascript

• compiler: 전체 파일을 스캔하여 한꺼번에 번역 초기 스캔시간이 오래 걸리지만, 한번 실행 파일이 만들어지고 나면 빠르다. 기계어 번역과정에서 많은 메모리를 사용하며 전체 코드를 스캔하는 과정에서 모든 오류를 한꺼번에 출력해주기 때문에 실행 전에 오류를 알 수 있다.

        ex) c, c++, java

 

2024.09.25 - [Front-End/Javascript] - 자바스크립트 interpreter/compiler pipeline