React.js Codelab 2016 – 진행을 위한 사전 작업환경 설정하기


React.js 코드랩 세션을 시작하시기전에 설치해야 할 것들은 4 가지가 있습니다.

  1. GIT
  2. NPM / NODE
  3. MONGODB
  4. 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 라는 파일을 만들고

위 내용으로 저장해야 ES6 문법 검사를 할 수 있습니다.


환경설정을 하고 본인의 컴퓨터에서 작업을 하는것을 권장드립니다 (혹은 리모트 서버 컴퓨터에서)

그러나, 코드랩 시간에 작업환경 설정을 끝내지 못하게 된다면, (만약에, 인터넷 환경이 안좋다던지.. 위 작업들이 번거롭다던지…) 그렇다면 클라우드 기반 에디터인 Nitrous 를 사용하면 편합니다.

Nitrous 에는 MongoDB 빼고 다 설치가 되어있습니다.

Nitrous는 현존하는 IDE 중에서 속도가 가장 빠릅니다, 성능도 좋구요. 단점은, 한달에 50시간동안만 서버를 켜놓을 수 있습니다 (사용하지 않을떈 자동으로 종료됩니다)

혹은 Cloud9 을 사용해도 좋습니다. 그러나, C9는 이제 가입할때 본인인증차 VISA 카드를 요구해서 (자동으로 결제를 하지는 않습니다) 코드랩 참석자분들중 VISA 카드가 없으신 분들이 있을것이라 판단하여 코드랩에선 Nitrous를 추천하였습니다. 만약에 C9를 사용하시는경우, clone 및 checkout 을 하실 때마다 서버와 개발서버의 포트를 8080, 그리고 8081로 변경해줘야하는 번거로움이 있습니다.  server/main.js , webpack.dev.config.js

  • 배준경

    ide중에 c9은 어떤가요???혹시 써보셨나요?

    • 저도 C9 자주 사용합니다 🙂
      거기도 8080 8081 포트로 열수있어서 좋아요.

      그런데 거기는 이제 가입할때 VISA카드를 요구해서요..
      그래서 코드랩에선 nitrous를 사용하기로 했답니다.

      C9 계정이 있다면 사용하셔도 좋아요!

  • Seongkuk Park

    heroku도 좋아요~

  • Suung Jo

    Nitrous는 이제 서비스 하지 않는것 같네요 ㅠ
    atom에서 react 설치 했는데 이상하게 jsx 문법에서만 오류난것처럼 빨간색이 되는데 왜 그런걸까요 ㅠ
    Nitrous 말고 다른 서비스 추천할만한게 C9말고 또 있을까요?

    • C9 밖에 .. 잘 모르겠네요.
      로컬에서 작업하는게 가장 이상적일것같습니다.

      Atom 에서 리액트 작업을 하신다면, ESLint 확장프로그램을 설치하고, 프로젝트에서 ESLint 설정을 하는게 가장 좋은방법이지만.. 이는 따로 설정하는 방법을 배워야 하기에 – 가능하면 나중에 따로 알아보시길 바랍니다.

      jshint 의 경우엔 .jshintrc 파일을 만들어주셔야 JSX 문법에서도 오류가 나지 않습니다. 혹시 이미 그 파일을 만들었는데도 오류가 나는건가요?