Skip to main content

What is Vue

작성일 : 2024.11.13

목차​

  1. Vue.js 소개
  2. Vue.js vs React: 프레임워크 비교 분석
  3. Vue.js의 핵심 개념
  4. Vue.js 컴포넌트 생명주기
  5. Options API vs Composition API
  6. Vue.js 상태 관리
  7. 성능 최적화 전략
  8. 보안 고려사항
  9. 실전 활용 시나리오

1. Vue.js 소개​

Vue.js는 사용자 인터페이스를 구축하기 위한 프로그레시브 JavaScript 프레임워크입니다. '프로그레시브'라는 단어는 Vue.js의 핵심 철학을 잘 나타내는데, 이는 필요에 따라 점진적으로 적용할 수 있다는 의미입니다.

1.1 주요 특징​

  • 점진적 프레임워크: 기존 프로젝트에 부분적으로 적용 가능
  • 반응형 데이터 바인딩: 데이터 변경 시 자동 UI 업데이트
  • 컴포넌트 기반 아키텍처: 재사용 가능한 UI 컴포넌트
  • Virtual DOM: 효율적인 렌더링 성능
  • 유연한 생태계: 코어 라이브러리와 지원 라이브러리로 구성

1.2 기술 스택 구성​

Vue.js 코어
├── Vue Router (라우팅)
├── Vuex/Pinia (상태 관리)
├── Vue CLI (개발 도구)
└── Vue DevTools (디버깅 도구)

2. Vue.js vs React: 프레임워크 비교 분석​

2.1 Vue.js의 강점​

  1. 낮은 진입 장벽

    • HTML, CSS, JavaScript 기본 지식만으로 시작 가능
    • 직관적인 템플릿 문법
    • 상세한 공식 문서

  2. 유연한 통합

    • 기존 프로젝트에 점진적 적용 가능
    • CDN 방식부터 SPA까지 다양한 적용 방식
    • 서드파티 라이브러리와의 호환성

  3. 성능

    • 작은 번들 사이즈 (약 20KB gzipped)
    • 효율적인 메모리 사용
    • 빠른 초기 렌더링

2.2 React 대비 한계점​

  1. 생태계 규모

    • 더 작은 커뮤니티 크기
    • 써드파티 라이브러리 선택의 제한
    • 기업용 솔루션 부족

  2. 타입스크립트 지원

    • React보다 덜 성숙한 타입스크립트 통합
    • 타입 추론의 제한사항

3. Vue.js의 핵심 개념​

3.1 기본 문법​

// 컴포넌트 정의
export default {
  name: "MyComponent",

  // 데이터 속성
  data() {
    return {
      count: 0,
      message: "Hello Vue!",
    };
  },

  // 계산된 속성
  computed: {
    doubleCount() {
      return this.count * 2;
    },
  },

  // 감시자
  watch: {
    count(newVal, oldVal) {
      console.log(`Count changed from ${oldVal} to ${newVal}`);
    },
  },

  // 메서드
  methods: {
    increment() {
      this.count++;
    },
  },
};

3.2 주요 디렉티브​

<!-- 데이터 바인딩 -->
<div v-bind:id="dynamicId"></div>
<div :id="dynamicId"></div>
<!-- 축약형 -->

<!-- 이벤트 핸들링 -->
<button v-on:click="handleClick"></button>
<button @click="handleClick"></button>
<!-- 축약형 -->

<!-- 양방향 바인딩 -->
<input v-model="message" />

<!-- 조건부 렌더링 -->
<div v-if="isVisible">조건부 내용</div>
<div v-else>대체 내용</div>

<!-- 리스트 렌더링 -->
<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

4. Vue.js 컴포넌트 생명주기​

Vue lifecycle

4.1 생명주기 훅 상세 설명​

  1. 생성 단계

    • beforeCreate: 컴포넌트 초기화 시작
    • created: 반응형 데이터 설정 완료

  2. 마운트 단계

    • beforeMount: DOM 삽입 직전
    • mounted: DOM 삽입 완료

  3. 업데이트 단계

    • beforeUpdate: 데이터 변경, DOM 패치 전
    • updated: DOM 패치 완료

  4. 제거 단계

    • beforeUnmount: 컴포넌트 제거 직전
    • unmounted: 컴포넌트 제거 완료

4.2 생명주기 활용 예제​

