Total: Today: Yesterday:
연구소/node.js | 2016. 4. 15. 17:44 | Posted by 자수씨

회사에서 게임 개발/운영 업무를 하다보니 신규 컨텐츠 제작 시 반복적인 신규 리소스 배포작업을 하고 있었습니다.


node.js 공부도 할겸 배포 스크립트 만들어봤습니다.



#h3 파일 복사하기


파일 복사 테스트를 위해 하드코딩으로 이미지 파일을 입력받은 아이디로 리네임된 파일을 복사 테스트를 해보았습니다.


```Gruntfile.js```

### js


'use strict';


module.exports = function(grunt) {

var readline = require('readline');

var resourceId = -1;


// Project configuration.

grunt.initConfig({

copy: {

main: {

}

}

});


grunt.registerTask('question', function() {

var done = this.async();

var rl = readline.createInterface({

input: process.stdin,

output: process.stdout

});

rl.question('Input resource ID: ', function(answer) {

rl.close();

resourceId = answer;

grunt.log.writeln('입력받은 아이디: ' + resourceId);

done();

});

});


grunt.registerMultiTask('copy', function() {


var options = this.options({

encoding: grunt.file.defaultEncoding,

timestamp: false,

mode: false

});


var copyOptions = {

encoding: options.encoding,

process: options.process,

noProcess: options.noProcess

};

var srcPath = 'grunt.png';

var destPath = resourceId + '.png';


grunt.file.copy(srcPath, destPath, copyOptions);

});

grunt.registerTask('default', [

'question', 'copy'

]);

};


파일 복사 작업을 진행하는 ```copy``` 라는 멀티 태스크를 만들고 디폴트 태스크에 추가하였습니다.


입력받은 아이디를 사용해야하기 때문에 ```question``` 태스크 다음에 실행되도록 순서를 지정하였습니다.


실행을 하면 다음과 같이 복사작업이 완료됩니다.


PS E:\temp\sources\grunt> grunt

Running "question" task

Input resource ID: UWO_22

입력받은 아이디: UWO_22


Running "copy:main" (copy) task


Done, without errors.



멀티태스크로 만들 경우 ```grunt.initConfig({...})``` 에 설정 값이 없으면 태스크를 인식하지 못하는 듯 합니다. 아직 아무런 값이 없지만 ```grunt.initConfig({...})``` 에 ```copy``` 태스크 설정을 합니다.



파일 복사 테스트도 끝났으니 이제 마지막 배포 작업만이 남았습니다.




연구소/node.js | 2016. 4. 15. 17:06 | Posted by 자수씨

회사에서 게임 개발/운영 업무를 하다보니 신규 컨텐츠 제작 시 반복적인 신규 리소스 배포작업을 하고 있었습니다.


node.js 공부도 할겸 배포 스크립트 만들어봤습니다.



#h3 아이디 입력받기


"아이디" 는 신규 컨텐츠 마다 별도로 지정이 되기 때문에 스크립트 실행 시 입력받도록 만들고자 합니다.


해당 작업을 위해서는 ```readline``` 라이브러리가 필요합니다. ```readline``` 의 question 함수를 이용하여 입력을 받는 부분을 구현해보았습니다.


```Gruntfile.js```

### js


'use strict';


module.exports = function(grunt) {

var readline = require('readline');

var resourceId = -1;


// Project configuration.

grunt.initConfig({

});


grunt.registerTask('question', function() {

var done = this.async();

var rl = readline.createInterface({

input: process.stdin,

output: process.stdout

});

rl.question('Input resource ID: ', function(answer) {

rl.close();

resourceId = answer;

grunt.log.writeln('입력받은 아이디: ' + resourceId);

done();

});

});

grunt.registerTask('default', [

'question'

]);

};


```question``` 이라는 태스크를 만들고 기본 태스크에 ```question``` 을 등록한 상태이기 때문에 스크립트를 실행하면 아래와 같이 나오게 됩니다.


PS E:\temp\sources\grunt> grunt

Running "question" task

Input resource ID: 12

입력받은 아이디: 12


Done, without errors.



입력받은 아이디는 재사용해야하기 때문에 grunt 전역에서 사용할 수 있도록 선언하고 입력받은 값으로 설정합니다.



아이디 입력받기도 끝!!


연구소/node.js | 2016. 4. 15. 16:14 | Posted by 자수씨

회사에서 게임 개발/운영 업무를 하다보니 신규 컨텐츠 제작 시 반복적인 신규 리소스 배포작업을 하고 있었습니다.


node.js 공부도 할겸 배포 스크립트 만들어봤습니다.



개요

신규 컨텐츠의 디자인이 나오면 해당 파일을 개발 시에 사용하는 이름으로 변경하고 프로젝트 인원들이 함께 볼 수 있는 "공유폴더" 와 개발 워크스페이스에 "리소스폴더" 에 복사를 합니다.




