Node.js로 뭔가 만들어보자 - 1. 개발환경 구성하기

Node.js로 게시판을 만들어 보기 위해서 늘 그렇듯 거창한 시작을 해보자.

바로 설계.

어떤 기술을 쓰고, 어떤 구조로 갈지 먼저 대충이라도 정해두는 단계가 필요하니..

일단 Server-side는?

당연히 Node.js

Font-End는?

그냥 쌩으로 만들지, Angular로 가면서 MEAN 스택으로 갈지....하다가

그래도 제일 Hot한 (사실 그냥 내가 관심있어서 맘대로..) React로

Database는?

회사에서 맨날 RDB쓰니까 공부를 위해 익숙하지 않은 MongoDB로

다 정했다. 만세!

........

정신차리고 다시..

1. Node.js 설치

우선 Node.js 개발을 위해서는 Node.js 를 설치해야한다.

Node.js 설치는 공식 사이트에서 다운 받아 설치하면 된다.

Node.js 공식사이트 바로가기

---

일단 추천해주시는 v4.4.7로 설치.

2. 프로젝트 구조 잡기

Javascript 개발자라면 다들 grunt나 brower, yeoman 을 잘 알고 다룰 줄 알것이다.

근데 난 잘 모른다. ^^;;;

아무튼..

우선 yeoman으로 프로젝트 구조를 잡아보자.

먼저 yeoman 을 설치하고..

> npm install -g yo

어떤 generator를 사용할지 골라보자

yeoman generator 찾기 사이트

이곳에서 원하는 Generator를 찾아보고 설치하면 된다.

마침 첫번째에 react-fullstack !!!!

이걸로 설치.

했다가 뭔지 모르겠어서 다시 지웠다. ^^;;;

express-generator를 설치해서 구조를 잡아보자

> npm install -g generator-express  > yo express

안내해주는 내용에 알맞게 입력..

빌드 툴은 요즘 많이 쓰는 gulp로 선택

이제 실행해보자

> npm start

Express 의 Hello World!!! 페이지가 잘 뜬다.

3. 형상관리

아무리 개인 스터디 프로젝트지만 언제 어디서나 개발할 수 있는 환경을 위해 예기치 못한 사고로 인해 코드가 날아가버릴 것을 대비하여 형상 시스템에 안전하게 보관해보자.

형상 시스템은 Git으로 

Atlassian 제품인 Bitbucket에서 무료로 제공하는 서비스가 있으니 그걸 이용해보자. (Source Tree가 편해서 Git client 툴로 사용하고 있다)

Bitbucket 바로가기

Bitbucket 계정 생성 후 들어가면 repository를 생성할 수 있다.

저장소를 생성한 후 해당 저장소를 Clone 하여 local repository를 만든다.

board 폴더를 local 저장소로 만들려니 아까 이미 만들어서.....;;;

이렇게 저렇게 해서 옮겨서 board 폴더에 만들었던 소스코드를 넣었다.

다음부터는 repository부터 Clone 해야할 듯...

저장소를 생성했으면 remote 저장소에 굳이 커밋할 필요 없는 (ex> node_modules 폴더) 목록을 관리하기 위해  .gitignore 파일을 생성한다.

# .gitignore 파일 내용  node_modules/

현재 생성되어있는 구조를 commit & push를 하는 경우 비어있는 폴더는 올라가지 않는다.

당황하지 말고..나중에 올리자 :)

4. 개발 IDE

요즘 개발 IDE 추천을 받으면 내 주변 사람들은 보통 intellij를 이야기한다.

하지만 유로니까......

Atom으로 설치

Atom바로가기

Atom은 Github에서 만들고 있는 오픈소스 IDE이다. 

무료 IDE 중에서 괜찮다고들 해서 설치해서 쓰고있다. 실제로 괜찮은 것 같다. (완벽하진 않지만....)

5. MongoDB

mongoDB를 사용하기로 했으니 설치해야하는데...

혹시 누군가와 협업을 할 수 있으니 클라우드 서비스를 이용해보자.

이것저것 많이 알아봤지만 mlab으로 보통 쓰고 있다.

mlab 바로가기

보다시피 500MB가 무료로 제공된다.

무료로 제공해주는 옵션은 Amazon US Virginia Region 에 Single-node 로만 제공된다. (MongoDB 버전은 3.0.x만 가능)

그래서 속도는 무지하게 느리다...(돈 없으면 참아야지)

mLab에 database를 만들면 아래와 같이 생성되어있는 database 목록이 나타난다.

해당 Database를 클릭해서 들어간 후 User 탭에서 Database user 를 추가해주어야 한다.

모두 추가되었으면 이후에 개발 시 다음과 같은 url로 해당 db에 접근할 수 있다.

mongodb://<dbuser>:<dbpassword>@ds00000.mlab.com:포트번호/board

테스트로 붙어보자.

1. mongo shell을 이용하는 방법

2. client tool을 이용하는 방법

사용하기 편하기 위해 client tool을 설치하기로 한다.

MongoDB를 위한 많은 client 도구가 있지만 내 선택은 Robomongo

Robomongo 바로가기

설치 후 접속 정보를 입력해보자

connection 아이콘을 클릭하면 등록되어있는 connection 정보가 나타나고(처음이니까 비어있는..)

create 버튼을 통해 접속 정보를 등록할 수 있다.

먼저 connection 탭에서 접속정보의 닉네임과 접속할 db 의 주소와 port정보를 입력한다. (address는 ds000000.mlab.com 형식)

그 다음 Authentication 탭으로 이동하여 아까 만들어둔 database name과 계정정보를 입력한 후 Test를 해본다.

단번에 성공!!! :)

접속정보를 저장하고나면 접속해서 사용하면 된다. 

이제 대략적인 개발환경이 구성된 것 같다.

다음 포스팅에서는 패키지 구조를 좀 더 구체화 하고 필요한 모듈 설치 및 간단히 개발을 진행해보도록 하겠다.