dakoo's tech blog: webstorm

레이블이 webstorm인 게시물을 표시합니다. 모든 게시물 표시

2015년 3월 2일 월요일

빠른 Front-end UI 개발을 위한 WebStorm Live edit 설치

Front-end coding을 하는 순간 browser를 통해 그 결과를 즉시 확인하기 위한 툴을 WebStorm이 제공하고 있다.
Live edit는 Chrome의 extension을 통해 동작하므로 Chrome을 사용해야만 한다.
그 설치 및 설정 방법은 다음과 같다.

1. WebStorm 설정
1) File > Settings를 열어 Build, Execution, Deployment > Debugger > Live edit
2) Update 주기를 manual(default)에서 Auto로 변경

2. Chrome의 JetBrains extension 설치
1) Chrome을 실행하여 확장 프로그램 검색으로 'JetBrains IDE Support'를 찾아 설치한다.

3. 사용해 보기
1) WebStorm에서 프로젝트를 만들어 javascript 파일을 추가하여 아래의 샘플 코드를 붙여 넣는다.

그리고 index.html 파일을 만들어 아래 코드를 붙여 넣는다.

2) Debug 모드로 javascript 파일을 실행시킨다.
3) Chrome을 열어 http://127.0.0.1:8000으로 접속한다.
4) Chrome의 설정 메뉴 옆의 "JB" 아이콘을 오른쪽 마우스 클릭하여 "Inspect in WebStorm"을 선택하면 화면의 Debug중이라는 표시가 된다.

이제 WebStorm의 Html 코드를 수정해 보자.
Hello World대신 Bye World로 수정한 후 Chrome을 보면 즉시 Bye World로 바뀌어 있음을 알 수 있다.

Live edit는 Front-end단 UI 개발에 적합하며, Javascript 코드의 수정에는 즉각 대응하지 않는다는 점을 명심하자.

node.js 프로젝트 환경 설정(1/3): WebStorm과 node.js 설치

Windows 8.1 64bit에서의 WebStorm과 node.js 설치 스텝을 간략히 정리해 보자

1.WebStorm 설치
1) 자신의 License 키 복사
JetBrains 사이트에 로긴하면 구매한 License 키가 보인다. 키 위에서 클릭하면 클립보드에 복사된다.

2) WebStorm 다운로드: WebStorm 다운로드 사이트에서 Windows용 최신 버전을 다운로드 한다.

3) 다운로드 받은 WebStorm 설치

4) WebStorm 실행 후 License key입력
키입력 창이 나오면 WebStorm 구매시 등록한 아이디와 복사한 License 키를 입력한다.

5) WebStorm 초기 설정(개인적 취향)
- Keymap: Visual Studio, IDE Theme 및 Editor color/font: Darcula

2.Node.js 설치
1) node.js 사이트로 가서 64 bit용 Windows Installer와 source code 압축 파일을 다운로드 받는다.
2) Windows Installer를 통해 설치한다.
3) command 창 (Windows 키+R --> cmd 명령)을 실행하여 'node -v'을 확인한다.

D:\myproject> node -v
v0.12.0

4) 다운받은 node.js 소스코드의 압축을 풀어 향후 참조할 folder에 저장한다.

3. WebStorm 설정
1) WebStorm을 실행하여 프로젝트를 새로 시작한다.
2) File > Settings으로 설정창을 연다.
3) Languages and Frameworks > Node.js and NPM을 선택한다.
4) Node Interpreter에 설치한 node.exe의 위치를 입력한다.
(default 위치 - C:\Program Files\nodejs\node.exe)
5) Node.js Core Modules의 소스코드 위치에는 압축을 푼 node.js 소스코드의 root folder를 지정한다.
6) Languages and Frameworks > Javascript > Libraries 에서 node.js관련된 항목이 모두 check되어 있는 것을 확인한다. (core modules, global)

다음글 :
node.js 프로젝트 환경 설정(2/3): gulp를 활용한 node.js 개발 환경 설정
node.js 프로젝트 환경 설정(3/3): mocha와 gulp를 활용한 node.js 테스트 환경 설정

2015년 2월 26일 목요일

webstorm에서 gruntfile.js의 task load가 실패하는 문제 해결하기

앞선 글에서 다룬 바와 같이 node.js를 'sudo' permission이 아닌 일반 사용자 계정으로 설치하여 사용하고 있다.
(참고: http://dakoostech.blogspot.kr/2015/02/nodejs-yeoman-bower-grunt-permission.html)
그런데, webstorm에서 gruntfile.js의 task load가 계속 실패하는 문제가 발생했다. 외부 console에서는 'grunt serve'나 'grunt test'가 잘 실행되는데 webstorm의 GUI로는 task load가 실패했다. 알고 보니 원인은 매우 단순한 것이다.
webstorm.sh를 바로가기로 만들어 Desktop 폴더에 놓고 마우스로 클릭하여 webstorm을 실행시켰는데 그것이 문제였다. '.bashrc'내의 nvm use v0.10.35이 activation되지 못하여 node.js가 설치 안된 것으로 인식하고, 그로 인해 당연히 grunt도 실행이 안된 것이였다.

그래서 '.bashrc'내에 아래와 같이 alias를 추가하였다.

alias webstorm='/home/user_account/[webstorm 설치 folder]/bin/WebStorm.sh'

그런 뒤에 . .bashrc를 실행하고 console에서 webstorm을 실행시켜서 사용하면 된다.

/home/user_account# . .bashrc
/home/user_account# webstorm

참고로, node.js를 일반 사용자 계정으로 설치하니, webstorm에서 node.js interpreter와 package 정보를 찾지 못하는 현상이 있었다.
이를 해결하는 방법은 WebStorm의 File>Setting에서 Languages and NPM을 선택하여 'Node Interpreter'의 위치를 잡아 주는 것이다.
nvm에 의해 설치된 node.js는 /home/user_account/.nvm아래에 설치된다. 'Node Interpreter'로 node 실행파일을 선택해 주면 자동적으로 package가 갱신된다.