[JS] 자바스크립트는 인터프리터 언어인데 컴파일러가 왜 필요할까?? 크로스 브라우징!
[JS] 자바스크립트는 인터프리터 언어인데 컴파일러가 왜 필요할까?? 크로스 브라우징!
자바스크립트에 바벨과 같은 컴파일러가 필요한 이유는 좀 미뤄두고 크로스 브라우징에 대해 먼저 알아보자.
우리가 사용하는 브라우저는 다양하다. 아래의 브라우저들 말고도 정말 다양한 브라우저가 있다.
각각의 브라우저는 표준화 기구에서 정의한 스펙에 맞게 브라우저를 제작한다. 그런데 이런 다양한 브라우저에서 스펙에 정의된 부분 이외의 부분들까지 모두 디테일하게 맞출 수 있을까? 아니다. 각각의 브라우저는 서로 다른 렌더링 엔진을 사용하고, 서로 다른 특정 기능이나 규격이 존재하기 때문에 이런 문제가 발생한다. 각 브라우저마다 부분적으로 다르게 동작하는 문제를 크로스 브라우징 이슈라고 한다.
크로스 브라우징에 대해 더 알아보자.
크로스 브라우징과 웹 표준
웹 어플리케이션이 여러 웹 브라우저에서 일관되게 동작하는 능력을 크로스 브라우징이라고 한다.
최초로 상용화된 브라우저인 Netscape Navigator라는 브라우저가 경쟁력을 향상시키기 위해 만든 언어가 바로 javascript이다. 이후 microsoft에서 새로운 브라우저인 internet explorer를 제작하였다. 당연히 두 브라우저는 서로 경쟁을 하기 시작하였고, 상호 합의 없는 기능경쟁으로 인해 개발자 입장에서는 각 브라우저에 호환되는 어플리케이션을 만들기 어려운 문제가 발생했다.
예를 들면 IE에서는 element의 color를 지정하기 위해 직접 특정 속성에 값을 할당하였지만, NN에서는 메서드를 사용하여 스타일을 설정했다.
element.style.color = 'red'; // ie
element.style.setProperty('color', 'red); // nn
이러한 개발자들의 불만에 따라 웹 표준이라는 개념이 탄생하였다. 표준화 기구가 웹 표준 스펙을 정의하고, 각 브라우저가 그 표준을 따르게 된 것이다. 웹 표준이 확임 됨에 따라 개발자는 물론, 디자이너를 포함한 모든 이해관계자가 공통적으로 준수해야 하는 규칙이 제공되어 웹 어플리케이션의 일관성과 통일성을 유지할 수 있게 되었다.
하지만 웹 표준이 등장했음에도 불구하고 세세한 디테일은 모두 맞출 수 없기 때문에 여전히 크로스 브라우징 이슈는 존재하며 개발자는 이를 고려해야 한다.
예를 들어 css 속성인 min-width의 호환성을 살펴보자.
IE의 경우에는 경고가 표시된다. html5와 css3를 지원하지 않는 등 최신 웹 표준 기술을 지원하지 않기 때문에 IE에서는 지원하지 않는 기술이 많다. 더 다양한 속성들은 아래 링크에서 확인할 수 있다.
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
JavaScript
자바스크립트는 이름(script)에서부터 알 수 있다시피 컴파일 언어가 아닌 인터프리터 언어이다.
컴파일 언어는 소스 코드를 컴파일러를 통해 실행 파일로 만들어 실행하는 방식이고, 인터프리터 언어는 소스 코드를 한 줄씩 해석하고 실행하는 방식으로 동작한다. (컴파일 언어와 인터프리터 언어의 차이에 대해서는 나중에 더 자세히 알아보도록 하겠다.)
이렇게 알 수 있듯이 자바스크립트는 명백히 컴파일 언어인데 왜 컴파일러를 사용하는 것일까..?
답은 크로스 브라우징이다!
자바스크립트는 꾸준히 업데이트되고 있다. 자바스크립트가 업데이트됨에 따라 최신 자바스크립트 문법을 지원하지 않는 구형 브라우저에서는 내가 작성한 코드가 동작이 되지 않을 가능성이 있다. 모든 유저가 최신 브라우저를 사용하는 것이 아니기 때문에 우리는 이를 고려해야 한다.
자바스크립트는 인터프리터 언어이지만 컴파일러를 사용하여 크로스 브라우징 이슈를 일부 해결할 수 있다. 컴파일을 통해 자바스크립트 코드를 브라우저가 원하는 형식으로 변환하면 각 브라우저에서 일관된 동작을 보장할 수 있는 것이다.
Babel
자바스크립트의 대표적인 컴파일러로 babel이란 컴파일러가 존재한다. babel을 통해 자바스크립트의 최신 문법을 이전 버전으로 변환하여 유연한 브라우저 간의 호환성을 유지할 수 있다. 브라우저는 자바스크립트만 해석 가능하지만, JSX문법이나 타입스크립트와 같은 정적 언어도 트랜스파일을 통해 사용 가능한 것이 babel 덕분이다.
마치며
오늘은 크로스브라우징을 통해 브라우저의 역사를 일부 알아보았는데 확실히 이러한 역사가 재미있는 것 같다. 역사를 보면 기존의 문제를 알 수 있고 새로운 기술의 탄생 배경과 이유를 알 수 있는 게 너무 재미있는 것 같다.