"공유폴더" 와 "리소스폴더" 는 하위 폴더 구조도 상이하여 작업을 할 때마다 개별폴더에 하나씩 복사해야했기에 반복/귀찮은 작업이었습니다.


신규 리소스는 개발에 사용 시에 "아이디" 에 따라 네이밍을 하였기 때문에 배포 작업 시에 변경되는 사항은 "아이디" 밖에 없었습니다.



따라서, 다음과 같이 배포 스크립트를 만드려고 합니다.


  • "아이디" 는 스크립트 실행 시 입력을 받는다.

  • 각 파일들은 "아이디" 를 조합하여 리네임한다.

  • 각 파일들은 각 배포 경로에 복사한다.



사전작업

일단 node.js 와 grunt 실행이 가능하도록 환경을 구성하였습니다.


그 후 가장 기본적인 grunt 스크립트를 만들었습니다.


```package.json```

### JSON


{

  "name": "slotresource-deploy",

  "version": "0.0.1",

  "devDependencies": {

    "grunt": "~0.4.5"

  }

}


```Gruntfile.js```

### js


'use strict';


module.exports = function(grunt) {


    // Project configuration.

    grunt.initConfig({

    });


};


같은 디렉토리에 ```package.json``` 과 ```Gruntfile.js``` 를 생성하고 npm 로 초기화합니다.


npm install


위의 명령어를 실행하면 npm 에서 자동으로 필요한 모듈을 내려받게 됩니다.


slotresource-deploy@0.0.1 E:\temp\sources\grunt

