Vue.js 예제와 뷰JS 프론트엔드 프레임워크에 대해 알아야 할 10가지 사항

프론트엔드 자바스크립트 프레임워크의 지속적인 성장 속에서, 새롭게 등장한 Vue.js 3를 비롯한 다양한 기술을 알고, 새로운 기능들을 이해하는 일이 중요해졌습니다.

이 글에서는 Vue.js 3와 그에 추가된 신기능들에 대해 알아보겠습니다. 이들 최신 기능은 Vue.js를 더욱 강인하게 만들어, 다음 프로젝트에 고려해볼 만한 훌륭한 프레임워크로 자리매김하게 합니다. 여기서 Vue.js에 대해 반드시 알아야 할 10가지를 자세히 배우고, 이것이 여러분이 확장 가능하고 고성능의 프론트엔드 어플리케이션을 제공하는 데 어떻게 도움이 될지 알아볼 것입니다.

준비되셨나요? 시작해봅시다!

Vue.js란 무엇인가요?

Vue.js의 창시자 Evan You에 따르면:

“Vue.js는 유연하면서도 강경한 의견이 적은 해결책입니다. 단지 인터페이스 레이어로서 SPA(Single Page Application) 대신 페이지 내의 가벼운 기능으로 사용할 수 있습니다.”

그는 Angular만큼 강력하지만, Angular가 가진 불필요한 플러그인과 개념들 없이도 “가벼우면서” 유연한 프론트엔드 프레임워크를 만들고 싶었습니다.

그 결과물인 Vue.js는 오늘날 가장 인기 있는 프론트엔드 프레임워크 중 하나입니다.

개발자가 Vue.js를 사용하는 이유

다양한 이유가 개발자들로 하여금 특정 기술을 사용하게 만듭니다. Vue.js를 배워야 하는 이유에 대해 이야기해봅시다.

우선, Vue.js는 자바스크립트를 사용하여 개발자들이 손쉽게 접근할 수 있는 가장 직관적인 프레임워크 중 하나입니다. 따라서 기본적인 자바스크립트 지식을 가진 누구나 Vue.js로 개발을 할 수 있습니다.

Vue CLI 도구를 비롯한 여러 프론트엔드 개발 도구와의 조합이 Vue.js 설정을 매우 쉽게 만들어주며, 기본 기능이 사전 설정되어 있지만 DRY(Do not Repeat Yourself) 원칙과 구조로 코드를 구축할 수도 있습니다.

Vue.js에는 반응형 기능도 내장되어 있습니다. 즉, Angular 프레임워크에서 인기가 있던 실시간 기능이 Vue.js에서는 쉽게 이루어집니다. 예를 들어, Vue.js 어플리케이션에서 v-if 같은 간단한 지시어를 쉽게 적용할 수 있습니다.

Vue.js의 장단점

Vue.js는 현재 사용되고 있는 두 번째로 인기 있는 프레임워크입니다. 개발자들이 이 프레임워크를 고집하는 이유와 멀어지게 하는 이유를 살펴보겠습니다.

Vue.js의 장점

작은 크기
Vue.js는 약 18KB에 불과한 매우 작은 다운로드 크기를 자랑합니다. 이 점은 다른 프레임워크들과 비교했을 때 매우 우수하며, 여러분의 프론트엔드 어플리케이션의 SEO와 UX에 긍정적인 영향을 줄 것입니다.

단일 파일 컴포넌트 및 가독성
Vue.js는 컴포넌트 기반 구조를 사용하여 큰 코드 블록을 더 작은 컴포넌트로 분리합니다. 더욱이, Vue.js에서는 모든 것이 컴포넌트이고, 각 컴포넌트는 HTML, CSS 및 자바스크립트로 작성되어 있어 읽기 쉽고 단순함을 장려합니다.

튼튼한 도구 체계
Vue.js는 바로 사용할 수 있는 다양한 프론트엔드 개발 도구를 지원하며, 사용자의 추가 설정이 거의 또는 전혀 필요 없습니다. 예를 들어, Babel과 Webpack과 같은 도구를 지원하며, 유닛 테스트, 엔드-투-엔드 테스팅 라이브러리, 유연하고 쉬운 라우팅 시스템, 상태 관리자, 서버 사이드 렌더링(SSR) 등을 제공합니다.

