데이터 인라인 포함하기

상황에 따라서 특히 작은 데이터를 로딩할 때에는 인라인 기법을 유용하게 활용할 수 있다. 인라인 기법의 장점은 아주 간단하게 구현할 수 있다는 것이다.

JSON 오브젝트를 바로 페이지에 표시하는 것이 인라인 기법이다. 루비온 레일즈를 이용한 예제 코드를 살펴보자

<script type='text/javascript'>
    var User = {};
    User.records = <%= raw @users.to_json %>;
</script>

위 예제는 ERB 태그(<%, %>)를 이용해 JSON 사용자 데이터를 출력했다.

raw 메소드를 이용하면 JSON 내용을 이스케이프하지 않고 문자 그대로 출력할 수 있다. 그러면 아래와 같이 페이지를 표시하는 결과 HTML이 만들어진다.

<script type='text/javascript'>
    var User = {};
    User.records = [{'first_name': '데브존스'}];
</script>

 

JSON은 자바스크립트 오브젝트와 같은 구조를 갖고 있으므로 자바스크립트는 직접 JSON을 처리(evaluate)할 수 있다.