`-- grunt@0.4.5

  +-- async@0.1.22

  +-- coffee-script@1.3.3

  +-- colors@0.6.2

  +-- dateformat@1.0.2-1.2.3

  +-- eventemitter2@0.4.14

  +-- exit@0.1.2

  +-- findup-sync@0.1.3

   ...



이 상태에서 ```grunt``` 를 실행하면 아무것도 없기 때문에 에러가 납니다.


사전작업은 여기까지가 끝!!




연구소/AngularJS | 2016. 4. 14. 18:06 | Posted by 자수씨

node.js 와 npm 이 설치된 상태에서 시작합니다.



기본 개발환경 위해 필요한 툴을 설치합니다.


  • yo (Yeoman): 최신 웹 애플리케이션의 뼈대를 잡아주는 툴 - http://yeoman.io/
  • bower: 웹 사이트의 프레임워크, 라이브러리 등을 관리하는 툴 - http://bower.io/
  • grunt-cli: 자바스크립트 태스크 러너 - http://gruntjs.com/
  • generator-angular: 요맨 AngularJS 제너레이터
  • generator-karma: 요맨 AngularJS 테스트 러너 제너레이터

npm install -g yo bower grunt-cli


npm install -g generator-angular generator-karma



요맨을 이용하여 기본 골격을 갖춘 AngularJS 샘플 프로젝트를 생성합니다.


yo angular sample_project


요맨 옵션은 Sass 사용 안함 외에는 기본 구성을 사용했습니다.





생성된 프로젝트가 정상적인지 실행해봅니다.


grunt serve






아래와 같이 페이지가 나오면 정상적으로 설정이 된 상태입니다.





간혹 "grunt serve" 로 서버를 띄우는 중에 오류가 발생하면 아래의 작업을 수행합니다.


npm install


bower install



개발환경이 갖춰졌으므로 테스트 코딩을 하러...



'연구소 > AngularJS' 카테고리의 다른 글

AngularJS 서비스 상속에 대한 고찰  (0) 2016.04.20
auth0 & firebase  (0) 2016.04.18

연구소/Sass | 2016. 4. 12. 16:16 | Posted by 자수씨

Nesting

HTML 은 중첩구조와 계층을 가지고 있는데, CSS 는 그렇지 않다.

Sass 는 HTML 과 같은 계층구조로 CSS 셀렉터를 구성할 수 있다. 심하게 중첩된 규칙은 필요이상의 CSS 가 만들어지기 때문에 유지보수를 어렵게 하고 나쁜 사례가 됨을 고려해야 한다.

아래는 일반적인 스타일의 사이트 네비게이션 예제이다.

### SCSS

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

```ul```, ```li``` ```a``` 셀렉터는 ```nav``` 셀럭터 내부에 중첩되어 있다. 이러한 구조는 CSS 를 체계화 하는데 좋은 방법이며 좀 더 읽기 쉽게 만든다. 생성된 CSS 는 아래와 같다.

### CSS

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

References

- http://sass-lang.com/guide


'연구소 > Sass' 카테고리의 다른 글

Sass Basics - Preprocessing, Variables  (0) 2016.04.11
Sass 란 무엇인가?  (0) 2016.04.11

연구소/Sass | 2016. 4. 11. 16:41 | Posted by 자수씨

Preprocessing

CSS 로 구성된 스타일시트는 사이즈가 커지면서 복잡해지고 유지보수가 어려워진다. Sass 는 CSS 에는 없는 변수(Variables), 중첩구조(nasting), 재사용(mixin, include), 상속(inheritance) 을 제공하여 CSS 를 좀 더 실용적으로 만들 수 있게 한다.

대부분의 작업은 터미널에서 이루어진다. Sass 를 인스톨한 후 터미널에 sass input.scss output.css 를 실행할 수 있다. preprocessing 작업 진행 시 개별적인 파일이나 전체 디렉토리를 볼 수 있는데 추가적으로 --watch 플래그를 통해 가능하다. 아래는 Sass 를 실행하면서 전체 디렉토리를 살펴보는 예제이다.

### bash

$ sass --watch app/sass:public/stylesheets


Variables

변수는 프로그래밍에서 사용하는 변수와 같은 의미로 스타일시트 전반적으로 재사용이 필요한 값을 저장해두는 역할을 한다. 색상, 폰트와 같은 값을 저장해 두고 재사용할 수 있다. Sass 는 $ 심볼을 이용하여 변수를 만든다.

### SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}


Sass 를 처리할 때, $font-stack$primary-color 를 정의하고, 출력 CSS 에는 변수 값이 위치를 지정한다. 사이트 전반적으로 사용하는 브랜드 컬러의 작업을 할 때 극히 강력함을 보여준다.


### CSS

body {

  font: 100% Helvetica, sans-serif;

  color: #333;

}



References

- http://sass-lang.com/guide


'연구소 > Sass' 카테고리의 다른 글

Sass Basics - Nesting  (0) 2016.04.12
Sass 란 무엇인가?  (0) 2016.04.11

연구소/Sass | 2016. 4. 11. 16:05 | Posted by 자수씨

오픈소스를 찾아보다 보니 *.scss 파일들이 눈에 띄여서 관련된 내용을 찾아보았습니다.


http://sass-lang.com/



CSS 에 프로그래밍 적인 요소를 삽입하여 강력한 힘을 주는 것이 Sass 입니다. SCSS 는 Sass 의 새로운 버전이라고 하는데, 조금 더 살펴봐야 자세히 알 수 있을 것 같습니다.




'연구소 > Sass' 카테고리의 다른 글

Sass Basics - Nesting  (0) 2016.04.12
Sass Basics - Preprocessing, Variables  (0) 2016.04.11

연구소/이것저것 | 2016. 4. 10. 21:58 | Posted by 자수씨

syntaxhighlighter 4 빌드 실패로 인해 다른 highlighter 를 찾다가 highlight.js 를 발견하고 블로그에 적용해보았습니다.




적용 방법은 간단합니다.

### html

<!-- cdn 에서 라이브러리 로드 -->

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/default.min.css">

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>


### html

<pre><code class="html">...</code></pre>



위와 같이 CDN 에 있는 라이브러리를 로드할 수 있도록 <link> 태그와 <script> 를 추가하고, <pre><code> 태그 안에 실제 코드를 삽입합니다.




위의 방식만으로는 티스토리에서 작성하는 것이 힘들어서 예전에 syntaxhighlighter 티스토리용 플러그인을 만드셨던 분의 소스(sh4tistory)를 참고하여 highlight.js 티스토리 플러그인을 만들어보았습니다.


https://github.com/Vince-Yi/highlightjs4tistory




사용하는 방법은 기존의 티스토리 플러그인과 같이 인용구에 소스코드를 삽입하는 방식으로 "###" + brushName 을 이용하였습니다.






연구소/이것저것 | 2016. 4. 10. 21:46 | Posted by 자수씨

부트스트랩 스터디 첫 작품인 티스토리 블로그 스킨을 팀블로그에 적용하였습니다.





부트스트랩 자체가 반응형 웹을 위한 도구이기 때문에 모바일에서도 잘 나오네요~ 후후


highlighter 도 적당한 걸 연동하였으니 필요한건 조금씩 추가해나가면 될 것 같습니다.







연구소/이것저것 | 2016. 4. 8. 21:01 | Posted by 자수씨

이 프로젝트 빌드를 위해 gulp 와 gulp 플러그인 들을 설치했는데 정상적으로 빌드가 되지 않는다.


프로젝트 github 의 위키에서 제시한대로 진행했는데 계속 오류만... 또르르...



깃헙에서 프로젝트를 내려받아서 npm 를 통해 관련 라이브러리들을 내려받는 작업까지는 순조로웠다.


git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git

cd syntaxhighlighter

npm install




서브 프로젝트에 있는 브러쉬와 테마를 받는 것도 문제 없음


gulp setup-project




블로그에 사용하기 위해 전체 브러쉬와 기본 테마로 빌드를 하였으나 실패...


gulp build --brushes=all --theme=default






오류가 나길래 단일 브러쉬로도 빌드해봤으나 동일한 결과...


아 그냥 다른 라이브러리 써야겠다.