사용하기 쉬움
Vue.js를 사용해본 적이 있다면, 매우 쉽게 사용할 수 있다는 데 동의할 겁니다. 이것은 웹 개발 접근법을 현대화하며, 몇 번의 연습만으로도 초보자가 쉽게 접근하고 편안함을 느낄 수 있게 만듭니다.

Vue.js의 단점

반응성 복잡성
Vue.js의 양방향 데이터 바인딩 구현은 Vue.js 컴포넌트를 관리하는 편리한 도구입니다. 양방향 바인딩이란 컴포넌트 클래스와 템플릿 간의 데이터 공유를 말하는데, 한 곳에서 데이터가 바뀌면 다른 곳도 자동으로 업데이트되도록 고안되었습니다.

그러나 반응성 시스템이 트리거 된 데이터 조각만 다시 렌더링하는 동안 작동 방식에 대한 문제가 하나 있습니다. 때때로 데이터를 읽는 도중에 오류가 발생해 데이터를 평탄화해야 하는 경우도 있습니다. 이는 알려진 문제로 Vue.js 웹사이트에서 해결 방법을 찾아볼 수 있습니다.

언어 장벽
초기에 Vue.js는 주로 중국인들에 의해 채택되었고, Xiaomi와 Alibaba와 같은 대기업들이 이 프레임워크를 대중화시키며 노동 시장에서 수요를 창출했습니다. 그러나 많은 중국 기업들의 적극적인 도입으로 많은 포럼, 토론 채널 등이 주로 중국어로 이루어져 비중국어 사용 개발자들이 도입하기 어려운 상황이었습니다.

오늘날 이런 상황은 더 이상 없으며, Vue.js는 여러 언어로 지원을 확대해 나아가고 있지만 아직 몇몇 언어들은 지원이 적은 편입니다.

과도한 유연성에 따른 위험
위에서 언급했듯이 Vue.js는 매우 유연하고 사용하기 쉽습니다. 그러므로 기업 팀의 모든 사람이 일을 처리하는 방식에 대해 다른 의견을 가지고 있을 때, 코드가 얽히고설켜 매우 복잡해지기 쉽습니다.

위에서 논의된 Vue.js의 장단점을 통해 당신이 좋아하는 기능과 부적합하다고 생각하는 기능을 이미 알아챌 수도 있습니다.

Vue.js에 대해 알아야 할 10가지

아래는 Vue.js에 대해 반드시 알아야 할 10가지 사항과 그 이유입니다.

Computed Properties

Vue.js에서 가장 많이 사용되는 기능 중 하나인 계산된 속성은 변경하고, 조작하며, 데이터를 효율적이고 읽기 쉽게 표시할 수 있는 속성을 만드는 데 도움이 됩니다.

예를 들어, 특정 상황에서 발생해야 하는 포맷 변경, 값 변경 또는 큰 처리 과정과 같은 작업을 여러 번 반복하고 싶을 때 편리합니다.

계산된 속성은 템플릿 내의 논리를 줄이는 데 도움이 됩니다. 이러한 논리가 너무 많으면 코드가 빠르게 부풀어 오르고 유지 관리가 어려워집니다.

예를 들어, 문자열을 대문자로 포맷하려면 다음과 같이 할 수 있습니다:

<template>
  <div>
    <p> I love {{ value.toUpperCase() }} </p>
  </div>
</template>

50곳에서 value 변수를 변경해야 한다면 어떻게 될까요? 복잡해집니다, 그렇죠? 계산된 속성은 이 문제를 도와줍니다:

<template>
  <div>
    <p> I love {{ value }} </p>
  </div>
</template>
<script>
  export default {
    computed:{
      value(){
        return this.value.toUpperCase()
      }
    }
  }
</script>

toUpperCase()를 toLowerCase()로 쉽게 변경하면 단일 지점에서 모든 변경 사항이 반영됩니다.

이벤트 처리

