향상된 TypeScript 지원 및 기능 - AWS Cloud9
사용 가능한 프로젝트 생산성 기능언어 프로젝트 생성

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

향상된 TypeScript 지원 및 기능

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

IDE를 사용하여 사용자 환경에서 언어 프로젝트를 생성하려면 언어 프로젝트 생성 섹션을 참조하세요.

사용 가능한 프로젝트 생산성 기능

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

자동 완성

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

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

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

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

거터 아이콘

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

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

빠른 수정 사항

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

참조 찾기

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

이렇게 하려면 기호 내의 아무 삽입점에서나 Find References 명령을 실행합니다. 예:

  • 삽입점에서 마우스 오른쪽 버튼을 클릭한 다음 [참조 찾기(Find References)]를 선택합니다.

  • 메뉴 모음에서 [이동, 참조 찾기(Go, Find References)]를 선택합니다.

  • macOS, Windows 또는 Linux에 대해 기본적으로 Shift-F3 키를 누릅니다.

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

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

다음 조건에서는 Find References 명령을 사용할 수 없거나 명령이 정상적으로 작동하지 않을 수 있습니다.

  • 활성 파일의 프로젝트에는 해당 기호에 대한 참조가 없습니다.

  • IDE가 활성 파일의 프로젝트에서 해당 기호의 참조 중 일부 또는 전부를 찾을 수 없습니다.

  • IDE가 활성 파일의 프로젝트에서 해당 기호가 참조되는 하나 이상의 위치에 액세스할 수 없습니다.

정의로 이동

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

이렇게 하려면 기호 내의 아무 삽입점에서나 Jump to Definition 명령을 실행합니다. 예:

  • 삽입점에서 마우스 오른쪽 버튼을 클릭한 다음 [정의로 이동(Jump to Definition]을 선택합니다.

  • 메뉴 모음에서 [이동, 정의로 이동(Go, Jump to Definition]을 선택합니다.

  • macOS, Windows 또는 Linux에 대해 기본적으로 F3 키를 누릅니다.

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

다음 조건에서는 Jump to Definition 명령을 사용할 수 없거나 명령이 정상적으로 작동하지 않을 수 있습니다.

  • 이 기호는 해당 언어의 기본 기호입니다.

  • IDE가 활성 파일의 프로젝트에서 정의 위치를 찾을 수 없습니다.

  • IDE가 활성 파일의 프로젝트에서 정의의 위치에 액세스할 수 없습니다.

기호로 이동

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

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

  2. 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 입력 시작).

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

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

언어 프로젝트 생성

AWS Cloud9 IDE에서, 지원되는 프로젝트 생산성 기능과 함께 작동하는 언어 프로젝트를 만들려면 다음 절차를 따릅니다.

참고

지원되는 프로젝트 생산성 기능은 언어 프로젝트의 일부인 파일에 사용하는 것이 좋습니다. 프로젝트의 일부가 아닌 파일에 일부 지원되는 프로젝트 생산성 기능을 사용할 수 있지만, 이러한 기능은 예기치 않은 결과를 보일 수 있습니다.

예를 들어 IDE를 사용하여 프로젝트의 일부가 아닌 환경의 루트 수준에 있는 파일 내에서 참조 및 정의를 검색할 수 있습니다. 그러면 IDE는 동일한 루트 수준의 파일에서만 검색할 수 있습니다. 이 경우 참조 또는 정의가 동일한 환경의 다른 언어 프로젝트에 실제로 존재하더라도 참조나 정의가 검색되지 않을 수 있습니다.

TypeScript 언어 프로젝트 생성

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

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

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

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

    tsc --init

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

    tsconfig.json 파일에 대한 자세한 내용은 다음을 참조하세요.