VSCode 멀티루트 워크스페이스 - 백엔드/프론트 한번에 보기

VSCode 멀티루트 워크스페이스 (Multi-root Workspace) 를 이용해 풀스택 프로젝트 동시에 작업해보자

VSCode의 '멀티루트 워크스페이스' 기능을 사용하면, Spring Boot 백엔드와 Flutter 프론트엔드와 같이 물리적으로 분리된 두 개 이상의 프로젝트를 한꺼번에 작업할 수 있다.

---

단계1. 워크스페이스 생성 및 경로 설정

① 상단 메뉴 파일(File) > 작업 영역에 폴더 추가...(Add Folder to Workspace...) 항목을 선택.

Add Folder to Workspace 버튼을 눌러 프로젝트를 추가할 수 있다.

우선 java springboot로 만든서버 프로젝트를 추가했다.

---

② 두 번째 프로젝트 폴더(예: markit_place_front)를 선택하여 작업 영역에 추가함.

다음은 dart flutter로 만든 클라이언트 프로젝트를 추가했다.

한 한 워크스페이스에 두 프로젝트가 공존하고 있다. 양측을 참조하면서 작업할 수 있다.

---

③ 파일(File) > 작업 영역을 다른 이름으로 저장...(Save Workspace As...)을 선택하여, 현재 구성된 작업 영역을 .code-workspace 확장자 파일로 저장. 이후 .code-workspace 파일을 통해 작업 영역을 열면 저장된 폴더 구조가 로드됨.

이 조합을 새 워크스페이스로 저장해봤다.

이름은 markit_place_one.code_workspace로 정했다. 파일이 복사되는 것은 아니고 정보만 저장된다.

이제 이 파일을 통해 매번 두 프로젝트를 동시작업할 수 있게 됐다.

---

단계2. 기능별 활용법

① 독립적인 Git 리포지토리 관리

 

워크스페이스에 포함된 각 폴더가 독립적인 Git 리포지토리일 경우, 소스 제어(Source Control) 탭은 각 리포지토리를 별도로 인식하여 목록으로 표시함.

 

사용자는 UI를 통해 특정 리포지토리를 선택하고, 해당 리포지토리에 한정된 스테이징, 커밋, 푸시, 풀 등의 Git 작업을 독립적으로 수행 가능.

Ctrl Shift G 를 눌러 '소스컨트롤' 탭에 들어가면, 분리된 깃 구조를 확인할 수 있다.

Ctrl J를 누르면 터미널이 나온다/ 터미널 우상단의 + 버튼을 눌러 새 터미널을 열어 깃 터미널로 진입한다.

상단 명령어 창에 어느 프로젝트의 깃을 선택하겠느냐는 선택지가 뜬다 / 원하는 깃 경로를 선택하면 된다.

서버 경로의 깃 터미널이 활성화된 모습

 

② 복수 프로젝트 동시 실행 및 테스트

 

절차 1: 통합 터미널 분할 활용

 

VS Code 터미널 패널의 + 아이콘 옆 드롭다운 메뉴를 통해 각 프로젝트 폴더를 루트로 하는 터미널을 개별적으로 생성. 터미널 분할 기능을 이용해 두 터미널을 동시에 표시.

 

각 터미널에서 해당 프로젝트를 실행할 수 있다.

서버 터미널: gradlew.bat bootRun

프론트엔드 터미널: flutter run

 

두 프로세스는 VS Code 내에서 독립적으로 관리되며, 디버깅 및 핫 리로드와 같은 각 언어/프레임워크의 고유 기능을 모두 활용 가능.

 

https://notion6780.tistory.com/152

VScode로 플러터를 개발하는데 필요한 익스텐션