Vue.js는 $emit과 v-on의 사용을 통해 자식과 부모 간의 통신을 쉽게 만듭니다. 컴포넌트 계층 구조 간의 통신을 간편하고 단순하게 처리할 수 있습니다.

$emit 함수는 두 개의 매개변수를 받습니다: 이름을 위한 문자열과 선택적으로 전달할 값입니다.

v-on:event-name은 자식 컴포넌트에서 부모 컴포넌트가 방출한 이벤트를 수신하는 데 사용됩니다: 

<template>
  <section>
    <button @click="onClick">Add </button>
  </section>
</template>
<script>
export default {
  name: "AddEvent",
  methods: {
    onClick() { 
      this.$emit('add', this.data);
    }
  }
}
</script>

Add 버튼을 트리거하면 onClick 메서드가 $emit 이벤트를 트리거하여 add 이벤트를 수신하는 자식 컴포넌트에 추가 이벤트를 방출합니다.

이벤트를 수신하는 방법을 살펴보겠습니다:

<template>
  <section>
  <p v-show="showSaveMsg">This component is listening to the ADD event</p>
  <add-event v-on:add="onAdd"></add-event>
  </section>
</template>
<script>
export default {
  data(){
    return {
      showSaveMsg: false
    }
  },
  components:{
    AddEvent: () => import('./AddEvent')
  },
  methods: {
    onAdd() { 
        this.showSaveMsg = true;
    }
  }
}
</script>

위 코드는 add 이벤트를 수신하고 showSaveMsg 값을 true로 변경하여 메시지를 다시 표시하는 반응을 보여줍니다.

지연 로딩 / 비동기 컴포넌트

지연 로딩은 Vue.js에서 최상의 성능 향상 기법 중 하나로, 컴포넌트를 비동기적으로 또는 필요에 따라 추가하고 렌더링함으로써 파일 크기, HTTP 요청-응답 시간 등을 상당히 줄일 수 있습니다.

지연 로딩은 Webpack 동적 가져오기(Dynamic Imports)를 이용하여 달성되며, 코드 분할도 지원합니다.

Vue.js는 컴포넌트의 지연 로딩을 허용하며, 다음과 같은 스크립트를 사용하여 전역적으로 달성할 수 있습니다:

import Vue from "vue";
Vue.component("new-component", () => import("./components/NewComponent.vue"));

아래와 같이 로컬 컴포넌트에서도 달성할 수 있습니다:

<template>
  <div>
    <component></component>
  </div>
</template>
<script>
export default {
  components: {
    'Component': () => import('./Component')
  }
}
</script>

전역 컴포넌트

전역 컴포넌트를 이용해 Vue.js에서 상당한 재사용성을 달성할 수 있습니다. 컴포넌트를 한 번 등록하면 Vue.js 인스턴스 내 어디에서나 사용할 수 있습니다.

전역 컴포넌트는 중요한 기능으로, 컴포넌트를 개별적으로 등록하는 데 많은 시간을 절약해줄 수 있지만, 모든 컴포넌트를 전역으로 등록하여 남용하는 것은 쉽습니다. 모든 컴포넌트를 전역으로 등록하면 빌드 크기가 커지고 SEO가 떨어지며 페이지 로드 시간이 느려질 수 있습니다.

다음과 같이 프로젝트 전반에서 여러 번 사용되는 전역 컴포넌트만 등록하는 것이 좋습니다:

import Vue from "vue";
Vue.component("new-component", () => import("./componetns/NewComponent.vue"));

단일 파일 컴포넌트

Vue.js의 가장 강력한 기능 중 하나는 컴포넌트로, HTML 요소, CSS 및 JavaScript를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움을 줍니다.

컴포넌트는 큰 프로젝트를 좀 더 작고, 재사용 가능한 부분으로 나눌 수 있도록 도와주고, 프로젝트 전체에 걸쳐 확장할 수 있게 해줍니다. 이로써 소프트웨어 공학의 DRY(Do Not Repeat Yourself, 반복하지 마라) 원칙을 장려합니다.

