📚 패트스캠퍼스 데브캠프 프론트엔드 6주차 학습 내용을 정리한 내용입니다.
📚 잘못된 정보는 댓글로 알려주시면 정말 감사합니다!
비동기
동기는 하나의 작업이 실행되는 동안 다른 작업을 수행하지 않는 방식인 반면, 비동기는 작업이 종료되기를 기다리지 않고 다음 작업을 병렬적으로 수행할 수 있습니다.
그렇다면 비동기를 잘 이해해야하는 이유는 무엇일까요?
만약 모든 코드가 동기로 처리되는 웹사이트에서 처음 시작되는 작업이 이미지 로딩이고, 이 과정이 30초 걸린다고 가정해 보겠습니다. 이 경우 사용자는 30초 동안 빈 화면을 보며 기다려야 하며, 이때 사용자는 오류가 발생하거나 사이트가 제대로 동작하지 않는다고 느낄 수 있습니다.
하지만 비동기를 잘 이해하고 코드에 반영한다면, 빠르게 처리할 수 있는 작업을 우선적으로 배치하고 비교적 오래 걸리는 작업들은 비동기로 처리할 수 있습니다. 이렇게 하면 사용자 경험을 향상시킬 수 있지 않을까요? 😏
싱글 스레드와 멀티 스레드
여러개의 작업을 한 곳에서 작업하는 것(동시작업 불가)을 싱글 스레드, 여러개의 작업을 여러 곳에서 작업하는 것을 멀티 스레드라고 합니다. 자바스크립트는 싱글 스레드 환경이지만 비동기를 통해 이전 작업이 종료되기를 기다리지 않고 다음 작업을 병렬적으로 수행할 수 있게 됩니다.
프로미스 객체
프로미스는 비동기 작업을 편리하게 도와주는 객체입니다.
new 키워드와 생성자를 사용해서 프로미스 객체를 생성할 수 있고, 객체 생성 시에는 실행함수를 전달해야합니다. 이때 실행함수는 반드시 전달되어야 하는 함수로 프로미스 객체가 생성될 때 자동으로 실행됩니다.
실행함수는 매개변수로 resolve, reject 콜백 함수를 전달 받게 됩니다. 비동기 작업은 작업 처리의 성공 여부에 따라 함수를 다르게 호출해야하는 특징이 있는데, 작업이 성공했을 경우 resolve 함수를 호출하고 실패했을 경우에는 reject 함수를 호출합니다.
const 실행함수 = (resolve, reject) => {
// something work..
}
const promise = new Promise(실행함수);
console.log(promise);위 코드를 실행해보면 아래와 같이 생성된 프로미스 객체는 내부적으로 PromiseState, PromiseResult 2개의 상태를 가지는 것을 알 수 있습니다. 프로미스 객체 생성시 실행함수가 바로 실행되고 이때 state는 pending 상태 였다가 성공(resolve) 했을 경우 fulfilled, 실패(reject) 했을 경우 rejected 상태로 변하게 됩니다.
