지난 몇 년동안 리치 인터넷 애플리케이션(리치웹, Rich Internet Application)이 웹사이트 개발에 대세를 이루면서 사용자 인터렉티브(User Interactive)가 빈번하게 발생되고, 인터페이스(UI)의 현란함과 편의성은 날로 발전해 갔다. 간단하게 말해서 웹 프로그램은 더욱 만들기가 어려워지고 복잡도는 높아졌지만, 사용자는 더욱 쉽게 접근하고 편리한 환경을 제공하고 있다는 뜻이다. 이러한 현상은 사용자의 눈 높이가 높아졌기 때문에 가능한 것이며, 그로 인하여 개발자는 더욱 많은 기술을 사용하여 웹사이트를 제작해야 한다는 것을 의미한다.
그러한 과정에서 수 많은 개발자들이 AJAX(Asynchronous JavaScript and XML)와 JSON(JavaScript Object Notation)을 사용하게 되었고, DOM(Document Object Model) 객체 제어가 빈번하게 발생하여 개발의 불편함은 날로 늘어날 수 밖에 없었다. 이와 같은 상황에서 혜성처럼 등장한 prototype 프레임워크(Framework)는 AJAX 통신을 비롯하여 JSON및 DOM 객체 제어를 매우 간편하게 해결해줌으로써, 전 세계 개발자들의 열렬한 환영을 받았다.
그 이후 수 많은 자바스크립트(javascript) 프레임워크가 개발되었고, 그 중에서도 간략한 코딩 기법을 강조한 메써드 체인(method chain)과 CSS 기반 DOM 셀렉터(selector)로 무장한 jquery의 눈부신 발전은 prototype으로부터 자바스크립트 프레임워크의 왕좌를 물려받게 되었다.
그 결과, 현 시대를 살아가는 다수의 프론트엔드(front-end) 개발자는 jquery를 빼놓고 프로그램 개발을 논하기 어려울 정도가 되었으며, 심지어 jquery 없이는 개발을 할 수 없는 사람도 종종 만날 수 있다. 그만큼 jquery는 수 많은 개발자들에게 영향을 주었고, 웹 개발자라는 직함을 달고 있는 사람중에서 jquery 레퍼런스 페이지(api.jquery.com)를 방문해보지 않은 사람은 거의 없다고 볼 수 있다.
그 덕분에 jquery의 레퍼런스 페이지에서 제공되는 프로그램 예제는 jquery를 사용하는 개발자에게 표준 코딩 기법처럼 적용되는 경향이 있다. 예를 들어 다음과 같은 코딩 기법은 jquery의 특징을 매우 잘 나타내고 있다.
$.ajax({
url: "./process.php?uid=5",
type: "get",
success: function(result){
if(result !== "ok")
alert("프로그램에 오류가 발생되었습니다.");
else
alert("정상적으로 저장되었습니다.");
}
});
위의 예제 코드는 jquery에서 제공되는 ajax 함수를 통해 process.php를 실행하여 수신(response) 결과 문자열이 “ok”가 아니면 오류 메시지를 출력하는 프로그램으로 $.ajax라는 함수에 설정 정보가 들어있는 JSON 객체를 인수로 전달하는 구조이다. 실제로 jquery 레퍼런스 페이지에도 이와 비슷한 형태로 예제를 제공하고 있으며 jquery를 사용하여 개발을 하는 사람들도 이와 같은 코딩 기법은 매우 익숙할 것이다.
var obj = {
name: "고광진",
id: "akanaka",
class: "developer"
};
위의 예제 코드는 자바스크립트에서 JSON 객체를 선언하는 일반적인 코딩 방법이다. 자바스크립트를 이용하여 프로그램을 개발하는 사람에게는 매우 익숙한 방법이며, 자주 사용되는 코딩 기법이다. 당연히, syntax 오류도 발생되지 않는다. 단, IE(Internet Explorer) 브라우저는 예외다.
예제 처럼 JSON 객체를 선언 하는 코드가 포함된 자바스크립트를 IE 브라우저, 그 중에서도 IE9을 비롯하여 IE8, IE7, IE6에서 실행하면 무조건 에러가 발생된다. 하지만 IE9 상위 브라우저(IE10 ~ IE11, Edge)에서는 오류가 발생되는 않는다. 어째서일까?
오류가 발생되는 첫번째 이유는 JSON 객체를 선언 할 때의 올바른 코딩 기법을 따르지 않았기 때문이다. JSON 객체를 선언 할 때는 모든 문자열이 쌍따옴표 안에 표현되어야 하므로 name, id, class 등의 키 이름도 쌍따옴표 안에 표현해야 한다. 그리고 두번째 이유는 `class`가 자바스크립트 키워드이기 때문이다.
그러나 시대가 빠르게 변화하면서 웹 개발에 AJAX 기법과 JSON 객체의 사용 빈도가 높게 늘어나게 되었고, 그로 인하여 개발자들이 JSON 객체를 선언 할 때 키 이름에 쌍따옴표를 생략하는 경우가 많아졌다. 왜냐하면 그 당시 대부분의 메이저 브라우저는 쌍따옴표를 생략해도 오류가 발생하지 않았기 때문이다. 아마도 IE10 이하 버전의 브라우저는 JSON 객체의 키 이름에 쌍따옴표가 생략되는 것에 대한 예외 처리가 없었던 것으로 판단되며, 그 이후 버전에서는 예외 처리가 포함된 것으로 보인다.
이유가 어찌되었든 중요한 것은 우리나라 – 다른 나라도 별반 다르지 않겠지만 – 에서 웹프로그램을 만들때, 자바스크립트 키워드를 JSON 객체의 키 이름으로 사용 할 때는 반드시 쌍따옴표 안에 표기해야 한다는 것을 기억해야 한다는 점이다.