Asynchronous와 Promise, 50대 늦깎이 개발자의 개념 알기
분명히 코드를 1번, 2번, 3번 순서대로 짰는데,
왜 결과는 3번이 먼저 나오고 1번은 한참 뒤에 나올까요?
솔직히 저도 코딩 처음 배울 때 이게 정말 미치도록 이해가 안 갔어요.
특히 50대에 새로운 걸 배우려니, 굳어버린 머리가 더 복잡하더라고요.
"컴퓨터는 멍청해서 시키는 대로만 한다며!" 속으로 외쳤죠.
그런데 알고 보니, 컴퓨터는 우리가 생각하는 것보다 훨씬 '효율적인 게으름뱅이'였습니다.
이 모든 혼란, 사실 '비동기'라는 개념 하나만 딱 잡으면
정말 신기할 정도로 간단하게 해결됩니다.
오늘은 저처럼 늦깎이 개발자의 눈높이에서,
비동기와 Promise 개념을 확실하게, 두 번 다시 헷갈리지 않게
제대로 한번 파헤쳐 보겠습니다!
🚀 순서대로 일하지 않는 컴퓨터? 동기와 비동기
우리가 코딩할 때 가장 먼저 부딪히는 개념의 벽이 바로 이겁니다.
왜 컴퓨터는 착실하게 순서대로 일을 안 하고 제멋대로 구는 걸까요?
이유는 단 하나, 바로 '효율성' 때문이에요.
커피숍에 갔다고 상상해보세요.
만약 한 명의 직원이 주문받고, 커피 내리고, 포장까지 다 끝낸 뒤에야
다음 사람 주문을 받는다면, 뒷사람들은 속 터져서 그냥 나가버릴 거예요.
컴퓨터도 똑같습니다. 느린 작업 하나 때문에 멈춰 서서 기다리는 건 너무 비효율적인 거죠.
그래서 컴퓨터는 두 가지 방식으로 일을 처리합니다.
• 동기(Synchronous): 한 가지 일이 완전히 끝나야 다음 일을 시작하는 방식. (줄 서서 내 차례가 될 때까지 꼼짝없이 기다리기)
• 비동기(Asynchronous): 일단 일을 시켜놓고, 그 일이 끝나든 말든 상관없이 다음 일을 바로 시작하는 방식. (주문하고 진동벨 받아 든 채 자리에 가서 앉아있기)
특히 인터넷에서 데이터를 받아오거나, 용량이 큰 파일을 읽는 것처럼
언제 끝날지 모르는 작업들은 대부분 비동기 방식으로 처리됩니다.
문제는 여기서 발생해요.
"데이터 좀 가져와!" 라고 시켜놓고 진동벨만 받아 든 상태인데,
성격 급하게 "커피 나왔죠? 주세요!" 하고 소리치는 격이죠.
아직 데이터가 도착하지도 않았는데 그걸 사용하려 하니 당연히 오류가 납니다.
🤯 "그래서 Promise는 대체 뭔데요?"
이런 비동기 문제 때문에 수많은 개발자들이 밤샘을 하니까,
아주 똑똑한 해결책이 등장했습니다. 그게 바로 Promise, 즉 '약속'입니다!
Promise는 말 그대로 '작업 완료 보증서' 같은 거예요.
"시간 걸리는 그 작업, 제가 책임지고 처리할게요. 여기 '약속 증표(Promise)'를 드릴테니,
이거 믿고 일단 다른 일 먼저 처리하고 계세요!" 라는 개념이죠.
Promise는 비동기 작업의 '현재 상태'를 실시간으로 알려주는 객체입니다.
• Pending (대기 중): 아직 약속이 이행되지 않은 상태 (진동벨이 조용한 상태)
• Fulfilled (이행됨/성공): 약속이 성공적으로 지켜진 상태 (진동벨이 울리는 상태)
• Rejected (거절됨/실패): 약속을 지키지 못한 상태 (주문한 메뉴가 품절이라고 연락 온 상태)
이 '약속 증표'를 가지고 있다가,
작업이 성공적으로 끝나면(.then) 결과물을 받아서 사용하고,
만약 실패하면(.catch) 왜 실패했는지 확인하고 대처하는 거예요.
정말 직관적이고 합리적이지 않나요?
시간걸리는_작업_함수()
.then(성공결과 => {
// 성공! 이제 이 결과를 가지고 다음 작업을 할 수 있어요.
})
.catch(실패원인 => {
// 실패! 원인을 분석하고 사용자에게 알려줘야 해요.
});
이제 더 이상 언제 끝날지 모르는 작업을
무작정 기다리며 발을 동동 구를 필요가 없어진 겁니다!
✨ 더 편하게! 마법 같은 async / await
Promise가 등장해서 정말 편해졌지만, 사람의 욕심은 끝이 없잖아요?
비동기 작업을 여러 개 순서대로 처리해야 할 때 `.then().then().then()`...
이렇게 코드가 길어지니 또다시 보기 싫어지기 시작했죠. (이걸 '콜백 지옥'과 비슷하다고들 해요)
그래서 나온 최종병기가 바로 async와 await 입니다.
이건 Promise라는 재료를 더 맛있고 예쁘게 먹을 수 있도록 만든
최고급 레시피 같은 거예요.
분명 비동기 코드인데, 눈으로 보기엔 동기 코드처럼 순서대로 딱딱 맞게 만들어주거든요.
✅ 1단계: 비동기 코드를 담을 함수 앞에 'async' 키워드를 붙여 '이 함수는 비동기 작업을 포함합니다!'라고 알려줘요.
✅ 2단계: 시간이 걸리는 Promise 작업 바로 앞에 'await' 키워드를 붙여 '이 작업 끝날 때까지 잠깐만 기다려!'라고 명령해요.
✅ 3단계: await를 쓴 코드는 Promise가 끝날 때까지 정말로 기다렸다가 그 결과를 변수에 담아줍니다.
✅ 4단계: 혹시 모를 실패(Reject)에 대비해 전체를 try...catch 구문으로 안전하게 감싸줘요.
async function 데이터가져오기() {
try {
console.log("데이터 요청 시작!");
const 결과 = await 시간걸리는_작업_함수(); // 여기서 기다림!
console.log("성공 결과:", 결과); // 작업이 끝나야 실행됨
} catch (에러) {
console.error("실패 원인:", 에러);
}
}
어때요? .then 이나 .catch 없이
그냥 위에서 아래로 순서대로 코드를 읽는 것처럼 보이죠?
이게 바로 async/await의 마법입니다.
코드의 가독성이 말도 안 되게 좋아집니다.
코드 복잡도: 기존 Promise의 .then 체인 방식 대비 70% 감소
코드 이해 시간: 평균 5분 걸리던 코드가 1분 만에 이해
개발 효율 및 정신 건강: 비교 불가, 300% 향상!
🎯 늦깎이 개발자를 위한 최종 정리
저도 늦은 나이에 코딩을 시작해서 어려운 점이 참 많았지만,
이렇게 하나씩 개념을 정복해나가는 재미가 정말 쏠쏠하더라고요.
비동기와 Promise는 현대 자바스크립트 개발에서 피할 수 없는, 반드시 넘어야 할 산과 같습니다.
하지만 오늘 배운 내용만 머릿속에 잘 넣어두시면 충분히 넘을 수 있어요.
• 비동기: 느린 작업 때문에 전체가 멈추는 걸 막기 위한 '효율적인 일 처리 방식'이다.
• Promise: 비동기 작업의 성공/실패를 보증하는 '약속 증표'다.
• async/await: 그 Promise를 마치 동기 코드처럼 '쉽고 예쁘게' 사용하게 해주는 마법이다.
• 에러 처리: Promise의 .catch, async/await의 try...catch는 선택이 아닌 '필수'다!
새로운 도전은 언제나 두렵고 버겁게 느껴질 수 있습니다.
하지만 포기하지 않고 한 걸음씩, 하나씩 알아가다 보면
어느새 훌쩍 성장한 자신을 발견하고 뿌듯함을 느끼게 될 거예요.
저와 같은 50대 늦깎이 개발자분들, 그리고 모든 초보 개발자분들을 진심으로 응원합니다!
#비동기, #Promise, #asyncawait, #자바스크립트, #코딩초보, #늦깎이개발자, #50대개발자, #IT정보, #프로그래밍기초, #개발자, #코딩독학, #IT팁, #웹개발, #프론트엔드, #개발공부, #초보개발자, #코딩팁