React.js 코드랩 세션을 시작하시기전에 설치해야 할 것들은 4 가지가 있습니다.
- GIT
- NPM / NODE
- MONGODB
- EDITOR (Atom, Bracket, Sublime, Editplus, Vim …)
위 프로그램들을 설치하는 방법을 알아보도록 하겠습니다.
1. GIT
개발자라면 한번쯤은 들어봤을 Git 은 버전관리 시스템입니다.
다운로드: https://git-scm.com/downloads
.
2. NPM / NODE
Node.js 는 자바스크립트를 서버환경에서 실행하는 자바스크립트 런타임 입니다.
NPM 은 Node.js 로 만들어진 모듈들을 설치 및 버전관리 할 수 있는 프로그램입니다.
Node.js 를 설치하면 NPM 도 함께 설치됩니다.
LTS 버전으로 설치해주세요.
다운로드: https://nodejs.org/en/download/
주의: Node.js를 설치 한 다음에,
npm install -g npm을 통하여 npm 버전을 최신버전으로 업데이트하세요. LTS 버전에서는 지금은 NPM을 2.15.9 을 사용하는데, 이는 모듈을 설치할때 nested 된 구조로 설치하기 때문에 React.js 프로젝트를 만들땐 정말, 정말, 오래걸립니다. (babel-preset-es2015 설치 할 때). 위 명령어로 최신버전인 3.10.6 을 사용하면 모듈설치가 훨씬 빨라집니다. (node_modules 의 용량차이가 어마어마합니다. babel-preset-es2015 의 경우 6.14MB, 구버전 NPM을 사용 했을땐, 144MB)
3. MongoDB
MongoDB는 인기있는 NoSQL 데이터베이스 중 하나 입니다.
코드랩에서 만들 프로젝트에서 이 데이터베이스를 사용합니다.
다운로드: https://www.mongodb.com/download-center#community
서버를 실행하는부분은 https://velopert.com/436 를 참조해주세요.
(몽고DB를 돌리는게 무겁다면, 무료 몽고DB 호스팅인 https://mlab.com/ 를 사용해도 됩니다)
4. EDITOR
자신이 가장 좋아하는 에디터가 있다면… 사용하시면 됩니다!
제가 추천하는 에디터는 Atom 입니다.
다운로드: https://atom.io/
함께 사용하면 유용한 패키지:
- jshint: JS 문법 검사
- react: JSX Syntax highlight 호환
jshint 를 사용한다면 ES6 를 쓸 때, 프로젝트의 루트폴더에 .jshintrc 라는 파일을 만들고
{ "esversion": 6 }위 내용으로 저장해야 ES6 문법 검사를 할 수 있습니다.
환경설정을 하고 본인의 컴퓨터에서 작업을 하는것을 권장드립니다 (혹은 리모트 서버 컴퓨터에서)
그러나, 코드랩 시간에 작업환경 설정을 끝내지 못하게 된다면, (만약에, 인터넷 환경이 안좋다던지.. 위 작업들이 번거롭다던지…) 그렇다면 클라우드 기반 에디터인 Nitrous 를 사용하면 편합니다.
Nitrous 에는 MongoDB 빼고 다 설치가 되어있습니다.
Nitrous는 현존하는 IDE 중에서 속도가 가장 빠릅니다, 성능도 좋구요. 단점은, 한달에 50시간동안만 서버를 켜놓을 수 있습니다 (사용하지 않을떈 자동으로 종료됩니다)
혹은 Cloud9 을 사용해도 좋습니다. 그러나, C9는 이제 가입할때 본인인증차 VISA 카드를 요구해서 (자동으로 결제를 하지는 않습니다) 코드랩 참석자분들중 VISA 카드가 없으신 분들이 있을것이라 판단하여 코드랩에선 Nitrous를 추천하였습니다. 만약에 C9를 사용하시는경우, clone 및 checkout 을 하실 때마다 서버와 개발서버의 포트를 8080, 그리고 8081로 변경해줘야하는 번거로움이 있습니다. server/main.js , webpack.dev.config.js