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

Publication

Category

Recent Post

JetBrains의 WebStorm v6 을 설치하고, Sublime Text 2와 같은 검은색 바탕의 스킨을 사용하고 싶다면 다음과 같이 조정을 한다 



1. 이미 만들어진 커스텀 스킨사용

  - Darcula 스킨사용 : 최신버전에 포함되어 있으나 editor 부분이 회색으로 가시성이 약간 떨어진다

  

  코드 에디터 상의 스킨 색감 : Warning 표기 (점선)이 너무 많이 나온다. 알거덩 없어져라...^^;

  



2. 에디터를 Sublime Text 2 와 같은 스킨으로 변경하기 

  - 검정색 바탕으로 변경하여 가시성을 주고, 색감도 원색으로 변경한다

  - Warning 점선등의 보고 싶지않은 선들을 없앤다

  


  - 첨부파일을 Import 한다 (참조에 첨부파일)

    + WebStorm -> File -> Import Settings... 

    + 첨부파일을 선택하고 Color와 관련된 것만 선택하여 설정한다

    



<참조>

  - Sublime Text 2 형태로 수정된 환경파일 (단, WebStorm v6 최신버전만 가능) 

Webstorm-Dracular-Dowon-Setting_Full.jar

  - WebStorm Import/Export Setting 메뉴얼


posted by 윤영식

AngularJS의 테스트툴로 Testacular를 사용하는데 명칭이 Karma로 바뀌었다. WebStorm에 설정하고 사용하는 방법을 알아보자 



1) Karma 설치하기

  - 홈페이지 : http://karma-runner.github.io/0.8/index.html

  - 선조건 : WebStorm 설치 및 Node.js 설치

  - Karma를 global로 설치 : npm install -g karma



2) Yeoman을 통한 Karma 환경설정 

  - 일반적으로 Yeoman을 통하여 스케폴딩 코드를 만들어 사용하는 것이 좋다 : Yeoman 홈페이지

  - yeoman 설치 : npm install -g yo grunt-cli bower

  - angular 프로젝트 만들기 : yo angular 또는 yo angular:app

    

    <자동 생성된 파일 및 디렉토리 구조>


  - 자동 생성된 karma 테스트 환경파일 : karma.conf.js

/ Karma configuration
 
// base path, that will be used to resolve files and exclude
basePath = '';
 
// list of files / patterns to load in the browser
files = [
JASMINE,
JASMINE_ADAPTER,
'app/components/angular/angular.js',
'app/components/angular-mocks/angular-mocks.js',
'app/scripts/*.js',
'app/scripts/**/*.js',
'test/mock/**/*.js',
'test/spec/**/*.js'
];
 
// list of files to exclude
exclude = [];
 
// test results reporter to use
// possible values: dots || progress || growl
reporters = ['progress'];
 
// web server port
port = 8080;
 
// cli runner port
runnerPort = 9100;
 
// enable / disable colors in the output (reporters and logs)
colors = true;
 
// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel = LOG_INFO;
 
// enable / disable watching file and executing tests whenever any file changes
autoWatch = false;
 
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers = ['Chrome'];
 
// If browser does not capture in given timeout [ms], kill it
captureTimeout = 5000;
 
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun = false;



3) WebStorm 환경설정

  - Server 설정하기 

    + 웹스톰 상단의 메뉴에서 Edit Configurations... 클릭

    

   + Node.js로 "Karma Server" 생성 : node.js, karma 설치 위치와 프로젝트 위치, 파라미터로 start 입력

      카르마의 테스트 서버 역할을 수행


    + Karma Run 생성 : 파라미터로 run 입력, 테스트를 수행한다 


    + Karma Debug : JavaScript Debug의 Remote로 생성 

       Remote URL 로 "http://localhost:8080/" 입력 



4) 테스트 수행하기 

  - Karma Server 시작하기 

    + Karma Server 선택하고 > 시작 버튼 클릭

    + 하단에 localhost:8080 으로 Listen하는 서버 구동됨 

    + 브라우져가 자동 실행 : 자동 실행안되면 브라우져 띄워서 8080 호출 



  - Karma Run 테스트 하기 

    + 테스트 수행하기 

    + 테스트가 정상 수행되면 SUCCESS가 나온다. 비정상이면 FAILED 메세지


  - Karma Debug

    + 소스 코드에 Break point를 만들고 디버그 수행

    + 테스트 해본 결과 잘 안되는데 향후 다시 한번 체크해 봐야 겠다



5) 테스트 코드 

  - BDD 방식의 테스트 코드를 짠다 

//////////////

// 업무 코드 

'use strict';
 
var app = angular.module('eggheadioApp');
 
app.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
}) ;
 
app.factory('Data', function() {
return {message: 'shared data'}
});
 
app.filter('reverse', function(Data) {
return function(text) {
return text.split("").reverse().join("");
}
});


//////////////////////////

// 필터에 대한 테스트 코드 

describe('filter', function() {
beforeEach(module('eggheadioApp'));
 
describe('reverse', function() {
it('should reverse a string', inject(function(reverseFilter){ //reverse라는 Filte 파라미터
expect(reverseFilter('ABCD')).toEqual('DCBA');
}))
})
})



<참조>

  - 원본 : 유튜브 동영상

posted by 윤영식

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


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 윤영식

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 윤영식

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 윤영식

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



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


posted by 윤영식
prev 1 next