블로그 이미지
윤영식
Full Stacker, Application Architecter, KnowHow Dispenser and Bike Rider

Publication

06-25 01:49

Category

Recent Comment

2013. 1. 28. 17:48 Dev Environment/Build System

이전에 Ant를 이용하여 Javascript project를 build하는 것을 알아 보았다. 요즘은 Grunt.js라는 빌드도구가 나와서 많이 사용되고 있고, Javascript 에 최적화 되어 있기때문에 앞으로는 Grunt.js를 사용한다. Grunt.js에 대해서 알아보자 


1) 준비하기

  - node.js 와 npm 설치되어 있어야 한다 

  - 기본 설치 : npm uninstall -g grunt  ==> npm install -g grunt-cli

  - 부가 설치 : npm install grunt-contrib

  - grunt.js (gruntfile)이 핵심 구성내역

    + 프로젝트 환경

    + grunt plugins 또는 tasks 폴더 로딩

    + Tasks 와 Helpers



2) Task 만들기 

  - 환경파일 만들기 (node.js 모듈로 생성) :  grunt init:gruntfile  명령 수행하면 Gruntfile.js 파일 생성됨(grunt 환경파일)

    + 윈도우 : grunt.cmd init:gruntfile 수행

  - grunt.js 파일안에 task 열거 lint, qunit, concat, min, watch, jshint, testuglify

    + lint : 자바스크립트 문법오류 가능성 있는 것 체크

    + qunit : Unit test를 위하여 QUnit을 사용 (PhantomJS이용)

    + concat : 지정된 디렉토리/파일을 1개의 파일로 합침

    + min : 파일사이즈 minify 최소화

    + mincss : css 최소화 

    + watch : node.js::fs 모듈의 watch 메소드 사용하여 파일 변경사항 발생시 task를 수행한다 

    + 사용가능 task 목록 보기 : grunt -h 


// grunt.js 파일 내역 
/*global module:false*/
module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: '',
    meta: {
      banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
        '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
        '<%= pkg.homepage ? "* " + pkg.homepage + "\n" : "" %>' +
        '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
        ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */'
    },
    lint: {
      files: ['grunt.js', 'lib/**/*.js', 'test/**/*.js']
    },
    qunit: {
      files: ['test/**/*.html']
    },
    concat: {
      dist: {
        src: ['', '.js>'],
        dest: 'dist/<%= pkg.name %>.js'
      }
    },
    min: {
      dist: {
        src: ['', ''],
        dest: 'dist/<%= pkg.name %>.min.js'
      }
    },
    watch: {
      files: '',
      tasks: 'lint qunit'
    },
    jshint: {
      options: {
        curly: true,
        eqeqeq: true,
        immed: true,
        latedef: true,
        newcap: true,
        noarg: true,
        sub: true,
        undef: true,
        boss: true,
        eqnull: true,
        browser: true
      },
      globals: {}
    },
    uglify: {}
  });

  // Default task.
  grunt.registerTask('default', 'lint qunit concat min');
};

  - module.exports = function(grunt){...}; 를 딱 한번만 grunt.js 에 표기한다 (module.exports 참조)

    + 가급적 module.exports를 사용한다 (exports 사용안함)

  - grunt.initConfig({...}); 에 환경설정 한다 

  - 환경 설정 참조 파일 : javascript-hooker/grunt.js

  - 일반 설정 사항

// Project configuration.
grunt.initConfig({
  // Project metadata, used by some directives, helpers and tasks.
  meta: {},
  // Lists of files to be concatenated, used by the "concat" task.
  concat: {},
  // Lists of files to be linted with JSHint, used by the "lint" task.
  lint: {},
  // Lists of files to be minified with UglifyJS, used by the "min" task.
  min: {},
  // Lists of files or URLs to be unit tested with QUnit, used by the "qunit" task.
  qunit: {},
  // Configuration options for the "server" task.
  server: {},
  // Lists of files to be unit tested with Nodeunit, used by the "test" task.
  test: {},
  // Configuration options for the "watch" task.
  watch: {},
  // Global configuration options for JSHint.
  jshint: {},
  // Global configuration options for UglifyJS.
  uglify: {}
});

  - plugins 또는 task를 로딩한다

