Vue 3로 개발을 진행하기 위해서는 효율적인 개발 환경을 구축하는 것은 매우 중요합니다.
이 글에서는 Vue 3 개발을 이제 막 시작하려거나, 혹은 기존의 환경을 조금 더 프로페셔널하게 업그레이드하고 싶은 분들을 위해 필수적인 도구들을 상세하게 소개해 드리겠습니다.
[목차여기]
1. 코드 작성 에디터: VS Code (Visual Studio Code)
마이크로소프트(Microsoft)에서 개발한 VS Code는 전 세계적으로 가장 많은 개발자가 사용하는 무료 소스 코드 편집기입니다. Vue 3 개발에 있어 VS Code가 강력 추천되는 이유는 압도적인 가벼움과 확장성 때문입니다. 기본 구동 속도가 매우 빠르며, 방대한 확장 프로그램(Extension) 생태계를 통해 단순한 텍스트 에디터를 넘어선 강력한 IDE 기능을 수행할 수 있습니다. 특히 Vue.js 공식 팀에서도 VS Code를 기반으로 한 개발 환경을 표준처럼 권장하고 있으므로, 호환성 문제없이 가장 쾌적하게 개발할 수 있는 도구입니다.
＊ 설치 방법
- 공식 웹사이트(https://code.visualstudio.com/)에 접속합니다.
- 사용 중인 운영체제(Windows, macOS, Linux)에 맞는 'Download' 버튼을 클릭하여 설치 파일을 다운로드합니다.
- 다운로드된 설치 파일을 실행하고, 설치 마법사의 안내에 따라 설치를 진행합니다. 설치 옵션 중 'PATH에 추가' 옵션을 체크할 경우 터미널에서 "code ." 명령어로 바로 실행할 수 있게 해주므로 체크하는 것을 권장합니다.
2. 자바스크립트 실행 환경: Node.js
Node.js는 현대 프론트엔드 개발의 필수 요소입니다.
Vue 3 프로젝트를 생성하고 관리하기 위해서는 Node.js와 함께 설치되는 패키지 매니저인 npm(Node Package Manager)이 반드시 필요합니다. 이를 통해 프로젝트에 필요한 다양한 라이브러리(의존성)를 손쉽게 설치하고 버전을 관리할 수 있습니다. 또한, 최신 Vue 3 개발 툴인 Vite를 구동하기 위해서도 Node.js 환경은 필수적입니다. 즉, 서버 개발을 하지 않더라도 프론트엔드 빌드 및 개발 서버 구동을 위한 기반 시설 역할을 합니다.
＊ 설치 방법
- Node.js 공식 홈페이지 다운로드 페이지(https://nodejs.org/ko/download)에 접속합니다.
- LTS(Long Term Support) 버전을 선택하는 것이 좋습니다. 최신 기능보다는 에러 없는 안정적인 개발 환경이 중요하기 때문입니다.
- 설치 파일을 실행하여 기본 설정대로 설치를 완료합니다.
- 설치가 잘 되었는지 확인하려면 터미널(CMD)을 열고 node -v와 npm -v를 입력하여 버전 정보가 출력되는지 확인합니다.
3. 터미널 환경: Git Bash(혹은 Cmder)
Windows 운영체제를 사용하는 경우, 기본 제공되는 CMD나 PowerShell은 리눅스 기반의 서버 명령어와 달라 불편함을 겪을 때가 많습니다.
Git Bash나 Cmder를 사용하면 Windows 환경에서도 리눅스와 유사한 명령어(ls, rm, touch 등)를 사용할 수 있어 학습 곡선을 낮추고 개발 편의성을 높일 수 있습니다. 또한 Git 버전 관리 시스템을 터미널에서 직관적으로 다루기 위해서도 필수적입니다.
＊ 설치 방법
- Git Bash: Git 공식 사이트(https://git-scm.com/downloads)에서 Windows용 버전을 다운로드하여 설치합니다. 설치 시 Git Bash가 포함되어 설치됩니다.
- Cmder: 공식 사이트(https://cmder.app/)에서 다운로드합니다. 설치형 파일이 아닌 압축 파일 형태이므로, 적절한 폴더에 압축을 풀고 실행 파일을 사용하면 됩니다. 'Full' 버전을 다운로드하면 Git 기능이 포함되어 있어 편리합니다.
4. 생산성을 높이는 VS Code 확장 프로그램 (Extensions)
VS Code의 진정한 힘은 확장 프로그램에서 나옵니다. 좌측 사이드바의 블록 모양 아이콘(Extensions)을 클릭하여 아래 도구들을 검색 후 설치할 수 있습니다.
① Vue (Official) (구 Volar)
과거에는 Vetur라는 확장을 많이 썼지만, Vue 3로 넘어오면서 Vue (Official)이 공식 표준이 되었습니다. .vue 파일의 코드 하이라이팅, 문법 검사, 자동 완성을 완벽하게 지원합니다. 특히 Vue 3의 핵심인 TypeScript 지원이 매우 강력하여, 타입 추론을 통해 버그를 사전에 방지하는 데 큰 도움을 줍니다.
설치: VS Code 마켓플레이스(Ctrl + Shift + X) 에서 'Vue (Official)' 검색 후 설치.
② Vue VSCode Snippets
반복되는 코드를 일일이 타이핑하는 것은 시간 낭비입니다. 이 확장은 Vue 개발 시 자주 사용되는 코드 템플릿을 단축키로 제공합니다. 예를 들어, vbase-css라고만 입력하고 탭을 누르면 Vue 컴포넌트의 기본 골격(Template, Script, Style)이 순식간에 자동 완성됩니다. 개발 속도를 비약적으로 높여주는 도구입니다.
설치: VS Code 마켓플레이스(Ctrl + Shift + X) 에서 'Vue VSCode Snippets' 검색 후 Sarah Drasner가 제작한 확장 설치.
③ Live Server
HTML이나 정적 파일을 수정했을 때, 브라우저에서 새로고침 버튼을 누르지 않아도 저장하는 순간 자동으로 변경 사항을 반영해 주는 로컬 개발 서버입니다. Vue 프로젝트를 Vite나 CLI로 생성하면 자체적인 핫 리로딩(Hot Module Replacement) 기능을 제공하지만, 간단한 HTML 프로토타이핑을 하거나 빌드된 결과물을 확인할 때 매우 유용하게 쓰입니다.
설치: VS Code 마켓플레이스(Ctrl + Shift + X) 에서 'Live Server' 검색 후 Ritwick Dey가 제작한 확장 설치.
④ Material Icon Theme
VS Code의 탐색기(Explorer)에 보이는 파일 및 폴더 아이콘을 직관적이고 예쁘게 변경해 줍니다. 단순히 보기 좋은 것을 넘어, .vue, .js, .ts, components 폴더 등을 시각적으로 명확히 구분해주어 원하는 파일을 빠르게 찾는 데 큰 도움을 줍니다. 인지 속도를 높여주는 가성비 좋은 투자입니다.
설치: VS Code 마켓플레이스(Ctrl + Shift + X) 에서 'Material Icon Theme' 검색 후 설치. 설치 후 상단 팔레트에서 아이콘 테마로 선택.
대체제: vscode-icons. 조금 더 고전적인 느낌의 아이콘 팩입니다. 취향에 따라 선택하면 됩니다.
⑤ Night Owl
개발자는 모니터를 장시간 응시해야 하므로 눈의 피로를 줄이는 것이 무엇보다 중요합니다. Night Owl은 저녁 늦게까지 코딩하는 부엉이(개발자)들을 위해 고안된 다크 테마입니다. 가독성을 해치지 않으면서도 눈에 편안한 색상 대비를 제공하며, 특히 Vue의 문법 하이라이팅 컬러가 매우 조화롭게 어우러집니다.
설치: VS Code 마켓플레이스(Ctrl + Shift + X) 에서 'Night Owl' 검색 후 설치.
대체제: Dracula Official (가장 유명한 다크 테마 중 하나), One Dark Pro (Atom 에디터 스타일의 깔끔한 테마). 테마는 전적으로 개인의 취향 영역이므로 여러 가지를 적용해 보고 눈이 가장 편한 것을 고르면 됩니다.
5. 브라우저 디버깅의 핵심: Vue.js devtools
코드를 작성하고 브라우저에서 화면을 볼 때, 겉모습만 봐서는 내부 데이터가 어떻게 흐르고 있는지 알기 어렵습니다. 크롬(Chrome) 브라우저의 확장 프로그램인 Vue.js devtools를 사용하면 현재 렌더링 된 Vue 컴포넌트의 구조, 각 컴포넌트가 가지고 있는 데이터(Props, Data), 그리고 이벤트 발생 내역을 실시간으로 들여다볼 수 있습니다. 특히 Pinia나 Vuex 같은 상태 관리 라이브러리를 사용할 때 데이터의 변경 흐름을 추적하는 데 없어서는 안 될 필수 디버깅 도구입니다.
＊ 설치 방법
- 구글 크롬 브라우저를 실행합니다.
- 크롬 웹 스토어(https://chrome.google.com/webstore)에 접속합니다.
- 검색창에 'Vue.js devtools'를 입력합니다.
- 'Vue.js devtools' (베타 버전이나 레거시가 아닌 일반 버전을 권장하며, Vue 3 전용 버전이 별도로 있는 경우 확인 필요)를 선택하여 'Chrome에 추가' 버튼을 클릭합니다.
- 도메인 입력 창 우측에 확장 프로그램 선택 > Vue.js devtools 고정 해제하면 Vue.js 아이콘이 노출되는걸 확인할 수 있습니다.
- 설치 완료 후 Vue 프로젝트를 실행시킨 후 브라우저 개발자 도구(F12)를 열면 'Vue' 탭이 새로 생성된 것을 확인할 수 있습니다.
6. 마치며: 도구는 거들 뿐, 핵심은 꾸준함
지금까지 Vue 3 개발을 위한 최적의 환경 설정 방법과 도구들을 살펴보았습니다.
이제 여러분은 어떠한 복잡한 웹 애플리케이션도 만들어낼 수 있는 튼튼한 기반을 다진 것입니다.
하지만 기억해야 할 점은, 아무리 좋은 도구도 개발자의 꾸준한 학습과 열정 없이는 무용지물이라는 사실입니다. 이 완벽한 환경 위에서 직접 코드를 작성하고, 에러와 부딪히고, 해결해 나가는 과정을 통해 진정한 실력이 쌓일 것입니다. 오늘 구축한 이 환경이 여러분의 아이디어를 현실로 구현하는 데 가장 든든한 지원군이 되어주기를 바랍니다.
댓글