이 빠른 시작에서는 Visual Studio IDE(통합 개발 환경)를 살펴봅니다. 이 문서에서는 JavaScript 개발에 사용할 수 있는 창, 메뉴 및 기타 기능에 익숙해지는 데 도움이 되는 5-10분 소개를 제공합니다.
Visual Studio 없는 경우 Visual Studio 다운로드 페이지에서 free 평가판 버전을 설치할 수 있습니다.
시작 창 사용
Visual Studio 실행한 후 가장 먼저 표시되는 것은 시작 창입니다. 시작 창은 "코드로 빠르게 이동"하는 데 도움이 되도록 설계되었습니다. 코드를 복제하거나 체크 아웃하거나, 기존 프로젝트 또는 솔루션을 열거나, 새 프로젝트를 만들거나, 코드 파일이 있는 폴더를 여는 옵션이 있습니다.
이미 Visual Studio 작업 중인 경우 File> 시작 창 선택하여 시작 창을 열 수 있습니다.
Visual Studio 작업을 새로 사용하는 경우 최근 프로젝트 목록이 비어 있을 수 있습니다.
MSBuild 기반이 아닌 코드베이스를 사용하는 경우 폴더 사용 옵션을 사용하여 Visual Studio 코드를 엽니다. 자세한 내용은 프로젝트 또는 솔루션 없이 Visual Studio에서 코드 개발참조하세요. 그렇지 않으면 새 프로젝트를 만들거나 GitHub 또는 Azure DevOps와 같은 원본 공급자에서 프로젝트를 복제할 수 있습니다.
MSBuild 기반이 아닌 코드베이스를 사용하는 경우 로컬 폴더 열기 옵션을 사용하여 Visual Studio에서 코드를 엽니다. 자세한 내용은 프로젝트 또는 솔루션 없이 Visual Studio에서 코드 개발참조하세요. 그렇지 않으면 새 프로젝트를 만들거나 GitHub 또는 Azure DevOps와 같은 원본 공급자에서 프로젝트를 복제할 수 있습니다.
Visual Studio 시작하면 시작 창에 코드 없이 Continue 옵션이 포함됩니다. 이 작업을 통해 특정 프로젝트 또는 코드를 로드하지 않고도 Visual Studio 개발 환경을 열 수 있습니다. 이 옵션을 사용하여 Live Share 세션에 참가하거나 디버깅 프로세스에 연결할 수 있습니다. Esc 키를 선택하여 시작 창을 닫고 IDE를 열 수도 있습니다.
프로젝트 만들기
Visual Studio 기능을 계속 탐색하려면 새 프로젝트를 만듭니다. Visual Studio는 코딩을 빠르게 시작하는 데 도움이 되는 다양한 종류의 프로젝트 템플릿을 제공합니다.
시작 창에서 새 프로젝트 만들기를 선택합니다. 창이 새로 고쳐져 새 프로젝트를 만들기 위한 옵션이 표시됩니다.
템플릿 검색 상자에서 javascript 또는 typescript를 입력합니다.
입력 텍스트는 프로젝트 형식 목록을 필터링하여 이름 또는 언어 형식에 "JavaScript" 또는 "TypeScript"가 포함된 템플릿을 표시합니다.
JavaScript Express 애플리케이션 프로젝트 템플릿을 선택하고 다음을 선택합니다.
새 프로젝트 구성 창에서 기본 프로젝트 이름을 적용하고 만들기를 선택합니다.
Visual Studio 프로젝트를 만들고 IDE에서 엽니다. 프로젝트의 파일 및 폴더는 솔루션 탐색기 표시됩니다.
솔루션 탐색기 프로젝트 찾아보기
솔루션 탐색기 창은 일반적으로 Visual Studio IDE 오른쪽에 열립니다. 이 창에는 프로젝트, 솔루션 또는 코드 폴더의 파일 및 폴더 계층 구조에 대한 그래픽 표현이 표시됩니다.
계층 구조를 찾아보고, 특정 파일 또는 폴더를 검색하고, 파일을 선택하여 열 수 있습니다.
코드 편집기에서 파일 열기
솔루션 탐색기 app.js 파일을 선택하여 Editor 창에서 파일을 엽니다. 편집기는 파일의 내용을 표시하며 Visual Studio에서 대부분의 코딩 작업을 수행하는 위치입니다.
주 메뉴 살펴보기
Visual Studio IDE 위쪽의 메뉴 모음에서는 범주별로 정렬된 명령 그룹에 빠르게 액세스할 수 있습니다. 예를 들어 프로젝트 메뉴에는 작업 중인 프로젝트와 관련된 명령이 포함되어 있습니다. 도구 메뉴에서 옵션을 선택하여 Visual Studio의 동작 방식을 사용자 지정하거나 도구 및 기능 가져오기를 선택하여 설치에 기능을 추가할 수 있습니다.
보기를 선택하여 보기 관련 명령 목록을 확인한 다음 오류 목록을 선택하여 오류 목록 창을 엽니다.
오류 목록에서 오류 및 경고 검토
오류 목록에는 코드의 현재 상태에 대한 오류, 경고 및 메시지가 표시됩니다. 파일에 오류(예: 누락된 중괄호 또는 세미콜론)가 있거나 프로젝트의 어느 곳에나 있는 경우 여기에 나열됩니다.
출력 창에서 빌드 메시지 확인
출력 창에는 프로젝트 빌드 및 소스 제어 공급자의 출력 메시지가 표시됩니다.
출력 창에서 빌드 메시지를 탐색할 수 있도록 새 프로젝트를 빌드합니다. 메뉴 모음에서빌드 솔루션 빌드>를 선택합니다.
출력 창은 자동으로 포커스를 가져오고 성공적인 빌드 메시지를 표시합니다.
명령 및 기능 검색
검색 상자는 Visual Studio 대부분의 작업을 빠르고 쉽게 수행할 수 있는 방법입니다. 수행하려는 작업과 관련된 일부 텍스트를 입력할 수 있으며 검색 결과에 입력 텍스트와 관련된 옵션 목록이 표시됩니다.
빌드가 수행하는 작업에 대한 자세한 내용을 확인하기 위해 빌드 출력 세부 정보를 늘리려고 하는 경우를 가정해 보겠습니다. 아래 단계를 수행할 수 있습니다.
- 검색 상자가 표시되지 않으면 Ctrl+Q 바로 가기 키를 사용합니다. 검색 상자에 verbosity를 입력합니다.
결과 목록에서 MSBuild 프로젝트 빌드 출력 세부 정보 표시 (projectsAndSolutions.buildAndRun.outputVerbosity) 항목을 두 번 클릭합니다.
옵션 창이 열리고 모든 설정>프로젝트 및 솔루션> 섹션이 열립니다.
드롭다운을 사용하고 MSBuild 프로젝트 빌드 출력 세부 정보 표시 옵션을 표준으로 설정합니다.
결과 목록에서 MSBuild 세부 정보 표시 변경 (프로젝트 및 솔루션 > 빌드 및 실행) 항목을 두 번 클릭합니다.
옵션 대화 상자가 프로젝트 및 솔루션> 섹션으로 열립니다.
드롭다운을 사용하고 MSBuild 프로젝트 빌드 출력 세부 정보 표시 옵션을 표준으로 설정하고 확인을 선택합니다.
솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭하고 상황에 맞는 메뉴에서 리빌드를 선택하여 프로젝트를 다시 빌드합니다.
이번에는 출력 창에 빌드 프로세스의 자세한 로깅이 표시됩니다.
피드백 보내기
Visual Studio 사용하는 동안 문제가 발생하거나 제품을 개선하는 방법에 대한 제안이 있는 경우 Visual Studio 창 맨 위에 있는 사진 보내기 피드백 메뉴를 사용할 수 있습니다.
관련 콘텐츠
- 코드 편집기 사용하는 방법 알아보기
- 프로젝트 및 솔루션 대해 알아보기
Visual Studio IDE - Visual Studio 기능 살펴보기
- 테마 및 글꼴 색 변경