// TASK
// Load tasks and helpers from the "tasks" directory, relative to grunt.js.
grunt.loadTasks('tasks');

// PLUGIN
// Load tasks and helpers from the "grunt-sample" Npm-installed grunt plugin.
grunt.loadNpmTasks('grunt-sample');


3) 사용하기 : grunt <task>

  - lint 수행 : grunt lint 

  - min 수행 : grunt min 

  - grunt 명령으로 default 수행 만들기 : grunt.registerTask('default', 'lint test concat min mincss'); 



4) Grunt.js & Yeoman 이해하기 


<참조>

  - Grunt.js Getting Started

  - Grunt.js 소개

  - 사용하기 : Outsider님 블로깅

posted by peter yun 윤영식
TAG Grunt.js
2013. 1. 28. 09:05 Dev Environment/Build System

참조의 원문에 대해서 테스트 해하고 글을 정리해 본다. JavaScript에 대한 빌드 자동화를 ant로 하는 방법을 알아보자.


Javascript코드에 대해 Ant를 이용하여 Java의 Maven처럼 compile -> test -> build를 자동으로 수행할 수 있는 방법을 소개하고 있다. 하지만 현재는 gruntjs를 통하여 본 글에서 수행하였던 것을 보다 더 쉽게 할 수 있다. gruntjs에서 하나 단점은 shell command 호출인데 grunt-jasmine-task를 통해  극복하였다. 


1) JavaScript 대응 테스트 & 빌드자동화 도구들

  - 구문오류 체크 : JSLint / JSHint 

  - 유닛 또는 행휘 테스트 : Jasmine 또는 QUnit

  - API 문서 생성 : JSDoc

  - JS 파일압축 : YUI compressor 또는 Uglify.js 

  - 위의 내역들 빌드 통합 수행 : Ant


각 내역들에 대해서 순차적으로 수행하는 것을 Ant로 만들어 보도록 한다 


2) Ant로 구현한 Build Automation 구조

  - GitHub 소스 : git clone https://github.com/creynders/Build-JS-example.git  수행하여 로컬에 내려 받는다 

  - Ant로 하다 보니 1)에서 필요로 하는 모든 프레임워크 라이브러리를 다운로드 받아 놓아야 한다   

   

  

  - 디렉토리 구조 

    + bin : ant의 destination 디렉토리, 배포되는 최종 .js 파일이 위치함 

    + docs : API 문서 생성 디렉토리 

    + lib : 3-rd party 도구들 

    + specs : unit test 파일 존재 (test 파일이 specification 즉, 명세라는 표현이 맘에 든다)

    + src : 원본 소스 


3) 도구 설명

  - Apache Ant : 의존관계를 만들어서 타겟소스에 대하여 빌드를 수행케 하는 command-line 도구 (다운로드)

  - JSHint : JSLint 기반의 자바스크립트를 위한 code 품질 측정 도구. 에러나 문제가능성 있는 것을 찾아줌 (다운로드)

  - JSDoc Toolkit : HTML (XML, JSON, TEXT) 포멧으로 자바스크립트 애플리케이션에 대한 자동 문서 생성 도구 (다운로드)

  - YUI compressor : 압축을 통하여 네트워크 전송 성능을 높여준다. (다운로드)

  - Jasmine : 자바스크립트 코드 테스트를 위한 행위지향 개발 프레임워크(behavior-driven) (다운로드)

  - PhantomJS : 자바스크립트에 대해서 브라우져 없이(without GUI client) 없이 브라우징이 가능토록 해준다 (다운로드)

    + 즉, HTML 파일의 parse & rendering을 해준 다음 수행하고 결과값 읽고 ant에게 전달한다 (Headless WebKit)

    + OS 버전에 맞는 것을 다운로드 받은후 path를 잡아준다

    + 좀 더 쉽게 사용할 수 있도록 casperjs 도 있다. (요걸 사용하는게 좋을듯)