큰 프로젝트의 구성과 캡슐화, 재사용 가능한 코드를 제공할 수 있으며, .vue 파일로 분리할 수 있습니다. 

<template>
  <section>
    <button @click="onClick">Add</button>
  </section>
</template>

<script>
export default {
  name: "CustomButtom",
  methods: {
    onClick() { 
      this.$emit('add', this.data);
    }
  }
}
</script>

<style scoped>
  button{
    /** Button Styles */
  }
</style>

위 스크립트는 프로젝트에서 재사용할 수 있는 사용자 정의 버튼 컴포넌트를 생성합니다. 각 컴포넌트는 고유의 HTML, CSS, JavaScript를 가지고 있습니다.

테스팅

Vue.js는 Jest 및 Mocha로 유닛 테스트하거나 Cypress로 끝까지 테스트하는 데 필요한 가장 견고한 테스팅 라이브러리 중 하나를 제공합니다. 거의 또는 전혀 구성하지 않고도 쉽게 사용할 수 있기 때문에 이 도구로 테스트를 살펴보는 것이 가치 있을 수 있습니다. 아래에서 Vue CLI 도구를 사용하여 프로젝트를 설정하고 테스트하는 방법을 간략하게 살펴보겠습니다.

Vue CLI 도구를 사용하여 프로젝트를 설정하는 것이 좋습니다. 다음 명령을 실행합니다:

vue add unit-jest //to run unit test with jest

npm install --save-dev @vue/test-utils

그 후, 세팅 후 아래에 있는 코드를 포함하십시오. 다음은 간단한 컴포넌트를 테스트하는 방법을 보여줍니다:

// Import the `mount()` method from Vue Test Utils
import { mount } from '@vue/test-utils'

// The component to test
const MessageComponent = {
  template: '<p>{{ message }}</p>',
  props: ['message']
}

test('displays a message', () => {
  // mount() returns a wrapped Vue component we can interact with
  const wrapper = mount(MessageComponent, {
    propsData: {
      msg: 'Welcome to our testing world'
    }
  })

  // Assert the rendered text of the component
  expect(wrapper.text()).toContain('Welcome to our testing world')
})

Vue Testing Library에는 컴포넌트를 테스트하기 위한 두 가지 훌륭한 옵션이 있습니다: Mount와 Shallow.

완벽한 격리에서 컴포넌트를 테스트하려면 shallow 메서드를 사용합니다. 그렇지 않고 커뮤니케이션이 있는 하위 컴포넌트와 작업해야 하는 경우에는 mount 옵션이 매우 잘 작동합니다.

강력한 Vue CLI 도구

Vue CLI는 훌륭한 CLI 도구이며 Vue 개발자에게 큰 힘을 실어줍니다. Vue CLI를 이용하면 어떤 컴포넌트든 격리하여 신속하게 테스트할 수 있습니다. Vue CLI의 장점 중 하나는 컴포넌트를 완벽하게 격리하여 개발하고 테스트할 수 있으며, 해당 컴포넌트에 대한 반복 작업 중에도 핫 리로딩기능을 사용할 수 있다는 것입니다.

설치를 위해 Vue CLI를 전역적으로 설치하겠습니다:

npm install -g @vue/cli

다음으로, 아래 명령을 실행하여 어떤 컴포넌트든 테스트할 수 있습니다:

vue serve ./components/views/Home.vue

특정 컴포넌트를 끄집어내어 동료와 공유하고 싶다면 아래 명령을 사용할 수 있습니다:

vue build --target lib --name goldenRule ./components/views/Home

Vue CLI는 매우 강력하고, 그것을 사용하는 방법을 마스터한다면 생산적인 시간을 엄청난 양 절약할 수 있습니다. 더 알고 싶다면 공식 문서를 살펴보세요.

속성(Props) 관리

속성 관리는 Vue 컴포넌트에 매우 중요하며 다양한 방식으로 생성할 수 있습니다. 또한 속성을 검증하고, 여러 속성을 생성하며, 필요에 따라 수정할 수 있습니다.

Vue 컴포넌트에서 새 속성을 생성하려고 할 때 여러 방식으로 할 수 있습니다. 예를 들어, isAdmin 속성을 생성해야 한다고 가정해 보겠습니다.

