자바스크립트 비동기 코드(Javascript asyncronous code)

자바스크립트비동기코드
(AsynchronousCodeinJavascript)

개인적으로공부한내용을정리한것으로잘못된내용이있을수있습니다.

목차
1.비동기코드란?
2.자바스크립트비동기코드작성방법
Callback
Promise
Async & Await

비동기코드작성법에대해알아보자.

다음코드의결과는?
console.log('Before');
const user = getUser(1);
console.log(user);
console.log('After');
function getUser(id){
setTimeout(()=>{
return {id: id, gitHubUserName: 'Sony'};
}, 2000);
}

위예제를실행한결과는다음과같다.
Before
undefined
After

user 는 undefined 가뜬다.
그이유는 getUser() 함수가실행하는 setTimeout() 함수가비동
기함수이기때문이다.

어떻게하면비동기함수를제어할수있을까?
자바스크립트에서비동기코드를작성하는방법은크게세가지가있다.
다음세가지방법을이용하여위문제를해결해보자.

비동기코드를작성하는방법
1. Callback
2. Promise
3. Async&await

Callback
getUser(1, user => console.log(user));
function getUser(id, callback){
setTimeout(()=>{
callback({id: id, gitHubUserName: 'Sony'});
}, 2000);
}

위코드를보면콜백함수를이용해서비동기처리를했다.
위코드를실행한결과는다음과같다.

Before
After
{ id: 1, gitHubUserName: 'Sony' }
위예제는특정유저의객체( user object )를가져오는간단한로직이다.
로직을조금더추가해보자

1. getUser() :특정유저객체( user object )를가져온다.
2. getRepositories() :해당유저의깃허브레퍼지토리를가져온다.
3. getCommits() :해당레퍼지토리의커밋을가져온다.

CallbackHell
getUser(1, (user)=>{
console.log('User', user);
getRepositories(user.gitHubUserName, (repos) =>{
console.log('Repos', repos);
getCommits(repos, (commits)=>{
console.log("Commits", commits);
})
})
})

CallbackHell
콜백이콜백을호출하는구조이다.
따라서코드는더복잡해지고가독성이낮아지는문제가발생한다.

어떻게하면CallbackHell을해결할수있을까?

CallbackHell에서벗어나기
익명의콜백함수를이름있는named함수로대체한다.
})
})
})

getUser(1, gRepositories);
function gRepositories(user) {
getRepositories(user.gitHubUserName, gCommits);
}
function gCommits(repos) {
getCommits(repos, displayCommits);
}
function displayCommits(commits) {
console.log('Commits', commits);
}

getUser(1, (user) => {
})
})
})
위처럼중첩된콜백을가진기존코드가아래와같이변경되었다.
getUser(1, gRepositories);

named함수를사용해서콜백지옥(callbackhell)에서벗어났다.

하지만필요한함수가늘어나코드가길어졌고가독성도좋지않다.

비동기코드를작성하는더좋은방법은없을까?

Promise란
Promise는비동기이벤트작업의결과를리턴하는객체이다.
Promise객체는비동기작업이완료되었을때
결과값( value )또는에러( error )를리턴한다.

Promise의상태(state)정보
프로미스객체는다음세가지상태중하나를갖는다.
1. Pending
promise객체를생성했을때의상태
2. Resolved / Fulfilled
비동기처리가정상적으로이루어졌을때의상태
value 를리턴한다.
3. Rejected
비동기처리가실패했을때의상태
error 를리턴한다.

Promiseobject
Promise를사용하기위해 Promise 객체를생성한다.
Promise객체는아래와같은명령어로생성한다.
new Promise((resolve,reject)={})
Promise객체는두개의파라미터( resolve , reject )를인자값으로
받는다.
resolve , reject 는모두함수이다.

resolve 는비동기처리가성공했을때의결과( value )를리턴한다.
reject 는비동기처리가실패했을때에러( error )를리턴한다.

Promise가리턴한결과값은어떻게받을까?

Promise객체는 then 과 catch 라는두메서드를갖는다.
then :Promise객체가 resolve 한결과값을받는다.
catch :Promise객체가 reject 한결과값을받는다.

Promise 를이용해비동기작업을처리해보자
const p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1);
}, 2000);
});
p.then(result => console.log('Result: ', result));
위코드를실행하면2초뒤에아래와같은결과값을얻는다.
Result: 1

이번에는비동기작업도중에에러를발생시켜보자.
const p = new Promise((resolve, reject) => {
setTimeout(() => {
// resolve(1);
reject(new Error('ERROR!!!'));
}, 2000);
});
p.then(result => console.log('Result: ', result))
.catch(err => console.log('Error: ', err.message));
위코드를실행하면2초뒤에아래와같은결과값을얻는다.
Error: ERROR!!!

비동기작업은callback이아닌Promise를사용하자

콜백함수를인자값으로받는비동기함수를
Promise를리턴하는함수로수정하는방법

1.Promise객체를return하도록한다.
2.callback함수부분을resolve로바꾼다.

setTimeout(() => {
callback({ id: id, gitHubUsername: 'sony' });
}, 2000);
}
callback 함수부분을 Promise 객체의 resolve 로대체한다
function getUser(id) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ id: id, gitHubUsername: 'sony' });
}, 2000);
});
}
resolve 는비동기처리결과값( value )을리턴한다.
위예제에서의결과값( value )은 { id: id, gitHubUsername:
'sony' } 이다.

Exercise
위에서배운내용을바탕으로다음코드를수정해보자.

getRepositories(user.gitHubUsername, (repos) => {
getCommits(repos[0], (commits) => {
console.log(commits);
})
})
});
setTimeout(() => {
console.log('Reading a user from a database...');
callback({ id: id, gitHubUsername: 'sony' });
}, 2000);
}
function getRepositories(username, callback) {
setTimeout(() => {
console.log('Calling GitHub API...');
callback(['repo1', 'repo2', 'repo3']);
}, 2000);
}
function getCommits(repo, callback) {
setTimeout(() => {
callback(['commit']);
}, 2000);
}

수정한코드는다음과같다.

getUser(1)
.then(user => getRepositories(user.gitHubUsername))
.then(repos => getCommits(repos[0]))
.then(commits => console.log(commits))
.catch(err => console.log("Error", err.message));
setTimeout(() => {
resolve({ id: id, gitHubUsername: 'sony' });
}, 2000);
});
}
function getRepositories(username) {
setTimeout(() => {
resolve(['repo1', 'repo2', 'repo3']);
}, 2000);
})
}
function getCommits(repo) {
setTimeout(() => {
resolve(['commit']);
}, 2000);
})
}

// callback based approach
getRepositories(user.gitHubUsername, (repos) => {
getCommits(repos[0], (commits) => {
})
})
});
// promise based approach
getUser(1)

Asnyc&Await이란
비동기코드를동기코드처럼보이게해준다.
코드가간결해지고가독성이높아진다.

// Promise-based approach
getUser(1)
.then(commits => console.log('Commits', commits));
위코드는 Promise 기반으로작성한비동기코드이다.
위코드를 Async & Await 을이용하여작성해보자.

// Promise-based approach
getUser(1)
.then(commits => console.log('Commits', commits));
// Async & Await based approach
const user = await getUser(1);
const repos = await getRepositories(user.gitHubUsername);
const commits = await getCommits(repos[0]);

각각의변수에는Promise함수가resolve한결과값이담긴다.
user 에는 getUser() 에서resolve한값이담긴다.
repos 에는 getRopositories() 에서resolve한값이담긴다.
commits 에는 getCommits() 에서resolve한값이담긴다.

await을사용하기위해서는async키워드가붙은함수가필요하다.
async function displayCommits() {
}
displayCommits();

displayCommits();
}
setTimeout(() => {
resolve({ id: id, gitHubUsername: 'mosh' });
}, 2000);
});
}
function getRepositories(username) {
setTimeout(() => {
resolve(['repo1', 'repo2', 'repo3']);
}, 2000);
})
}
function getCommits(repo) {
setTimeout(() => {
resolve(['commit']);
}, 2000);
})
}

Syntacticsugar
Async&AwaitarebuiltontopofPromises
Async & Await 의내부적인동작방식은 Promise 와동일하다.

마치Javascript에서 class 명령어를사용해도내부적으로는
prototype 형태로객체를생성하는것과비슷하다.
동기(synchronous)코드처럼보이지만사실은비동기로동작하는코드
이다.

try..catch
Async & Await 에서에러처리를하기위해서는 try..catch 구문
을사용한다.
try {
const repos = await getRepositories(user.gitHubUsername
} catch (error) {
console.log('Error', error.message);
}
}
displayCommits();

// Callback based approach
console.log("Commits", commits);
})
})
})
// Promise based approach
getUser(1)
}

자바스크립트비동기코드작성방법
Callback
Promise
Async & Await

Callback
CallbackHell문제..Promise나Async&Await을사용하자

1.Promise객체는다음세가지상태를갖는다.
1. Pending
2. Resolved / Fulfilled
3. Rejected

2.비동기결과를확인하기위해다음두메서드를사용한다.
then :Promise객체가 resolve 한결과값을받는다.‑성공
catch :Promise객체가 reject 한결과값을받는다.‑실패

1.비동기코드를동기코드처럼보이게해준다.
2.await은async키워드가붙은함수안에서사용한다.
3.error처리를위해서는try‑catch문으로감싸준다.
4.내부동작은Promise와동일하다.

Promise와Async&Await의내부동작방식은동일하다.
어떠것을사용하냐는개인취향이다.
따라서팀또는개인의선호도에따라사용하면될것같다.

질문&피드백환영합니다.

자바스크립트 비동기 코드(Javascript asyncronous code)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 자바스크립트 비동기 코드(Javascript asyncronous code)

Similar to 자바스크립트 비동기 코드(Javascript asyncronous code) (20)

Recently uploaded

Recently uploaded (20)

자바스크립트 비동기 코드(Javascript asyncronous code)