비동기 프로그래밍

코드가 완료될 때까지 기다리는 방식이 동기 프로그래밍

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

자바스크립트는 싱글 쓰레드로 동작하나 이벤트 루프를 통해 동기 프로그래밍의 단점을 해결
=> 실제로는 브라우저에서 멀티 쓰레드로 처리되기도 함.

프로세스: 우리가 기본적으로 사용하는 프로그램
쓰레드: 프로그램 내에서 동작하는 일꾼

web api로 빠질 수 있는 것

• ajax
• setTimeout
• setInterval

callback 함수

function sayHello(name){
  console.log(`Hi, ${name}`)
 }
function sayBye(name){
  console.log(`Bye, ${name}`)
 }

function intro(name, callback){
  callback(name);
 }

intro("John", sayHello);

함수 내에서 호출될 함수를 의미
함수를 파라미터로 넘기는 것이 특징
Arrow Function으로 많이 씀

어떤 처리 후 호출될 함수를 정의한다고 생각

JSON

JavaScript Object Notation

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

{
  "name":{
    "first":"sojeong",
    "last" : "park"
  }
  "age":25,
  "skills":[
    "HTML",
    "CSS",
    "JavaScript"
  ]
}

Object와Array 두가지로 이루어짐
object는 key-value로 표현 ( 키 값은 "따옴표"로 묶어줘야함!
array는 배열로 표현
부모/자식으로 표현 가능
parse:문자열을 객체로 변환
stringify:객체를 문자열로 변환

promise

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

promise 사용방법

const ex1 = new Promise(function (resolve, reject){
  setTimeout(() => resolve("success"), 1000);
});

ex1.then(
  result => alert(result),
  error => alert(error)
);

ex1.then(result => alert(result))
	.catch(error => alert(error))
	.finally(()=> alert("just working"));

then에 인자가 하나라면, 성공했을때만 처리
catch는 에러가 났을 경우에만 처리
finally는 성공/실패 여부와 상관없이 처리할 수 있음(대신 성공/실패 여부를 알 수 없다.)

promise Chaining

promise.then(()=>alert("first"))
		.then(() => alert("second"))
		.catch(() => alert("error"))
		.then(() => alert("after error"));

then / catch / finally 모두 promise를 return하기 때문에 가능
then이 지속적으로 호출되는 도중 에러가 발생한다면, 바로 catch로 넘어감
catch가 호출된 뒤로도 이어 붙일 수 있음

promise Composition

Promise.all([
  func1(),
  func2(),
  func3()
])
	.then(()=> alert("all success"))
	.catch(() => alert("error"));

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

Fetch API

HTTP요청을 간단하게 조작할 수 있는 인터페이스

fetch("https://blah")
	.then(res => res.json())
	.then(data => console.log(data))
	.catch(err => console.log(err));

fetch함수는 Promise를 반환함
주소만 입력해줘도 주소의 정보를 읽어올 수 있음
주로 서버와 정보를 주고 받을 때 사용

---

오늘은 저번주보다는 왜인지 이해를 잘했다...!
실습도 복습하면서 깃헙에 업로드 완
ㅎㅎ
이제 마켓컬리 프로젝트 하러....(마켓컬리 프로젝트는 조만간 정리해서 올려야지,,꼭,,)