

 AWS Cloud9 는 더 이상 신규 고객이 사용할 수 없습니다. AWS Cloud9 의 기존 고객은 정상적으로 서비스를 계속 이용할 수 있습니다. [자세히 알아보기](https://aws.amazon.com/blogs/devops/how-to-migrate-from-aws-cloud9-to-aws-ide-toolkits-or-aws-cloudshell/)

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

# 향상된 TypeScript 지원 및 기능
<a name="projects"></a>

 AWS Cloud9 IDE를 사용하면 *언어 프로젝트를* 사용하여 TypeScript의 향상된 생산성 기능에 액세스할 수 있습니다. 언어 프로젝트는 AWS Cloud9 개발 환경의 IDE에 있는 관련 파일, 폴더 및 설정의 모음입니다.

IDE를 사용하여 사용자 환경에서 언어 프로젝트를 생성하려면 [언어 프로젝트 생성](#projects-create) 섹션을 참조하세요.

## 사용 가능한 프로젝트 생산성 기능
<a name="projects-features"></a>

 AWS Cloud9 IDE는 TypeScript에 대해 다음과 같은 프로젝트 생산성 기능을 제공합니다.

### Autocomplete
<a name="projects-features-autocomplete"></a>

편집기에서 파일을 입력하면 해당 컨텍스트의 삽입점에 기호 리스트가 표시됩니다(해당 기호를 사용할 수 있는 경우).

삽입 지점의 목록에서 기호를 삽입하려면 기호가 아직 선택되어 있지 않은 경우 위쪽 화살표 또는 아래쪽 화살표 키를 사용하여 기호를 선택한 다음 `Tab` 키를 누릅니다.

`Tab` 키를 누르기 전에 선택한 기호에 대한 정보가 포함된 스크린 팁이 표시될 수 있습니다(해당 정보가 제공되는 경우).

기호를 삽입하지 않고 목록을 닫으려면 `Esc` 키를 누릅니다.

### 거터 아이콘
<a name="projects-features-gutter-icons"></a>

활성 파일의 거터에 아이콘이 표시될 수 있습니다. 이러한 아이콘은 코드를 실행하기 전에 코드의 경고 및 오류와 같은 가능한 문제를 강조 표시합니다.

문제에 대한 자세한 내용을 보려면 마우스 포인터로 해당 문제의 아이콘을 잠시 가리킵니다.

### 빠른 수정 사항
<a name="projects-features-quick-fixes"></a>

편집기의 활성 파일에서, 코딩 오류 및 경고에 대한 정보를 표시하고 해당 코드에 자동으로 적용할 수있는 수정 사항을 표시할 수 있습니다. 오류 또는 경고 정보와 가능한 수정 사항을 표시하려면, 빨간색 점선 밑줄(오류의 경우) 또는 회색 점선 밑줄(경고의 경우)이 있는 코드 부분을 선택합니다. 아니면 빨간색 또는 회색 점선 밑줄이 있는 코드에 커서를 놓고 `Option-Enter` 키(macOS) 또는 `Alt-Enter` 키(Linux 또는 Windows)를 누릅니다. 제안된 수정 사항을 적용하려면 목록에서 수정 사항을 선택하거나 화살표 키를 사용하여 수정 사항을 선택하고 `Enter` 키를 누릅니다. 마우스 클릭으로 빠른 수정 사항을 선택하는 기능을 켜거나 끄려면 **AWS Cloud9**, [**기본 설정(Preferences)**], [**사용자 설정(User Settings)**], [**언어(Language)**], [**힌트 및 경고(Hints & Warnings)**], [**클릭 시 사용 가능한 빠른 수정 사항 표시(Show Available Quick Fixes on Click)**]를 선택합니다.

### 참조 찾기
<a name="projects-features-find-refs"></a>

편집기의 활성 파일에서, 해당 참조에 대한 액세스 권한이 IDE에 있는 경우 기호에 대한 모든 참조를 삽입점에 표시할 수 있습니다.

이렇게 하려면 기호 내의 아무 삽입점에서나** `Find References` **명령을 실행합니다. 예:
+ 삽입점에서 마우스 오른쪽 버튼을 클릭한 다음 [**참조 찾기(Find References)**]를 선택합니다.
+ 메뉴 모음에서 [**이동, 참조 찾기(Go, Find References)**]를 선택합니다.
+ macOS, Windows 또는 Linux에 대해 기본적으로 `Shift-F3` 키를 누릅니다.

참조를 사용할 수 있는 경우 활성 파일의 위에, 해당 기호 옆에 창이 열립니다. 이 창에는 해당 기호가 참조되는 파일의 목록이 있습니다. 이 창에는 목록의 첫 번째 참조가 표시됩니다. 다른 참조를 표시하려면 목록에서 해당 참조를 선택합니다.

창을 닫으려면 닫기(**X**) 아이콘을 선택하거나 `Esc` 키를 누릅니다.

다음 조건에서는** `Find References` **명령을 사용할 수 없거나 명령이 정상적으로 작동하지 않을 수 있습니다.
+ 활성 파일의 프로젝트에는 해당 기호에 대한 참조가 없습니다.
+ IDE가 활성 파일의 프로젝트에서 해당 기호의 참조 중 일부 또는 전부를 찾을 수 없습니다.
+ IDE가 활성 파일의 프로젝트에서 해당 기호가 참조되는 하나 이상의 위치에 액세스할 수 없습니다.

### 정의로 이동
<a name="projects-features-go-to-def"></a>

편집기의 활성 파일에서, 해당 참조에 대한 액세스 권한이 IDE에 있는 경우 기호에서 해당 기호가 정의된 위치로 이동할 수 있습니다.

이렇게 하려면 기호 내의 아무 삽입점에서나** `Jump to Definition` **명령을 실행합니다. 예:
+ 삽입점에서 마우스 오른쪽 버튼을 클릭한 다음 [**정의로 이동(Jump to Definition**]을 선택합니다.
+ 메뉴 모음에서 [**이동, 정의로 이동(Go, Jump to Definition**]을 선택합니다.
+ macOS, Windows 또는 Linux에 대해 기본적으로 `F3` 키를 누릅니다.

정의를 사용할 수 있는 경우 해당 정의가 별도의 파일에 있더라도 삽입점이 해당 정의로 전환됩니다.

다음 조건에서는** `Jump to Definition` **명령을 사용할 수 없거나 명령이 정상적으로 작동하지 않을 수 있습니다.
+ 이 기호는 해당 언어의 기본 기호입니다.
+ IDE가 활성 파일의 프로젝트에서 정의 위치를 찾을 수 없습니다.
+ IDE가 활성 파일의 프로젝트에서 정의의 위치에 액세스할 수 없습니다.

### 기호로 이동
<a name="projects-features-go-to-symbol"></a>

다음과 같이 프로젝트 내의 특정 기호로 이동할 수 있습니다.

1. 편집기에서 파일을 열어 프로젝트의 파일 중 하나를 활성화합니다. 파일이 이미 열려 있으면 편집기에서 탭을 선택하여 해당 파일을 활성 상태로 만듭니다.

1. **`Go to Symbol` **명령을 실행합니다. 예:
   + [**이동(Go)**] 창 버튼(돋보기 아이콘)을 선택합니다. [**바로 가기(Go to Anything)**] 상자에 `@`을 입력한 다음 기호 입력을 시작합니다.
   + 메뉴 모음에서 [**이동, 기호로 이동(Go, Go To Symbol)**]을 선택합니다. [**이동(Go)**] 창에서 **@** 뒤에 기호 입력을 시작합니다.
   + macOS 경우 기본적으로 `Command-2` 또는 `Command-Shift-O`를 누르고 Windows 또는 Linux의 경우 기본적으로 `Ctrl-Shift-O`를 누릅니다. [**이동(Go)**] 창에서 **@** 뒤에 기호 입력을 시작합니다.

   예를 들어 이름이 `toString`인 프로젝트에서 기호를 모두 찾으려면 `@toString` 입력을 시작합니다(또는 **@**가 이미 표시되어 있는 경우 **@** 뒤에 `toString` 입력 시작).

1. 원하는 기호가 [**기호(Symbols)**] 목록에 표시되면 해당 기호를 클릭하여 선택합니다. 아니면 위쪽 화살표 또는 아래쪽 화살표 키를 사용하여 선택한 다음 `Enter` 키를 누릅니다. 그러면 삽입점이 해당 기호로 전환됩니다.

이동하려는 기호가 활성 파일의 프로젝트에 없는 경우 이 절차가 정상적으로 작동하지 않을 수 있습니다.

## 언어 프로젝트 생성
<a name="projects-create"></a>

다음 절차에 따라 AWS Cloud9 IDE에서 지원되는 프로젝트 생산성 기능을 사용할 언어 프로젝트를 생성합니다.

**참고**  
지원되는 프로젝트 생산성 기능은 언어 프로젝트의 일부인 파일에 사용하는 것이 좋습니다. 프로젝트의 일부가 아닌 파일에 일부 지원되는 프로젝트 생산성 기능을 사용할 수 있지만, 이러한 기능은 예기치 않은 결과를 보일 수 있습니다.  
예를 들어 IDE를 사용하여 프로젝트의 일부가 아닌 환경의 루트 수준에 있는 파일 내에서 참조 및 정의를 검색할 수 있습니다. 그러면 IDE는 동일한 루트 수준의 파일에서만 검색할 수 있습니다. 이 경우 참조 또는 정의가 동일한 환경의 다른 언어 프로젝트에 실제로 존재하더라도 참조나 정의가 검색되지 않을 수 있습니다.

### TypeScript 언어 프로젝트 생성
<a name="projects-create-typescript"></a>

1. TypeScript가 환경에 설치되어 있는지 확인합니다. 자세한 내용은 [에 대한 TypeScript 자습서 AWS Cloud9](sample-typescript.md)의 [1단계: 필수 도구 설치](sample-typescript.md#sample-typescript-install) 섹션을 참조하세요.

1. 환경의 IDE의 터미널 세션에서 프로젝트를 생성할 디렉터리로 전환합니다. 디렉터리가 없으면 새로 생성한 후 해당 디렉터리로 전환합니다. 예를 들어 다음 명령을 사용하여 환경의 루트(`~/environment`)에 `my-demo-project`라는 디렉터리를 생성한 다음, 해당 디렉터리로 전환합니다.

   ```
   mkdir ~/environment/my-demo-project
   cd ~/environment/my-demo-project
   ```

1. 프로젝트를 생성하려는 디렉터리의 루트에서** `--init` **옵션을 사용하여 TypeScript 컴파일러를 실행합니다.

   ```
   tsc --init
   ```

   이 명령이 성공적으로 실행되면 TypeScript 컴파일러가 프로젝트 디렉터리의 루트에 `tsconfig.json` 파일을 생성합니다. 이 파일을 사용하여 TypeScript 컴파일러 옵션, 프로젝트에 포함하거나 제외할 특정 파일 등 다양한 프로젝트 설정을 정의할 수 있습니다.

   `tsconfig.json` 파일에 대한 자세한 내용은 다음을 참조하세요.
   +  TypeScript 웹 사이트에서 [tsconfig.json 개요](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)를 참조하세요.
   +  json.schemastore.org 웹 사이트에서 [tsconfig.json 스키마](http://json.schemastore.org/tsconfig)를 참조하세요.