티스토리 뷰

Node.js 사용자가 만드는 웹게임 만들기 이야기 - 1

주의사항

이 글은 제 능력부족으로 누구에게 정보를 알려주거나 가르치는 목적의 글이 아님을 알려드립니다. 그냥 일기라 생각하고 봐주시면 될 거 같습니다.

  • 중간중간에 뭔가 넣는 이유는 그래도 다른 분들이 보시는거니까 그냥 좀 쓰는겁니다.

서문

안녕하세요. 간만에 블로그에 글을 쓰네요. 사실 제가 해보고 싶은 게 하나 있습니다. 바로 내 닉네임을 걸고 서비스를 하나 만드는 것! 입니다. 근데 이걸 하기 위해서 제가 할 줄 아는 스킬은 node.js 밖에 없는 게 함정이죠. 아무튼 , 이 하나밖에 없는 무기를 가지고 웹게임을 하나 만들어보려고 합니다.

어떤 웹게임을 만들려고?

예전에 MS 택틱스라는 웹 게임을 들어보신 기억이 있나요? 링크는 나무위키 설명인데 웹게임 FF ADVENTURE의 소스를 기반으로 나온 건담을 소재로 한 오픈소스 웹 게임입니다. 그냥 전술을 적당히 짜서 클릭만 주구장창 하는 게임이었지만 고등학생 때 이 게임과 던파에 빠져 성적을 말아먹었었기에 더 감회가 있습니다. 지금은 제가 활동하던 서버는 망하고 그 당시 채팅방에서 친목질하던 사람들끼리 카톡 오픈채팅방을 하고 있습니다. 뭐 그러다보니 그 게임을 리메이크하고 싶다는 생각이 들었습니다. 과거의 향수라고 할까요…

프로젝트 재개발

그런데 MS 택틱스(이하 MST)는 아는 사람은 알겠지만 Perl로 만들어진 게임입니다. 심지어 Github조차 없던 시절(맞나 모르겠습니다)의 게임이라 소스코드를 찾기도 힘듭니다. 따라서 제 기억과 몇몇 분들의 협조로 얻은 스크린샷을 기반으로 다른 형태로 재개발을 할 거라는 계획을 세우게 되었습니다.

다른 소재, 다른 아이디어

물론 전 건담에 그렇게 관심이 있던 사람은 아닌지라 다른 소재를 사용할 생각입니다. 실제로 현재 운영되고 있는 인택, 디택 등은 건담 외의 소재를 적극 활용하고 있습니다. 저는 아이돌마스터를 소재로 삼을 생각입니다. 아이돌의 끊임없는 연습과 실제 공연 무대에서의 성과 등을 그려보려고 합니다.

저작권법 어떻게 하나요?

슬프게도 제가 그림을 못그리는지라 프로토타입의 경우, 저작권법을 많이 침해할 거 같습니다. 그리고 과거의 MST도 저작권 침해가 상당했을 것입니다. 뭐… 그래도 한 번 만들어보겠습니다. 제발 경찰이 오지 않기를…그전에 유명해지는 게 먼저 아닌가요?

진짜 서문

물론, 이 블로그는 기술 블로그이니 기술 위주로 설명을 하고자 합니다. 처음엔 그냥 글만 쓰려고 했지만 저에게 큰 영감을 준 블로그가 있어서 링크를 걸겠습니다.
이세계에 진입한 서버 개발 - 1
예전에 계속 저 혼자 작업하고 있던 게 있었는데 계속 무너지고 쉽지 않았는데 이 분의 글을 보고 다시 한 번 제대로 해보기로 마음을 먹었습니다. 블로그 글 쓰는 건 덤이고요. 이제 시작하도록 하겠습니다.

뭐로 만들 것인가?

보통 뭐로 만드는지는 이야기를 하지 않습니다. 근데 이 글은 나름 기술 블로그라 제가 공부하고 있는 것도 같이 진행하도록 할 예정입니다. 실제로 웹 게임이라고 하지만 하나의 웹 서비스이므로 웹 서비스 스택을 그대로 가져갈 예정입니다.

koa

