[엘리스 SW 엔지니어 트랙 2기 / TIL] Week 04 - 비동기 통신, Promise

1. 오늘 공부한 내용  📝

1. 비동기 프로그래밍
2. JSON 데이터
3. Promise 익히기
4. Fetch API

비동기 프로그래밍?

• 코드가 완료될 때까지 기다리는 방식이 동기 프로그래밍(현재까지 방식)
• 코드가 실행되고, 완료될 때까지 기다리지 않고 다음 코드를 실행하는 방식이 비동기 프로그래밍

function sleep(ms) {
	const start = Date.now();
	while ((Date.now() - start) < ms);
}

sleep(5000);

• sleep이 동작하는 동안 다른 부분은 실행되지 않고 while문만 계속 반복됨
• 실제로 돌려보면 브라우저가 렉걸린 듯 동작 됨

 

Javascript는 싱글 쓰레드로 동작함.

⇒ 이벤트 루프를 통해 동기 프로그래밍의 단점을 해결

⇒ 실제론 브라우저에서 멀티 쓰레드로 처리되기도 함

 

프로세스 : 우리가 기본적으로 사용하는 프로그램

쓰레드 : 프로그램 내에서 동작하는 일꾼

 

비동기는 어떻게 동작하는 걸까?

console.log("ex1");
setTimeout(() => {
	console.log("ex2);
}, 0);
console.log("ex3");

 

콜백(callback) 함수

• 함수 내에서 호출될 함수를 의미
• 함수를 파라미터로 넘기는 것이 특징
• Arrow Function으로 많이 씀
• 어떤 처리 후 호출될 함수를 정의한다고 생각

 

JSON이란?

• JavaScript Object Notation
  • 이름대로 자바스크립트의 객체 형식을 기반
  • 텍스트로만 이루어짐
  • 데이터를 저장하거나 전송할 때 사용

  {
  	"name" : {
  		"first": "John",
  		"last": "Park"
  	},
  }
  

  • Object와 Array 두가지로 이루어짐
    • Object는 key-value로 표현
    • Array는 배열로 표현
    • 부모 / 자식으로 표현 가능
      • parse : 문자열을 객체로 변환
      • stringify : 객체를 문자열로 변환

 

Promise 익히기

• 비동기를 다루기 위한 객체
  • 비동기 작업의 완료 혹은 실패를 다룰 수 있음
  • 미래의 결과에 따라 어떻게 하겠다는 약속 개념

 

Promise Composition

• 함수들을 동시에 병렬로 실행할 수 있음
• 병렬로 작업을 하고, 모두 완료될 때까지 기다림

Fetch API

• HTTP 요청을 간단하게 조작할 수 있는 인터페이스
• 이전에는 XHR(XMLHttpRequest)을 사용했음, 사용 방법이 매우 간단해짐.
• axios
• status code

 

실습 강의

• 디바운싱 (https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa)

var timer;
document.querySelector('#input').addEventListener('input', function(e) {
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(function() {
    console.log('여기에 ajax 요청', e.target.value);
  }, 200);
});

 

2. 어려웠던 내용  🤯

3. 궁금한 내용 / 부족했던 내용  🧐

• 디바운싱 : 처음 배운 개념인데 꽤 유용하게 사용될 것 같다.

4. 느낀 점 🤔

오늘 강의 내용은 저번 주보다는 괜찮았던 것 같다. 노마드코더 유튜브 클론을 진행하면서 비동기 처리를 배웠고 실제로 프로젝트에 적용해봤기 때문인 것 같다. 코드를 100번 보는 것보다는 1번 따라해보고 실제 사례에 어떻게 적용되는지 배우는게 효과적인 것 같다.

 

Fetch API는 앞으로도 정말 많이 사용될 것이기 때문에 복습. 이전에 Fetch와 Axios가 정확히 뭐가 다르고 어떤 면에서 Axios가 좋은지 알지 못했는데 이 부분에 대해서도 학습이 필요할 것 같다.