Visual Studio Code(VS Code) 작업 공간은 하나의 창에서 열리는 파일들의 묶음입니다. 때로는 단일 폴더로 구성되기도 하지만, 다중 루트 작업 공간이라는 개발 환경에서는 여러 파일들을 포함할 수 있습니다. 만약 프로젝트 진행 중 다양한 파일을 열어야 한다면, 새 작업 공간 기능이 매우 유용할 것입니다. 동일한 창에서 여러 파일을 관리하여 필요한 모든 문서에 쉽게 접근할 수 있게 해줍니다. `.code-workspace` 파일은 프로젝트의 폴더 구조를 저장하는 데 사용되며, 설정이 완료되면 여러 파일들이 한 창에서 자동으로 열립니다. 쉘 스크립트를 작성하는 것보다 훨씬 빠르고 쉽게 설정할 수 있다는 장점도 있습니다. VS Code 작업 공간을 생성하는 방법에 대해 자세히 알아보겠습니다.
VS Code에서 새로운 작업 공간 생성하기
작업 공간은 일반적으로 코드를 테스트하고 개발하는 데 사용되는 팀 코드베이스의 로컬 사본입니다. 대부분의 경우 VS Code에서 폴더를 열면 자동으로 생성되지만, 프로젝트의 여러 브랜치에서 변경된 사항들을 추적하기 위해 여러 파일을 생성할 수 있습니다. 이러한 파일들을 VS Code 작업 공간으로 통합하는 방법은 다음과 같습니다.
- 작업 공간에 포함할 폴더들을 선택합니다.
- “파일” 메뉴로 이동한 다음, “작업 공간에 폴더 추가”를 선택하여 선택한 폴더들을 작업 공간에 추가합니다.
- 작업 공간 설정이 완료되면 “파일” 메뉴로 이동하여 “작업 공간을 다른 이름으로 저장”을 선택하여 새로운 작업 공간을 저장합니다.
이제 VS Code에서 새로운 작업 공간이 생성되었으며, 파일 이름은 `(Name).code-workspace` 형태로 저장됩니다.
작업 공간 설정 구성
작업 공간 설정은 기본 설정보다 우선 적용되며, 이를 통해 작업 공간을 원하는 대로 사용자 정의할 수 있습니다. 설정은 JSON 파일에 저장되며, 폴더를 여는 방식에 따라 저장 위치가 결정됩니다.
단일 폴더 작업 공간 설정
폴더를 작업 공간으로 열 경우, 설정은 `.vscode/settings.json` 파일에 저장됩니다.
다중 루트 작업 공간 설정
만약 여는 폴더가 `.code-workspace` 파일이라면, 모든 작업 공간 설정은 `.code-workspace` 파일에 추가됩니다.
루트 폴더별로 설정을 개별적으로 지정할 수도 있지만, `.code-workspace` 파일에 정의된 설정이 우선적으로 적용됩니다.
작업 공간 시작 구성 및 작업
작업 공간에 대한 설정 구성 방식과 마찬가지로, 작업 및 실행 구성 또한 작업 공간에 맞춰 개인화할 수 있습니다. 폴더를 작업 공간으로 열거나 `.code-workspace` 파일을 열 경우, 작업 및 시작 구성의 위치는 `.vsh` 파일 또는 `.workspace` 파일에 있습니다. 이러한 설정들은 폴더에서도 조정할 수 있습니다.
새로운 VS Code 작업 공간 최적화
TypeScript, Javascript, Node.js 등 다양한 프로그래밍 언어를 기본적으로 지원하는 작업 공간은 개발자에게 매우 유용한 도구입니다. 다음 팁들을 통해 플랫폼을 보다 효율적으로 사용하고 탐색할 수 있습니다.
터미널
운영체제에서 제공하는 기본 터미널을 사용할 수도 있지만, VS Code에서는 자체 내장된 터미널을 제공하여 OS 기능에 의존할 필요가 없도록 만들었습니다. VS Code 내장 터미널은 개발 프로젝트를 추적하고 원활하게 실행되도록 도와주는 좋은 방법입니다. 아이콘 색상을 변경하거나 이름을 바꿀 수 있는 기능을 통해 프로젝트의 다양한 터미널을 쉽게 구별할 수 있습니다.
랩 탭
이 기능은 여러 구성 요소가 사용되는 대규모 프로젝트에서 작업하는 개발자에게 매우 유용합니다. 여러 구성 요소를 오갈 때 모든 파일을 추적하기 어려울 수 있습니다. VS Code에서 탭은 브라우저처럼 나타나며, 탭 안에 있는 내용을 확인하려면 탭 간에 스크롤해야 합니다.
더욱 효율적인 방법은 `Cmd +` 키를 누르고 “탭 줄 바꿈”을 검색하여 이러한 탭들을 줄 바꿈하는 것입니다. 이 기능을 사용하면 여러 탭에 있는 내용들을 더 쉽게 확인할 수 있습니다.
핀 탭
개발자들은 작업 공간을 최대한 정리하는 것을 선호합니다. 자주 사용하는 탭을 화면 맨 앞에 고정하여 이를 달성할 수 있습니다. `Cmd +` 또는 `Ctrl +` 버튼을 누르고 “핀 탭”을 검색하여 탭의 모양과 느낌을 사용자 정의할 수도 있습니다.
사용자 인터페이스
터미널 인터페이스는 탐색기, 검색, 프로젝트 관리자, 출력 등 다양한 옵션을 제공하도록 구성되어 있습니다. 또한 여러 세부 정보를 쉽게 찾고 수정할 수 있는 바닥글과 같은 섹션도 있습니다. VS Code에서는 이러한 탭들을 원하는 대로 끌어서 재정렬할 수 있습니다. 자주 사용하는 옵션들을 상단으로 이동시켜 접근성을 높일 수도 있습니다. 사용자 인터페이스를 개인화하면 작업 공간을 더욱 쉽게 탐색할 수 있습니다.
언어
Visual Studio Code에서 새로운 페이지를 만들 때, 파일에는 기본적으로 제목이 없으며 사용자가 직접 세부 정보를 입력해야 합니다. 그 다음, 파일 이름으로 이동하여 확장자를 입력해야 하는 번거로움이 있습니다. 특히 많은 파일을 처리할 때 이 과정은 매우 지루할 수 있습니다.
IDE가 파일을 자동으로 인식하도록 설정하여 프로세스를 최적화할 수 있습니다. 이렇게 하면 이전 명명 시스템을 사용하여 새로 생성된 파일에 이름을 자동으로 할당할 수 있습니다.
미리보기
VS Code에는 몇 가지 아쉬운 부분이 있습니다. 예를 들어, 미리보기에서 파일을 열고 나서 첫 번째 파일을 변경하지 않은 채 바로 다른 파일을 열면, 프로그램이 첫 번째 파일을 닫아버립니다. 이 문제를 해결하고 두 파일을 모두 미리보기에서 열어두려면 설정으로 이동하여 “미리보기 사용”을 검색한 다음, 필요한 부분을 변경하기 위해 확인란을 선택해야 합니다.
새 PC 설정
새 PC를 구매하면 VS Code 작업 공간을 원하는 대로 사용자 정의하고 개인화해야 합니다. 새 시스템이 편리하긴 하지만, 작업 공간을 다시 설정해야 하는 번거로움이 있습니다.
동기화를 설정하면 모든 설정을 한곳에 저장할 수 있습니다. 다른 장치를 가져올 때 자동으로 이전 장치의 설정을 새로운 VS Code 작업 공간에 적용할 수 있습니다. 이렇게 하면 새 PC에서 작업 공간을 다시 설정해야 하는 번거로움을 줄일 수 있습니다.
OpenReplay
프로덕션 환경에서 웹 앱 디버깅을 시작하는 것은 어렵고 시간이 많이 소요될 수 있습니다. OpenReplay를 사용하면 사용자들이 수행하는 모든 작업을 모니터링하고 재생할 수 있어 앱이 어떻게 작동하는지 확인하고 발생할 수 있는 문제를 감지할 수 있습니다. OpenReplay는 LogRocket이나 FullStory와 같은 다른 디버깅 애플리케이션에 대한 무료 오픈 소스 대안이므로 훌륭한 옵션입니다. 디버깅 프로그램을 사용하면 작업 공간을 사용할 때 시간을 많이 절약할 수 있습니다.
GitHub
VS Code에는 GitHub 통합 기능이 내장되어 있습니다. 이를 통해 파일을 GitHub에 빠르게 푸시할 수 있습니다. VS Code에서 GitHub에 연결하면 git 명령어를 직접 작성하는 데 시간을 할애할 필요가 없습니다. VS Code 통합으로 파일 관리가 훨씬 간편해집니다.
모든 폴더를 한 곳에
작업 공간을 사용하면 팀원들과 협업을 더욱 원활하게 진행할 수 있습니다. 파일과 폴더를 한 곳에 저장할 수 있으므로 버튼 클릭으로 파일을 열고 볼 수 있습니다. 또한 작업 공간을 최적화하여 효율성을 높이고 진행 중인 프로젝트를 효과적으로 관리할 수 있습니다. 이 가이드를 통해 VS Code에서 작업 공간을 만들고 필요에 맞게 사용자 지정하는 방법을 배우셨을 겁니다.
VS Code에서 새로운 작업 공간을 설정해 보셨나요? 아래 댓글 섹션에서 작업 공간을 만들고 최적화한 방법을 공유해 주세요.