비주얼 스튜디오 코드 기초 - 2. 프로젝트 관리와 코드 작성

폴더와 프로젝트

비주얼 스튜디오 코드는 기본적으로 폴더 단위로 프로젝트 관리를 합니다.

폴더 안에 프로젝트, 또는 관련 파일들이 모두 있고, 디버그 파일이나, 환경 설정 파일들도 모두 폴더 안에 위치하는 것이 원칙입니다. 프로젝트 폴더 밖의 파일을 개별적으로 비주얼 스튜디오 코드 에디터에서 열어 코드 작성을 할 수도 있기는 합니다.

비주얼 스튜디오로 작성한 프로젝트는 폴더 단위로 이동하거나 복사를 해서 동일한 프로젝트를 유지할 수 있습니다.

기본적으로 폴더 단위로 프로젝트 관리를 한다고 했지만, 비주얼 스튜디오는 워크스페이스(작업장?) 단위로 프로젝트를 관리할 수도 있습니다. 비주얼 스튜디오의 솔루션 파일(SLN)과 같은 역할을 하는 워크스페이스는 여러 개의 폴더를 묶어서 하나의 프로젝트로 관리할 수 있습니다.

워크스페이스는 워크스페이스 설정 파일로 프로젝트의 환경 설정 정보와, 폴더 정보를 따로 보관하며, 워크스페이스로 만든 프로젝트는 워크스페이스 설정 파일과 포함된 폴더들을 모두 함께 이동/복사를 해야 프로젝트가 온전하게 유지됩니다.

워크스페이스 설정 파일이 없을 경우 새 워크스페이스를 만들어서 환경 설정을 다시해야 하며, 폴더들도 다시 가져와 연결해야 합니다.

예를 들어 프론트엔드 웹과 백엔드 웹을 따로 개발하는 경우 별도의 폴더에 프론트엔드 웹 프로젝트와 백엔드 프로젝트를 따로 개발하고 워크스페이스에서 프론트엔드와 백엔드를 묶어서 하나의 워크스페이스(솔루션)로 관리할 수 있습니다.

먼저 프로젝트로 사용할 폴더를 선택합니다.

풀다운 메뉴 "File > Open Folder(폴더 선택)"  로 폴더를 선택합니다.

선택한 폴더의 파일 목록이 왼쪽 탐색기 화면에 목록으로 표시되면서 코딩 준비가 됩니다. 앞서 설명한대로 비주얼 스튜디오 코드는 폴더 단위로 프로젝트를 관리하는 것을 기본으로 합니다.

그래서 다른 IDE와 달리 "프로젝트 열기"가 아니라 "폴더 열기"로 부터 프로젝트를 시작하게 됩니다.

새 파일 생성

"File > New"로 새 파일을 생성(Ctrl + N)합니다.

비주얼 스튜디오는 새 파일을 생성할 때 "Untitled-1"로 에디터 창을 먼저 엽니다.

실제 파일이 생성된 것은 아니므로 "File-Save"로 반드시 저장을 해야 합니다.

저장할 때는 파일 확장자를 함께 지정해야 비주얼 스튜디오 코드가 파일의 타입을 구분하며, 비로소 비주얼 스튜디오의 에디터 기능들이 동작하기 시작합니다.

최초 파일로 확장자를 부여해 저장하기 전까지 비주얼 스튜디오는 "Untitled-1" 에디터에 입력되는 내용을 텍스트 파일로 간주하며, 비주얼 스튜디오의 모든 코딩 기능과 확장 기능들이 동작하지 않습니다.

따라서 새 에디터 창을 연 후에는 가장 먼저 확장자를 부여해 파일을 저장하는 것부터 해야 합니다.

탐색기 리소스 관리

비주얼 스튜디오 코드 왼쪽 창에는 모든 개발툴이 그런 것처럼 프로젝트 리소스들이 표시됩니다.

비주얼 스튜디오 코드는 폴더 단위로 프로젝트 관리를 하기 때문에 폴더를 기준으로 그 안에 있는 모든 파일들의 목록에 탐색기 화면으로 표시됩니다.

