잘못사용한 경우
// 잘못사용한 경우
<script>
const searchInquiryUser = async ({ condition, keyword}: ISearchParams) => {
searchCondition.value = condition;
searchKeyword.value = keyword;
await inquiryUser();
};
<script/>
<template>
<UserSearchBar @reload="searchInquiryUser" />
</template>Q - 자바스크립트는 멀티스레드인가 싱글스레드인가?
자바스크립트는 기본적으로단일(싱글)스레드입니다.
여기서 단일 스레드는한번에 한 작업만을 처리할 수 있으며 동시에 여러 작업을 처리할 수 없습니다.
하지만 아래와 같은 방법을 이용하면 자바스크립트에서 동시에 여러작업을 처리할 수 있는비동기적인 동작을 구현할 수 있습니다.
1.비동기함수 호출: 비동기함수 호출은 작업의 완료를 기다리지 않고 다음 코드를 실행하기 때문에, 콜백 함수, Promise, async/await를 사용하여 비동기 작업의 결과를 처리합니다. 작업이 완료된 후에 특정 코드를 실행하거나, 작업의 성공 또는 실패에 대한 처리를 할 수 있습니다.
2.타이머: setTimeout(), setInterval()과 같은 타이머 함수를 사용하여 일정 시간이 경과한 후에 콜백 함수를 실행할 수 있습니다. 이때 타이머는 비동기적으로 동작하며, 타이머가 만료된 후에 콜백 함수를 실행합니다.
즉 자바스크립트는 기본적으로 싱글 스레드 언어 이지만, 해당 동작들을 통해 비동기적인 동작과 멀티 스레드딩 기능을 사용할 수 있습니다.
Q - 비동기처리는?
특정코드의 연산이 끝날 때 까지 기다리지 않고 다음 코드를 실행하는 것을 의미합니다.
// setTimeout을 통한 예시 console.log('1') setTimeout(function (){ console.log('2') },3000) console.log('3') // 1 // 3 // 2 // 하지만 여기서 1 -> 2 -> 3 순서대로 실행을 하려면 어떻게 해야할까?
Q - 그렇다면, 자바스크립트에서는 이러한 비동기처리는가 왜 필요할까요?
우리가 화면에서 서버로 데이터를 요청했을 때, 서버가 언제 데이터를 줄지도 모르는데 마냥 기다릴 수 없기 때문입니다.
만약 간단한 요청 1개만 보냈지만 서버에서 데이터를 100개 이상 보낸다고 가정했을 때 비동기가 아닌 동기로 처리한다면 굉장히 오랜 시간이 걸리게 됩니다.
Q - 비동기적인 코드를 동기적으로 작성하는 것처럼 보이게 만들어주는 것은 무엇일까요?
바로
Promise와 async, await를 이용하면 됩니다.
Promise는?
비동기 작업을 처리하기 위한 객체로 비동기 작업의 완료 또는 실패를 나타내는 결과 값을 제공하며, 해당 작업이 완료될 때까지 다른 코드의 실행을 차단하지 않고 계속 진행할 수 있습니다.
Promise 객체는 다음과 같은 세 가지 상태를 가질 수 있습니다:
- 대기(Pending): 비동기 작업이 아직 완료되지 않은 상태입니다.
- 이행(Fulfilled): 비동기 작업이 성공적으로 완료된 상태입니다.
- 거부(Rejected): 비동기 작업이 실패한 상태입니다.
// Promise 객체의 생성 const promise = new Promise((resolve, reject) => { // 비동기 작업을 수행합니다. if (/* 비동기 작업 수행 성공 */) { resolve('result'); } else { /* 비동기 작업 수행 실패 */ reject('failure reason'); } }); // then 메서드를 사용하여 Promise가 성공적으로 완료된 경우의 처리 promise.then(result => { console.log('비동기 작업이 성공적으로 완료되었습니다. 결과:', result); }).catch(error => { console.error('비동기 작업이 실패하였습니다. 오류:', error); });
async, await는?
async는 함수 선언 앞에 붙여서 해당 함수가 비동기 함수임을 나타냅니다.
await는 비동기 함수호출 앞에 사용이 되며, 해당 함수의 완료를 기다리는 역할을 합니다.
다음은 async와 await를 사용한 예시입니다const getUserData = async () => { try { const res = await axios.get("/api/v1/user"); usersData.value = res.data.body.data; return usersData.value; } catch (error) { console.error(error, 'user-management.vue') } };위의 예시에서 getUserData 함수는 async로 선언되어 있으며, await 키워드를 사용하여 비동기 작업을 동기적으로 처리합니다.
데이터를 가져오는 동안 함수의 실행은 일시 중단되고, 데이터가 완전히 로드된 후에만 다음 코드가 실행됩니다.
async와 await는 코드의 가독성을 향상시켜주고, 비동기 처리를 보다 직관적으로 작성할 수 있게 해줍니다.