4) 소스 빌드 프로세스 (순서)

  - 원본 소스는 3개 존재 : buildexample.js, Baz.js, Foo.js

    + buildexample.js에서 namespace를 정의한다 

  - 모든 .js 파일에 대해 JSHint를 통해서 QA tool을 수행한다 

  - unit test를 수행한다

  - 3개의 개별 .js 파일을 1개의 .js 파일로 통합한다

  - 한개의 파일을 축소된(minified) .js 파일로 나눈다 

  - API 문서를 생성한다 

  - 통합하고 축소화한 파일명칭과 API 문서에 version number를 사용한다 


5) build.xml 작성하기 

  * properties : 상수 속성값을 설정. build.properties

  * tasks : ant 수행전 전처리 환경 내역들 

  * targets : 각 단계에 대하여 ant에 task로 구분하여 설정. build.xml


  - 버젼 (Version Number)

    + version.txt 파일을 읽는다 

    + 테스트 : ant version

<target name="version">
    <loadfile property="version.old" srcFile="version.txt" />
    <input message="Current version number is ${version.old}. Please enter the new version number:"
        defaultValue="${version.old}" addproperty="version"/>
    <echo file="version.txt" message="${version}" />
</target>


  - 속성 선언(Properties Declaration)

    + build.properties 파일을 사용한다 

    + build.uer.properties에 속성 재정의 한다 

<target name="properties">
    <tstamp>
        <format property="timestamp" pattern="yyyyMMddHHmmss"/>
    </tstamp>
    <!-- allow user-specific overrides -->
    <property file="build.user.properties"/>
    <property file="build.properties"/>
</target>


  - 빌드 디렉토리 생성 

   + build 디렉토리 생성한다 : 생성 temporary 파일이 위치한다. 빌드과정이 성공하면 bin에 파일이 위치한다.

<target name="create_build" depends="properties">
    <echo>Creating build...</echo>
    <delete dir="${dir.build}" />
    <mkdir dir="${dir.build.current}" />
    <echo>Finished.</echo>
</target>


  - 파일 하나로 합치기 (Consolidation)

   + src 디렉토리의 buildexample.js를 복사해서 build 디렉토리에 buildexample-.js 로 넣는다

   + 다른 파일들을 buildexample-.js 에 포함시키고 version과 timestamp를 넣는다 

<target name="consolidate" depends="properties, create_build">
    <echo>Consolidating...</echo>
    <copy file="${dir.src}/${name.base.js}" tofile="${file.consolidated.js}"/>
    <replace file="${file.consolidated.js}" token="%VERSION%" value="${version}"/>
    <replace file="${file.consolidated.js}" token="%TIMESTAMP%" value="${timestamp}"/>
    <concat id="srcfiles" destfile="${file.consolidated.js}" append="true>
        <fileset dir="${dir.src}" includes="**/*.js" excludes="${name.base.js}"/>
    </conca>
    <pathconvert pathsep=";" property="files" refid="srcfiles"/>
    <echo>${files}</echo>
    <echo>Finished.</echo>
</target>


  - JSHint 구문 검사 (코드 품질 측정)

    + PhantomJS를 통하여 수행한다 (PhantomJS API)

    + phantom-jshint-runner.js 파일로 jshint.js를 수행토록 한다 (lib 디렉토리에 존재)

<target name="jshint" depends="properties, consolidate">
    <echo>Checking syntax...</echo>
      <exec executable="phantomjs" dir="${basedir}" failonerror="true" resultproperty="specs.results">
          <arg line="'${file.jshint-runner.js}'" />
          <arg line="'${file.jshint.js}'" />
          <arg line="'${file.consolidated.js}'" />
          <arg line="${timeout.phantom}" />
      </exec>
    <echo>Finished</echo>
</target>


  - Jasmine 테스트에서 .html 파일 수행 (specs/index.html 존재)

    + PhantomJS를 통해 html을 읽어와 파싱하고 결과값을 ant로 반환한다

    + phantom-jasmine-runner.js 파일을 작성한다 (web 애플리케이션 headless test 방법)