Node.js 진영의 웹 프레임워크는 아시다시피 express가 꽉 쥐고 있습니다. 물론 저는 대세를 따르지 않겠습니다!!!! 물론 대세를 따라가지 않는데에 대한 피해는 다 제가 입는거죠 뭐 ㅠㅠ
각설하고 koa는 tj라는 유명한 node.js 라이브러리 개발자가 Go언어로 탈주옮기기 전 마지막으로 작성한 웹 프레임워크입니다. yield같은 녀석이 없던 node.js 0.12이전 시대에 generator 패턴을 이용한 비범한 웹 프레임워크였는데요. 지금은 node.js 7.6 에 이르러서야 지원하게 된 async/await 패턴을 벌써부터 써먹는 매우 비범한 녀석입니다. 대신 이런 실험적인 내용 덕에 node.js 계열 웹 프레임워크 중 가장 빠른 성능을 보여주고 있습니다. 따라서 이 프로젝트를 진행하면서 koa에 대한 자잘한 설명들도 같이 하게 될 거 같습니다.

시작해보자

먼저 node.js를 설치하지 않은 분들은 nvm을 설치하시면 될 거 같습니다. nvm은 개발 환경에서 node.js의 버전을 쉽게 변경할 수 있도록 도와주는 툴입니다. 여기서는 nvm이 설치되어 있다고 가정하고 시작하겠습니다.

1. node.js 7.x를 설치한다.

글 작성시간(2017-03-12)기준 node.js의 최신 버전은 7.7.2입니다. 받아보도록 하겠습니다.
nvm install node
이러면 nvm이 알아서 최신버전을 설치해줍니다.

cdjhlee@cdjhlee-mint ~ $ nvm install node
Downloading and installing node v7.7.2...
Downloading https://nodejs.org/dist/v7.7.2/node-v7.7.2-linux-x64.tar.xz...
######################################################################## 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v7.7.2 (npm v4.1.2)
cdjhlee@cdjhlee-mint ~ $ node -v
v7.7.2

node.js 를 설치하셨다면 yarn도 설치해보도록 합시다. yarn은 npm의 성능 문제를 해결하기 위해 만든 패키지 관리자입니다. 쓰기 싫으시다면 그냥 npm을 쓰셔도 무방합니다.
npm install -g yarn
보통 node.js를 직접 설치하실 경우 root만 접근할 수 있는 경로에 라이브러리를 설치하기 때문에 sudo 권한이 필요하지만 제가 개발할 로컬 PC는 nvm으로 설치했기 때문에 sudo가 없어도 됩니다.
일단 여기까지 하셨다면 다음 과정으로 들어가겠습니다.

2. 프로젝트 폴더 만들기

koa는 매우 실험적인 프로젝트이기 때문에 폴더구조가 아직 표준화가 되어있지 않습니다. 그래서 저는 express-generator가 생성하는 구조를 재활용할 생각입니다.
먼저 아무 폴더나 만들어보겠습니다. 그냥 폴더명을 idol-project라고 무식하게 정했습니다.

mkdir idol-project
cd idol-project
yarn init

yarn init 명령을 입력하면 몇 번 묻더니 지가 알아서 package.json 파일을 만들어줍니다.
저는 이런 느낌으로 디렉터리를 구성할 예정입니다.

├── app.js
├── package.json
├── public
└── routes
  1. public 폴더는 정적 파일들(index.html이나 각종 이미지 등)의 루트 폴더입니다. 예) public/index.html -> /index.html
  2. routes는 각종 API의 라우팅 정보가 있는 폴더입니다. controllers 와 같은 의미로 사용합니다.
  3. app.js를 시작하면 서버가 시작됩니다.
  4. package.json에는 해당 프로젝트의 메타 데이터들이 있습니다.

참고로 위의 트리 구조는 리눅스의 tree 프로그램을 사용하면 나오며, apt를 이용하여 설치하시면 됩니다. apt-get install tree

3. app.js 파일 작성하기 전 사전작업

우선 app.js를 봅시다.

//app.js
'use strict';

const http = require('http');

const koa = require('koa'),
  koaCompress = require('koa-compress'),
  bodyParser = require('koa-bodyparser'),
  logger = require('koa-logger');

const app = new koa();

appSettings(app);
appRoutings(app);

function appSettings(app) {
  app.use(koaCompress({
    filter: function (content_type) {
      return /text/i.test(content_type)
    },
    threshold: 1024,
    flush: require('zlib').Z_SYNC_FLUSH
  }));
  app.use(bodyParser());
  app.use(logger());

  return app;
}

function appRoutings(app) {
  const router = require('koa-router')();
  router.get('/', async function(ctx, next) {
    ctx.body = 'hello, world!';
  });

  app.use(router.routes()).use(router.allowedMethods());
  return app;
}

const server = http.createServer(app.callback());

server.listen(3000, () => {
  console.log('server listen on 3000');
});

처음이라 아주 간단하게 작성하였습니다. 일단 시작해봅시다.

