블로그 이미지
윤영식
Full Stacker, Application Architecter, 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 로 "https://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 윤영식

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
prev 1 next