<target name="specs" depends="properties">
    <echo>Running specs...</echo>
    <exec executable="phantomjs" dir="${basedir}" failonerror="true" resultproperty="specs.results">
        <arg line="'${file.jasmine-runner.js}'" />
        <arg line="'${file.specs-runner.html}'" />
        <arg line="${timeout.phantom}" />
    </exec>
    <echo>Finished.</echo>
</target>


  - 압축 (Minifying)

    + YUI compressor를 사용한다 (사용법)

    + command line 사용 :  java -jar yuicompressor-x.y.z.jar [options] [input files]

<target name="minify" depends="properties,create_build, consolidate">
    <echo>Minifying...</echo>
    <exec executable="java" dir="${basedir}" failonerror="true">
        <arg line="-jar '${file.yui_compressor.jar}'" />
        <arg line="--type js" />
        <arg line="-o '${file.minified.js}'" />
        <arg line="'${file.consolidated.js}'" />
    </exec>
    <echo>Finished</echo>
</target>


  - JSDoc 파일 생성 

    + command line 사용 : java -jar jsrun.jar app/run.js myscript.js -t=templates/jsdoc

<target name="jsdocs" depends="properties, consolidate">
    <echo>recreating docs folder...</echo>
    <delete dir="${dir.docs}"/>
    <mkdir dir="${dir.docs}" />
    <echo>Generating...</echo>
    <exec executable="java" dir="${basedir}">
        <arg line="-jar '${file.jsdoc_toolkit.jar}' '${dir.jsdoc_toolkit}/app/run.js'" />
        <!-- -d tells JSDoc toolkit where to output the documentation -->
        <arg line="-d='${dir.docs}'" />
        <!-- use the default template -->
        <arg line="-t='${dir.jsdoc_toolkit}/templates/jsdoc'" />
        <!-- Create an arg element for each file you want to include in the documentation -->
        <arg line="'${file.consolidated.js}'" />
    </exec>
    <echo>Finished</echo>
</target>


  - Clean up

    + build 디렉토리 파일이 빌드가 성공하면 bin 디렉토리로 옮긴다 

<target name="finish" depends="properties">
    <echo>Finishing...</echo>
    <delete dir="${dir.bin}" />
    <mkdir dir="${dir.bin}" />
    <move file="${dir.build.current}" tofile="${dir.bin}"/>
    <echo>Finished.</echo>
</target>


  - 각 target을 한꺼번에 수행하기 

<target name="build" depends="version, properties, create_build, consolidate, jshint, specs, minify, jsdocs, finish">
</target>


  - 수행 : ant build

$ ant build

Buildfile: d:\git-repositories\build-automation-javascript\build.xml


version:

    [input] Current version number is 1.0.0. Please enter the new version number: [1.0.0]

1.0.1   <== 직접 입력


properties:


create_build:

     [echo] Creating build...

   [delete] Deleting directory d:\git-repositories\build-automation-javascript\build

    [mkdir] Created dir: d:\git-repositories\build-automation-javascript\build\20130128154436

     [echo] Finished.


consolidate:

     [echo] Consolidating...

     [copy] Copying 1 file to d:\git-repositories\build-automation-javascript\build\20130128154436

     [echo] concat (d:\git-repositories\build-automation-javascript\src\Baz.js;d:\git-repositories\build-automation-javascript\src\Foo.js)

     [echo] Finished.


jshint:

     [echo] Checking syntax...

     [exec] read: d:\git-repositories\build-automation-javascript/build/20130128154436/buildexample-1.0.1.js

     [echo] Finished


specs:

     [echo] Running specs...

     [exec] open: file:///D:/git-repositories/build-automation-javascript/specs/index.html

     [exec] success

     [exec] finished in 218ms.

     [exec] 2 specs, 0 failures in 0.196s

     [echo] Finished.


minify:

     [echo] Minifying...

     [echo] Finished


jsdocs:

     [echo] recreating docs folder...

   [delete] Deleting directory d:\git-repositories\build-automation-javascript\docs

    [mkdir] Created dir: d:\git-repositories\build-automation-javascript\docs

     [echo] Generating...

     [echo] Finished


