try/catch

try {
  //JSON.parse("test");
  throw "Error!";
} catch (e) {
  console.log("Error:" + e);
} finally {
  console.log("Always call!!!");
}

예외처리를 위한 문법
try블럭 내에서 에러가 발생하면 catch 블럭에서 처리할 수 있음
throw를 통해서 일부러 에러를 발생 시킬 수 있음

async function

비동기 함수임을 선언하는 함수.

함수를 실행하면 Promise 객체를 반환

async function f(){
  return 1;
  //프로미스로 감싸서 반환됨!
}

async function f(){
  return Promise.resolve(1);
}

두 함수는 똑같은 결과를 반환함

async/await

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

async function f() {
  let result = await ex1();
  console.log(result);
}

await는 async함수 내에서만 사용 가능
await은 then과 거의 비슷
promise가 완료될 때까지 다음 코드를 실행하지 않고 기다림

HTTP

Hyper Text Transfer Protocol
HTML같은 하이퍼미디어 문서를 전송하기 위한 프로토콜

• 프로토콜 - 데이터를 교환하는 방식을 정의하는 규칙의 집합
  웹에서 이루어지는 모든 데이터 교환의 기초
  (단순히 서버와 통신하는 것을 의미)

Fetch API 옵션

async funcrion insertPost(reqUrl, data){
  const res = await fetch(resqUrl, {
    method: "POST",
    headers: {
      "content-Type": "application/json",
    },
    redirect: "follow",
    body: JSON.strinigy(data),
  });
  return res.json();
}

insertPost("https://blah", {answer:42});

Debouncing과 Throttling

Debouncing

연속적으로 호출되는 함수들 중 마지막 함수만 호출하는 기법

let timer = null;
inputText.onkeydown = (event) => {
  if(timer) clearTimeout(timer);
  if(event.target.value){
    timer = setTimeout(() => {
      //자동완성 호출
    }, 200);
  }
}
//새로운 이벤트가 호출되었을 때,
//timer가 동작 중이라면 제거하고 새롭게 추가하는 방식

사용자의 마지막 행동이 중요
보통 자동완성에서 많이 사용

Throttling

함수 호출되고 일정 시간동안 연속으로 호출되는 함수를 무시하는 기법
(과도하게 함수가 호출되는것을 막기 위함)
주로 스크롤링에 관한 이벤트에서 사용

let timer = null;
body.onscroll = (event) => {
  if(!timer){
    timer = setTimeout(() => {
      timer = null;
      //특정 로직 동작
    }, 200);
  }
}

새로운 이벤트가 발생했을 때, timer가 동작중이라면 무시

REST API

API란?

Application Programming Interface
Application은 모든 소프트웨어를 의미한다.
소프트웨어 간의 통신하기 위한 방법을 정의한 것

REST API

REpresentational State Transfer API
아키텍처 스타일의 디자인 뭔칙을 준수하는 API
HTTP표준을 따르기 때문에 모든 플랫폼에서 활용 가능

REST API의 구성

• 자원(Resource):URI
  * 자원을 구분하는 ID(member/1)
• 행위(Verb) : Http Method
  * HTTP의 method를 의미 (ex. GET, POST,...)
• 표현(Representation)
  * 클라이언트의 요청에 대한 응답 형태(ex. JSON)

REST API의 디자인 원칙

1. URI는 정보의 자원을 표현(리소스 명은 동사보다는 명사 사용)

GET/get/member/1 (X)
GET/members/1 (O)

2. 자원에 대한 행위는 HTTP Method로 표현

GET/members/delete/1(X)
DELETE/members/1(O)

3. URI 마지막 문자로 슬래시(/)를 포함하지 않음

GET/members/1/ (X)
GET/members/1 (O)

4. URI에는 대문자는 웬만하면 사용하지 않음

GET/Members/1 (X)
GET/members/1 (O)

ETC...

---

오늘 수업은 이해가 잘되었다...! 실습도 생각보다 잘 풀어냈고, 콘솔창을 활용해가면서 화면에 구현해나가는게 점점 익숙해지고있다는걸 느꼈다ㅎㅎ