Vue.js 개발 핵심 팁과 모범 사례

목차

  1. Vue 2와 Vue 3의 주요 차이점 1.1 성능 향상 1.2 컴포지션 API 1.3 향상된 TypeScript 지원 1.4 새로운 생성 방식 1.5 Fragments, Teleport 및 Suspense

  2. Webpack 명령어 및 패키지 관리 2.1 cross-env 의존성 추가 2.2 스크립트에서 cross-env 지정 2.3 불필요한 코드 제거 2.4 DefinePlugin을 이용한 환경 변수 설정 2.5 환경 변수 판별 2.6 localStorage를 이용한 데이터 저장

  3. Vue 자식 컴포넌트 데이터 전달 방법 3.1 방법 1: props를 통한 데이터 전달 3.1.1 props 선언 3.1.2 템플릿에서 사용 3.1.3 자식 컴포넌트에서 props 수신 3.1.4 컴포넌트 선언 3.2 방법 2: 메서드를 통한 파라미터 전달 3.2.1 자식 컴포넌트 가져오기 3.2.2 메서드에서 자식 컴포넌트 메서드 호출 3.2.3 이벤트에서 메서드 호출

  4. Vue 3 로컬 개발과 프로덕션 환경 차이 문제 해결 4.1 문제 설명 4.2 발생 원인 4.3 해결 방안 4.3.1 의존성 버전 고정 4.3.2 대체 솔루션 사용

Vue.js 개발 과정에서 다양한 기술적 문제와 요구사항에 직면하게 됩니다. 본문에서는 Vue.js 사용 경험을 통해 얻은 지식을 공유하겠습니다. 이에는 Vue 2와 Vue 3의 주요 차이점, Webpack의 다양한 명령어 및 설정, Vue 자식 컴포넌트 데이터 전달 방법, 그리고 Vue 3 로컬 개발과 프로덕션 환경 간의 효과 차이 문제를 해결하는 방법이 포함됩니다.

1. Vue 2와 Vue 3의 주요 차이점

Vue.js는 사용자 인터페이스를 구축하기 위한 점진적 JavaScript 프레임워크입니다. Vue 3이 출시된 후 프레임워크에는 상당한 개선 사항이 도입되었습니다. Vue 2와 Vue 3의 주요 차이점은 다음과 같습니다:

1.1 성능 향상

Vue 3은 프레임워크 코어를 재작성하여 성능 면에서 상당한 향상을 이루었습니다. Vue 3은 Proxy 객체를 통해 반응형 시스템을 구현하며, Vue 2에서 사용된 Object.defineProperty에 비해 성능이 더 우수합니다.

1.2 컴포지션 API

Vue 3은 함수 형식으로 코드 로직을 구성하는 컴포지션 API(Composition API)를 도입했습니다. 이를 통해 Vue 2에서 발생했던 로직 중복 및 관리의 어려움 문제를 해결할 수 있습니다. 이를 통해 컴포넌트 로직을 더 잘 재사용하고 유지보수할 수 있습니다.

1.3 향상된 TypeScript 지원

Vue 3은 TypeScript를 네이티브로 지원하며, 개발자가 프로젝트에서 TypeScript를 더 쉽게 사용하고 더 나은 타입 검사 및 스마트 힌트를 얻을 수 있습니다.

1.4 새로운 생성 방식

Vue 3에서는 컴포넌트 생성 방식이 변경되었으며, Vue 2의 new Vue 인스턴스화 방식 대신 createApp 메서드를 사용합니다:

// Vue 2
new Vue({
  render: h => h(App)
}).$mount('#app')

// Vue 3
import { createApp } from 'vue'
createApp(App).mount('#app')

1.5 Fragments, Teleport 및 Suspense

Vue 3은 DOM 구조와 비동기 콘텐츠 렌더링을 더 유연하게 제어할 수 있도록 Fragments, Teleport 및 Suspense와 같은 새로운 기능을 도입했습니다.

2. Webpack 명령어 및 패키지 관리

Webpack은 현대 JavaScript 애플리케이션을 위한 정적 모듈 번들러입니다. 다양한 환경에서 빌드 및 구축을 위해 다양한 설정과 명령어를 통해 환경을 구분할 수 있습니다.

2.1 cross-env 의존성 추가

다양한 환경에서 NODE_ENV 변수를 설정하기 위해 먼저 cross-env 의존성을 추가해야 합니다:

"cross-env": "^7.0.3",

2.2 스크립트에서 cross-env 지정

package.json의 scripts 부분에서 cross-env를 사용하여 다양한 환경에 대한 NODE_ENV 변수를 지정할 수 있습니다:

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build:test": "cross-env NODE_ENV=test node build/build.js",
  "build:release": "cross-env NODE_ENV=release node build/build.js",
  "build:production": "cross-env NODE_ENV=production node build/build.js"
}

2.3 불필요한 코드 제거

일부 구성 파일에는 const env = require('../config/prod.env')와 유사한 코드가 있을 수 있습니다. 이러한 코드는 이제 cross-env와 DefinePlugin을 통해 더 유연한 환경 구성을 수행하므로 삭제할 수 있습니다.

2.4 DefinePlugin을 이용한 환경 변수 설정

webpack.DefinePlugin을 통해 빌드 시점에 결정된 환경 변수로 process.env.NODE_ENV를 대체할 수 있습니다:

