코드잇 학습일기 Day6. Ajax, PATCH/HEAD 메소드, fetch함수, 동기/비동기 실행

오늘 아침은 코드잇 강의로 시작~ 학습일기를 시작한지가 엊그제 같은데 벌써 여섯번째 학습일기이다. 3주가 지났다니... 시간이 정말 빠르다. 오늘은 다양한 메소드와 fetch함수, 비동기 실행의 개념에 대해서 배웠다.

 

코드잇 학습 인증

---

Ajax란 무엇인가?

Ajax는 Asynchronous JavaScript And XML의 줄임말이다. 이 기술은 웹 브라우저가 현재 페이지를 그대로 유지한 채로 서버에 리퀘스트를 보내고 리스폰스를 받아, 새로운 페이지를 로드하지 않고도 변화를 줄 수 있도록 한다. 네이버 지도에서 특정 좌표를 클릭했을 때 전체 페이지가 로드되는 것이 아니라, 해당 좌표의 업체 정보만 추가로 보여지는 것을 예시로 들 수 있다.

 

PATCH 메소드 역할

기존의 데이터를 수정할 때 사용한다. PUT과는 차이점이 있는데, PUT이 새로운 데이터로 기존 데이터를 아예 덮어쓰는 방식이라면, PATCH는 새로운 데이터로 기존 데이터의 일부를 수정하는 방식이다. 

 

{
  "id" : 3,
  "name" : "Heina",
  "age" : 25
}

 

위 데이터에서 이름을 Heina가 아닌 Julia로 바꾸고 싶다고 하면, PUT은 바뀌지 않는 다른 항목들도 모두 적어서 보내주어야 한다. 하지만 PATCH 메소드를 설정해서 보내면 바뀌는 부분인 { "name": "Julia" }만 적어서 보내도 된다.

 

HEAD 메소드 역할

이 메소드는 GET과 비슷한데, 리퀘스트를 보내고 리스폰스를 받을 때 body 부분은 제외하고 딱 head 부분만 받는다는 차이점이 있다. 예를 들어 엄청나게 용량이 큰 파일을 다운로드해야 할때, head 정보로 용량을 미리 확인한 다음 "이렇게 용량이 큰데 그래도 받을 거야?" 라고 미리 물어볼 수 있을 것이다. 

---

웹 API 배우기 챕터가 끝나서 퀴즈도 하나 풀어주고~ 

코드잇 퀴즈

다음 챕터는 비동기 실행과 Promise 객체! 비동기 실험은 처음 들어보는 용어인 것 같다. 다시 강의 고고~

---

fetch 함수와 비동기 실행(+동기실행)

우리는 아래 함수를 실행했을 때 보여지는 순서를 Start! > Response 내용 > End 라고 예측할 수 있을 것이다. 

 

console.log('Start!');

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
  .then((result) => { console.log(result); });
  
console.log('End')

 

그런데 실제로 실행을 하면 그렇지 않다. Start! 다음에 바로 End가 실행되고, 마지막으로 Response 내용이 출력된다. 이것은 fetch 함수에 비동기 실행이 되는 부분이 있기 때문이다.

 

개발자 도구 console 탭에서 코드 실행

 

그렇다면 비동기 실행이란 무엇인가?

fetch 함수는 리퀘스트를 보내고 어떤 객체를 리턴한다. 그리고 그 객체의 then 메소드로 콜백을 등록한다. 이 콜백은 서버로부터 response를 받았을 때 순서대로 실행된다. 그런데 then 메소드는 콜백을 바로 실행하는 것이 아니라 등록만 한다. 그래서 then 메소드가 등록을 하고 나면, 그 다음줄의 console.log('End');가 먼저 작동하는 것이다. 그 후에 서버에 response가 도착하면 콜백이 순서대로 실행된다. 이러한 것을 비동기 실행이라고 한다.

한 문장으로 정리하면, 비동기 실행이란... 특정 작업을 시작하고 완벽하게 다 처리하기 전에, 실행 흐름이 바로 다음 코드로 넘어가고 나중에 콜백이 실행되는 것이라고 정의할 수 있을 것이다.

 

동기 실행이란 무엇인가?

비동기 실행의 반대 의미를 가진 용어이다. 한번 시작한 작업을 모두 처리하고 난 뒤, 다음 코드로 넘어가는 방식을 말한다. (우리에게는 아마도 이게 더 익숙...ㅋㅋㅋ)

 

왜 비동기 실행을 해야하는가?

그렇다면 이렇게 익숙한 방식을 두고 굳이 비동기 실행을 해야하는 이유는 무엇일까? 그 이유는 비동기 실행이 동기 실행에 비해 동일한 작업을 더 빨리 처리할 수 있기 때문이다. 해당 작업이 실행되는 데에는 시간이 걸리는데, 그동안 아무것도 하지 않고 기다린다면 시간이 낭비될 것이기 때문에 우리는 효율성 있는 작업 처리를 위해 비동기 실행을 한다.

 

알고 있으면 좋은 비동기 함수들

setTimeout 함수

이 함수는 특정 함수의 실행을 원하는 시간만큼 뒤로 미뤄주는 역할을 한다. 

 

console.log('a');
setTimeout(() => { console.log('b'); }, 2000);
console.log('c');

 

위와 같은 함수를 실행하면 a, c가 차례대로 출력되고, 2초가 지난 뒤에 b가 출력된다. (2000의 단위는 밀리세컨즈로 2초를 의미)

 

setInterval 함수

interval은 한국어로 '간격'이라는 의미를 가지고 있다. 이 함수는 특정 콜백을 일정한 시간 간격으로 실행하도록 등록하는 함수이다. 

위의 함수에서 setTimeout 부분을 setInterval로 바꾸어 실행해 보았다.

 

console.log('a');
setInterval(() => { console.log('b'); }, 2000);
console.log('c');

 

a와 c가 출력된 후 2초마다 한번씩 b가 출력된다. 

 

개발자도구에서 setInterval 함수 실행

 

개발자 도구의 console 탭에서 실행했을 때 위와 같이 b 앞에 숫자가 카운트되어 올라가는 경우가 있는데, 이것은 b가 n번 출력되었음을 개발자 도구가 간단하게 나타낸 것이다. (현재에는 b가 7번 연속 출력되었다는 의미)

 

addEventListener 메소드

이 메소드는 클릭과 같은 특정 이벤트가 발생했을 때 실행할 콜백을 등록하는 메소드이다. 파라미터로 전달된 콜백이 당장 실행되는 것이 아니라, 나중에 특정 조건을 만족했을 때 (ex. 클릭) 실행되기 때문이다.