비주얼 스튜디오에서는 이 리소스 트리를 탐색기라고 부릅니다.

비주얼 스튜디오는 모든 리소스를 파일 단위로 관리하기 때문에, 프로젝트 브라우저 창에 표시되는 리소스들은 모두 파일입니다.

파일은 리소스별로 구분이 쉽도록 아이콘이 왼쪽에 붙어있으며, 파일 확장자에 따라 아이콘도 구분해 표시합니다.

깃(Git)을 사용할 경우 파일명 오른쪽 끝에는 깃 관련 상태 정보가 추가로 표시됩니다.

탐색기에는 몇가지 펼침 섹션이 있으며 섹션 별로 프로젝트 리소스 정보, 또는 깃 히스토리를 표시합니다.

각 펼침 섹션의 기능은 다음과 같습니다.

열려있는 편집기(OPEN EDITORS) - 현재 편집기 창에 열린 파일들만 표시합니다. 에디터에 열어 놓은 파일 갯수가 많아서 파일 선택이 쉽지 않거나, 편집기에 열어 놓은 파일들을 일괄로 관리(창 닫기, 전체 저장 등)할 필요가 있을 때 사용할 수 있습니다.

폴더명 - 현재 프로젝트의 폴더를 루트로 하는 파일 탐색기 화면이 트리 형태로 표시됩니다.

폴더를 추가로 가져와 워크스페이스로 변경한 경우 워크스페이스이름 밑에 포함된 폴더들이 나열됩니다.

개요(OUTLINE) - 현재 활성 상태인 에디터 창의 소스를 분석해 오브젝트 구조 정보가 표시됩니다. 자바스크립트 파일로 작성한 경우 함수와 변수, 그리고 객체에 대한 정보가 트리 형태로 표시됩니다.

타임라인(TIMELINE) - 깃에 반영한 변경사항을 시간 순서대로 확인할 수 있습니다. 타임라인의 변경 항목 목록은 소스파일 별로 표시되며, 탐색 트리에서 소스파일 컨텍스트 메뉴에서 타임라인 보기(Open Timeline) 선택하면 파일의 킷 변경 타임라인을 확인할 수 있습니다.

NPM 스크립트(NPM SCRIPTS) - NPM 모듈과 패키지를 관리하는 자바스크립트 파일이 있는 위치를 표시하는 패키지 관리 JSON 파일이 있으면 파일을 읽어서 이 영역에 JSON 키-값을 표시합니다. NPM 관리 스크립트는 JSON 데이터로 표시를 하며, 프로젝트 폴더 루트에 package.json 파일명으로 위치합니다.

섹션은 선택적으로 표시 여부를 선택할 수 있습니다.

패널 및 터미널 창

콘솔 창은 간편하게 "Ctrl + J" 단축키를 눌러서 열 수 있습니다.

"Ctrl + J" 키는 하단에 패널(Panel) 창을 여는 단축키로, 커맨드 콘솔 창(터미널)은 기본으로 표시되는 4개의 패널 중 1개입니다.

비주얼 스튜디오 코드는 커맨드 콘솔 창을 터미널(TERMINAL) 이라는 이름으로 사용합니다.

윈도우용 비주얼 스튜디오 코드는 기본 터미널 쉘(커맨드 라인 인터페이스)로 위도우 파워쉘을 사용합니다.

WSL(Windows Subsystem for Linux)를 설치한 경우 BASH(배시쉘)를 쉘로 사용할 수 있습니다.

또는, 깃을 설치한 경우 깃에 BASH 쉘이 기본 포함되어 있으므로 배시쉘을 선택해 리눅스처럼 터미널을 사용할 수도 있습니다.

리눅스는 BASH 쉘이 보통 기본으로 사용되며, 별도로 설치해 사용하는 쉘이 있을 경우 해당 쉘이 실행됩니다.

맥OS는 최근 업데이트 버전에서는 zsh(Z쉘)이 기본 쉘로 사용되며 터미널에서도 zsh가 기본 로딩됩니다.