finish:

     [echo] Finishing...

   [delete] Deleting directory d:\git-repositories\build-automation-javascript\bin

    [mkdir] Created dir: d:\git-repositories\build-automation-javascript\bin

     [move] Moving 2 files to d:\git-repositories\build-automation-javascript

     [echo] Finished.


build:


BUILD SUCCESSFUL

Total time: 16 seconds


* 현재는 Grunt를 많이 사용하고 있다. (참조)


<참조>

원문 : Automating JavaScript builds

posted by peter yun 윤영식

프로젝트 및 클래스를 생성하는 빠른 방법에 대해서 알아보자 


1) Project 생성

  - File -> New Project...

  - 프로젝트 명칭, 소스디렉토리, SDK 버전, 개발프레임워크등을 선택한다

  - .idea 와 [프로젝트명].iml 내부 환경파일이 생성됨 


2) Package 생성

  - Alt + Insert 키를 눌러서 package를 생성한다 

  - com.dowon.smart.dashboard 식의 full package를 넣는다


3) Class 생성

  - Alt + Insert 키를 눌러서 class를  생성한다

  - 상속받을 class wizard는 안나타남 : Ctrl+Shift+O 키를 누르면 상속받은 클래스의 메소드가 나옴 선택하여 Overriding 또는 implement 하면 됨 


4) 빠르게 코딩하기 

  - public static void main... 은 psvm TAB 키를 넣으면 자동 생성됨 

  - System.out.println 은 sout TAG 키를 넣으면 자동 생성됨

  - Alt + Backspace == ctrl + z in eclipse 이전 코딩으로 돌아가기 


5) Test Class 및 Method 만들기

  - Ctrl + Shift + T

  - 위저드가 뜨면 JUnit4 선택해서 만들기 


<참조>

  - JetBrains Wiki

  - DZone reference cardz

posted by peter yun 윤영식

Eclipse사용자가 IntelliJ IDEA로 옮겨 갈 때 가장 힘든 부분이 단축키 찾는 것이 아닐까 한다. 요약해 보자


1) 프로젝트의 참조 Libraries 관리 : ctrl + alt + shift + s  (설정참조)

2) JetBrains Wiki (참조)

ShortcutDescription
Alt+F1Switch between views (Project, Structure, etc.).
Ctrl+TabSwitch between the tool windows and files opened in the editor.
Alt+HomeShow the Navigation bar.
Ctrl+JInsert a live template.
Ctrl+Alt+JSurround with a live template.
F4Edit an item from the Project or another tree view.
Alt+EnterUse the suggested quick fix.
Ctrl+Slash or Ctrl+Divide 
Ctrl+Shift+Slash orCtrl+Shift+Divide
Comment or uncomment a line or fragment of code with the line or block comment.
Ctrl+N
Ctrl+Shift+N
Find class or file by name.
Ctrl+DDuplicate the current line or selection.
Ctrl+W and Ctrl+Shift+WIncremental expression selection.
Ctrl+F or Alt+F3Find text string in the current file.
Ctrl+Shift+FFind in the current folder.
Ctrl+Shift+F7Quick view the usages of the selected symbol.
Ctrl+Add or Ctrl+Equals 
Ctrl+Subtract or Ctrl+Minus
Expand or collapse a code block.
Ctrl+SpaceInvoke code completion.
Ctrl+Shift+EnterSmart statement completion.

