React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다.
Node.js
어? 우리가 배우려는 건 React.js인데 왜 Node.js가 나오나요?
바로 React.js가 Javascript의 라이브러리이기 때문이다. 오 그건 알겠어요. 근데 Javascript랑 Node.js랑 무슨 연관이 있는데요?
자, 전에 자바스크립트로 작성된 코드는 브라우저에 있는 자바스크립트 엔진을 이용하여 실행한다고 했었다. 우리가 아는 브라우저만 해도 크롬, Edge, Safari 등이 있는데 이 각 브라우저마다 자바스크립트 엔진이 상이하다.
- Safari - Nitro
- Firefox - Spider Monkey
- Chrome - V8
- Edge - Chakra
- Opera - Presto
이 중에서 제일 유명한 건 아무래도 크롬의 V8이겠다.
예전의 자바스크립트는 하꼬에 불과했다. HTML 코드 안에서 동작되며 대부분 이벤트 처리나 인터랙션 말고는 별 할 일이 없던 언어였다. 그런데 자바스크립트의 사용성이 워낙 좋다 보니 많은 개발자들이 이 자바스크립트를 웹 안에서만 사용할 수 있는 게 너무 아까웠다고 한다. 그때! 크롬의 자바스크립트 엔진인 V8은 C++로 만들어져서 웹 말고도 어디서든지 사용할 수 있게 만드는 프로젝트가 시작되었는데 그게 바로 Node.js이다.
즉, Node.js는 자바스크립트의 실행환경 = Runtime 환경이다.
그래서 Node.js를 컴퓨터에 설치하면 자바스크립트를 웹에서 말고 그냥 컴퓨터에서 실행시킬 수 있게 된다.
자바스크립트 독립 그 후..
자바스크립트가 Node.js를 통해 웹 브라우저의 종속에서 벗어났다. 이제 자바스크립트로 웹을 만들 수도 있고, 앱을 만들 수도 있고, 응용 프로그램을 만들 수도 있는 것이다. 그리고 웹의 프론트 영역뿐만 아니라 웹 서버까지도 만들 수 있게 되었다.
Node.js로 만든 웹 서버는 브라우저로부터 url 주소를 요청(Request)받는다. 그럼 웹 서버에서 해당 요청에 맞는 페이지를 응답한다. 이때 응답 데이터에는 여러 데이터가 있을 수 있겠지만 페이지의 경우엔 리액트로 만든 자바스크립트 파일이 넘어가게 된다. 리액트를 여기서 사용하는 이유는 고전적인 웹 사이트가 아닌 동적이고 마치 프로그램이 동작하는 듯한 페이지를 구현할 수 있기 때문이다. 이런 의미에서 리액트로 만든 웹 사이트를 웹 애플리케이션 또는 리액트 애플리케이션이라 부른다.
결론
React.js는 Node.js가 없으면 사용하기 어렵다. 그러니 Node.js의 기본적인 부분만 학습하고 React.js를 배워보자.