과거의 내가 미래의 나에게
JS 비동기에 대하여 공부하자(1) 본문
비동기에 대해서는 이미 어렴풋이 알고있다. 그렇기에 개발을 함에 있어서 관련된 문제를 해결할 수 있으며 또 이를 활용하여 여러 개발도 해왔다. 그러나 왠지 누군가 나에게 비동기에 대해 잘 알아? 라고 물어볼 때 나는 쉽사리 긍정할 수 없었고 또 가끔은 개발할 때 비동기 이슈같은데 명확한 원리를 이해 못하고있음을 느낄 때도 있었다.
25년에는 JS의 기본 이론을 좀 더 잘 알고자하는 목표를 세웠기에 이에 대한 첫 걸음으로 비동기에 대해서 완전히 마스터해보려고 공부하며 글을 정리해본다.
비동기에 대한 자잘한 의문들
JS는 싱글 스레드 기반이고 동기적인 코드 실행이 기본이다. 따라서 비동기를 구현하기 위해서는 JS만으로 해결하는 것이 아닌 브라우저 엔진의 이벤트 루프 시스템을 이용한다. 이렇게 비동기가 어떻게 굴러가는 지는 대충 알지만(대충 알아서 추후에 빡세게 정리할 것임), 비동기 활용이 잦은 JS가 왜 싱글 스레드로 구성되어있고 또 왜 온전히 JS로써만 비동기를 구현하지 않고 브라우저의 엔진을 이용한 것이며 다른 언어들은 비동기 구현을 어떤식으로 했는지 등 근본적인 무언가가 궁금했다. 따라서 오늘은 비동기에 대한 단순 설명글이 아닌 이러한 근본을 찾아가는 여정으로, 관련된 주제에 대한 해답은 책과 구글링으로 찾기엔 너무 어려웠기에 AI 선생과 함께 이를 헤쳐나가보았다. 그렇기에 정보의 확실성에 대해서는 자신이 없다는 것을 미리 밝혀두고 아래의 글은 단지 나의 호기심을 해결하기 위한 수준임을 말해둔다!
비동기가 활성화 된 역사를 통해 알게된 여러 사실들
비동기 처리라고 함은 브라우저에서 뿐만이 아니라 여러 분야에서 다양하게 쓰인다. 당연한 것이 여러 요청이 들어왔을 때 한 번에 한 개씩! 하면 세상에 모든 것이 다 느리고 불편한 세상이 되지 않았을까. 대규모 데이터를 처리하는 DB도 비동기로써 요청을 받아들이고 처리할 수 있도록 구조가 되어있고 게임 개발에서도 동시에 많은 작업을 처리해야하기 비동기를 활용한다. 그리고 웹 브라우저도 동시에 여러 UI 변화를 체감시키고 데이터를 활용하기 위해 비동기를 활용한다.
이렇게 웹 브라우저는 비동기를 사용할 일이 많은데 웹 브라우저의 움직임을 책임지고 있는 JS는 비동기가 불가한 싱글 스레드로 구성되어있을까?
웹 개발자로써 웹과 관련된 기술을 공부할 때 왜?를 따라 들어가면 항상 그 끝에 닿는 것은 결국 웹 브라우저는 아주 단순한 문서를 공유하기 위해 만든 프로그램이기 때문으로 귀결되더라.
브라우저 탄생의 이유는 심플하게 문서를 적고 공유하기 위함이었다. 그리고 이 브라우저가 조금 더 많은 사람들에게 사용됨으로써 약간의 UI(DOM)를 조작할 필요성을 느끼게 됨으로써 JS가 등장하였다. 애초에 JS를 처음 개발한 브랜든 아이크는 정말 간단한 조작을 위해 만들었고 이조차도 개발 시간이 매우 촉박했기에 10일만에 후다닥 완성했다고 한다. 그저 form을 검증하고 버튼을 클릭하여 반응하는 등 단순한 사용자 인터페이스 조작을 위해 만들어낸 것이기에 비동기고 멀티스레드고 당연히! 고려치 않았던 것이다.
이처럼 초반에는 동기적 흐름만으로 브라우저에 요구되는 사항이 충분히 해결되었지만 점차적으로 브라우저에 기대하는 바는 커졌고, 그에 따라 브라우저도 JS도 조금씩 혹은 크게 살을 붙여나가기 시작했다.
< 걍 잡담~ >
여기까지 알아보다 세상에 꼭 한 둘 쯤있는, 미래를 보고온 듯한 천재들이 이것은 세상을 지배할 것이다! 하고 초기 JS를 더 활용성 높고 미래지향적으로 설계하려는 시도(JS를 멀티스레드로 전환!!)는 없었을까? 해서 찾아보았지만 딱히 그런 시도는 없었던? 혹은 아주 적었던 것 같다. 아마 브라우저가 이렇게까지 미친듯이 커졌을 거란 생각을 못했었을 것인지 혹은 브라우저의 엄청난 확산성으로 인해 JS가 만들어진 초기임에도 이미 널리 쓰이고 있어서 수정할 수 없었던 것인지 그거 재설계 할 바엔 그냥 다른 개념을 만드는 게 낫겠다! 한건지 그건 모르겠다~
비동기를 처리하기 위한 브라우저의 이벤트 루프 개념은 Web API인 타이머라던가 몇몇개의 비동기적인 요청을 사용하기 위해 이미 브라우저에 붙여져있던 살이었다. 그리고 이러한 이벤트 루프를 아주 제대로 활용해서 웹 브라우저의 비동기 시스템을 완전히 활성화 시킨 것이 바로 웹 개발의 패러다임을 바꿔냈다고 하는 AJAX의 등장이다.
AJAX는 서버와 비동기적으로 데이터를 주고받을 수 있는 기술로 데이터를 비동기로 받음으로써 다른 UI 처리를 동시에 진행 할 수 있기에 사용성을 엄청나게 향상시킨 주인공이다. AJAX는 싱글 스레드인 JS로만으로 비동기적인 활동을 할 수 없었기에 브라우저에서 비동기 작업을 위해 사용하고 있던 이벤트 루프를 활용하였고, 이후에 비동기 처리는 거의 브라우저의 이벤트 루프를 활용하여 사용하게 된 것이다.
시간이 지나 AJAX의 비동기 처리 방식이었던 콜백 함수의 불편함이 증가하고, JS는 이를 좀 더 편리하게 제공하기 위해 Promise 객체라는 개념이 등장하게 되고 더 지난 후에는 Async/Await가 나타나게 되면서 비동기 처리는 웹 개발자에게 있어서 당연히 알아야할 개념이 되었다.
웹 개발에 대해 근본을 파다보면 정말 하나같이 "이렇게까지 사용자가 많아지고 다양하게 쓰일 지 몰랐엉~ 필요한 것은 그 때 그 때 있는 것 활용해서 만들자!" 같은 느낌이랄까... 아주 초반에 웹 브라우저의 역사에 대해 공부했던 것이 여러모로 도움이 많이 되고 있다.
결국 웹 브라우저의 비동기는 AJAX로 인해 활성화되고 AJAX가 비동기로 데이터를 받아오는 방법을 브라우저의 이벤트 루프를 이용했기에 현재와 같은 상황이 되었다는 것을 알게되었다. AJAX가 웹의 패러다임을 바꿨다라는 얘기는 몇 번 들어봤는데 오늘 이 글을 정리하면서 새삼스럽게 더 엄청나다는 것이 와닿는 계기가 되었다.
아, 또 JS가 10일만에 뚝딱 만들어진 것이란 것을 오늘 알게되었는데 이 글을 읽으면서 태초에 JS가 만들어질 때 중요하게 여겼던 것과 어떤 철학을 바탕으로 만들어졌는지 공부해보면 JS 이론을 공부하는데 어떤 것을 중심으로 해야할 지 알 것 같다는 생각을 하게 되었다. 이는 나중에 따로 글로 써볼 수 있는 기회가 있음 좋겠다.
마지막으로 비동기에 대해 보다가 비동기적으로 처리하는 것이 왠지 인간의 뇌가 일을 처리하는 것과 닮았다는 생각이 들어서 AI 선생에게 각 언어별 비동기 처리 방법을 인간의 행동에 비유해달라고 했더니 나온 결과가 마음에 들어서 여기다 써놓겠다. JS는 알겠지만 다른 것은 확실한지 몰름~~
1. JS: JS는 싱글 스레드로 동작하며 이벤트 루프를 통해 비동기 작업 관리. 혼자서 일하지만 비서를 따로 두어서 같이 일하게끔 설정함으로써 단순성에 초점을 둠
-> 진짜 새삼 JS가 다른 언어들이랑 확 다름이 느껴짐ㅋㅋㅋ
2. 파이썬: asyncio가 여러 코루틴을 실행하며 리더가 순서를 조율함. 리더는 코루틴 간 작업을 조율하는데 최적화되었음으로 병렬 작업은 잘 하지 못하고 입출력 중심의 비동기에 특화
3. JAVA: 멀티스레드를 사용하지만 비동기 작업은 CompletetableFuture를 사용. 명시적인 약속의 개념이 있고 결과가 준비되면 처리하는 체계적인 연결성이 강점으로 병렬 작업에 특화되어 있고 CPU 중심의 작업에서 강력
4. GO: 모든 팀원이 자율적으로 일을 하고 결과를 리더에게 보고하거나 서로 채널로 대화함. 리더는 팀원들에게 간섭하지 않고 팀원들은 자율적으로 작업을 나눠 처리하기에 한 사람이 수천 명의 팀원에게 일을 나눌 수 있음
5. C++: 정밀한 스레드 기반 관리. 작업을 철저히 나눠서 각각의 스레드에서 실행되며 상태를 직접 점검함. 모든 팀원들이 완전히 독립적으로 일하고 결과를 전문가가 취합함으로 병렬성과 고성능이 필수적인 작업에서 뛰어남