자바스크립트의 실행 환경

JavaScript는 독립적인 언어가 아니라 스크립트 언어로, 특정한 프로그램 안에서만 동작을 할 수 있다. 자바스크립트를 실행하는 환경은 브라우저환경에서 실행하는 방법과 Node.js에서 실행하는 방법, 코드 에디터는 VS code를 이용하여 브라우저나, Node.js 환경에서 실행하는 방법이 있다.

Browser

모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 엔진을 내장하고 있다. 대표적으로 구글의 V8이 있다. 인터넷 익스플로어를 제외한 대부분의 모던 브라우저는 ES6를 지원한다. 지원비율은 96% ~ 99%로 육박하지만 인터넷 익스플로어나 구형 브라우저는 대부분 ES6를 지원하고 있지 않다.

Node.js

Node.js는 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경이다. client개발을 위한 용도로만 국한되어 JavaScript를 크롬(Chrome)같은 브라우저에서만 쓰는 것이 아닌 브라우저 밖. 즉, 내 컴퓨터에서 다양한 용도로 확장하기위해 만들어진 것이 바로 node.js 이다. Node.js 의 등장으로 자바스크립트는 브라우저를 벗어나 앱개발에서도 사용 할 수 있는 범용 언어가 되었다. 또한 백엔드에서 자바스크립트를 이용하여 서버를 개발할수 있다는 점은 프-백 간 서로의 코드를 읽고 이해할 수 있다는 점에서 큰 장점이라 할 수 있다.

리액트의 런타임 환경

JavaScript의 런타임 환경을 공부하면서 리액트의 런타임 환경은 무엇일까? 라는 궁금증이 생겼다. 내가 헷갈렸던 부분은, 리액트의 경우 패키지 매니저가 구동되는 프로세스는 노드 환경에서 돌아가고 렌더링 결과물은 브라우저 환경에서 확인을 하고 있는데 리액트가 실행될 때 두가지 런타임 환경을 모두 거치는 것인지, 어떤 런타임 환경에서 실행이 되는 것인지 궁금했다.

구글링이나 책에도 자료가 나와있지 않아 결국 개발자 커뮤니티에 물어봤고 그에 대한 답변으로 내가 이해한 내용은 아래와 같다.

1. 브라우저에서 프론트엔드 서버 측으로 페이지 GET 요청
2. 프론트엔드 서버에서 html, js 번들을 응답
3. js 번들 다운로드 완료 후 실행 → react 실행

위와 같은 시나리오에 따라 일반적인 클라이언트 사이드 렌더링(CSR)이 이루어 진다. 하지만 ReactDOMServer와 같은 API의 존재로 알 수 있듯이 서버 측에서도 실행이 가능하다. 보통은 서버 사이드 렌더링(SSR)이 필요할때 사용하게 되는데, 첫 응답으로 비어 있는 html이 아니라 렌더링이 완료된 html 파일을 응답으로 돌려주기 위해 주로 사용한다. (renderToString)

결국 기본적인 개발환경에서는 브라우저 환경을 띄우기 위한 목적으로 노드 런타임의 도움을 받지만 이미 배포된 리액트 프로젝트는 노드 환경 도움없이 렌더링 동작이 가능한 점을 생각해보면 기본적으로 리액트의 런타임 환경은 브라우저라고 보는게 맞는 것 같다.