Node.js와 비동기 데이터 처리방식
Node.js의 Promise, Async, Await 방식을 알아보자
시작하는 글
이 글은 Vue나 React같은 자바스크립트 프레임워크 개발환경인 Node.js와, Async, Await라는 함수 개념에 대해 알아보고. 정리한 내용이다. 자바스크립트에서 쓰이는 데이터 호출방식을 이해하기 위해, 일단 Node.js에 대해 알아보기로했다.
Node.js란 무엇일까?
웹앱과 모바일 앱을 동작시키기위해서는 백엔드 (서버) 서비스가 필요한데. 여기에 쓰이는 - 실시간 데이터 전송 / 확장가능한 서비스가 바로 Node.js다. 사실상 프론트엔드 개발자면 이 개념정도는 알아두어야하는 서비스이기도하다. 단순히 시각적인 퍼블리싱을 넘어서서, 데이터 바인딩에 대한 개념을 알려면. 백엔드에서 끌어오는 데이터와 API 연결 등의 작업을 이해해야하기 때문이다.
Node.js는 기본적으로 자바스크립트를 돌리기 위한 기능인 크로미움의 V8 엔진과 연관이있다. 기존의 크로미움과 V8엔진은 본래 웹브라우저 내에서 자바스크립트를 돌리기위한 기능이다. 여기에서 엔진을 꺼내 웹브라우저 밖에서도 자바스크립트가 돌아가게하려 만든것이 바로 Node. js이다.
Node.js는 2세대 자바스크립트 프레임워크를 사용하려면 기본적으로 설치해서 - 세팅을 해줘야하는 녀석이기도하다.
Node.js의 목적과 구성
웹브라우저에는 자바스크립터 통역기 (사실상 엔진)이 있어서. JS 언어를 머신코드 (기계어)로 변환해준다. 그래서 컴퓨터가 그걸 이해하고 자바스크립트를 HTML을 변형하기위한 방식으로 사용할 수 있게 해준다. 그렇기에 웹브라우저에서 JS를 쓸 수 있는 이유는 - 브라우저 내에 JS 통역기가 있기 때문이다.
노드js가 만들어진 이유는 - 웹브라우저 바깥에서 JS 기반의 언어를 사용할 수 있으면. 참 편리하겠다는 생각에서 시작이 됐고. 실제로 크롬의 V8 자바스크립트 엔진을 떼어다가 - 외부 프로그램에게 이식한 형태다. 그래서 브라우저 바깥에서도 JS를 사용할 수 있게 되었다.
Node.js는 프레임워크도, 개발 언어도 아니다. JS를 외부에서 동작시키기 위한 환경을 구성해주는 녀석이다. 그렇기에 '나는 윈도우 서버 구성용 프레임워크인 ASP.NET이 더 좋다'던가. 아니면 C# 언어를 더 선호한다던가 -하는 식의 이야기는. Node.js와는 직접적인 연관은 없는 이야기다. 자바스크립트를 필두로 내세우고있는 상태에서. 그걸 브라우저 외부로 가져온 형태라, 굉장히 독특한 위치를 선점하고있는 프로그램이다.
Node.js는 어떤식으로 동작하나 / 비동기성 프로그래밍 구조
노드가 다른 서비스들에 비해 속도가 빠른 이유는 - 비동기성 프로그래밍 구조 (Asyncronous Architecture)이라고하는 구조 때문이다.
기존의 동기성 프로그래밍 구조 (Synchronous Architecture) 라고 해서. 주문받는 사람과 요리하는 사람이 한명인 레스토랑이다. 그래서 손님이 새로 오면 그 사람에게 어떤 주문을 할지를 묻고. 다시 돌아가서 요리를 하는 동안 - 다른 손님은 무작정 기다려야하는 구조였다. 그러나 Node.js의 비동기성 구조는 - 이런 구조를 혁신적으로 바꿔놨다.
마치 자동 주문 기기를 들여온 것 처럼. 요리사는 요리만 하는 형식으로 - 기존의 복잡한 접객 / 메뉴확인 / 요리 / 전달의 과정을 크게 개선했다. 이게 바로 비동기성 프로그래밍 구조이다.
비동기 프로그래밍에 대한 설명글 (한글 문서)
http://www.nextree.co.kr/p7292/
(본문 중 발췌)
동기방식의 처리는 하나의 요청이 처리되는 동안 다른 요청이 처리되지 못하며 요청이 완료되어야만 다음 처리가 가능한 방식입니다. 동기 방식은 IO 처리를 Blocking 하는데 지금까지는 이 문제를 Thread로 처리했습니다.이 문제를 비동기 방식으로 처리할 수도 있습니다. 비동기 방식은 하나의 요청 처리가 완료되기 전에 제어권을 다음 요청으로 넘깁니다. 따라서 IO 처리인 경우 Blocking 되지 않으며 다음 요청을 처리할 수 있는 것입니다.
콜백 함수를 이용한 작업의 순차적인 처리방식. 다만 콜백 (Call back) 함수라는 자체도 완벽한 대안인것만은 아니었다.
비동기 처리와 콜백 함수의 문제점
https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/
(본문 중 발췌)
콜백 지옥 (Callback hell)
콜백 지옥은 비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제입니다. 아마 아래와 같은 코드를 본 적이 있을 겁니다.
웹 서비스를 개발하다 보면 서버에서 데이터를 받아와 화면에 표시하기까지 인코딩, 사용자 인증 등을 처리해야 하는 경우가 있습니다. 만약 이 모든 과정을 비동기로 처리해야 한다고 하면 위와 같이 콜백 안에 콜백을 계속 무는 형식으로 코딩을 하게 됩니다. 이러한 코드 구조는 가독성도 떨어지고 로직을 변경하기도 어렵습니다. 이와 같은 코드 구조를 콜백 지옥 (Call Back Hell) 이라고 합니다.
-
한 내용에 대한 구조가 복잡해질수록, 코드가 지저분해지고 - 무식하게 반복 / 복사붙여넣기를 해야하는 형식이 되어버린다는 이야기. 이 경우 당장 해결은 될 수 있겠지만, 나중에 내용을 수정하기가 매우 어려워진다.
콜백의 문제를 해결하는 Async, Await / Promised
https://www.youtube.com/watch?v=vn3tm0quoqE&t=434s
개인적으로 Async에대한 설명 영상중에 가장 잘 만들어진 녀석같다.
데이터를 가져오는 과정을 위해 계속 일하고있는 한개의 프로세서가 있고 (Single Thread). 그 일이 끝나면 콜백함수에 맞게 - '이제 이걸 전달해야지'하고 동작하는게 기본적인 콜백함수의 기능이다. 그리고 그 한 개의 프로세서를 가능하면 효율적으로 쓰기위한 방식이 Promise다.
Promise에 대한 정리본
https://programmingsummaries.tistory.com/325
기존의 트리 내에 트리 가 반복적으로 들어가던 형태를 개선하여 - OOO 가 해결되면 다른 과제를 바로 해결하도록 동작하라고 명령을 내려둔 상태다.
Vuex를 통한 Vue.js 요소별 상태 관리
https://alligator.io/vuejs/intro-to-vuex/
Promise 방식 ( Async / Await 기법)은 JS 기반 프레임워크인 Vue의 VUEX에서도 중요한 개념이다.
ES2017 스펙의 JS - Async / Await에 대한 내용이걸 풀어서 보면. 무슨 행동을 하건 간에 - 프로그래밍에있어서 '데이터를 가져오는 행동' 역시도. 일정한 순선에 맞게 진행이 되어야한다는걸 알 수 있다. 또한 중요한 정보와, 그렇지 않은 정보의 순서를 생각치 않고 프로그래밍을 해버릴 경우. - 당장은 문제가 없더라도 - 구조가 복잡해질수록 문제가 생기기 쉽다는 것을 예상할 수 있다.
Vue의 데이터 바인딩 관련 내용은 이곳을 참조하시라
https://brunch.co.kr/@clay1987/139
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