node app.js

화려하게 에러가 뜹니다. 의존 라이브러리가 설치되지 않았다는 의미이니 설치해보겠습니다.

yarn add koa
yarn add koa-bodyparser
yarn add koa-router@next
yarn add koa-compress
yarn add koa-logger

koa 2는 generator가 deprecated 되었기 때문에 koa-router를 다음 버전으로 사용합니다.

이제 app을 시작해보겠습니다.

node app.js

그리고 http://localhost:3000 을 주소창에 쳐보면 Hello, world! 라고 뜰겁니다.

koa 1.x 와 2.x 간에 사용법이 많이 바뀐지라 이전 코드를 약간 수정한 것 뿐인데 실행이 안되어서 순간 당황했습니다. 저 위의 app.js는 다 수정한 다음 올린 것입니다.

4. git 저장소를 사용하기

저는 아무래도 git을 많이 쓰다보니 소스코드 저장소를 git으로 하게 되었습니다. 보통은 UI를 쓰지만 블로깅을 위해(스샷찍기 귀찮아서) CLI로 하겠습니다.

우선 현재 프로젝트의 경로에서 git init 을 쳐줍시다. 그러면 init 이 끝납니다. 이제 git에 올라가지 말아야 할 파일들을 정리해보도록 하겠습니다. 저는 현재 집에서 개발툴로 visual studio code 를 쓰고 있기 때문에 vscode 관련 셋팅값이 올라가면 안됩니다. 또 node_modules 폴더는 어마어마하게 용량이 크므로 역시 올라가면 안됩니다. (나중에 원격지에서 yarn이나 npm install 한 번 쳐주면 깔끔하게 다시 설치됩니다)
.gitignore 파일을 만들고 거기에 리스트를 적어주면 됩니다.

# vscode 설정파일(폴더)
.vscode

# node_modules
node_modules

# yarn.lock
yarn.lock

이제 initialize 커밋을 하겠습니다. 보통 README.md 파일도 작성해서 커밋하는데 이번엔 빼겠습니다. 지금 폴더만 있지 파일은 3개밖에 없기 때문에 3개만 커밋하겠습니다.

git add .gitignore app.js package.json
git commit -m "Initialize"

이렇게 현재까지 작업한 파일을 커밋하였습니다. 이제 이어서 작업하면 될 거 같네요.

다음에 할 일

졸리고 지치고 해서 일단 여기까지 하고 다음에 다른 작업을 더 진행할 예정입니다.

  1. config 셋팅
    db에 연결하거나 각종 자잘한 설정들이 있을텐데 이를 위해서 설정 파일을 작성하고 이를 분리할 예정입니다.
  2. DB 셋팅 + 데이터 모델링(일부)
    DB는 저에게 가장 익숙한 mongodb, mongoose를 사용할 생각입니다.
  3. router 분리
    app.js가 너무 커지면 보기 안좋으니 router를 분리할 생각입니다.
  4. 사용자 인증 도입
    제가 지치지 않는다면 회원가입, 로그인까지 진행할 생각입니다. 계속 여기까지 한 다음 프로젝트 중단한 건 함정

저도 멈추지 말고 계속 진도 나가고 글을 쓸 수 있었으면 좋겠습니다. 여기까지 읽어주셔서 감사합니다.

2부 보기

댓글
  • 프로필사진 나그네 지나가다가 우연히 봤는데, 정말 재밌게 읽었습니다! 2017.04.20 19:07 신고
  • 프로필사진 달려라라이언 router setting 하는 곳에서 Error 발생하여 아래와 같이 수정하였습니다.


    //app.js

    'use strict';

    const http = require('http');
    const koa = require('koa'), koaCompress = require('koa-compress'), bodyParser = require('koa-bodyparser'), logger = require('koa-logger');
    const app = new koa();
    const Router = require('koa-router');

    appSettings(app);
    appRoutings(app);

    function appSettings(app) {
    app.use(koaCompress({ filter: function (content_type) { return /text/i.test(content_type) }, threshold: 1024, flush: require('zlib').Z_SYNC_FLUSH }));
    app.use(bodyParser());
    app.use(logger());
    return app;
    }


    function appRoutings(app) {
    const router = new Router();
    router.get('/', async function(ctx, next) { ctx.body = 'hello, world!'; });
    app.use(router.routes()).use(router.allowedMethods());
    return app;

    }

    const server = http.createServer(app.callback());

    server.listen(3000, () => { console.log('server listen on 3000'); });

    2018.11.29 19:18 신고
댓글쓰기 폼