3) Eclipse와 IntelliJ 비교 키 (참조)
EclipseIntelliJ IDEADescription
F4ctrl+hshow the type hierarchy
ctrl+alt+gctrl+alt+F7find usages
ctrl+shift+uctrl+f7finds the usages in the same file
alt+shift+rshift+F6rename
ctrl+shift+rctrl+shift+Nfind file / open resource
ctrl+shift+x, jctrl+shift+F10run (java program)
ctrl+shift+octrl+alt+oorganize imports
ctrl+octrl+F12show current file structure / outline
ctrl+shift+mctrl+alt+Vcreate local variable refactoring
syso ctrl+spacesout ctrj+jSystem.out.println(“”)
alt + up/downctrl + shift + up/downmove lines
ctrl + dctrl + ydelete current line
???alt + hshow subversion history
ctrl + hctrl + shift + fsearch (find in path)
“semi” set in window-> preferencesctrl + shift + enterif I want to add the semi-colon at the end of a statement
ctrl + 1 or ctrl + shift + lctrl + alt + vintroduce local variable
alt + shift + salt + insertgenerate getters / setters
ctrl + shift + fctrl + alt + lformat code
ctrl + yctrl + shift + zredo
ctrl + shift + cctrl + /comment out lines (my own IDEA shortcut definition for comment/uncomment on german keyboard layout on laptop: ctrl + shift + y)
ctrl + alt + hctrl + alt + h (same!)show call hierarchy
none ?ctrl + alt + f7to jump to one of the callers of a method
ctrl + shift + ialt + f8evaluate expression (in debugger)
F3ctrl + bgo to declaration (e.g. go to method)

posted by peter yun 윤영식

Realtime을 통하여 개발하고 있는 내용을 브라우저에서 확인을 할 수 있다면? Meteor 또는 Derby 를 사용한다면 웹앱을 통하여 그렇게 만들 수 있을 것이다. 그러나 IDE이 개발툴에서 개발한 내용이 브라우저에서 F5 또는 reloading을 하지 않고 확인하면서 개발하는 놀라운 상황. 한마디로 와우!


> JetBrains WebStorm의 Live Edit 

 


> WebStorm 5.0 과 Chrom 브라우저간 Live Edit 기능 설정하기 

  - WebStorm : View 풀다운 메뉴의 중간에 위치한 Live Edit 메뉴를 클릭한다.

  - Chrome 브라워저 : Chrome JetBrains Extension을 설치해야 한다.

    + Extension 파일 다운로드 : 파일 다운로드

    + Chrome 브라우저를 새로 열고 chrome://chrome/extensions/  라고 주소 입력한다

    + 우측 상단에 있는 "개발자 모듬"를 선택한다

    + 다운로드 받은 파일 jb.crx 파일을 브라우저로 drag & drop 하면 extension 설치여부 팝업이 뜨면 설치 OK 클릭


posted by peter yun 윤영식
TAG WebStorm
2012. 12. 7. 14:38 Dev Environment/Sublime Text

Sublime Text 2를 설치하고 한글 문서를 열어 보면 깨져 나온다. 우선 인코딩이 안맞는 것인데 그럴경우 플러그 하나 설치하자. 


  • 우선 Install Package 설치하자 
  • 제공하는 플러그인 : EncodingHelper
  • Install Package (ctrl+shift+p)에서 EncodingHelper 나오면 설치를 한다 
  • 설치후 sublime text에서 
    • edit menu 선택
    • 맨 하단 convert to UTF-8 from Encoding 선택
    • 맨 위 Complete List Sorted 선택
    • 위에서 7번째 EUC KR 선택

이제 한글이 제대로 보이기 시작한다. 


posted by peter yun 윤영식
2012. 12. 5. 20:16 Dev Environment/Sublime Text

Gist를 GitHub이 운영하는 코드 Snippet을 관리할 수 있는 서비스이다. 이와 비슷하게 jsFiddle.net 에서도 html/css/javascript를 저장하고 테스트까지 해볼 수 있다. 



> GitHub에 로그인 하면 상단에 Gist 메뉴가 나온다. 클릭!  (발음 : 지스트)


> Sublime Text를 통하여 등록한 코드조각이 우측에 보인다. (Create Private Gist 로 생성)


> 우측 등록된 코드조각을 클릭하면 코드를 볼 수 있고, 멘션을 달 수 있다. 




posted by peter yun 윤영식

Eclipse Editor의 색상에 대하여 원하는 스타일로 변경하고 싶다면 직접하거나 또는 Plugin을 설치하여 손쉽게 변경을 할 수 있다. 



흰바탕의 깔끔한 Roboticket 스타일 추천


posted by peter yun 윤영식
2012. 11. 23. 18:07 Dev Environment

