<div>안녕하세요. </div> <div>컴퓨터 공학부 3학년 대학생입니다.</div> <div>전역 후 복학하기 전에 뭘 할까 하다가</div> <div>집에서 굴러다니는 저사양 컴퓨터로 웹서버 구현 후 채팅 프로그램을 만들어 보자 하고 </div> <div>무작정 시작하게 되었습니다.</div> <div>맨땅에 해딩이지만, 우리에겐 naver가 있기 때문에 맨땅에 서칭!</div> <div>서칭 서칭을 통해서 채팅처럼 실시간 통신에는 APM 보다는 <strong>MEAN(MongoDB, Express.js, AngularJS , Node.js)</strong>을 </div> <div>사용하는게 좋다는걸 보고 해본적 없는 MongoDB, Node.js를 시작했습니다.</div> <div>사실 예제를 보고 그대로 따라하면 되지만, 2주간 구글링을 하면서 당했던 맨붕과 </div> <div>추후에 저처럼 채팅 예제를 Node.js와 MongoDB로 해보고 싶은 사람들을 위해 기록을 남깁니다.</div> <div>사실 이 예제에는 Express.js와 AngularJS가 필요없기 때문에 하진 않았지만, 해야 될텐데 배울만 한데 있을까요???</div> <div> </div> <div><strong><font color="#c00000">(저는 윈도우7-64비트에서 개발을 했습니다. 추후 리눅스에서 하게 되면 다시 글을 올리겠습니다.)</font></strong></div> <div><strong><font color="#c00000"></font></strong> </div> <div><strong>1. 개발 환경 구축.</strong></div> <div>- 여기서 제가 2주간 맨붕을 당했습니다 ㅠㅠ</div> <div>   1) Node.js 및 MongoDB 설치</div> <div>      - <a target="_blank" href="http://www.Nodejs.org" target="_blank">www.Nodejs.org</a> / <a target="_blank" href="http://www.mognodb.org" target="_blank">www.mognodb.org</a> 에서 각각 자기 PC사양에 맞게 다운받으면 됩니다.</div> <div>      - 다운 받은 후 설치하면 됩니다. (사실 잘 모르니 Next 해서 넘겨서 설치하면 됩니다. 경로 설정은 Custom을 통해서 하면 됩니다.)</div> <div>   2) MongoDB를 서비스에 등록하기.</div> <div>      - MongoDB의 Bin폴더를 Path에 등록해도 되지만, 그렇게 하기보다는 작업관리자 창에 서비스에 Demon처럼 돌아가게 했습니다.</div> <div>      - 첫번째로 프로젝트를 만들고 싶은 곳에 폴더를 생성 후 이름을 넣습니다. (저는 D:\에 chat이라는 폴더를 만들었습니다.)</div> <div>      - 프로젝트 폴더 안에 DB전용 폴더를 생성합니다. (저는 D:\chat\에 MongoDB 폴더 생성) </div> <div>      - 메모장을 키고 그 폴더 안에 mongod.cfg라는 파일을 다른이름으로 저장합니다. 안에는 Log파일 Path와 DB의 Path 경로를 저장 할 수 있습니다.</div> <div>      - mongod.cfg에 저는 MongoDB 폴더 안에 log 폴더 생성 후 mongod.log가 저장되고 디비 저장 경로를 설정해 줬습니다.</div> <div>                              logpath=d:\chat\MongoDB\log\mongod.log</div> <div>                              dbpath=d:\chat\MongoDB\db</div> <div>         다음과 같이 mongod.cfg에 입력하고 저장하게 되면 log파일과 db가 저장될 경로가 지정됬습니다.</div> <div>      - 이제 cmd창을 키고 아레와 같이 입력하면 서비스에 등록이 됩니다.</div><pre style="border-top-style:none;overflow:auto;white-space:pre;border-bottom-style:none;text-transform:none;word-spacing:0px;color:rgb(34,34,34);padding-bottom:24px;padding-top:24px;font:14px/24px 'Source Code Pro', monospace;border-right-style:none;padding-left:12px;margin:24px 0px;border-left:rgb(73,71,71) 5px solid;display:block;letter-spacing:normal;padding-right:12px;text-indent:0px;"><span class="s2" style="color:rgb(64,112,160);">"C:\Mongodb\bin\mongod.exe"</span> <span class="p">-</span><span class="n">-config</span> <span class="s2" style="color:rgb(64,112,160);">"D:\chat\MongoDB\mongod.cfg"</span> <span class="p">-</span><span class="n">-install</span></pre> <div>        (여기서 Mongod의 경로를 지정 해 주고, 프로젝트 안의 Mongod.cfg 경로를 지정해 줘서 서비스를 등록합니다.)</div> <div> </div> <div>     - 서비스에 등록후 cmd창에서 아래와 같이 입력하면 서비스가 시작되면서 컴퓨터에서 MongoDB가 데몬처럼 돌아갑니다.</div><pre style="border-top-style:none;overflow:auto;white-space:pre;border-bottom-style:none;text-transform:none;word-spacing:0px;color:rgb(34,34,34);padding-bottom:24px;padding-top:24px;font:14px/24px 'Source Code Pro', monospace;border-right-style:none;padding-left:12px;margin:24px 0px;border-left:rgb(73,71,71) 5px solid;display:block;letter-spacing:normal;padding-right:12px;text-indent:0px;"><span class="n">net</span> <span class="n">stop</span> <span class="n">MongoDB</span></pre> <div>     - 그 후 cmd에서 mongo라고 입력하면 바로 MongoDB가 실행됩니다. (dbpath를 따로 입력 할 필요가 없음.)</div> <div> </div> <div>   3) git 설치 후 Node.js 세팅.</div> <div>     - git을 설치해줍니다. git을 설치 하는 이유는 저도 잘 모르지만, 지금 업데이트 된 버전의 Socket.io가 문제가 있기 때문에</div> <div>       그냥 npm install socket.io로 설치하게 되면 오류가 납니다. 따라서 npm install automattic/socket.io로 설치를 해야 되는데, </div> <div>       그냥 cmd 창에서 하면 오류가 납니다. 그래서 git을 설치하면 따로 console창이 cmd처럼 뜨는데 여기서 Node.js를 구동하면 됩니다.</div> <div>       (git을 사용하는 이유를 자세히 좀 알려주세요 ㅠㅠ)</div> <div>     - 프로젝트 폴다 안에 메모장을 킨 후 package.json으로 다른이름 저장! (저의 경우 D:\chat\)</div> <div> </div> <div>{<br>  "name": "chat-test",<br>  "version": "0.0.0",<br>  "private": true,<br>  "scripts": {<br>    "start": "node ./bin/www"<br>  },<br>  "dependencies": {<br>    "body-parser": "~1.12.4",<br>    "cookie-parser": "~1.3.5",<br>    "debug": "~2.2.0",<br>    "ejs": "~2.3.1",<br>    "express": "~4.12.4",<br>    "mongodb": "^2.0.35",<br>    "mongojs": "^1.0.1",<br>    "morgan": "~1.5.3",<br>    "serve-favicon": "~2.2.1",<br>    "socket.io": "automattic/socket.io"<br>  }<br>}<br>       요로콤 저장 해주면 됩니다. 이게 뭐냐면 페키지라고 해서 나중에 이것만 들고 다른 컴퓨터에 가면 일일히 npm install *** 할 필요 없이</div> <div>       npm install 이렇게만 입력해 주면 페키지 안의 파일들이 자동적으로 설치됩니다. 그리고 만약 node_modules이 업데이트가 됬다면</div> <div>       별도로 재설치 할 필요 없이 페키지 안에서 버전만 업데이트 시켜 준 후 npm update를 해주면 자동으로 업데이트 됩니다. </div> <div>       <strong>즉 페키지만 관리해주면 됨으로 좋음.</strong></div> <div><strong></strong> </div> <div>       - 여튼 이렇게 만들고 package.json을 저장하고 git화면에서 npm install 을 입력하게 되면 뾰로롱~ 이번 예제에서 필요한 모듈이 자동으로 설치</div> <div>         됩니다.</div> <div> </div> <div>       - 개발환경 구축 끝!! </div> <div> </div> <div><strong>2. 예제 작성! </strong></div> <div>      1) 유투브에 예제를 따라서 하면 됩니다.</div> <div>         - <a target="_blank" href="https://www.youtube.com/playlist?list=PLfdtiltiRHWHZh8C2G0xNRbcf0uyYzzK" target="_blank">https://www.youtube.com/playlist?list=PLfdtiltiRHWHZh8C2G0xNRbcf0uyYzzK</a>_ <- 유투브 경로에요.</div> <div> </div> <div><strong>3. 완성!</strong></div> <div style="text-align:left;"><img class="chimg_photo" style="border-top:medium none;border-right:medium none;border-bottom:medium none;border-left:medium none;" alt="서버 정상작동.png" src="http://thimg.todayhumor.co.kr/upfile/201507/1435836445d6rfe1KctqDLCh1jqddcgTbVOH.png" width="800" height="867"></div> <div style="text-align:left;"><img class="chimg_photo" style="border-top:medium none;border-right:medium none;border-bottom:medium none;border-left:medium none;" alt="연결.png" src="http://thimg.todayhumor.co.kr/upfile/201507/1435836445BRQChzMolwEEwvjKIPZZhhmobo.png" width="800" height="450"></div> <div style="text-align:left;"><img style="border-top:medium none;border-right:medium none;border-bottom:medium none;border-left:medium none;" alt="DB저장.png" src="http://thimg.todayhumor.co.kr/upfile/201507/1435836444SfZyxbDBTSpPLsa.png" width="677" height="442"></div>