Mysql과 Mysql2의 가장 큰 차이점은 Promise 지원 여부입니다.
Mysql은 Callback 기반으로 동작하는 반면에, Mysql2는 Promise를 지원하며 CallBack과 같이 활용할 수 있습니다.
Mysql에서 Promise를 사용하기 위해서는 별도의 모듈인 'promise-mysql'을 설치해야 하는 번거로움이 있습니다.
여기서 callback과 promise는 비동기 작업을 처리하는 방법입니다.
동기와 비동기
동기(Synchronous)란, 한 작업이 끝날 때까지 다음 작업을 기다리는 방식으로, 순차적으로 작업을 처리합니다.
비동기(Asynchronous)는 한 작업의 완료 여부와 상관없이 다음 작업을 실행하는 방식으로, 한 번에 여러 작업을 처리할 수 있습니다.

callback
파라미터로 함수를 전달받아 함수의 내부에서 실행하는 함수입니다.
// callback
function asyncFun(callback){
console.log('시작');
setTimeout(funcion(){
console.log('완료');
const result = 2
callback(result);
}, 1000);
}
function finalResult(finalResult) {
console.log("결과:", finalResult);
}
asyncFunc(function (result) {
finalResult(result * 2)
});
// '시작'
// '완료'
// '결과: 4'
비동기 함수에서 작업 결과를 전달받아 처리하는 데 사용하면서 작업 순서를 맞출 수 있다는 장점이 있지만, 비동기적인 작업을 처리할 때 콜백 함수를 중첩해서 사용하다 보면 콜백지옥으로 인해 코드가 복잡하고 가독성이 떨어질 수 있는 단점이 존재합니다.
function signup(id, pw){
// 아이디 중복 체크
checkId(id, function(userId){
if (!userId){
// 패스워드 유효성 검사
checkPw(pw, funcion(userPw){
if(!userPw){
// 가입
}
})
}
})
}
promise
callback의 단점을 극복하기 위해 promise라는 비동기 처리를 위한 전용객체가 생겼습니다.
promise는 비동기 작업의 성공 또는 실패와 그 결과값을 나타내는 객체로 promise를 사용하면 비동기 작업을 쉽고 깔끔하게 연결할 수 있게 됩니다.
promise는 생성자 함수를 호출할 때 함수인자로 콜백함수를 선언할 수 있습니다.
콜백함수는 resolve와 reject 두 개의 함수를 인자로 받는데 resolve 메서드는 Promise 객체가 성공 상태가 될 때 호출, reject는 실패 상태가 될 때 호출됩니다.
상태
promise는 생성하고 종료될 때 까지 총 3가지 상태를 갖습니다.
Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해 준 상태
Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
let promise = new Promise((resolve, reject) => {
asyncFun(param, function A(err, result){
if(err){ reject(err) }
else{ resolve(result) }
})
})
promise.then(function(result){
// 성공
}).catch(function(err){
// 실패
})
promise도 체인이 길어질수록 코드가 복잡해지며 가독성이 떨어져 유지보수가 어려워지는 상황이 발생합니다.
async/await
promise의 불편한 점을 해결하기 위해 ES7(ES2017)에서 async/await 문법이 추가되었습니다. 이 코드를 사용하면 비동기 코드를 마치 동기 코드처럼 보이게 작성이 가능합니다.
promise는 catch 메서드를 통해 에러를 받지만, async/await에서는 try/catch로 일관된 예외처리가 가능합니다.
async
- 함수를 비동기 함수로 선언하는 역할로, await를 사용하기 위한 선언문
- function 앞에 async를 붙어줌으로써, 함수내에서 await 키워드를 사용할 수 있게 된다.
- async가 붙은 function의 리턴값은 Promise 객체로 감싸져 반환된다.
await
- 일반 비동기 처리처럼 바로 실행이 다음 라인으로 넘어가는 것이 아니라 결과값을 얻을 수 있을 때까지 기다린다.
- Promise가 처리될 때 까지 코드 실행을 일시 중지하고, Promise가 처리되면 결과 값을 반환해서 변수에 할당한다.
1) await의 기능
- await 뒤에 오는게 Promise 객체면 promise의 resolve 값으로 바꿔준다.
// 예시 1.
function fun1(){
return Promise.resolve('promise');
}
function fun2(){
return 'non_promise';
}
async function check(){
const p1 = await fun1(); // promise
const p2 = fun1(); // Promise { 'promise' }
const non_p1 = await fun2(); // non_promise
const non_p2 = fun2(); // non_promise
}
check();
fun1()은 promise 객체를 반환하고, fun2()는 문자열을 반환하는 함수입니다.
fun1()에서 await를 붙여주지 않으면 promise 객체 자체가 출력되고, await를 붙여주면 promise의 resolve 값이 출력되고, 문자열을 반환하는 함수 fun2()에서 await의 유무는 차이점이 없는 것을 볼 수 있습니다.
await 뒤에 오는 모든 값은 promise 객체화 됩니다.
- async 함수가 비동기적으로 실행되도록 한다.
await 문이 없는 asnyc는 동기적으로 실행되고, await문이 있는 async 함수는 항상 비동기적으로 완료됩니다.
2) 에러 핸들링
async function test(){
try {
const x = Promise.reject(new Error('Oops!'));
await x; // await가 p의 reject값을 catch의 인자로 throw
} catch (error) {
console.log(error.message) // 'Oops!'
}
}
에러 구문은 try/catch 구문으로 구현이 가능하며 try/catch 구문은 await 뒤에 오는 promise 객체가 rejected일 때, reject 결과값을 catch의 인자로 넘겨줍니다.
참고
https://d-sup.github.io/javascript/study/
Promise와 Callback의 차이는? && async/await란?
저번에 ajax에 대한 블로깅을 하면서, Promise와 Callback에 대해 잠깐 다루긴 했지만 이 두 가지의 차이점까지는 다루지 못했었다 💡 우선 Promise 와 Callback 의 공통점은 무엇일까? 공통점은 비동기
d-sup.github.io
https://charles098.tistory.com/159
[ JavaScript ] async/await
이 글은 promise의 개념을 알고 있어야 이해할 수 있다. 따라서 promise가 아직 뭔지 모른다면 이전 글을 보고 오도록 하자. 등장배경 같은건 생략하고 핵심만 짚어보자. 그럼 바로 시작! 1. async의 위
charles098.tistory.com
'개발 지식' 카테고리의 다른 글
| Spring security 구조 및 동작 (0) | 2024.06.06 |
|---|---|
| Spring batch 5.0 간단한 구현 (1) | 2023.12.22 |
| Spring batch 알아보기 (0) | 2023.12.14 |