new webpack.DefinePlugin({
  'process.env': { NODE_ENV: '"' + process.env.NODE_ENV + '"' }
})

2.5 환경 변수 판별

NODE_ENV 환경 변수에 따라 인터페이스 선언 부분을 다르게 처리합니다:

if (process.env.NODE_ENV === 'production') {
  return ''
} else if (process.env.NODE_ENV === 'release') {
  return '-pre'
} else {
  return '-dev'
}

2.6 localStorage를 이용한 데이터 저장

Vue.js를 사용할 때 일부 사용자 데이터를 localStorage에 저장해야 하는 경우가 많습니다. 다음은 사용자 이름을 저장하는 예제입니다:

localStorage.setItem('UserName', data.data.data.UserName)

3. Vue 자식 컴포넌트 데이터 전달 방법

Vue.js에서 부모 컴포넌트와 자식 컴포넌트 간의 통신은 매우 중요합니다. 여기서 두 가지 일반적인 데이터 전달 방법을 소개합니다.

3.1 방법 1: props를 통한 데이터 전달

부모 컴포넌트에서 props를 통해 자식 컴포넌트에 데이터를 전달합니다.

3.1.1 props 선언

먼저 부모 컴포넌트에서 자식 컴포넌트에 전달할 데이터를 정의합니다:

modalTitle: "팝업 자식 컴포넌트"
3.1.2 템플릿에서 사용

템플릿에서 props를 통해 데이터를 전달합니다:

<modal ref="my_modal1" :modalTitle="modalTitle"></modal>
3.1.3 자식 컴포넌트에서 props 수신

자식 컴포넌트에서 props를 통해 전달된 데이터를 수신합니다:

props: {
  modalTitle: {
    type: String,
    default: ''
  },
  isVisible: {
    type: Boolean,
    default: false
  }
}
3.1.4 컴포넌트 선언

부모 컴포넌트에서 사용할 자식 컴포넌트를 선언합니다:

components: {
  modal
}

3.2 방법 2: 메서드를 통한 파라미터 전달

부모 컴포넌트는 자식 컴포넌트의 메서드를 호출하여 파라미터를 전달할 수도 있습니다.

3.2.1 자식 컴포넌트 가져오기

먼저 부모 컴포넌트에서 자식 컴포넌트를 가져옵니다:

import modal from "../../../components/layout/components/Modal.vue";
3.2.2 메서드에서 자식 컴포넌트 메서드 호출

부모 컴포넌트의 메서드를 통해 자식 컴포넌트의 메서드를 호출하고 파라미터를 전달합니다:

methods: {
  /*데이터 로드*/
  loadData(tenantId) {
    console.log("로그 출력: " + tenantId);
  },
  /*팝업 표시*/
  show(tenantId, p2) {
    alert(this.modalTitle);
    this.loadData(tenantId);
    this.visibleStatus = false;
    this.visibleStatus = true;
  }
}
3.2.3 이벤트에서 메서드 호출

이벤트를 통해 부모 컴포넌트의 메서드를 호출합니다:

showDialog_click() {
  // 다이얼로그 표시
  this.$refs.my_modal1.show(33445566, 520);
}

4. Vue 3 로컬 개발과 프로덕션 환경 차이 문제 해결

프론트엔드 개발에서 로컬 개발과 프로덕션 환경의 효과가 일치하지 않는 문제에 자주 직면하게 됩니다. 이는 주로 환경 차이 또는 의존성 버전 불일치로 인해 발생합니다.

4.1 문제 설명

로컬에서는 효과가 정상적으로 나타나지만 서버로 업그레이드하면 효과가 올바르게 나타나지 않습니다. 이는 프로덕션 환경의 컴포넌트 버전이 로컬 개발 시 사용한 버전과 일치하지 않기 때문이며, 프로덕션 환경에서 일부 API가 더 이상 사용되지 않을 수 있습니다.

4.2 발생 원인

이 문제는 주로 jenkins 지속 통합을 사용하는 시나리오에서 발생합니다. 지속 통합 과정에서 최신 컴포넌트 버전을 가져오는데, 이러한 최신 버전의 컴포넌트는 로컬 개발 시 사용한 버전과 다를 수 있어 API 호환성 문제가 발생할 수 있습니다.

4.3 해결 방안

4.3.1 의존성 버전 고정

package-lock.json에서 ^ 기호를 제거하여 사용하는 의존성 버전을 고정합니다:

"dependencies": {
  "some-package": "1.2.3"
}
4.3.2 대체 솔루션 사용

특정 컴포넌트나 API가 더 이상 사용되지 않는 경우, 호환성을 보장하기 위해 동일한 기능을 구현하는 다른 속성이나 메서드를 찾아볼 수 있습니다.

위 내용은 Vue.js 개발 과정에서 얻은 몇 가지 경험과 팁입니다. 이 내용이 Vue.js 개발 방법을 더 잘 이해하는 데 도움이 되기를 바랍니다. 실제 프로젝트에서 이러한 지식을 유연하게 적용하면 개발 효율성을 향상시키고 일반적인 문제를 피할 수 있습니다.

태그: Vue.js Webpack TypeScript Composition API Vue 3

7월 18일 17:14에 게시됨

인기 태그

©2026 괴물 클럽