동기, 비동기, 프로미스, 콜백

라용·2022년 10월 28일

위코드 - 스터디로그

목록 보기

92/100

위코드 기업 협업에 참여하며 배운 내용을 정리 & 회고 한 내용입니다.

NoSQL 데이터 모델링을 마치고 하나의 서비스를 골라 만들어보는 작업을 진행했다. 코드 기반 리뷰는 처음이라 이런 저런 질문을 했는데 그 과정에서 동기, 비동기, 프로미스, 콜백 등 각종 개념에 대한 설명을 들을 수 있었다. 그동안 모호하게 알고 있던 것인데, 조금은 상이 잡히는 느낌이라 여기에 두서 없이 정리해둔다.

동기와 비동기

자바스크립트는 비동기에 특화된 언어라고 할 수 있다.(비동기를 빨리 처리) 그래서 동기와 비동기의 개념을 이해하는 것이 중요하다. 동기와 비동기의 차이점은 공간이다. 여기서 공간은 코드가 실행되는 공간으로 동기는 한 공간에서 1 - 2 - 3의 코드가 순차 적으로 실행된다. 비동기는 1을 다른 공간에 잠깐 넘기고 그 결과는 콜백(규칙)으로 넘겨 달라고 한 후 1 결과가 오기 전에 2를 실행한다. 비유를 하자만 동기는 한 공간에서 관리자가 함께 있어서 순서대로 지시한 일을 해야 하는 상황. 비동기는 관리자가 작업기간을 알려주고 나가서, 작업자가 재량껏 시간 여유가 있는 것을 미루고 진행할 수 있는 것. (비동기는 메일링 느낌, 다 하면 주세요)자바스크립트는 싱글스레드지만 실제로 두개정도 공간이 더 있어서 이런 비동기 작업이 가능하다. 추가로 찾아본 내용에서는 동기는 현재 작업의 응답이 발생함과 동시에 다음 작업을 요청하는 것이라고 했다. 비동기는 반대로 작업의 응답이 없어도 다음 작업을 요청하는 것.

콜백

동기, 비동기 이야기가 나온 이유가 이 콜백 때문. 내가 콜백으로 해결할 수 있는 문제를 state 를 전역으로 써야 하냐 물으면서 이야기는 시작됬다. 콜백은 이 비동기 과정에서 어떤 결과를 달라고 정해둔 일종의 규칙이다. 파라미터에 규칙을 담아서 전달한다. (파이어베이스의 doc.. 한 것 역시 이런 형식으로 달라고 요청한 것.. 이 부분은 코드를 보며 확인 필요)

프로미스

그래서 이 콜백이 오고가는 비동기 과정을 프로미스라고 한다. 프로미스의 뜻은 약속. 무엇을 어떻게 해서 달라고(콜백) 약속을 하고 간 것. 단어의 뜻을 이해하는 것도 좋다. 프로그래밍 언어는 커멘드, 명령을 하는 건데 왜 약속인가? 명령이 아니라서 지켜지지 않을 수 있기 때문. 그래서 프로미스는 두가지 결과를 반환한다. 된 것과 안된 것. 이를 resolve와 reject로 반환하고, 그것이 result 와 error 로.. 각각을 then 과 catch로 받게 되는 것이다.(resolve - result - then / reject - error - catch) 비동기 과정으로 받는 프로미스 객체를 이렇게 처리하게 된다. 이렇게 then 을 중복해서 게속 사용하는 것을 콜백지옥이라고 하는데, 이것을 해결한 게 async(이건 공부 필요, 단어 뜻부터). async를 쓰면 then 은 핸들링이 되는데 catch 는 핸들링 어려워서 try, catch 문을 쓴다고 한다.

객체

그러다 객체에 대한 이야기까지.. 객체는 대상이나 사물. Class 라는 개념은 이런 사물을 만드는 설계도. 자바에서는 Class 를 가지고 객체를 만드는 것이 생성자. 하나의 설계도로 무한한 객체를 만들 수 있다. 자바스크립트는 자바와 다르게 class 뿐만 아니라 function 까지도 설계도로 취급. 함수의 결과도 객체라고 이야기함. 그래서 자바스크립트는 객체지향 언어이면서 함수형 언어라고도 함. 프로미스도 결국 class. 프로미스라는 객체를 반환한다. new Promise() 라는 객체 결과값이 함수 호출 결과값이므로 then 으로 받는다. 이런 개념들을 알아야 함. 모르고 쓰는 것과 알고 쓰는 것은 천지차이다. 원리를 알아야 훨씬 풍성하게 사용할 수 있다. 이런 자바스크립트 개념 위에 리액트도 있는 것. 그리고 중요한 것은 브라우저. 브라우저는 자바스크립트로 되어 있으므로 브라우저를 잘 알아야 한다. 브라우저 자바스크립트를 제대로 이해하면 새로운 것을 알아내는 것이 더 빠를 것.

추가로 찾아본 것

동기와 비동기

동기는 현재 작업의 응답이 발생함과 동시에 다음 작업을 요청하는 작업이 어떤 순서를 가지고 진행되는 것. 이 응답은 다양함. 비동기는 작업을 지시하고 나면 그 작업이 언제 끝나는지 신경쓰지 않음. 동기와 반대로 현재 작업의 응답과 다음 작업 요청의 타이밍이 일치하지 않아도 된다는 것

비동기, 콜백

자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 싱핼하는 자바스크립트의 특성을 의미. 콜백 함수의 동작방식은 일종의 식당 예약과 같음. 맛지 대기자 명단에 이름을 올리고 주변을 돌아다니다 자리가 났다는 연락을 받으면 가는 것. 이때 전화를 받는 시점에 콜백 함수가 호출됨. 자리가 났을 때 연락이 오므로 미리 가서 기다릴 필요 없음. 즉 준비된 시점, 데이터가 준비된 시점에서 원하는 동작을 바로 수행.

프로미스

자바스크립트 비동기 처리에 사용하는 객체. 자바스크립트 비동기 처리란 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트 특성을 의미. 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용. 처리 과정에 따른 프로미스의 세가지 상태는 대기, 이행, 실패.

Promise

Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. Promise 는 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있습니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하는 것은 아니고, 미래의 어떤 결과를 제공하겠다는 '약속(프로미스)'를 반환합니다.