웹스톰 시작하기 .
IDE 경험하기 /
웹스톰에 온걸 환영합니다. 이 짧은 가이드는 당신이 IDE에 잘 적응하는 것을 돕도록 만들어 졌습니다.
시작하기 전에
당신은 설치후 웹스톰을 바로 시작할수 있습니다. 웹스톱은 Node.js, CoffeeScript, TypeScript, Dart, Jade, Sass, LESS and Stylus 같은 최신 웹 트렌드를 지원하는 특징있고 준비되어 있는 개별( local) 개발 환경입니다.
웹스톰은 플랫폼에 유동적(cross-platform) 이고 윈도우 맥, 리숙스에서 동작합니다.
IDE 살펴보기
맨 처음에 웹스톰을 시작할때나 혹은, 열려있는 프로젝트가 없을때, 당신은 Welcome 스크린을 만나게 됩니다. 이것은 메인 IDE에 들어가는 메인 입구를 보여줍니다. (IDE는 프로젝트는 만들기 또는 열기, 버전 컨트롤(version control) 확인하기, 문서 보여주기, 플러그인 사용하기를 가지고 있습니다.
프로젝트가 열렸을때, 몇가지 구역으로 나뉘어진 메인창을 볼수 있습니다.
1. 메뉴 그리고 툴바 ; 다양한 명령을 수행
2. 네비게이션 바 ; 프로젝트 전체를 살펴보기위한 곳.
3. 상태 바 ; 전체 IDE에 관한 다양한 정보를 보유. 에디터안에 있는 파일이나 프로젝트, 정보, 경고나 에러 메세지.
4. 에디터 ; 사용자가 실제적으로 코딩하는 곳.
5. 장비 창 ; 이곳은 다양한 기능을 수행합니다. 즉 당신이 프로젝트나 파일 구조를 통해서 살펴보고 이동하는 것, 검색하거나 조사한 결과를 보여주기, 수행하기(run), 디버그하기, 어플리케이션 테스트하기, 상호작용하는 콘솔간의 작업등을 도울 것입니다.
왜 프로젝트가 필요할까요?
웹스톰에서 당신이 해야하는 것은 프로젝트의 문맥(context)속에 있습니다. 프로젝트는 완전한 소프트웨어 솔루션을 의미하고 프로젝트 와이드(project-wide) 세팅을 정의합니다.
이것은 코딩을 돕고, 대량의 리펙토링, 코딩스타일 일관성 유지를 위한 기초를 만듭니다.
참고 ) 프로젝트 Project
웹스톰 프로젝트에 에 코드를 추가하기( import 하기 )
웹스톰을 가지고 당신은 세가지 방법으로 프로젝트를 만들 수 있습니다.
1. 원거리 호스트에서 소스를 다운로드하고 웹스톰 프로젝트에서 받은 소스를 구성하기(arrange)
2. 버전 컨트롤 보관소를 복사하고 다운로드한 소스 주변에 프로젝트를 만들기???
3. 그냥 처음부터 프로젝트를 시작하기.
1. 다운받은 소스로 프로젝트를 만들기.
가장 넓게 사용되는 흐름은(workflows)는 이미 존재하는 어플리케이션을 업데이트 하는 것입니다. 이런 경우에 당신은 어플리케이션 소스를 다운로드할 필요가 있고 웹스톰 프로젝트에서 구성할수 있습니다.
1> 첫번째로, 소스가 위치해 있느 원거리 호스트로 접근하는 법을 구성(configure access to the remote host)합니다. ( Tools | Deployment | Configuration).
2> 이미 존재하는 소스 마법사(New Project from Existing Sources Wizard) 로 새로운 프로젝트를 시작합니다.
참고: 다운로드한 소스로 프로젝드 생성하기 Creating a project from downloaded sources
2. 버전 컨트롤 저장소에서 온 소스로 구성하기
GitHub 같은 VCS 저장소들로부터 소스들을 다운 받을 수 있습니다.
다음 경로로 선택합니다. ( VCS | Checkout from Version Control | <your vcs>). 저장소에 접근하기 위해서 웹스톰에서 뭔가 요청 받을때, 증명할수 있는 것(id나 비번같은거)를 적습니다.
참고 :
> GitHub에서 저장소 복사하기
> 현재 컴퓨터(local)에 Git 저장소를 설정하기
> 현재 컴퓨터(local)에 Mercurial 저장소를 설정하기
> SVN 저장소에서 가저온 파일들 체크하기
> CVS 저장소에서 가저온 파일들 체크하기
3. 그냥 처음부터 프로젝트를 시작하기.
아예 처음부터 어플리케이션을 개발을 시작할수도 있습니다.
1> Welcome 스크린에서 "Create New project" 를 선택합니다.
2> 열린 "Create New project"에서 프로젝트 이름, 상위폴더, 프로젝트 타입같은 프로젝트 특징들을 입력합니다. 프로젝트 타입을 결정하면서, 프로젝트를 업로드된 외부 템플릿이나 프레임워크로 설정할수 있습니다. ?? ( 프론트 엔드 측 어플리케이션 조각들인, HTML5 Boilerplate, Twitter Bootstrap, Foundation 이나 Node.js를 사용하는 서버측 어플리케이션을 위한 Express )
3. 프로젝트를 열고, 안에 자바 스크립트 파일을 만듭니다. 그러기 위해서, 프로젝트 도구창안에 있는 프로젝트의 루트 디렉토리에 마우스포인터를 위치후 우클릭합니다. New | JavaScript File 를 선택후 다이얼로그 박스가 생기면 이름을 입력합니다.
4. 에디터에서 열린 새로운 파일안에 코드를 입력하면 웹스톰은 자동으로 그 파일을 저장 할 것입니다.
참고 : Creating a project from scratch
Generating a project from a framework
VCS
물론 버전 관리에 당신의 소스(코드)를 저장할수 있습니다. Mecurial, Git, SVN. Webstorm에서는 이것들을 설정하기 쉽습니다. 일단 Setting 다이얼로그 박스에서 Version Control 노드를 클릭합니다. (Settings dialog — Project Settings - Version Control) 만약 당신의 프로젝트를 복사된 저장소 쪽에 설치한다면, 웹스톰은 이미 어떤 VCS 가 적용되는 지 알고 자동으로 다운받은 소스를 이 시스템의 통제 아래에 둡니다. 공통적으로 적용되는 VCS의 행동을 부분적으로 정의 할수 있습니다. ( 파일의 생성과 제거의 확인, 백드라운드에서 수행되는작업들(tasks), 버전 없는(unversioned) 파일들을 무시하기 등등)
로컬 히스토리
전형적인 버전관리 시스텡에 덧붙여서 se local history. 를 사용할수 있습니다. 로컬 히스토리를 사용하면, 웹스톰은 자동으로 소스 코드의 변경 사항, 리팩토링의 결과, 테스트, 배포, 수행, 업데이트 같은 미리 정의된 이벤트의 설정에 기반한 소스코드의 상태을 추적합니다. (테스트, 배포, 수행, 업데이트)local history는 항상 켜져있습니다.
똑똑하게 코드를 작성하기.
* 다양한 IDE들 중에서 웹스톰을 돋보이게 하는 것은 완벽하게 특성화된 에디터 덕분입니다. 소스코드를 개발하기위해서 무엇을 하던지, 웹스톰은 항상 가까이에서 당신이 에러가 없는 어플리케이션을 만들도록 도와줍니다. 아래는 웹스톰이 코딩을 돕는 법을 보여주는 간단한 개요입니다.
개발의 각 단계에서, 현재 작성중인 문장을 고려한 코드자동완성 기능(Ctrl+Space)을 사용하세요.
예를 들면 코드 자동완성 기능이 실행되는 곳에서 당신은 키워드나 코드 블럭, 타입추측, 메소드나 특성들을 입력 완료 할수 있습니다.
* 전체 코드의 구조를 만들기 위해서 라이브 템플릿( live templates/snippets )과 서라운드 템플릿( surround templates )을 사용하세요. ( 라이브 템플릿; Code | Insert Live Template 또는 단축키 Ctrl+J , 서라운드 템플릿; Code | Surround with Live Template 또는 단축키 Ctrl+Alt+J ) 웹스톰은 넓은 범위의 바로 사용가능한 라이브 템플릿과 코드조각(snippets)들을 가지고 있습니다. 사용자는 설정(Setting)창에서 이용가능합니다. (File | Setting , Settings 창에서 — IDE Settings - Live templates). 만약 개발하는데 중요한 어떤 중요한 것이 부족하다면, 이런 코드조작(snippets) 의 설정을 자신만의 것으로 확장시킬수 있습니다.
온전한 코드 구조들을 추가할수 있는 능력을 놓치지 마십시오. (choose Code | Surround With or press Ctrl+Alt+T).
* 코드안에 언어 삽입( language injection )기능을 사용하세요.(default로 켜져있음) 웹스톰은 JavaScript 코드 블럭이나 문법적인 요소및 CSS, HTML, 등등에 대한 완전한 코딩 도움을 드립니다.
* 마치 짝 프로그래머를 가진것 처럼, 웹스톰은 당신이 하고 있는 작업을 보고 있습니다. 그리고 알맞는 제안이나 들여쓰기 작업등을 전구모양과 함께 보여줍니다. 사용자가 그 제안이 어떤 내용인지 정확히 알고 싶으면 클릭하거나 Alt+Enter를 누르면 됩니다. 예를들면, 이런 방법으로 사용자는 아직 선언하진 않았지만, 이미 코드에서 사용중인 메소드를 다시 자동생성할수 있습니다.
* CSS와 HTML을 위한 Emmet 을 사용하세요. (emmet은 웹스톰만의 자동 완성 기능의 이름인듯 합니다.) Emmet은 선택자(selectors)에 따라서 native를 지원할뿐 아니라, 200개 이상의 CSS, HTML, XSL 라이브 템플릿을 제공합니다. Emmet 지원 기능을 활성화 하려면, File | Setting 대화창을 열고 Emmet을 클릭후 Enable Emmet을 선택하면 됩니다. 
변화를 즉시 보여줌.
HTML, CSS, JavaScript 파일을 브라우져에서 열수 있습니다. 이 파일을 수정하면 페이지를 다시불러올 필요 없이 변경한 내용들이 어떻게 표현되는지 웹스톰에서 볼수 있습니다. 그리고 자동완성 기능도 실시간 입니다. 제안 리스트 통해 살펴본 것처럼, 브라우져 안에서 제안된 모습을 이미 제안을 받아들인 것 처럼 바꾸어서 그 페이지는 보여줍니다.
현재 이 기능은 구글크롬에서 파일을 열때 지원됩니다. 메인메뉴에서 (View | Web | perview) 을 선택하십시오. 그리고 팝업메뉴에서 구글 크롬을 선택하십시오.
브라우져에서 파일을 열고, 메뉴에서 View | Live Edit 을 선택하십시오. 그러면 즉시 당신이 만든 모든 변화들이 브라우저에 반영되고, 영향을 받은 곳들이 강조되어 나타날 것입니다.
투명한 코드 분석.
웹스톰은 사용자가 발생한 에러를 수정하고, 또 에러를 피할수 있도록 다양한 힌트와 도움글들을 줍니다.
- 첫째로, 글을 치자마자 즉각적으로 모든 구문 에러가 물결무늬로 표시됩니다. 만약 에러 지역에 괄호를 둔다면, 툴팁과 상태바 왼쪽에서 문제점에 대한 간단한 설명을 볼수 있을것입니다.
- 다음 수준은 정적인 코드분석이나 코드 조사 입니다. 즉 정확한 수행은 배제한체로 분석하는 것입니다. 사실 웹스톰은 현재 파일에서 코드를 즉각적으로 살펴보고, 조사한 결과를 marker bar에 색칠된 선으로 보여줍니다. IDE(통합계발환경)의 오른쪽 부분의 빨간색 줄이 보인다면, 당신의 코드는 심각한 에러가 있음을 의미합니다. 보다 덜 중요한 것들인, 코드를 개선하기 위한 제안들이나 경고들은 노란색 선으로 표시됩니다. 신호등이 작동하는 것 처럼, marker 바의 위쪽, 색칠된 상태표시기에 현재 파일에 대한 정보가 요약되어 있습니다.
- 게다가, 웹스톰은 코드를 즉각적으로 확인하는 양질의 도구인 JSLint 와 JSHint 를 포함하고 있습니다. 이런 도구들의 환경설정을 하고 활용하기 위해서는, Setting 대화창을 열고, JavaScript | Code Quality Tools| JSHint 또는 JSLint를 클릭하면 됩니다. 그래서 열리는 페이지에서 Enable을 체크박스를 선택하고 적용할 규칙들을 특정합니다.
- 웹스톰은 코드 복사를 탐지하고, 코드들을 리팩토링하는 추출법을 적용함으로써 사용자의 코드는 견고하게 유지하는데 도움을 줍니다. 똑똑하게 복사된 코드 탐지자(Smart Duplicated Code Detector)를 시작하려면 , 메인메뉴에서 Code | Locate Duplicates 를 선택하세요. 웹스톰은 리팩토링을 위한 후보군들을 보여줄 것입니다.
- 마지막으로, 당신의 응용프로그램의 코드를 더 깊숙히 살펴보고 싶을지도 모릅니다. 이런 경우에, 전체 프로젝트를 살펴봐야만 하거나 그 부분(Code | Inspect Code)이라고 찾아야 합니다. 그리고 결과를 조사도구창(Inspection tool
window.)에서 볼수 있습니다. 웹스톱은 광범위하게 미리 정의된 연구 결과들을 가지고 있습니다. 곧 익숙해지면, Setting 대화창의 Inspections에서 그것들을 설정할수 있을 것입니다.
당신만의 방법을 찾으세요.
웹스톰의 네비게이터(안내)기능은 다음 두가지 기능이 있습니다.
- 소스코드 안에서 안내(네비게이팅)하기
- IDE 요소들 간에 건너뛰기
* 소스 코드
텍스트의 요소들을 찾으며 시작해 봅시다. 검색과 안내(내비게이팅)의 가장 기본적인 방법은 소스코드안에서 Ctrl + F 명령어를 사용하는 것입니다. 즉 찾을 구문을 타이핑 시작하면 현재 파일 안에 같은 구문이 있는곳을 즉각적으로 보여줍니다. 그러나 웹스톰은 더 좋습니다. 만약 어떤 디렉토리안이나 임의의 범위,혹은 전체 프로젝트에서 특정 구문을 찾고 싶을때도 가능합니다. (Ctrl+Shift+F).
게다가, 웹스톰은 (Search for usages를 사용해) 더욱 정교한 접근법을 제공합니다. 예를 들어서, 만약 사용자가 응용프로그램 안에서 특정 문자열을 사용중인 또 다른 곳을 탐색하기 원한다면 Alt + F7 나 context 메뉴에서 Find Usages를 누르면 됩니다. 그런후 검색 범위를 구체화하면 검색 결과들을 Find 도구 윈도우에서 보여줍니다.
사실상, 특정문자열이 어디에서 사용중인지 찾도록 돕는 몇가지 명령들이 있습니다. 사용자는 현재 파일에서 같은 문자열을 뛰어 넘어가며 찾을수 있습니다. (Ctrl + F7), 현재파일에서 사용중인 문자열들을 색칠하여 보여줍니다. (Ctrl + Shirt + F7), 또는 전체 프로젝트에서 사용중인것을 팝업리스트에서 볼수 있습니다. (Ctrl + Alt + F7). 만약 특정 문자열이 선언된 곳으로 넘어가고 싶다면 그 문자열의 가운데를 클릭하거나 Ctrl+B를 입력하면 됩니다.
어떤 요소를 빨리 찾고 그것을 에디터상에서 열고 싶다면, navigation pop-up을 이용하세요. Ctrl+N (클래스찾기), Ctrl+Shift+N (파일 찾기), Ctrl+Shift+Alt+N (심볼찾기), 그리고 당신이 찾는 이름을 타이핑하기 시작하세요. 당신이 이름을 타이핑을 할수록 맞는 이름들의 수는 줄어갈 것입니다. 이건 단지 편리한 기능일 뿐이죠. 사용자는 별표(*)나 낙타표기법을 위한 대문자나 언더바(_)표기법을 위한 스페이스, 감싼 폴더를 위한 슬래시등을 사용할수 있습니다.
Quick search(빠른검색)은 파일을 찾는 가장 쉬운 방법입니다. Project tool 참에 마우스를 놓은채, 타이핑할수 있습니다. 그리고 트리뷰에서 어떻게 매칭된 노드들이 강조되었는지 볼수 있습니다. 사실 이런 파일이나 문자열을 찾는 방법은 어떤 도구창에서도 작동합니다.
여러겹으로 쌓인 태그 구조를 가진 크고 복잡한 HTML, XML파일들과 작업중일때, 웹스톰은 코드가 강조된 특징들을 제거합니다.
또한 웹스톰은 당신이 어디서 작업중인지 쉽게 찾을수 있도록 에디터 탭의 상단에 현재의 HTML 파일의 구조를 보여줍니다.
IDE 요소들.
IDE를 살펴보는 방법들을 매우 다양하여서 우리는 간단히 몇가지를 살펴볼 것입니다. switcher(변경자) 부터 시작해 보겠습니다. Ctrl + Tab를 눌러서 웹스톰의 도구창들과 파일들의 리스트가 있는 switcher를 실행하세요. Ctrl 키를 누른채로 Tab이나 방향키를 눌러서 당신이 원하는 요소들로 이동하세요.
만약 IDE요소들중의 하나를 선택했고 그것을 다른 곳(에디터, 프로젝트 뷰, 네비게이션바, 변화리스트)에 보고 싶다면, Select Target(Alt + F1:목표 선택)을 사용하세요. 특히 당신이 어디에 있든, Esc를 누르면 다시 에디터 창으로 돌아가니 주의하세요.
어플리케이션 작동하기, 디버그(오류수정)하기
계속 작성중...
도움이 되셨나요? ^^