안녕하세요.
Hynn 입니다.
이전 Promise 포스팅에 이어서 , Async, Await Method 에 대한 학습을 이어서 진행해보도록 하겠습니다.
Async 와 Await 함수는, 한 세트로 비동기 함수입니다. 이 비동기함수는 이전 포스팅에서도 이야기한 비동기식 구조로, JavaScript 기본적 동작인 동기식 구조와는 다르기도 합니다.
하지만 이 Async, Await 의 핵심은 문법에 나와있지 않아도, "암시적" 으로Promise 를 사용하여 결과를 반환합니다.
즉 Promise Object , 객체화가 되지만, 문법의 구조는 일반적인 동기 함수와 유사한 Function 입니다.
=============
1. Async/Await 이해하기
2. 읽기 좋은 코드란 무엇인가요?
3. 작동 예시 사용해보기
=============
1. Async/Await 이해하기
Async 의 먼저 기본 문법부터 살펴보도록 하겠습니다.
특별한 상황이 아니라면, 이제 저는 Arrow Function 으로 작성할 예정입니다.
async (()=> {})
Async 함수는 사실 예제를 작성하기 위해서는, Await 와 같이 사용이 되어야 예제가 보다 이해가 쉽기 때문에, 어떠한 개념인지에 대한 설명이 먼저 필요합니다.
왜냐면 위에서 설명했듯이, Async 의 기본적인 사용 목적은 동기식 함수를 비동기 함수로 동작하도록 하게 할 뿐 아니라, Promise Object 로 반환하는 기능이 포함되어 있기 때문입니다.
이를 통해 궁극적으로는 최초 포스팅에서도 밝혔듯, 서버에서 받아온 데이터를 처리하기 보다 좋은 가장 최근의 문법입니다.
이는 근본적으로, "읽기 좋은" 코드가 되기도 합니다.
여기에, Await 가 추가로 존재합니다.
여기서 Await 의 역활은, Promise 를 "기다리기" 위해 사용합니다. 또한 Await 는 "반드시" Async 내에서만 사용해야 합니다. 그렇지 않은 경우, "Syntax Error" 가 무조건 발생합니다.
즉, Async 만을 단독으로 사용할 수는 있으나, 이 함수를 사용할때는, Await 와 섞어 사용해야, 효율적이고, Await 는 Async 가 없으면 사용 자체도 할 수 없는 함수인 거죠.
그러면 이 코드를 사용해서 왜 "읽기 좋은" 코드인지 살펴보도록 하겠습니다.
2. 읽기 좋은 코드란 무엇인가요?
개발자들에게 흔히 "Callback Hell" 이라고 하는 명칭이 있습니다.
이를 작게 표현하면 아래와 같은 구조를 만들 수 있습니다.
const avante = (a) => {
setTimeout(() => {
console.log("Avante Go")
a()
}, 3000)
}
const sonata = (a) => {
setTimeout(() => {
console.log("Sonata Go")
a()
},2000)
}
const genesys = (a) => {
setTimeout(() => {
console.log("Gensys Go")
a()
},1000)
}
avante(()=>{
avante(()=>{
genesys(()=>{
sonata(()=>{
avante(()=>{
sonata(()=>{
console.log('end')
})
})
})
})
})
})
각각의 변수를 선언하고, 각각의 변수를 순차적으로 실행하려면 위의 Callback Hell 구조처럼, 들여쓰기 형태로 계속 그려지고,
모양이 점점 커지는 구조를 Callback Hell 이라고 부릅니다.
위의 간단한 코드는 이쁜 모양이라고 생각할 수도 있지만, 아래의 중괄호,소괄호를 닫는 위치에 별도의 코드가 들어간다면 그야말로 읽는 사람도 매우 힘들어지는 구조를 가지고 있습니다.
이를 Promise 를 사용하여 조금 더 가독성이 있게 작성이 가능합니다.
const avante = () => {
return new Promise((resolve, reject)=>{
setTimeout(() => {
resolve('avante success')
},3000)
})
}
const sonata = () => {
return new Promise((resolve, reject)=>{
setTimeout(() => {
resolve('sonata success')
},2000)
})
}
const genesys = () => {
return new Promise((resolve, reject)=>{
setTimeout(() => {
resolve('genesys success')
},1000)
})
}
avante().
then((a)=>{
console.log(a)
return sonata()
})
.then((a)=>{
console.log(a)
return avante()
})
.then((a)=>{
console.log(a)
return avante()
})
.then((a)=>{
console.log(a)
return genesys()
})
하지만 위의 코드를 보시면, 첫번째 예시에 비해서, 변수 선언이나, 작성의 대한 글자 수가 증가하고, 작성하는 사람의 효율이 떨어지기 마련입니다.
Promise Object 는 이전의 포스팅에서 설명드린 것 처럼, 특정한 목적 등이 존재하기 때문에, 상황에 따라서는 오히려 효율적이지 못한 경우도 발생할 수 있습니다.
여기서 이제 Async와, Await 를 사용하면, 보다 가독성이 좋아지는, "읽기 좋은" 코드가 될 수 있습니다.
3. 작동 예시 사용해보기
위의 예시를 가지고 간단하게 작성해보도록 하겠습니다.
const avante = () => {
return new Promise((resolve, reject)=>{
setTimeout(() => {
resolve('avante success')
},3000)
})
}
const sonata = () => {
return new Promise((resolve, reject)=>{
setTimeout(() => {
resolve('sonata success')
},2000)
})
}
const genesys = () => {
return new Promise((resolve, reject)=>{
setTimeout(() => {
resolve('genesys success')
},1000)
})
}
const init = async() => {
const result = await avante()
console.log(result)
const result2 = await avante()
console.log(result2)
const result3 = await genesys()
console.log(result3)
const result4 = await sonata()
console.log(result4)
const result5 = await avante()
console.log(result5)
const result6 = await sonata()
console.log(result6)
}
init()
변수는 Promise Object 로, Resolve 일 경우, 변수명+Succes 로 나타나도록 작성을 했고, 각각의 변수에 3초,2초,1초의 지연시간을 부여했습니다.
일반적으로 작성한다면, Callback Hell 처럼 작성하지 않을 경우, 각각 3초,2초,1초 독립 실행이기때문에 1초로 작성한 것이 먼저, 2초가 그 뒤, 3초가 그 뒤에 출력하는 형태이지만, Callback Hell, Promise Object, Async/Await 3가지로 동일한 결과물을 작성을 했을 때, 코드의 복잡성 까지 더해진다면, 읽는 사람의 입장에서는 이러한 Async/Await 가 가독성이 좋을 수 밖에 없습니다.
이는 분명한 장점이 될 수 있습니다.
즉 위에서 나타난 예시대로라면 아래와 같은 형태의 동작이라고 이해하시면 보다 손쉽게 이해가 가능할 것입니다.
Async 특징 | Await 특징 |
Promise Object 를 생성/관리하는 함수 | Async 사용시에만 사용이 가능 |
동기식 함수라도, Async 를 적용하면 비동기 동작 | await 를 사용하여, 순차실행을 설정할 수 있음 |
보다 쉽게 이해를 하려면 실 작성에서 아래와 같은 예시에서도 작성이 가능합니다.
1) 회원 로그인 페이지를 작성합니다.
2) 회원 로그인 시 End-User(사용자) 는 아이디와 비밀번호를 입력합니다.
3) 사용자가 작성한 Client (PC) 에서 서버, DB 를 거쳐 데이터 일치여부를 확인하는 동안 Async,Await 를 사용하여, 데이터 값의 결과를 반환하기 전까지 완료를 대기하고, Click Event 등의 대한 동작을 진행하도록 작성
이제 다음 포스팅에서는 실제 서비스 작성에 필요한 "DB" 에 대한 기초사항을 공부한 뒤,
실제 구동되는 게시판을 만들어 보도록 하겠습니다.
감사합니다.
'개발공부일지 > NodeJS' 카테고리의 다른 글
NodeJS - Ajax실제 작성예시 따라해보기 (0) | 2023.01.08 |
---|---|
Node.JS - CORS 에 대하여 (0) | 2023.01.04 |
Node.JS - Promise Object 이해하기 (0) | 2022.12.23 |
Node.js - Express,Nunjucks 를 이용해서 기본 웹 서버 만들어보기 (0) | 2022.12.23 |
Node.JS - 기초 개념 이해하기 (0) | 2022.12.19 |
댓글