웹 애플리케이션 프로젝트 생성하기 [1/3]

온라인 빙고 게임 만들기

5x5칸에 번갈아 가면서 숫자를 부르고, 해당 숫자를 지워 가로, 세로, 대각선으로 먼저 몇 줄을 만든 사람이 이기는 게임.

여기서는 입력 인터페이스를 작성하는 것이 중요하지 않으므로, 무작위로 숫자가 입력되는 것으로 대체한다.

 

빙고 게임 프로젝트 생성

express rst_bingo
cd rst_bingo && npm install

npm install을 통해 node_modules라는 노드 모듈 디렉터리에 express 모듈, Jade 모듈이 설치되고, 실시간 빙고 게임을 가능하게 해줄 Socket.IO 모듈도 설치된다.

public 디렉터리에는 클라이언트 측에서 사용할 이미지, javascripts, CSS관련 파일 등의 리소스가 있다. jQuery를 사용할 것이므로 최신 버전의 jQuery 파일을 내려받아 함께 넣어둘 것이다. 또한 빙고 게임 클라이언트 기능을 담은 main.js도 추가할 것이다. 

view 디렉터리에는 기본으로 생성되는 index,jade와 layout.jade 파일이 있다. jade확장자는 Jade 템플릿 엔진이 해석할 수 있는 화면 구성, 즉 뷰 계층에 대해 기술한 내용을 담고 있다. 즉, HTML을 표현한 내용이라 생각하면 된다.

 

새로 만들 파일: javascripts/main.js, views/main.jade

내려받을 파일: javascripts/jquery-x.x.x.min.js

수정할 파일: app.js, routes/index.js, views/layout.jade

 

jquery파일 내려받는 방법

[jQuery] jQuery 설치 방법

 

빙고 게임 라우팅

app.js에서 한 줄만 추가한다.

app.use('/main', indexRouter);

 /main으로 접속할 경우 indexRouter모듈이 실행되도록 연결하는 코드이다. 그리고 index.js를 수정하자.

routes/index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Bingo!' });
});

router.get('/main', function(req, res, next){
  res.render('main', { title: 'Bingo!', username: req.query.username });
});

module.exports = router;

router.get('/main', function ... 을 추가하여 'main.jade'를 렌더링하도록 지정한다.