[ javascript ] CDATA 사용 이유

1) CDATA로 감싼 JAVASCRIPT부분이 의도치 않게 XML Parser 에 의해 잘못 인식되는 것을 막기 위함.
2) XHTML이 아닌 HTML로 인식되는 경우에도 JAVASCRIPT가 문제없이 동작하도록 하기 위함.
3) javascript안에서 태그를 사용할 경우 CDATA 선을 해줘서 오류처리를 막기 위함.

 * 사용예제
<script>
//<![CDATA[
 JAVASCRIPT
//]]>
</script>

 //<![CDATA[
    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // // 카카오톡 링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    Kakao.Link.createTalkLinkButton({
      container: '#kakao-link-btn',
      label: '카카오링크 샘플에 오신 것을 환영합니다.',
      image: {
        src: 'http://dn.api1.kage.kakao.co.kr/14/dn/btqaWmFftyx/tBbQPH764Maw2R6IBhXd6K/o.jpg',
        width: '300',
        height: '200'
      },
      webButton: {
        text: '카카오 디벨로퍼스',
        url: 'https://dev.kakao.com/docs/js' // 앱 설정의 웹 플랫폼에 등록한 도메인의 URL이어야 합니다.
      }
    });
  //]]>

 

가끔 JAVASCRIPT 소스를 보다보면 아래처럼 스크립트 태그 내부에 <!--  -->로 영역을

잡아놓은 소스를 볼수있습니다.

 

<script>

<!--

  스크립트 내용

-->

</script>

 

이와 같이 짜여진 이유는 자바스크립트가 만들어진 초창기에 웹브라우저가

자바스크립트로 인식하지 못하고 html로 인식하여 인터프리팅 하는 것을 방지하기 위해서였습니다.

html 주석으로 감싸 스크립트 부분을 주석으로 인식하게 하는 것이죠.

하지만 현재에는 거의 사용하지 않는 방식이며 대신 

 

<script>

//<![CDATA[

스크립트 내용

//]]>

</script>

 

위와 같은 방식으로 변하였습니다.

웹 브라우저가 자바스크립트를 충분히 인식할 만큼 발전 하였지만 아직도 구분을 해주는 이유는 무엇일까요?

그것은 자바 스크립트를 인식을 하기는 하지만 

브라우저가 해당 페이지를 XHTML이 아닌 HTML로 인식하게되면 작동하지 않기 때문입니다.

(구 버전의 브라우저에서는 Content-type을 정해주지 않으면 정말 HTML로 인식하는 브라우저(IE)가 있었습니다.)

 

또 다른 문제점은 XML Parser에 있는데 XML Parser는 < 를 새로운 엘리먼트로 인식하며

&는 문자 엔티티로 인식하기 때문에 파싱중 에러로 인식합니다.

그래서 자바스크립트 부분만 CDATA( Unparsed Character Data)로 감싸서 XML Parser로 부터 자유로워질 수 있게 됩니다.