[TIL] 동기와 비동기

JongYeon·2025년 1월 10일

TIL

목록 보기
16/69
post-thumbnail

동기

동기 방식은 하나의 코드가 실행이 끝나면 다음 작업이 실행되는 원리이다.

console.log(1);
console.log(2);
console.log(3);
console.log(4);

비동기

비동기 방식은 하나의 코드가 실행이 끝나면 다음작업이 바로 실행되는 응답을 기다리지 않고 다음 코드가 실행이 되는 원리이다.

console.log(1);
setTimeout(() => {
    console.log(2);
}, 500)
console.log(3);
console.log(4);

동기 장단점

  • 장점
    코드가 설계가 간단하고 직관적이다.
  • 단점
    코드가 순서대로 진행되기때문에 중간에 끼어들 수 없다.

비동기 장단점

  • 장점
    다음 코드가 실행되기 전까지 다른 작업을 할 수 있다.
    -단점
    설계가 복잡하고 직관적이지 않다.

Blocking

Blocking은 현재 실행중인 코드가 완료될 때까지 다음 코드의 실행을 멈추게하고 동기 코드에서 흔히 발생한다.

function blockingTask() {
    const start = Date.now();
    while (Date.now() - start < 3000) {

    }
    console.log('블로킹');
}

console.log('안녕');
blockingTask();
console.log('하세요');

안녕
블로킹
하세요

Non-Blocking

Non-Blocking은 다음 코드의 실행을 멈추게하지 않고 비동기 코드에서 볼 수 있다.

function nonblockingTask() {
    const start = Date.now();
    setTimeout(() => {
        console.log('논블로킹');
    }, 500)
}

console.log('안녕');
nonblockingTask();
console.log('하세요');

하루를 마치며

오늘은 정신없는 하루였다. 오전에는 달리기반 수업, 오후에는 실습, 저녁에는 개인과제 특강이 연달아있던 날이라 생각보다 정신이없었고 개인과제를 할 시간이 없어서 9시이후와 주말을 잘 이용해서 과제를 할 것이다. 개인 과제가 쉽지는 않지만 개인과제 특강을 복습하면 충분히 할 수 있다고 생각하기 때문에 끝까지 포기하지않고 할 것 이다.

profile
프론트엔드 공부중

0개의 댓글