DeepDive JS - 12일차 // 41,43-45장

41장 타이머

타이머 함수?

일정 시간 경과된 이후에 호출되도록 함수 호출을 예약하기위해 타이머 함수를 사용

 

주요 타이머 함수 

setTimeOut

setTimeout(callback, delay, ...args)

delay후 callback을 한 번만 실행

 

clearTimeout

setTimeout() 실행 취소

 

setInterval

setInterval(callback, delay, ...args)

delay간격으로 callback을 반복 실행

 

clearInterval

setInterval() 실행 취소

 

디바운스와 스로틀

디바운스 : 짧은 시간 가격으로 발생하는 이벤트를 그룹화, 마지막에 한 번만 이벤트 핸들러가 호출되도록
스로틀 : 일정 시간 간격마다 실행

 

 

43장 Ajax

Ajax란 ? async JS and XML , 비동기적으로 서버와 데이터를 주고 받아 페이지 전체를

새로고침하지 않고도 일부를 업데이트 하는 기술 

 

Ajax 장점
페이지 전체 새로고침 없이 필요한 데이터만 요청 가능

서버 응답을 기다리지 않고 즉시 다음 코드 실행 가능 (비동기 통신)

불필요한 데이터 통신 최소화

JSON : 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷

JSON.stringify/parse

 

XMLHttpRequest

XMLHttpRequest 객체의 프로퍼티와 메서드 // 책 보면 됨 
HTTP 5가지 요청 메서드(GET,POST,PUT,PTACH,DELETE) 

 

 

 

44장 REST API

REST API 구성요소 

자원 : 서버에 존재하는 데이터 (URI)

행위 : 클라이언트가 서버에서 수행하는 동작 (HTTP 요청 메서드)

표현 : 자원의 상태 및 행위의 결과 (페이로드)

REST API 설계 원칙

1.URI는 리소스를 표현해야 함

URI는 명사를 사용하여 표현해야 하며, 동사를 포함하지 않아야 함

GET, POST, DELETE 등의 HTTP 메서드가 행위를 나타냄

ex) GET /todos /1 

2.리소스에 대한 행위는 HTTP 요청 메서드로 표현 

 

 

 

 

45장 프로미스 : 비동기 작업의 결과를 나타내는 객체로, 비동기 처리의 상태를 관리
프로미스 3가지 상태 

pending : 초기 상태(아직 결과 없음)

fulfilled : 비동기 작업 성공 (resolved( ) 호출됨)
rejected : 비동기 작업 실패 (reject( ) 호출됨 )

 

프로미스 생성

const promise = new Promise((resolve, reject) => {
    let success = true;
    setTimeout(() => {
        if (success) resolve("작업 성공!");
        else reject("작업 실패!");
    }, 1000);
});

프로미스 후속 처리 메서드 then, catch, finally

promise
    .then(result => console.log(result))  // 성공 시 실행
    .catch(error => console.error(error)) // 실패 시 실행
    .finally(() => console.log("작업 완료!")); // 무조건 실행

 

프로미스 체이닝

fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(response => response.json())
    .then(post => fetch(`https://jsonplaceholder.typicode.com/users/${post.userId}`))
    .then(response => response.json())
    .then(user => console.log("작성자:", user.name))
    .catch(error => console.error(error));

 

Promise.all 과 Promise.race

const p1 = new Promise(resolve => setTimeout(() => resolve("첫 번째 완료"), 3000));
const p2 = new Promise(resolve => setTimeout(() => resolve("두 번째 완료"), 1000));

Promise.all([p1, p2]).then(console.log); // 모든 프로미스 완료 후 결과 반환
Promise.race([p1, p2]).then(console.log); // 가장 빨리 끝난 프로미스만 반환

 

마이크로태스크 큐 > 태스크 큐 보다 우선순위가 높음

fetch/Axios