🔗 Node.js
19일차 쯤 프로젝트를 구성하기위해 Node.js가 자바스크립트를 프로그래밍 언어 역할을 할 수 있도록 지원하는 실행 환경이고 Node.js기반의 외부 모듈들을 내 프로젝트에 쉽게 다운로드하고 사용할 수 있게 해주는, Node.js를 서포트해주는 npm이란 친구가 있다. 라는 것을 학습했다.
그렇다면 Node.js는 단순한 환경을 지원해주는 역할이고 나머지는 자바스크립트로 다 되는건가..? 자바스크립트는 왜 Node.js로 실행되어야 하는가..? 자바스크립트의 실행 환경인 Node.js가 구체적으로 하는 일은?
📖 Node.js 탄생 전의 자바스크립트
Node.js 가 생기기 전에 자바스크립트는 웹 브라우저의 개발자도구로 열리는 콘솔창..에서 코딩을 해야했었다고 한다. 그때의 자바스크립트는 프로그래밍 언어가 아니었고 동적인 것만 웹 브라우저에서 개발하는 언어였고 브라우저가 닫히면(종료되면) 개발을 할 수 없었다. 모두에게 사용되는 브라우저는 보안이 취약하지 않아야했고 브라우저에서만 개발을 하는 자바스크립트는 보안이 취약했어서 C계열언어(하드웨어)만 개발이 가능했다.
Node.js는 자바스크립트 언어 하나로 클라이언트 뿐만 아니라 서버까지 한번에 만들면 어떨까하는 발상과 함께 자바스크립트의 크롬V8 엔진을 빌드로 탄생하게 되었다. 그렇게 자바스크립트는 Node.js가 생긴 이후로 보안이 취약해지지 않고 백앤드의 자바나 파이썬처럼 컴퓨터를 컨트롤하는 것이 가능해졌다.
📖 Node.js 특징
자바스크립트를 프로그래밍 언어 역할을 할 수 있도록 지원해주는 실행 환경인 Node.js 특징으로는 크게 3가지가 있다.
- 싱글스레드
- 논블로킹 I/O
- 이벤트 기반
브라우저는 요청과 처리 등의 작업을 수행해주는 엔진인 스레드가 있는데 자바스크립트 언어는 싱글 스레드로 개발되는 언어이고 Node.js를 통해 브라우저에서 실행되면 하나의 스레드로 클라이언트와 서버간의 무수히 많은 모든 작업을 처리한다.
I/O는 Input과 Output의 약어이며 블로킹은 하나의 작업을 끝내기 전까지 아무것도 못하게 되고 하나의 작업을 끝내고 다음 작업을 수행하는데 논블로킹은 하나에 매여있지 않고 최소한의 대기시간으로 최대한 많은 작업을 수행한다. 이를 통해 우리는 싱글스레드인 자바스크립트가 동시에 실행되고 동시에 끝나는 것처럼 보이는 것이다.
이벤트 기반이라는 것은 하나의 스레드에서 작업이 들어와야만 수행을 하고 처리 할 작업이 있지 않으면 자바스크립트는 수행하지 않는다는 것이다.
📖 모듈과 NPM
Node.js 안에 있는 모듈은 다른 개발자들이 만들어준 코드(기능)덩어리로 setTimeout( )과 같은 내장 모듈과 패키징이 된 상태로 다운받아서 사용할 수 있는 외장 모듈이 있다. 즉 우리가 많이 알고있는 라이브러리라고 표현 할 수 있다.
외부 모듈을 내 폴더 혹은 프로젝트에 다운로드 할 수 있도록 도와주는 서비스로 NPM이 있다. 이는 노드패키지매니저의 약어로 Node.js기반의 라이브러리를 쉽게 깔고 사용할 수 있게 해주는 하나의 서비스 명칭이라 할 수 있다.
🔗 React
사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리
인터렉션이 많은 웹&앱을 개발하기 위해 주로 사용한다. 리액트가 많이 사용되는 이유로는 상대적으로 배우기 쉬운 라이브러리이며 여러 기능들을 위해 이미 만들어져 있는 환경을 갖추고 있고 많은 기업들의 사용으로 검증이 되었기 때문이다.
📖 React 라이브러리? 프레임워크?
🔸 프레임워크
프레임워크는 특정 서비스를 완성할수있는 모든 기술, 기능들이 틀 안에 있으며 여기에는 라이브러리를 포함한다. 작성한 소스 코드를 호출하고 소스 코드는 어떠한 기능을 구현하기 위해 라이브러리를 호출한다.
즉 프레임워크는 앱을 만드는데 필요한 대부분의 라이브러리를 가지고있다.
🔸 라이브러리
라이브러리는 어떠한 특정 기능을 모듈화해놓은 것이다.
📌 리액트가 라이브러리로 생각하는지, 프레임워크라 생각하는지 사실 그러한 생각에 이유가 있다면 프레임워크라 해도 되지만 리액트가 라이브러리인 이유는 리액트는 전적으로 UI를 렌더링하는데 관여하기 때문이다.
화면을 바꾸는 라우팅은 react-route-dorm 모듈을 사용하고 상태관리를 위해서는 redux과 같은 여러 모듈을 사용하며 빌드를 위해서는 웹팩, npm 등을 사용한다. 또한 테스팅을 위해서도 ESlint, Mocha등을 이용하기때문에 리액트는 프레임워크가 아닌 라이브러리이다.
정리하자면 리액트를 프레임워크라고 하기에는 다양한 라이브러리로 모듈을 구성하고 필요로하여 라이브러리이다.
