동기, 비동기

동기(Synchronous)통신

• request가 있으면 해당 reponse가 전달될 때까지 다른 request를 요청할 수 없는 통신방법이다.

비동기(Asynchronous) 통신

• request를 보내더라도 response를 언제 받아도 상관없이 다른 request를 요청할 수 있는 통신방법이다.
• 예시로 검색창에 검색 시 바로바로 추천 검색단어를 바꿔주는 것이다.

Ajax

• 서버와 브라우저 간 비동기 방식으로 데이터를 교환할 수 있는 통신기능이다. 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 테이터를 로드하는 기법이다.
  

Ajax의 특징

1. 웹 페이지 전체를 다시 로딩하지 않고, 웹 페이지의 일부분만을 갱신할 수 있다.
2. 서버 처리를 기다리지 않고 비동기 요청이 가능하다.
3. 동일출처 정책으로 인해 다른 도메인과는 통신이 불가능하다.
4. 과도한 요청 시 서버에 부하가 걸릴수 있다.
5. 동적으로 화면을 구성하는 만큼 개발자의 구현은 복잡해진다.

API란?

• 

async, await, fetch

fetch

• 비동기 방식의 통신기술 ES6의 최신 문법이다.
• URL을 먼저 넣어줘야한다!! 요청할 서버 주소
  
• API를 활용한 fetch 알아보기

.then()

• 요청결과를 접근하는 함수, 데이터 반환

response.text() : 문자열로 반환

response.json() : 요청결과값을 json형태로 반환

• data의 흐름
  

다음 포스팅 예고