WebStorm과 함께 작업하기

6.1 IDE 구조 분석하기

여기서 무엇을 보는지 알아보자.

1. 프로젝트의 폴더와 파일 트리:

여기에는 web-storm-10 프로젝트 폴더의 내용이 표시된다.

특별히 하나의 파일을 만들어서 이곳에 어떻게 구성되어 있는지 더 쉽게 이해할 수 있게 했다. 다음 강의에서 너도 이것을 해볼거야.

2. 현재 열려있는 파일:

이것은 단순히 index.html 파일의 콘텐츠이며, 코드의 문법이 강조되어 있다.

3. 상단의 메인 메뉴:

우측 상단의 유용한 버튼들:

• «초록색 삼각형» — 프로젝트 실행 버튼
• «벌레» — 디버그 모드 실행 버튼
• «돋보기» — 프로젝트에서 검색
• «기어» — 설정

4. 좌측의 사이드 메뉴:

여기에는 몇 가지 유용한 버튼이 있다. 특히 Terminal 버튼이 관심을 끌 것이다.

5. 상태 바:

상태 바의 왼쪽에는 현재 열려있는 파일의 경로가 표시된다. 오른쪽에는 그 파일의 인코딩이 표시된다: CRLF, UTF-8. 곧 이 모든 것에 대해 완벽히 이해하게 될 것이다.

6.2 프로젝트 분석하기

일반적인 프로젝트는 왼쪽 패널에 표시되는 파일들로 구성되어 있다. 이러한 파일들은 4가지 부분으로 나눌 수 있다.

1. HTML 파일들.

이러한 파일들은 .html 확장자를 가지고 있으며 WebStorm은 두 개의 화살표가 있는 초록색 아이콘으로 표시한다. 여기에는 단 하나의 파일만 있다 — index.html

이러한 파일들은 .js 확장자를 가지고 있으며 WebStorm은 노란색 아이콘으로 표시한다. 현재 스크린샷에는 이러한 파일들이 없다.

2. CSS 스타일 파일들.

이러한 파일들은 .css 확장자를 가지고 있으며 WebStorm은 파란색 아이콘으로 표시한다. 현재 스크린샷에는 이러한 파일들이 없다.

3. 정적 미디어 파일들. 이것들은 데이터는 포함하고 있지만 코드가 아닌 파일들이다. 텍스트 파일, 이미지, 미디어 파일 등이 될 수 있다. 현재 우리 프로젝트에는 이러한 파일들이 없다.

4. 외부 라이브러리 (External libraries). 현재 우리 프로젝트에는 없지만, 후에 다운로드하면 WebStorm은 여기서 이것들을 표시할 것이다.

6.3 터미널 작업

WebStorm에서는 직접 OS의 명령줄을 사용할 수 있다. Linux와 MacOS에서는 명령줄을 터미널(Terminal)이라고 부른다. 그래서 WebStorm에서도 그렇게 부른다. 사실 이는 WebStorm의 취향이 아니라, 프로그래머들 사이에서 정착된 명칭이다.

터미널을 열려면 사이드 메뉴의 터미널 버튼을 클릭해야 한다:

이런 창이 나타나야 한다:

이 창에서 너는 운영 체제의 명령을 입력할 수 있다. 우리가 관심이 가는 명령이 하나 있다.

현재 사용중인 Windows 버전을 알아보자. 이렇게 작성하면 된다:

    
      ver
    
  

이렇게 결과가 나왔다:

오류가 발생했다면, 먼저 "cmd" 명령어를 실행하고 나서 "ver" 명령어를 입력해봐.

6.4 CodeGym 플러그인이란 무엇이고 왜 필요한가?

이것은 Intellij IDEA나 WebStorm 개발 환경에 통합되어 CodeGym 코스의 과제를 작업할 수 있도록 해주는 특별한 애플리케이션 모듈이다. 예를 들어, 솔루션 코드를 작성하고, 검사를 위해 제출하고, 자신의 솔루션을 "기본" 솔루션과 비교하고, 더 많은 작업을 할 수 있다. 플러그인에서의 과제 진행 상황은 CodeGym 계정과 동기화되므로, 웹사이트에서도 동일하게 보일 것이다.

Jetbrains 마켓플레이스에서 CodeGym 플러그인을 다운로드할 수 있으며, 본인의 개발 환경에서 직접 설치할 수 있다. 이후에 WebStorm을 예시로 설명하겠지만, Intellij IDEA에도 동일한 단계가 적용된다.

1. "설정" 메뉴에 접속해봐. Windows/Linux에서는 File - Settings, MacOS에서는 WebStorm - Preferences. 만약 설정 메뉴를 찾을 수 없다면, 프로젝트를 열거나 새로 만들면 돼.

2. 설정 창이 열리면 사이드 메뉴에서 Plugins 섹션을 선택하고 Marketplace 탭을 열어. 검색창에 codegym을 입력해.

3. 플러그인을 선택하고 Install 버튼을 클릭해.
4. 플러그인 사용을 시작하려면 WebStorm을 다시 시작하라 (Restart IDE).
5. 조금 변경된 인터페이스와 상단 수평 패널에 계정 로그인 버튼이 보일 것이다.

버튼을 클릭하면 계정에 로그인 할 수 있는 창이 열리며, 비밀 키를 입력해야 해:

비밀 키는 “설정” → “보안 및 로그인” 섹션에서 찾을 수 있다.

로그인 후 프로젝트와 Codegym SDK가 자동으로 로드된다 (다른 버전으로 변경하지 않아도 된다).

6. 새로운 과제를 열려면, 왼쪽 수직 패널의 Tasks를 클릭하고, 왼쪽 사이드 패널에서 과제 카드를 클릭한 다음, 팝업 창에서 열기를 클릭해:

7. 과제 조건과 코드를 입력할 수 있는 두 개의 탭이 있는 창이 열릴 것이다.
8. 이제 과제의 솔루션을 작성하고 검사 버튼을 클릭해봐

플러그인이 설치되었다! 이제 과제를 해결할 수 있다.

사이트와 플러그인의 과제 동기화

과제 목록과 상태는 자동으로 5분마다 또는 임의의 과제를 서버에 전송한 후(서버 codegym)에 업데이트된다.

따라서 사이트에서 과제를 해결하면, 플러그인에도 해결된 과제 목록에 포함될 것이다. 과제 상태에 대한 정보를 지금 빠르게 업데이트하려면 오른쪽 상단에 있는 아바타를 클릭하고, 드롭다운 메뉴에서 과제 동기화를 선택해봐:

플러그인 초보자 모드

이것은 WebStorm이나 다른 개발 환경에 대한 경험이 없거나 적은 사용자들을 위한 간단한 버전이다. 이 모드에서는 WebStorm의 몇 가지 기능이 숨겨져 있다. 이 모드를 비활성화하려면 오른쪽 상단의 아바타를 클릭하고 드롭다운 메뉴에서 설정을 선택해봐:

PRO 모드에서 플러그인의 내비게이션 패널 숨기기

설정(⚙️) 메뉴를 클릭하고 "플러그인 내비게이션 패널 표시" 항목의 체크를 해제해: