바닥부터 공부하기 - Javascript와 Node.js

Javascript의 시작

Javascript는 태생이 브라우저에서 사용되도록 고안된 언어다. html, css 얘네는 한 마디로 '정적(static)'이다. 링크를 클릭하면 브라우저가 서버에서 다시 html, css 문서를 가져와 새롭게 정적인 문서를 보여주는 방식이 초창기 웹이다. 댓글을 달거나 특정 버튼으로 새로운 글을 표시하는 동적인 기능을 위해 Javascript가 탄생했다.

 

정적인 문서인 html 문서를 어떻게 동적으로 기능하게 만들까? 이를 위해서는 페이지가 렌더링되는 방식을 알아야 한다.

 

브라우저는 오직 html 문서만을 가진다. 이 html 문서를 분석해서 계층적 구조로 만든 뒤, 이를 기반으로 클라이언트 화면에서 콘텐츠를 표시했다. 이 과정을 렌더링(rendering)이라 부른다. 요소 간 관계를 이해하고 레이아웃을 계산하는 기본적인 과정은 있지만, 이를 프로그래밍적으로 조작하지는 않았다. 그래서 html을 프로그래밍 언어라고 부르지는 않는다.

 

이 시기는 웹의 아주 초창기 시기라 렌더링 방식에 표준이 없었다. 그래서 Netscape나 Internet Explorer 등 브라우저마다 자체적인 방식으로 html을 처리했기에 동작이 달랐다. html을 똑같이 작성하더라도 이를 분석하는 방식이 달랐던 것이다. 이 시기에 Netscape에서 Javascript가 등장했다. (하드씽 읽을 땐 넷스케이프가 어떤 회사인지 궁금하긴 했는데... 이 정도로 엄청난 회사였을 줄 몰랐다.)

 

Javascript는 정적인 웹페이지에서 동적인 기능을 구현하도록 개발되었다. 그래서 html 문서를 조작하기 위해 기존에 html을 파싱해 얻었던 계층적 구조를 DOM(Document Object Model)이라는 이름으로 공식화했다. 계층적 구조에서 특정 요소(tag)를 찾아 수정, 삭제, 추가하는 기능을 하는 하나의 객체로 만든 것이다. 이를 Javascript라는 프로그래밍 언어로 DOM을 조작할 수 있도록 만들었다. 이때 Javascript가 DOM API로 기존 DOM 트리를 수정하면, 이를 가지고 브라우저가 새로운 렌더 트리를 생성한다. 새로운 렌더 트리를 기반으로 브라우저는 다시 사용자에게 보여줄 화면을 렌더링 한다.

 

그 변화는 혁명적이었다. 사용자가 실시간으로 콘텐츠를 업데이트하거나, 애니메이션과 같은 상호작용을 구현하게 되었다. 웹 생태계는 빠르게 Javascript를 도입했으며 자연스레 html 문서를 파싱 하는 방식을 표준화했다. 새로운 프로그래밍 언어가 웹 생태계에 큰 파장을 불러일으키고, 동시에 표준까지 제시한 것이다. 오늘날까지도 우리는 DOM 개념을 사용하며 브라우저에서 화면을 보여주고 있다.

 

Node.js와 Javascript 왕국

Javascript는 브라우저에서 동적인 기능을 구현하는 역할을 충실히 수행하고 있었다. 그러나 2009년에 Ryan Dahl이 Node.js를 발표하며 그 양상은 달라졌다.

 

Javascript 코드를 읽고 수행하던 런타임 환경은 월래 Chrome의 V8 엔진이었다. Node.js는 V8 엔진을 확장해 일반적인 운영체제, 즉 Windows, Linux, macOS 등에서 실행되도록 했다. 단순히 엔진의 기능만 떼온다고 될 일이 아니기에... OS 관련 기능을 위한 네이티브 모듈들을 함께 제공해 javascript 코드로 OS 기능을 호출할 수 있게 했다. 단순히 사용자 인터페이스 조작이 아닌, 데이터 처리나 네트워크 통신 등의 서버 개발에도 쓰이는 언어가 된 것이다.

 

다른 서버 런타임 환경과 달리 Node.js는 비동기 I/O와 같은 장점이 있으나, 무엇보다도 무서운 점은 사용 언어가 Javascript라는 점이다. npm을 중심으로 Javascript 코드 생태계를 확장시켰고, 이미 확장된 생태계를 기반으로 한 숱한 라이브러리, 프레임워크들이 Javascript 왕국을 만들었다. 든든한 뒷배경을 가지고 Javascript를 온갖 분야에 사용하는 것이다.

 

게다가 현대 프론트엔드를 대표하는 라이브러리 React가 나오고, 다시금 React를 기반으로 한 생태계가 확장되며 Javascript의 위상은 더욱 높아졌다. Next.js는 Node.js 런타임 환경에서 실행되는 React 기반 프레임워크로 React 문법으로 풀스택 개발이 가능하며, ReactNative는 React 문법으로 iOS/Android 개발을 동시에 할 수 있다. 서버부터 앱 개발까지 사실상 하드웨어의 최적화가 필요한 수준이 아니라면 Javascript로 할 수 있는 모든 걸 하고 있는 셈이다.