우리는 자바스크립트 라이브러리인 react.js를 이용해 프론트엔드를 개발한다. React.js를 사용하기 위해 node.js 라는 자바스크립트 런타임 환경을 이용한다. Node.js를 이용하면 브라우저 밖에서도 자바스크립트를 컴파일하고 실행할 수 있다.
Node.js 전까지 자바스크립트는 브라우저 내에서만 실행 가능했다. 자바스크립트를 실행하기 위해서는 브라우저상에서 HTML 렌더링의 일부로 실행하거나, 개발자 창의 자바스크립트 콘솔을 이용해 실행해야 했다. 다시 말해 자바스크립트는 브라우저 밖에서는 실행 할 수 없었다. 이 모든 것은 과거형이다. 이제는 그렇지 않다. Node.js 는 자바스크립트를 내 컴푸터에서 실행 할 수 있게 해주는 프로그램, 즉 자바스크립트 런타임 환경이다. Node.js는 구글 크롬의 V8 자바스크립트 엔진을 싱행한다.
자바스크립트를 브라우저 밖에서 실행할 수 있는 것은 자바스크립트를 클라이언트 언어뿐만 아니라 서버 언어로도 사용할 수 있다는 뜻이다. 즉. 자바스크립트로 서버를 만들수 있다는 뜻이다. 그리고 우리는 자바스크립트로 된 node서버를 이용해 프론트엔드 서버를 개발한다. 우리의 프론트엔드 서버는 별 달리 하는게 없다. 요청이 왔을 때, HTML, JavaScript, CSS를 리턴하는 것 뿐이다.
npm은 node.js 의 패키지 관리 시스템이다. 그래들이 메이븐 레포지터리에서 라이브러리를 다운받는 것과 비슷한 개념으로 우리는 npm을 이용해 npmjs에서 node.js 라이브러리를 설치한다. npm은 node.js 를 설치하면 함께 설치된다.
npm 버전 확인
$ npm version
npm install react
$ npm install react
$ mkdir react-basic
$ cd react react-basic
$ npx create react-app todo-react-app