Study/Vue.js

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

geehyun 2025. 2. 24. 23:14
반응형

 

[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? » NoAdd 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

 

IntelliJ에서 Vue.js 플러그인 설치

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/

vue 기본 메인페이지

마치며

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

728x90