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

Publication

Statistics Graph

Recent Comment

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 peter yun 윤영식
TAG WebStorm

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 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

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



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


저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
prev 1 next

티스토리 툴바