[Vue3] Vue.js 소개 및 개발환경 셋팅

Vue.js란
개념
Vue.js란 Javascript 기반의 Frontend 프레임워크로, Progressive Framework
즉, 필요한 기능만 사용하면서 점진적으로 확장할 수 있는 유연한 프레임워크 이다.
특징
- 컴포넌트 기반 개발 : 컴포넌트 기반으로 재사용성이 뛰어나고 유지보수가 쉽다.
- 반응형 시스템 : 데이터가 변경되면 UI가 자동으로 업데이트 된다.
- 가볍고 빠름 : 경량화된 프레임워크로 가볍고 속도가 빠르다.
- 쉬운 학습곡선 : 다른 프론트앤드 프레임워크에 비해 초기 학습곡선이 완만하다 (HTML, CSS, JavaScript 기반)
- Vue3에서 Composition API 추가 : 코드 구조를 더욱 모듈화하고 유지보수성을 높일 수 있다.
- SPA(Single Page Application) : Vue Router와 함께 사용하면 단일 페이지 애플리케이션을 만들 수 있다.
Coposition API
- Options API
- 기존 Vue2까지 사용하던 방식
data
,methode
,mounted
등으로 로직이 분리가 되고, 코드가 길어질 수록 유지보수가 어려워진다는 단점이 있었다.// Options API 방식 <script> export default { data() { return { count: 0 }; }, methods: { increment() { this.count++; } }, mounted() { console.log("컴포넌트가 마운트됨"); } }; </script> <template> <button @click="increment">Count: {{ count }}</button> </template>
- Composition API
- Vue3에서 추가된 방식으로 현재 공식적으로 권장하는 방식
setup()
내에서 모든 로직 작성 가능하여 코드가 더 직관적이고, 재사용성이 높아졌다.
// Composition API 방식 <script setup> import { ref, onMounted } from "vue"; const count = ref(0); const increment = () => { count.value++; }; onMounted(() => { console.log("컴포넌트가 마운트됨"); }); </script> <template> <button @click="increment">Count: {{ count }}</button> </template>
SPA / MPA
SPA
Single Page Application
으로 단일 페이지(주로, index.html 하나)만 두고 모든 화면을 동적으로 변경하여 관리하는 기법
- 서버에서 전체 페이지를 새로 로드하지 않고 필요한 부분만 JavaScript로 업데이트
- 비동기 데이터 로드 방식 사용
- 앱처럼 부드럽고 빠른 사용자 경험 제공 가능
- 프론트앤드 라우팅 (Vue Router, React Router 등)
MPA
Multi Page Application
으로 요청할 때마다 새로운 HTML 페이지를 서버에서 받아오는 전통적인 웹 방식
항목 | SPA | MPA |
페이지 로드 |
한 번 로딩 후, 동적변경 | 페이지 이동마다 새로 로딩 |
속도 | 초기로딩 속도는 다소 느리나, 이후 페이지 전환은 빠름(JS 실행 후 캐싱 이용) | 페이지 이동마다 전체 HTML 을 새로 받아와야해서 다소 느릴 수 있음 |
SEO | 어려운편 | SEO 친화적 |
SSR / CSR
SSR
Server Side Rendering
으로 서버에서 페이지를 모두 랜더링하여 완성된 페이지를 클라이언트에 제공해주는 방식
CSR
Client Side Rendering
으로 클라이언트에서 페이지를 동적으로 그리는 방식
항목 | CSR | SSR |
랜더링 위치 |
클라이언트(브라우저) | 서버 |
로딩 속도 | 초기 로딩속도는 느리나 이후 전환 빠름 | 초기 로딩속도는 빠르나, 페이지 이동 시마다 랜더링 할 경우 비교적 느릴 수 있음 |
SEO 친화성 |
낮음 | 높음 |
서버부하 | 부하 낮음 | 부하 증가 가능 |
네트워크의 영향 |
네트워크 속도 빠른환경에서 유리 | 영향적음 |
비고 | - | SSR에서 첫 페이지 로딩 이후 CSR 방식으로 사용하는 Hydration 방식 이용가능) |
📌 왜 CSR 방식은 SEO 친화성이 느릴까?
CSR 방식은 HTML 내 태그를 비워두고 추후 해당페이지 랜더링 시 JavaScript를 통해 페이지를 랜더링 하는데, 구글 등 검색엔진이 사이트를 크롤링할 때는 JavaScript를 기본적으로 실행시키지 않기 때문에 검색엔진 최적화에 다소 어려움이 있다.
Vue.js 🆚 React 🆚 Angular
항목 | Vue.js | React | Angular |
언어 | JavaScript(TypeScript지원) | JavaScript(JSX 사용) | TypeScript |
컴포넌트 구조 |
SFC(Single File Component) | JSX 기반 컴포넌트 | 모듈 기반 컴포넌트 |
상태관리 | ref() , reactive() , Pinia, Vuex |
useState, useReducer, Redux | RxJs,NgRx |
라우터 | Vue Router | React Router | Angular Router |
데이터 바인딩 |
양방향(v-model)지원 | 단방향 | 양방향(ngModel)지원 |
학습 난이도 |
쉬움 | 중간 | 어려움 |
적용 범위 |
소규모~대규모 | 대규모 | 대규모 엔터프라이즈급 |
개발환경 셋팅
1. Vite로 Vue3 설치 및 프로젝트 생성
Vue 프로젝트 빌드 도구에는 Vite
방식과 Vue CLI
방식이 있는데, 더 최신 방식이고 Vue3 공식 권장도구인 Vite
방식을 사용하겠다.
# 사용법
# 아래 명령어를 vue 프로젝트를 만들 디렉토리로 이동하여 입력한다.
cd 프로젝트 만들 디렉토리
npm create vite@latest 프로젝트이름 --template vue
# 사용예시
cd D:/Study/vue
npm create vite@latest vue3-study --template vue
# 실제 사용 시 출력내용
PS C:\Use\wkdwlr> cd d:/Study/vue
PS D:\Study\vue> npm create vite@latest vue3-study --template vue
Need to install the following packages:
create-vite@6.2.0
Ok to proceed? (y) y
> npx
> create-vite vue3-study vue
√ Select a framework: » Vue
√ Select a variant: » Official Vue Starter ↗
Need to install the following packages:
create-vue@3.14.2
Ok to proceed? (y) y
> npx
> create-vue vue3-study
Vue.js - The Progressive JavaScript Framework
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? » No
Scaffolding project in D:\Study\vue\vue3-study...
Done. Now run:
cd vue3-study
npm install
npm run dev
2. IntelliJ 플러그인 설치
vue.js의 경우 간단하게 vsCode로 주로 사용하는 것 같지만, 저는 익숙한 IntelliJ로 작업할 예정이라 IntellJ를 사용한 방식으로 설명하겠습니다.
File
- Settings...
- Plugins
- Marketplace
- Vue.Js
검색 후 Install

