빨간색코딩

참조문서 : https://blog.seotory.com/post/2016/04/understand-jsonp JSONP는 json with padding의 약자이다. 태그는 SOP 정책에 속하지 않는다는 점을 이용해, 서로 다른 도메인간의 javascript 호출을 위하여 jsonp가 사용되었다. 1. 원리 API서버에 데이터를 요청할 페이지에서 서버의 데이터를 받아 처리할 콜백 함수를 준비한다. 그 후에 script 태그를 생성하고 API서버에 request한다. 데이터 요청을 받은 서버에서는 콜백 함수를 실행하는 스크립트를 출력한다. 이 때 callback 함수의 인자에는 요청받은 데이터(기존 JSON)가 들어간다. 즉, 기존에 서버에서 {"key1" : "value1", "key2" : "valu..

참조문서 https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy https://developer.mozilla.org/ko/docs/Web/HTTP/Access\_control_CORS https://www.w3.org/Security/wiki/Same\_Origin_Policy 클라이언트단에서 해결 브라우저에서 옵션 변경 크롬 확장프로그램 플러그인 JSONP 서버단에서 해결 CORS 이외에도 document.domain 속성을 사용하는 방법, Cross-document messaging 등이 있다. 1. 동일 출처 정책(SOP) 만약 나의 API서버를 외부 웹 서비스에서 막 접근해서 가져다 쓴다면 문제가 있다. 따라서 이런 행위를 차..

참조문서 : http://api.jquery.com/ 제이쿼리는 DOM을 조작하거나 Ajax 요청을 할 때 널리 쓰이는 라이브러리다. 제이쿼리로 할 수 있는 건 모두 DOM API로도 할 수 있다. 하지만 제이쿼리를 쓰면 다음과 같은 장점이 있다. 브라우저 호환성을 걱정안해도 된다. Ajax 관련 API가 무척 단순하다. 내장된 DOM API를 더 유용하고 단순하게 바꾼 메소드를 제공한다. 주로 달러기호($)로 표현하며, 제이쿼리를 불러올 때는 이런식으로 CDN을 이용하면 된다. 1. DOM 기다리기 제이쿼리에서는 브라우저가 페이지를 완전히 읽고 DOM을 구축한 다음에만 호출되는 콜백함수가 있다.$(document).ready(function () {} // 단축표기 $(function() {}); 2...

참조문서 : https://developer.mozilla.org/en-US/docs/web/api 1. 문서 객체 모델(Document Object Model) 문서객체모델(DOM)은 HTML문서의 구조를 나타내는 표기법이며 브라우저가 HTML문서를 조작하는 핵심이다. DOM은 트리 구조로 표현하며 노드로 구성된다. root 노드를 document라고 부른다. DOM 트리의 모든 노드는 Node 클래스의 인스턴스이다. Node 객체에는 트리구조를 나타내는 parentNode와 childNodes 속성, 자신에 대한 속성인 nodeName과 nodeType이 있다. 2. get 메소드 DOM에는 원하는 HTML 요소를 빨리 찾을 수 있는 메소드들이 있다. DOM 메소드들이 반환하는 컬렉션은 JS배열같은 ..

JS를 이용한 HTML includeHTML에서 보통 머릿말, 꼬리말, 메뉴바 등이 흔하게 중복된다.(서버사이드언어나 동적언어를 사용하지 않는다면 메뉴가 바뀔때마다 전부다 수동으로 바꾸어 주어야한다.) 이러한 문제를 해결하는 방법에는 여러가지가 있겠지만 AJAX를 이용해서 해결해보자 1. 사용법에 를 넣어준다.에 를 넣고 를 호출해준다. 여기서는 navbar를 관리하고 있다.2. includeHTML.js 코드function includeHTML() { var z, i, elmnt, file, xhttp; z = document.getElementsByTagName("*"); for (i = 0; i < z.length; i++) { elmnt = z[i]; file = elmnt.getAttribute..