[자바스크립트,javascript] CDATA는 왜 쓰는 것인가?

안녕하세요. 개발자 드리머즈입니다.

javascript용 Kakao SDK를 보고 있는데, 아래와 같이 javascript에서 CDATA를 쓰고 있더라구요.

출처 : https://developer.kakao.com/docs/js/kakao-api#예제-사용자-정보-요청

<script type='text/javascript'>   //<![CDATA[     // 사용할 앱의 JavaScript 키를 설정해 주세요.     Kakao.init('YOUR APP KEY');     // 카카오 로그인 버튼을 생성합니다.     Kakao.Auth.createLoginButton({       container: '#kakao-login-btn',       success: function(authObj) {         // 로그인 성공시, API를 호출합니다.         Kakao.API.request({           url: '/v1/user/me',           success: function(res) {             alert(JSON.stringify(res));           },           fail: function(error) {             alert(JSON.stringify(error));           }         });       },       fail: function(err) {         alert(JSON.stringify(err));       }     });   //]]> </script>

주석 처리도 되어 있는 것 같고.. 빨간색으로 표시한 부분을 삭제하고 테스트해도 잘 되는 것 같아

이걸 왜 쓰는지 알 수 없어.. 한 번 찾아봤습니다.

여러 자료가 있지만 아래의 글이 가장 설명이 좋은 것 같습니다.

간단하게 정리하면,

①CDATA로 감싼 javascript 부분이 의도치않게 XML Parser에 의해 잘못 인식되는 것을 막기 위해

②XHTML이 아닌 HTML로 인식되는 경우에도 javascript가 문제 없이 동작하도록 하기 위해

사용한다고 보면 될 것 같습니다.

출처 : http://timec.tistory.com/57

가끔 JAVASCRIPT 소스를 보다보면 아래처럼 스크립트 태그 내부에 <!--  -->로 영역을 잡아놓은 소스를 볼수있습니다. <script> <!--   스크립트 내용 --> </script> 이와 같이 짜여진 이유는 자바스크립트가 만들어진 초창기에 웹브라우저가 자바스크립트로 인식하지 못하고 html로 인식하여 인터프리팅 하는 것을 방지하기 위해서였습니다. html 주석으로 감싸 스크립트 부분을 주석으로 인식하게 하는 것이죠. 하지만 현재에는 거의 사용하지 않는 방식이며 대신  <script> //<![CDATA[ 스크립트 내용 //]]> </script> 위와 같은 방식으로 변하였습니다. 웹 브라우저가 자바스크립트를 충분히 인식할 만큼 발전 하였지만 아직도 구분을 해주는 이유는 무엇일까요? 그것은 자바 스크립트를 인식을 하기는 하지만  브라우저가 해당 페이지를 XHTML이 아닌 HTML로 인식하게되면 작동하지 않기 때문입니다. (구 버전의 브라우저에서는 Content-type을 정해주지 않으면 정말 HTML로 인식하는 브라우저(IE)가 있었습니다.) 또 다른 문제점은 XML Parser에 있는데 XML Parser는 < 를 새로운 엘리먼트로 인식하며 &는 문자 엔티티로 인식하기 때문에 파싱중 에러로 인식합니다. 그래서 자바스크립트 부분만 CDATA( Unparsed Character Data)로 감싸서 XML Parser로 부터 자유로워질 수 있게 됩니다.