[WebStorm] HelloWorld (Html + JavaScript) Develop Tip

지난번의 [WebStorm] GUI 역사 및 ExtJS4 라이브러리 생성방법 및 기본 Node.js 디버그 내용에 이어,
이번에는 간단한 HelloWorld 웹 프로그램을 직접 해 봅니다.
JetBrains에는 PhpStorm이 WebStorm과 동일하지만 php 기능이 더 들어 있다고 하네요.
따라서 다음의 내용은 PHPStorm으로 해도 동일한 결과를 나타냅니다.
(실제로 이클립스와 AptanaStudio가 동일 워크벤치를 열 수 있듯이,
 PhpStorm과 WebStorm 역시 동일한 프로젝트를 관리했습니다)

WebStorm 처음 화면입니다.

HelloWorld 라는 프로젝트를 새롭게 하나 만듦니다. 하단의 Project type에서 Empty 대신 "HTML5 Boilerplate"를 선택했습니다.
간단히 설명하면 많은 JavaScript 전문가들이 다양한 브라우저에 맞게 적용한 코드 덩어리 혹은 jQuery와 Modernizr 라이블러리를 포함하고 Normalize.css를 포함합니다. 여기에 소개글이 있습니다.
(뭐, 본 Hellow World와는 특별히 관계가 많지는 않습니다)

왼편에 보면 다양한 JS, CSS 등을 위한 표준 템플릿이 html5보일러강판에 의해서 만들어졌습니다.
다시 바꿔 말하면 이 템플릿에 준수하여 잘 만들면 N-Screen 용으로 미리 많은 사람들이 작업했던 것을
잘 사용할 수 있겠군요...

Firefox에서 index.html을 열어 보려고 했더니,

이렇게 FireFox용 Extension을 설치하겠냐고 물어봅니다. "OK"를 하고,

불여우에서 위와 같이 디폴트 index.html이 떴습니다.

헤더에 패러그래프용 CSS 스타일을 하나 정의해 봅니다~
친절한 Context Sensitive 도움말은 정말 이 보다 더 좋은 것이 없을 정도라 느껴집니다.

심지어는 위와 같이 칼라도 바로 바로 선택할 수 있습니다.

위와 같이 style을 추가하였습니다.

파란색으로 표현이 되었습니다.

이제 새로운 자바스크립트를 하나 추가해 봅니다.

mymain.js 라고 하나 새롭게 js 폴더 아래에 만들어 봅니다.

일단 에디터 화면을 가로로 하나 나누고, index.html 파일에 button 태그를 하나 추가해 봅니다.

위와 같이 Hello라고 추가했습니다.

또한 헤더에 내가 만들 mymain.js 자바스크립트를 포함시킵니다.
또한 하단의 mymain.js 에는 helloWorld() 라는 함수를 위와 같이 추가시켰습니다.

우리의 친절한 금자씨(가 아니라 웹스톰)는 위와 같이 모든 함수 목록에서 입력하는데로 필요한 함수 등을 미리 다 분석하여
보여줍니다. 이 IDE로는 MissType 오류가 거의 없을 것 같네요...ㅎㅎㅎ

위와 같이 button의 onClick 이벤트를 달았습니다.

일단 하단과 같이 브레이킹포인트를 하나 추가해 보았습니다.

디버깅을 위하여 상단의 툴바에서 아래 화살표를 눌러 위와 같은 설정차이 뜨면, 좌측 상단의 "+"를 눌러 위와 같이 JavaScript Debug 
환경을 만들어 하단의 "Debug" 단추를 눌러봅니다.

이제 브라우저가 뜨는데, "Hello" 단추를 누르면,

해당 브레이킹 포인트에 실행이 멈추며 디버깅을 할 수 있습니다.
계속 Run 을 시키면,

위와 같이 alert 창이 떳음을 확인할 수 있습니다.


어느분께는 도움이 되셨기를...

덧글

  • Juuuun 2013/10/16 11:23 # 삭제 답글

    좋은 정보 감사해요 ^^
    잘 읽고갑니다 ~
  • 지훈현서아빠 2013/10/16 13:22 #

    도움이 되셨다니 저의 보람입니다~~ ^^
  • 공부 2013/10/23 13:55 # 삭제 답글

    webstorm 이란걸 처음 알았네요 감사합니다.
  • 지훈현서아빠 2013/10/23 16:05 #

    도움이 되셨다니 저의 보람입니다~ ^^
  • tomoya 2013/11/19 14:53 # 삭제 답글

    포스팅 잘 봤습니다.
    그런데 전편의 node.js 관련 포스팅이든 이 포스팅이든 잘 동작은 하는데
    Live Edit 기능이 되지 않네요. http://mobicon.tistory.com/124 파이어폭스 메뉴는 나오지않아
    크롬에 익스 텍션 설치해서 열긴 했는데.. 위 링크 처럼 실시간 변화는 되지 않아서..
    해당부분 셋팅 하는게 따로 있나요?
    국내에서 webstorm 관련 책자도 안 보여서 어렵네요..
  • 마라나타 2014/02/21 21:49 # 삭제 답글

    쉬운 설명 너무 감사합니다^^
    놀랍습니다. 대단한 기술의 발전..ㅎㅎ
  • 지훈현서아빠 2014/02/22 01:32 #

    도움이 되셨다니 저의 보람입니다~~
댓글 입력 영역

구글애드텍스트