다음은 이를 수행할 수 있는 다양한 방식입니다:

<template>
  <section>
    <component v-if="isAdmin"></component>
  </section>
</template>
<script>
export default {
  name: 'Component',

 // One
  props: {
    isAdmin: {
      type: Boolean,
      default: false,
      required: true
    }
  },
 
 // Two
  props: ['isAdmin'],

 // Three
  props: {
    isAdmin: Boolean
  }

}
</script>

속성을 검증하는 것은 매우 중요합니다. 다행히도 매우 간단합니다:

// ...

 // One
  props: {
    isAdmin: {
      default: false,
      required: true,
      validator: function(value) {
        return typeof === 'boolean';
      }
    }
  },

// ...

부모 컴포넌트에서 속성 값 할당하기:

<template>
  <section>
    <component :isAdmin="true"></component>
  </section>
</template>

서버측 렌더링 (SSR)

Vue.js를 사용하여 프론트엔드 어플리케이션을 제작할 때 많은 훌륭한 기능과 이점들을 누릴 수 있지만, Vue.js 자체는 여전히 클라이언트 측 라이브러리로 DOM 요소들을 렌더링하고 조작하기만 합니다.

서버 사이드 렌더링(SSR)은 Vue.js와 같은 클라이언트 측 프레임워크가 더 나은 성능을 발휘하도록 도와줍니다. 검색 엔진 크롤러가 웹사이트를 크롤링할 때 사이트의 페이지들을 완전히 렌더링된 상태로 볼 수 있죠.

구글이나 빙과 같은 검색 엔진에 당신의 웹사이트가 빠르고 효율적으로 인덱싱되기 위해서는, 빠른 시간 내에 콘텐츠를 제공하는 높은 점수를 얻어야 합니다. 바로 이것이 Vue.js에서 서버 사이드 렌더링이 달성해 줄 수 있는 성과입니다.

서버 사이드 렌더링(SSR)은 클라이언트 측 싱글 페이지 애플리케이션(SPA)을 서버에서 렌더링하고, 완전히 렌더링된 페이지를 사용자에게 전송하는 대중적인 기술입니다.

서버 사이드에서 페이지가 렌더링되면, 그것을 응답으로 클라이언트에 보내게 됩니다. 그 결과, 브라우저가 검색 엔진 페이지를 표시할 때 모든 정보가 이미 렌더링된 상태가 됩니다.

Vue.js에서 SSR을 구현하는 것은 초보자들에게 어려운 일일 수 있습니다. Nuxt.js를 사용하는 것이 더 쉬울 겁니다, SSR을 내장하고 있고 배우기도 훨씬 쉽기 때문입니다.

배포

개발 과정에서 Vue.js는 많은 경고, 오류 및 파일 크기가 불필요하게 커질 수 있지만, 프로덕션 모드로 전환하면 이런 문제들은 즉시 사라집니다. Vue.js는 Webpack 빌드 도구, 미니파이, CSS 추출 및 정리, 캐싱, 런타임 오류 추적 등을 자동으로 구성합니다.

Kinsta 고객이라면 MyKinsta 대시보드에서 직접 접근할 수 있는 코드 최소화 기능을 사용할 수 있습니다. 이를 통해 CSS와 자바스크립트 축소를 간단한 클릭으로 자동으로 활성화할 수 있죠.

개발자의 추가 작업 없이 프로덕션 환경을 자동으로 구성하고 설정함으로써 Vue.js는 배포 과정을 매우 쉽게 만들어줍니다.

Vue.js 애플리케이션을 배포하려면 일반적인 가이드를 확인해보세요.

요약

이 글에서 우리는 Vue.js가 무엇인지, 왜 사용해야 하는지, 장단점은 무엇인지, 그리고 알아야 할 10가지 사항에 대해 자세히 살펴보았습니다.

이제 Vue.js에 대한 당신의 지식이 향상되어, 확장 가능하고 성능이 뛰어난 프론트엔드 어플리케이션을 제공할 수 있기를 바랍니다.

Keep coding~!