[setTimeout/setInterval, EventListener, Ajax통신, CORS란?]

* setTimeout

setTimeout( function() { }, delay};

- 내부에 위치한 function은 '콜백함수' 로, 지연시간 뒤에 실행될 코드를 설정한다. ( 지연시간 : ms 단위)

- setTimeout 은 비동기로 실행되어, 동기적인 다른 실행이 끝나야 실행된다. 

function run(){
      console.log("run start");
  setTimeout(function(){
      var msg = "run run run ";
      console.log(msg);
  },   2000);
	console.log("run end");
}

-"run start", "run end" 실행 후, "run run run " 실행 된다. 

* setInterval

setInterval( function() { ..}, delay);

- 이미지나 광고 등을 일정하게 정해진 시간 간격으로 바뀌게 적용하는 경우에 적합 

 

+ setInterval 멈추기 : clearInterval 

startAlert = function(){
  playAlert = setInterval(
    function(){
      alert("http://dobbyisfree");}, 3000);
};

stopAlert = function(){
  clearInterval(playAlert);
}

---

* DOM ( Document Object Model )

 

: 브라우저에서는 html 코드를 DOM 이라는 객체형태의 모델로 저장한다. 이렇게 저장된 정보를 DOM Tree 라고 한다. 

-> 최상위 루트 : document >> 브라우저는 DOM Tree 를 찾고, 조작하는 걸 쉽게 도와주는 DOM API 를 제공한다. 

 

- getElementById()

- Element.querySelector()

.. css selector 들을 많이 찾아보기 

---

* Event 와 EventListener 

- 브라우저가 이벤트 리스너를 호출할 때, 사용자로부터 어떤 이벤트가 발생했는지에 대한 정보를 담은 

'이벤트 객체' 를 생성하여, 리스너 함수에 전달한다. 

var el = document.querySelector(".outside");

el.addEventListener("click", function(e){
  var target = e.target;
  console.log(target.className, target.nodeName);
});

* Ajax 통신  

- 서버로부터 데이터를 비동기로 가져오는것 

- 웹에 데이터를 갱신할 때, 그때마다 서버에서 새로운 데이터를 만들어서 보여줘야 되니까 매번 새로운 페이지를 내려줘서 보여주는 방식이었는데, 필요한 부분만 데이터를 가져와서, 새로고침 없이 전체 웹페이지에서 일부분만  데이터를 갱신할 수 있게 한다. 

function ajax(data){
  var oReq = new XMLHttpRequest();
          oReq.addEventListener("load", function(){
            console.log(this.responseText);
          });
  oReq.open("GET", "http://www.example.org/getData?data=data");
  oReq.send();
  
}

 

: XMLHttpRequest 객체를 생성 - open 메소드로 요청 준비 - send 메소드로 서버에 보낸다. 

서버에서 응답이오면, load 이벤트가 발생, 콜백함수 실행 

--> 콜백함수가 실행될 때는 이미 ajax 함수는 반환하고, 콜 스택에서 사라진 상태 (setTimeout 함수랑 비슷 )

 

  <article>

    </article>
    <input type="button" value="fetch" onclick=
    "
      fetch('html').then(function(response){
      response.text().then(function(text){
      document.querySelector('article').innerHTML = text;
      })
    })
    ">

: fetch api 에서 서버에 접속해서 해당 파일을 요청

-> 서버에 요청해서 'html' 이라는 파일을 요청

: 'article' 이라는 선택자에 우리가 알게된 'html' 내용을 innerHTML 한다. 

 

* fetch ->> 페이지 안에서 특정한 부분으로 접속하고 싶을 때 : hash ( Bookmark )

특정 부분을 fragment, 특정 부분을 식별해줄 id 값을 fragment identifier 라고 한다. 

 

location.hash 를 통해, 이 identifier 를 얻어낼 수 있게 된다.  

이를 다른 태그에서 사용 가능 

ex)  <a href ="#!three">... //three : fragment identifier

    <li><a href="#!html" onclick="fetchPage('html')">HTML</a></li>
    <li><a href="#!css" onclick="fetchPage('css')">css</a></li>
    <li><a href="#!javascript" onclick="fetchPage('javascript')">js</a></li>

  if(location.hash){
    fetchPage(location.hash.substr(2));
  }
  else{
    fetchPage('WELCOME');
  }

: 다른 사람에게 url 을 공유해서 똑같은 화면을 보고자 할 때 ,

location.hash 가 존재한다면 fetchPage 를 통해 해시값 전달 -> '#!...' 이므로 두번째 글자 부터 substring

 

// ajax 는 검색엔진 최적화가 잘 안된다. 최근에는 pjax 를 사용 

 

* JSON

- 표준적인 데이터 포맷을 결정하기 위해서 JSON(JavaScript Object Notation) 포맷을 사용 

---

* CORS 란 ? (Cross-Origin Resource Sharing)

위와 같이, XMLHttpRequest(XHR) 객체를 사용함으로써, 페이지 전체를 refresh하지 않고 데이터를 얻을 수 있게 되고, 이는 주로 ajax 통신에서 사용되는 방식이다.

처음 전송되는 리소스의 도메인과 다른 도메인으로부터 리소스가 요청될 경우, 해당 리소스는 cross-origin HTTP 요청에 의해 요청된다. 

CORS 는 웹 서버에게 보안 cross-domain 데이터 전송을 활성화하는 cross-domain 접근 제어권을 부여한다. 

따라서, 웹 브라우저가 사용하는 정보를 읽을 수 있도록 허가된 출처 집합을 서버에게 알려주도록 허용하는 HTTP 헤더를 추가함으로써 동작한다.

{ HTTPMethod("GET")} : 데이터를 가져오거나,  { HTTPMethod("POST")} : 데이터를 서버로 보낸다. 

---

* javascript Debugging

https://developers.google.com/web/tools/chrome-devtools/javascript/?hl=k

Chrome DevTools에서 자바스크립트 디버깅 시작하기  |  Tools for Web Developers