export default {
  created() {
    // 데이터 초기화, API 호출
    this.fetchInitialData();
  },

  mounted() {
    // DOM 조작, 라이브러리 초기화
    this.initializeThirdPartyLib();
  },

  beforeUnmount() {
    // 리소스 정리
    this.cleanupResources();
  },
};

5. Options API vs Composition API​

5.1 Options API​

전통적인 Vue.js 컴포넌트 작성 방식:

export default {
  data() {
    return {
      userData: null,
    };
  },

  methods: {
    async fetchUser() {
      this.userData = await api.getUser();
    },
  },

  mounted() {
    this.fetchUser();
  },
};

5.2 Composition API​

Vue 3에서 도입된 새로운 방식:

import { ref, onMounted } from "vue";

export default {
  setup() {
    const userData = ref(null);

    const fetchUser = async () => {
      userData.value = await api.getUser();
    };

    onMounted(() => {
      fetchUser();
    });

    return {
      userData,
      fetchUser,
    };
  },
};

6. Vue.js 상태 관리​

6.1 Vuex 구조​

// store/index.js
import { createStore } from "vuex";

export default createStore({
  state: {
    count: 0,
  },

  mutations: {
    INCREMENT(state) {
      state.count++;
    },
  },

  actions: {
    increment({ commit }) {
      commit("INCREMENT");
    },
  },

  getters: {
    doubleCount: (state) => state.count * 2,
  },
});

6.2 Pinia (Vue 3 권장 상태 관리)​

import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", {
  state: () => ({
    count: 0,
  }),

  actions: {
    increment() {
      this.count++;
    },
  },

  getters: {
    doubleCount: (state) => state.count * 2,
  },
});

7. 성능 최적화 전략​

7.1 컴포넌트 최적화​

  1. keep-alive 사용
<keep-alive>
  <component :is="currentComponent" />
</keep-alive>
  1. 지연 로딩
const MyComponent = () => import("./MyComponent.vue");
  1. computed 속성 활용
computed: {
  expensiveOperation() {
    return this.items.filter(/* 복잡한 연산 */)
  }
}

7.2 렌더링 최적화​

  1. v-show vs v-if
<!-- 자주 토글되는 경우 -->
<div v-show="isVisible">자주 변경되는 내용</div>

<!-- 거의 변경되지 않는 경우 -->
<div v-if="isVisible">거의 변경되지 않는 내용</div>
  1. key 속성 최적화
<template v-for="item in items" :key="item.id">
  <MyComponent :data="item" />
</template>

8. 보안 고려사항​

8.1 XSS 방어​

  1. 템플릿 이스케이핑
<!-- 안전 -->
<div>{{ userInput }}</div>

<!-- 위험 -->
<div v-html="userInput"></div>
  1. CSP 설정
// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.plugin("html").tap((args) => {
      args[0].CSP = true;
      return args;
    });
  },
};

8.2 데이터 검증​

props: {
  userId: {
    type: Number,
    required: true,
    validator: function(value) {
      return value > 0
    }
  }
}

9. 실전 활용 시나리오​

9.1 적합한 사용 케이스​

  1. 중소규모 웹 애플리케이션

    • 관리자 대시보드
    • 이커머스 플랫폼
    • 소셜 미디어 애플리케이션

  2. 점진적 마이그레이션이 필요한 프로젝트

    • 레거시 jQuery 애플리케이션
    • 모놀리식 백엔드 템플릿

  3. 빠른 프로토타이핑

    • MVP 개발
    • 프루프 오브 컨셉

9.2 실제 구현 예시​

// 실용적인 컴포넌트 구조
├── components/
│   ├── common/
│   │   ├── BaseButton.vue
│   │   ├── BaseInput.vue
│   │   └── BaseModal.vue
│   └── features/
│       ├── UserProfile.vue
│       └── UserSettings.vue
├── views/
│   ├── Home.vue
│   └── Dashboard.vue
└── store/
    ├── modules/
    │   ├── user.js
    │   └── settings.js
    └── index.js

결론​

Vue.js는 현대 웹 개발에서 중요한 위치를 차지하고 있는 프레임워크입니다. 낮은 진입 장벽, 뛰어난 성능, 유연한 확장성을 제공하면서도 강력한 기능을 갖추고 있어 다양한 프로젝트에 적합합니다. 지속적인 발전과 커뮤니티의 성장으로 앞으로도 더욱 발전할 것으로 기대됩니다.