프론트엔드

[자바스크립트] request / response / 콜백 / Fetch / document 개념

음그냥 2023. 1. 20. 22:57
728x90
반응형
SMALL

관련 용어

 

  • request : 웹브라우저가 서버에 요청
  • response : 서버가 보내주는 응답
  • 콜백 : 어떤 조건이 만족 되었을 때 실행되는 함수

 

  fetch

  • 서버로 requset 를 보내고 response 를 받는 함수
  • promise의 객체

 

  then 메소드

  • response가 왔을 때 실행할 콜백을 등록
  • 등록된 콜백들은 then 메소드로 등록한 순서대로 실행
  • 이전 콜백의 리턴값을 이후 콜백이 넘겨 받아서 사용할 수 있음
  • response의 파라미터에는 '객체'가 넘어오기 때문에 response 객체의 text를 호출해야만 실제 내용을 볼 수 있음
  • then의 파라미터는 함수가 들어가야함
fetch('www.naver.com')
	.then((response) => response.text())
    		// fetcth함수가 실행될 때 함께 실행되는 것이 아니라,
		// 서버로부터 response가 온 후에야 실행
            // then 메소드는 콜백을 등록해주는 메소드
            // then 메소드는 promise 객체
 
    .then((result) => { console.log(result); });
    		// 위 then메소드가 실행된 후에야 실행
            // 이전 콜백의 리턴값을 다음 콜백이 넘겨 받음
            // 위의 response.text는 result로 넘어옴
 

 

<자바스크립트 document 객체>
document는 DOM 트리의 최상위 객체이다.
브라우저는 HTML 문서를 로드하기 전에 document 객체를 먼저 만든다.
그리고 document 객체를 뿌리로 하는 DOM 트리를 만든다.

document 객체의 역할은 아래와 같다.
- 프로퍼티로 HTML 문서의 전반적 속성을 나타냄
- 메소드로 DOM 객체 검색
- 메소드로 새로운 DOM 객체 생성
- 메소드로 HTML 문서의 전반적 제어 지원

 

 

 

728x90
LIST