[Wecode 5일차] promise패턴, 바닐라 자바스크립트 복습

1. 자바스크립트로 api 호출하는 방법(비동기 요청방식, AJAX)

    

  1) 초기에는 XML Http Request(XHR) 요청방식으로  사용하다가 Ajax 방식이 나왔다.

 

  Ajax 방식이란?? 

 

  => 서버와 자유롭게 통신할 수 있고, 페이지 깜빡임 없이 seamless하게 작동하는  방식.

   

  2) fetch.then.catch() : Ajax의 최신기술 fetch API 이며, promise 방식의 기반임.

      문제점은 디버깅이 어렵고,  들여쓰기, 예외처리에 어려움이 있어서 ES7 에서 async, await 이 나왔다.

 

   3) Async, await : 비동기를 동기식처럼 보이게 코딩.. 익숙한 방식이다. 다만 사용함수 앞에

       Async, await을 붙여줘야 한다.

   

 async function getData() {
  const callJSON = await fetch('../data/getAllTimeline.json'); //api호출
  const convertToJson = await callJSON.json();  //json파일로 가져오기
  let listItem = convertToJson.result; 
 }

 

2.  자바스크립트에서 태그들에 사용된 css를 확인하는 방법 

  1) window.getComputedStyle(확인하고자하는 태그) 를 이용해서 css값을 컨트롤 할 수 있다.

 

3. form 태그 사용시 

   1) 버튼에 반드시 type= "submit"을 넣어야하고, 해당 버튼 이벤트에 e.preventDefault(); 를 넣어야 한다.

       * 안넣을 경우, 버튼 이벤트 후속으로 이벤트가 전달되기때문에 새로고침현상이 일어나서 데이터가 소실된다.

 

4. 반응형 웹을 위한 @media 쿼리 사용

   1) max-width, width 이용.    

@media(max-width : 571px){
  #login-root{
    width :100%;
  } 
}

화면이 571픽셀 이하가 될 경우, 
위와 같이 명시된 태그의 값을 설정하면,
해당 설정값이 적용된다.

5. css에서 화면 가운데 넣는법 ( 거의 공식)     

position :absolute;
margin :50%;
left : -75px;

 

미니 트위터를 만들면서,  그동안 잘 사용하지 않았던, 애니메이션, z-index, position, @media 개념에 대해 완전 숙달완료.