[React] node.js의 정의 및 npm 설치하기

정의

Node.js 홈페이지에서는 Node.js를 아래와 같이 정의하고 있다. 

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

-> Node.js는 크롬의 V8 JavaScript 엔진(자바 스크립트 실행 엔진 중 압도적인 성능을 가진 엔진)에서 런타임시 빌드되는 JavaScript로 Node.js는 ^[각주:1]event-driven, non-blocking I/O 모델에서 사용된다. Node.js의 npm은 세계에서 가장 큰 생태계를 가진 오픈소스 라이브러리이다.

Wiki 정의 : 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼

- 자바스크립트 실행 환경으로써, Node.js가 등장하기 전에는 서버와 클라이언트는 별개의 언어(Server - Java/PHP/Ruby/Phython, Client - javascript)로 개발을 했는데, Node.js 가 등장함으로써 서버도  자바스크립트로 구현 가능할 수 있게 되었다. 

* 참고로 Angular는 라이브러리가 아닌 Framework이다. 따라서 Angular와 React.js를 같이 사용할 수 있다.

장점 

1. 서버 프로그램과 클라이언트 프로그램을 모두 자바스크립트로 만들 수 있다.  

React는 서버 사이드 ^[각주:2]렌더링을 염두에 두고 설계되었다. (즉 서버 & 클라이언트 사이드 둘다 렌더링이 가능하다.)

서버 사이드렌더링이 가능하다는 것의 장점으로 ^[각주:3]검색 엔진 최적화를 가능(ex. 구글 검색엔진)하게 해준다. 

단, 서버 성능이 좋지 않음에도 불구하고 많은 방문자를 필요로 하다면, 서버 랜더링을 사용하지 않는것이 좋음. 

Server & Client side rendering : http://asfirstalways.tistory.com/244

2. Node.js 가 제공하는 API는 모두 비동기 I/O를 사용하므로 서버 성능을 높여준다. 특히 실시간성이 높은 채팅 application이나 작은 처리가 대량으로 발생하는 application에서 진가를 발휘한다.

3. 편한 라이브러리 : Node.js는 많은 라이브러리를 사용할 수 있는데 이를 위해서는 패키지 매니저인 npm을 사용한다. (node.js package manager) 이 npm을 사용하면 간단하게 라이브러리 설치가 가능하다.

(참고 : npm 뿐만 아니라 Yarn이라는 Node.js 패키지 매니저도 있다. 이는 페이스북이 발표한 것으로 구글도 함께 개발에 참여하고 있다.)

4. Virtual ^[각주:4]DOM(Document Object Model)사용함으로써 성능을 높여준다. 

DOM vs Virtual DOM : http://webframeworks.kr/tutorials/translate/virtual-dom/

Virtual DOM 이해를 돕기위한 Youtube :  https://youtu.be/muc2ZF0QIO4

5. 배우기 쉽다. controller, directive, model, view model..등등을 사용하지 않고 -> component 한개만 사용한다.

6. 뛰어난 메모리 관리, 성능 

7. Facebook이 밀어준다. 업데이트를 계속해주고 있음. 자사의 product에서 react가 부분적으로 사용됨. (인스타그램은 대부분 React js를 사용하여 개발함)

8. 다른 Framework나 라이브러리 혼용 가능하다.

여기서 대량 접근에 강한 Node.js 가 무엇일까?

Node.js가 대량 접근에 강한 이유가 Node.js는 비동기 I/O를 사용하기 때문이라고 앞서 설명하였다. 

가령 웹 서버에 동시에 많은 접속이 들어오면 입출력을 대기하는데 대부분의 프로그래밍 언어는 이러한 입출력 대기하는 동안 CPU 자원등을 낭비한다. 즉 입출력을 대기하는 동안 CPU가 다른 처리를 할 수 없다. 하지만 비동기 입출력을 이용한 API를 이용하면 대기하는 동안 CPU가 다른 처리를 할 수 있다. 

단점

1. View only : 보여지는 부분만 관여, 데이터 모델링, 라우터, Ajax 기능 X. 대신 빠진 기능은 다른 라이브러리와 혼용하여 사용하면 됨.

2. IE8 이하 지원 X  대신 react V 14이하를 사용하면 됨

npm 설치하기

- Windows에서 설치

아래 경로에서 npm 프레임워크를 설치한다. node.js만 설치함으로써 npm까지 설치된다.

https://nodejs.org/en/

LTS를 다운로드 한다.

참고 : LTS는 안정적으로 지원하는 버전이며 Current는 잦은 업데이트를 진행한다고 함.

다운로드 후 Next눌러 설치를 완료한다.

설치가 정상적으로 완료되면 아래와 같이 npm -v 명령어를 입력하여 버전이 출력되는지 확인한다.

- ubuntu에서 설치하기

아래 포스팅을 참조하였습니다.

http://itstory.tk/entry/Ubuntu-1604-nodejs-%EC%99%80-npm-%EC%84%A4%EC%B9%98

- Mac OS에서 설치하기

아래 포스팅을 참조하였습니다.

http://junsikshim.github.io/2016/01/29/Mac%EC%97%90%EC%84%9C-Node.js-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0.html

Reference 

이 포스팅은 '모던 자바스크립트 개발자를 위한 리액트 프로그래밍' 책과 "React & Express를 이용한 웹 어플리케이션 개발하기" 강좌를 참고하였습니다. 

1. 사용자가 이벤트를 발생시켰을 때에만 작동하는 방식. 즉 입력장치로 데이터를 전송했을 때에만 작동하는 방식.대부분의 웹서버는 사용자가 이벤트를 발생하기까지 기다리기때문에 자원낭비를 하게 되는데, Event-driven 방식을 따르면 발생한 이벤트에 대해서만 웹서버가 연결을 해주므로 자원낭비를 최소화할 수 있다. [본문으로]
2. 렌더링이란 논리적인 문서의 표현식을 그래픽 표현식으로 변형시키는 과정입니다. 이 과정은 다음과 같이 크게 2단계를 거쳐 이뤄집니다. 1) DOM 요소와 스타일에 기반을 둔 레이아웃 계산 2) 계산된 요소의 화면 표현 일반적인 전체 흐름은 브라우저에 문서가 로딩됨에 따라 DOM 트리의 구성이 진행되면 레이아웃을 계산한 후 문서에 요소를 그립니다. [본문으로]
3. 검색 엔진 최적화 (영어: search engine optimization,SEO)는 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업을 말한다. [본문으로]
4. DOM(Document Object Model) : 문서를 객체로 표현하기 위한 표준으로서 HTML이나 XML등의 문서를 객체로 표혀할 때 사용 하는 API 이다. Dom에 대한 설명은 아래 링크를 참조한다. http://wiki.gurubee.net/pages/viewpage.action?pageId=6259958 [본문으로]