3. IntelliJ 에서 프로젝트 열기
File
- Open
- 방금 생성한 vue 프로젝트 디렉토리 열기
📌 열었을 때 src 디렉토리 하위 .vue 파일이 vue파일이 아니라 일반파일로 보인다면?
위 3번에서 설치한 플러그인이 반영이 안된걸 수 있어서 IntelliJ 재기동 또는 해당 플러그인 삭제 후 재설치 필요
4. IntelliJ 에서 라이브러리 의존성 설치 및 개발서버 실행
intelliJ 에서 하단 터미널을 열어서 의존성 설치 및 개발서버 실행 (git bash 또는 shell script 여도 상관없음)
############ 의존성 설치
# 사용법
# 아래의 명령어를 방금 생성한 프로젝트 디렉토리로 이동 후 입력
cd 방금 만든 프로젝트 디렉토리
npm install
# 사용예시
cd ./vue3-study
npm install
# 실제 사용 시 출력내용
PS D:\Study\vue> cd .\vue3-study\
PS D:\Study\vue\vue3-study> npm install
added 311 packages, and audited 312 packages in 35s
78 packages are looking for funding
run `npm fund` for details
11 moderate severity vulnerabilities
To address issues that do not require attention, run:
npm audit fix
To address all issues possible (including breaking changes), run:
npm audit fix --force
Some issues need review, and may require choosing
a different dependency.
Run `npm audit` for details.
############ 개발서버 실행
# 사용법
npm run dev
#사용예시
npm run dev
# 실제 사용 시 출력내용
PS D:\Study\vue\vue3-study> npm run dev
> vue3-study@0.0.0 dev
> vite
VITE v6.1.1 ready in 1359 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
➜ Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
➜ press h + enter to show help
5. Vue 프로젝트 기본 메인 화면 보기
브라우저를 열고 아래 주소를 입력하여 Vue 기본 메인 페이지가 잘 열리는지 확인한다.
http://localhost:5173/

마치며
자바 개발자로서 기본적으로 HTML, CSS, JavaScript, Jquery 와 JSP, Thymeleaf 정도만 사용하여 개발을 하면서 프론트앤드의 기술을 알아두고 싶어서 공부하기 시작하였다.
React와 Vue.js 중에 뭘 시작할지 고민을 많이 하였지만, 학습곡선이 비교적 완만하고 완전히 프론트앤드 개발자 보다는 풀스택 개발자들이 주로 쓴다고 여겨지는 Vue.js를 공부하기로 했다.