ExtJS를 사용하기 위한 최적의 환경을 구축해 보자. Aptana IDE와 Spket Javascript Editor Plugin을 설치해 본다


  • Aptand IDE StandAlone 버전을 다운로드하여 Aptana_Studio_3_Setup_3.2.2.exe 파일을 수행한다  
  • 설치위치에서 실행파일 AptanaStudio3.exe 을 수행하고 원하는 곳에 workspace를 지정한다 (Eclipse기반이므로 동일)
  • Studio 상단 FullDown 메뉴에서 Help -> Install New Software... 선택
  • Spket IDE 추가 : 상단 Work With: 항목에  http://www.agpad.com/update/  입력 (Spket IDE 선택하고 Next 설치완료)
    • Window > Preferences > Spket > JavaScript Profiles > New... (ExtJS 라고 입력)
    • ExtJS 선택 -> Add Library 에서 ExtJS 를 선택하고 OK 클릭
    • ExtJS 라이브러리 선택 -> Add File 에서 라이브러리 선택
  • JavaScript를 만들어 보자

* 참조 사이트 : http://techbug.tistory.com/1

'Dev Environment' 카테고리의 다른 글

[MS Code] Grunt 명령 디버깅하기  (0) 2017.04.03
Aptana + Spket 개발환경 구축하기  (0) 2012.11.23
posted by peter yun 윤영식
TAG Aptana
2012. 10. 30. 11:46 Dev Environment/Sublime Text

Node.js 교육시간 처음에 설치한 것이 Sublime text 2이다. Eclipse 기반은 아무래도 무겁고, 그와 준하는 개발환경을 가지고 JavaScript 서버사이드 개발을 하고 싶을 경우 Sublime text 2를 설치한다. 설치후 패키지 설치 및 환경 설정을 보도록 하자 



1. Sublime Text 2 설치하기 


http://www.sublimetext.com/2  사이트에서 환경에 맞는 인스톨 패키지를 다운로드 받아서 설치한다. 유료 라이센스이지만 등록하지 않아도 왠만한 개발관련 (JavaScript, Node.js, Java...) 부분은 자유로이 사용할 수 있다. 



2. Sublime text package control 설치하기 


package control은 sublime text에 plugin 을 찾고, 설치를 쉽게 할 수 있도록 해준다. 

http://wbond.net/sublime_packages/package_control/installation  사이트로 가면 다음과 같은 설치 문구가 나온다


> sublime text 2 를 실행하고 ctrl + `  short key를 누른다



> 박스안에 있는 문구를 copy한다

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation')



> sublime text의 command line에 paste 하고 enter를 치면 install 된다 


> ctrl + shift + p short key를 누르면 plugin을 설치 할 수 있는 창이 뜬다


> install package 라고 치면 팝업창 하단이 바뀌고 선택되면 enter 또는 click을 한다 


> install package를 들어 갔다면 java라고 치면 관련 package가 나오고 선택하면 github에서 다운로드하여 자동 설치한다




3. Sublime text Tips


short key 

> ctrl + `  : 하단에 command 입력창 나옴 

> ctrl + shift + p : find 팝업창

> ctrl + p : 문서내 find 팝업창 (줄번호 찾아가기  :<line number>  ex) :13   13번줄로 이동)

> alt + shift + 1~9 : 컬럼창 분할  (View - Layout 메뉴)

> ctrl + a : 전체 선택,  ctrl + L : 라인 선택

> ctrl + shift + up/down key : line swap (Edit - Line 메뉴)

> ctrl + F2 : 문서내 bookmark 표기 이동은 F2 누르면 위에서 아래로 이동 (Goto - Bookmark 메뉴)

> 참조 사이트 : http://juhoi.tistory.com/51



어제 처음 써보지만 plugin 들을 github에서 바로 다운로드 받아서 설치해 주고, eclipse와 같은 기능들을 사용할 수 있어서 Text기반의 개발을 할때 그리고 로컬 컴퓨터 사양이 떨어질 때 쉽고 빠르게 사용할 수 있는 개발툴로 안성맞춤으로 보인다. Node.js 기반 개발 할 때는 이걸 사용해 보자

posted by peter yun 윤영식
prev 1 2 next