자바스크립트 - part 4

동기, 비동기

---

Web APIs (비동기적으로 해주는 내장 함수)

1. DOM API
2. setTimeout
3. setInterval
4. fetch
5. EventListener
6. Ajax

자바스크립트 동기적 실행

function testA(){
    console.log('실행 시작!');
}
testA();
console.log('끝났습니다.');

자바스크립트 비동기적 실행

대표적 비동기 메서드 → setTimeout()

어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우가 있는데요. 이럴 때는 자바스크립트의 setTimeout() 함수를 사용할 수 있다.

setTimeout() 함수는 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두번째 인자로 지연 시간을 밀리초(ms) 단위로 받는다.

콜백 함수

---

• 함수 안에 파라미터 형태로 들어가는 또 다른 함수
• 자바스크립트에서 동기적(순차적)으로 쓰고 싶을 때 사용

document.querySelector('.button').addEventListener('click',() => {
    console.log('버튼 클릭 시 함수가 실행됩니다.');
})

function testA(){
    setTimeout(()=>console.log('A finish'),2000);
    
}

다른 곳에 만든 콜백 함수도 적용 가능

document.querySelector('.button').addEventListener('click',run);

function run(){
    console.log('버튼 클릭 후 함수가 실행됩니다.');
}

간단 예제

function testA(a,b,cb){
    setTimeout(()=> {
        const res = a + b;
        cb(res);
    }, 2000);
    
}
testA(3,5,(res)=>console.log('testA finish : ' + res));
console.log('good');

promise

---

• 콜백 함수가 너무 많아질 때 대신 사용 (빈번하게 사용)
• then, catch, finally
• 프로미스는 비동기적으로 끝난 값을 끝났다고 알려줌
• 콜백이 엄청 많아지는 것을 간결하게 해준다
• Promise를 이용해서 계속해서 메서드 체이닝하는 코딩 스타일은 자바스크립트의 async/await  키워드를 사용하는 방식으로 대체되고 있는 추세

function runDelay(second){
    return new Promise();
}

runDelay(2)
.then(필요한 일 수행)
.catch(에러처리)
.finally(결과 상관없이 무조건 실행)

async / await

---

• 프로미스보다 편하고 가독성이 좋음
• 프로미스를 리턴하는 비동기처리 함수

function delay(ms){
    return new Promise((resolve)=>{
        setTimeout(resolve,ms);
    })
}

async function helloAsync(){
    await delay(3000);
    return 'hello Async';
}

helloAsync().then((res) => console.log(res));

JSON

---

• 서버와 클라이언트(브라우저, 모바일) 간 HTTP 통신을 위한 오브젝트 형태의 텍스트 포맷
• stringify(object) : JSON
• parse(JSON) : object

setInterval() 사용법

웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우가 있는데요. 이럴 때는 자바스크립트의 setInterval() 함수를 사용

setInterval()  함수는 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용