본문 바로가기
Book

Do it! Vue.js 입문

by 로보리스 2021. 10. 3.

완독일 2021.10.03


 

이 책의 특징

급격히 변화하는 프런트엔트 기술인 Vue.js를 시간을 절약해 빠르게 배울 수 있다. 당장 실무에 써먹을 수 있는 핵심 기술부터 쉽게 설명한 책이다. Vue.js를 입문하거나 실무에서 사용하다가 애매한 개념을 다시 정리하는데 큰 도움이 되고, 이 책을 통해 얻을 수 있는 기술들은 다음과 같다.

 

  • Vue.js가 무엇인지 이해하고 개발환경을 설정한다.
  • Vue.js 애플리케이션의 구조를 탄탄히 설계할 수 있도록 컴포넌트와 컴포넌트 통신 방법에 대해 알아본다.
  • 실제로 서비스할 상용 웹 앱을 개발할 때 반드시 필요한 Vue.js 라우터와 HTTP 통신에 대해 알아본다.
  • Vue.js로 화면을 꾸미는 방법을 배우고 프로젝트를 구성하는 여러 가지 방법에 대해 익힌다.
  • 할 일 관리 앱의 컴포넌트 내용을 구현하고, 기능을 개선하는 방법을 익힌다.
  • Vue.js로 좀 더 복잡한 애플리케이션을 개발할 수 있는 중고급 개발자가 되기 위한 지식을 살펴본다.
  • 실제 현장에서 Vue.js를 사용할 때 맞닥뜨릴 수 있는 여러 상황들을 어떻게 해결할 수 있는지 살펴본다.

 

정리

Vue.js 소개

 

  • Vue.js란?
    • 뷰는 화면단 라이브러리이자 프레임워크라고도 볼 수 있다.
    • Vue.js(이하 '뷰'로 약칭)는 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크다. 
    •  
      점진적인 프레임워크로서의 뷰의 의미
    • 위 그림은 뷰의 창시자인 에반 유(Evan You)가 2017년 Vue.js 컨퍼런스에서 발표한 프레젠테이션에 사용한 그림이다.
    • 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공된다.
    • 라이브러리 역활뿐만 아니라 프레임워크 역활도 할 수 있다는 의미이다.
    • 그래서 뷰를 점진적인 프레임워크(progressive framework)라고 부르고 있다.
    • 뷰는 2014년 2월에 처음으로 공식 배포되었다.
  • 뷰의 장점
    • 배우기 쉽다.
    • 리액트와 앵귤러에 비해 성능이 우수하고 빠르다.
      • 뷰 제작팀에서 리액트와 앵귤러를 가지고 같은 테스트 케이스(test case)에서 성능을 비교한 결과 뷰가 가장 빠른 것으로 나타났다.
    • 리액트와 앵귤러의 장점을 갖고 있다.
      • 앵귤러의 데이터 바인딩 특성과 리액트의 가상 돔(Virtual DOM) 기반 렌더링 특징을 갖고 있다.
  • Vue.js의 특징
    • UI 화면단 라이브러리
      • 뷰(Vue.js)는 UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델(ViewModel)에 해당하는 화면단 라이브러리다.
      • 위 그림에서 볼 수 있듯이 MVVM 패턴이란 화면을 모델(Model) - 뷰(View) - 뷰 모델(ViewModel)로 구조화하여 개발하는 방식을 의미한다.
      • 이러한 방식으로 개발하는 이유는 화면의 요소들을 제어하는 코드와 데이터 로직을 분리하여 코드를 더 직관적으로 이해할 수 있고, 추후 유지 보수가 편해진다.
      • 뷰(View)는 사용자에게 보이는 화면이고, 돔(DOM)은 HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리이다.
      • 돔 리스너(DOM Listener)는 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치이다.
      • 모델(Model)은 데이터를 담는 용기이다. 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장한다.
      • 데이터 바인딩(Data Binding)은 뷰(View)에 표시되는 내용과 모델의 데이터를 동기화한다.
      • 뷰 모델(ViewModel)은 뷰와 모델의 중간 영역이다. 돔 리스너와 데이터 바인딩을 제공하는 영역이다.
    • MVVM 구조의 처리 흐름
      • 앞 구조도의 처리 흐름을 이해하기 위해 구글 사이트에서 검색어를 입력하여 살펴본다.
      • 사이트에 접속하여 검색 창에 검색어를 입력하고 [Google 검색] 버튼을 클릭한다.
      • 여기서 뷰(View)는 사용자에게 비춰지는 구글 검색 화면 전체를 의미한다.
      • 돔(DOM)은 구글 로고, 검색 창, 키보드와 마이크 아이콘, [Google 검색] 버튼 등 화면에 나타나는 HTML 문서 상의 모든 요소를 의미한다.
      • 여기서 [Google 검색] 버튼을 클릭했을 때 돔 리스너(DOM Listener)에서 버튼의 클릭을 감지한다.
      • 이 처리 과정에서 데이터 바인딩(Data Binding)이 관여하는데, 검색 결과에 해당하는 데이터를 모델(Model)에서 가져와 화면에 나타내준다.
      • 이처럼 뷰는 화면의 요소가 변경되거나 조작이 일어날 때 즉각적으로 반응하여 화면의 데이터를 갱신하여 보여 주는 역활을 한다.
      • 화면의 표현에 주로 관여하는 라이브러리이기 때문에 화면단 라이브러리라고도 한다.
      • MVVM 패턴은 정리하면 '화면 앞단(프런트엔드)의 화면 동작과 관련된 로직과 화면 뒷단(백엔드)의 데이터베이스 데이터 처리 로직을 분리하여 더 깔끔하게 코드를 구성한다'는 것이다.
    • 컴포넌트 기반 프레임워크
      • 뷰가 가지는 또 하나의 특징은 컴포넌트(Component) 기반 프레임워크다.
      • 컴포넌트란 마치 레고 블록과 같다. 레고 블록을 자 조합해서 쌓으면 원하는 모형을 만들 수 있듯이 뷰의 컴포넌트를 조합하여 화면을 구성할 수 있다.
      • 컴포넌트 기반 방식으로 개발하는 이유는 코드를 재사용하기 쉽기 때문이다.
    • 리액트와 앵귤러의 장점을 가진 프레임워크
      • 뷰는 앵귤러의 양방향 데이터 바인딩(Two-way Data Binding)과 리액트의 단방향 데이터 흐름(One-way Data Flow)의 장점을 모두 결합한 프레임워크이다.
      • 양방향 데이터 바인딩이란 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경이 되면 다른 한쪽도 자동으로 변경되는 것을 말한다.
      • 단방향 데이터 흐름은 컴포넌트의 단방향 통신을 의미한다.
      • 컴포넌트 간에 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게끔 프레임워크가 구조화되어 있는 게 바로 단방향 데이터흐름이다.
      • 빠른 화면 렌더링(Rendering)을 위해 리액트의 가상 돔(Virtual DOM) 렌더링 방식을 적용하여 사용자 인터랙션(user interaction)이 많은 요즘의 웹 화면에 적합한 동작 구조를 갖추고 있다.
      • 가상 돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신한다.

 

화면을 개발하기 위한 필수 단위 - 인스턴스 & 컴포넌트

  • 뷰 인스턴스
    • 뷰 인스턴스(Instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본단위다.
    • 뷰 인스턴스를 사용하기 위해 다음과 같은 형식으로 뷰 인스턴스를 생성한다.
      • new Vue({
 ...
});
      • Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있다.
  • 뷰 인스턴스의 유효 범위
    • 뷰 인스턴스를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용되어 나타난다. 이를 인스턴스의 유효 범위라고한다.
    • 인스턴스의 유효 범위를 이해하려면 인스턴스가 생성된 후 화면에 어떻게 적용되는지 알아야한다.
  • 뷰 인스턴스 라이프 사이클
    • 인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클(life cycle) 속성이고 한다.
    •  
  • 각 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅(hook)이라고 한다.
    • 뷰 인스턴스가 파괴되고 나서 호출되는 단계다. 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들 또한 모두 파괴된다.
    • beforeCreate
      • 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계다.
      • 이 단계에서는 data 속성과 methods 속성이 아직 인스턴스에 정의되어 있지 않고, 돔과 같은 화면 요소에도 접근할 수 없다.
    • created
      • beforeCreate 라이프 사이클 단계 다음에 실행되는 단계다. data 속성과 methods 속성이 정의되었기 때문에 this.data 또는 this.fetchData()와 같은 로직들을 이용하여 data 속성과 methods 속성에 정의된 값에 접근하여 로직을 실행할 수 있다. 다만, 아직 인스턴스가 화면 요소에 부착되기 전이기 때문에 template 속성에 정의된 돔 요소로 접근할 수 없다.
      • 그리고 data 속성과 methods 속성에 접근할 수 있는 가장 첫 라이프 사이클 단계이자 컴포넌트가 생성되고 나서 실행되는 단계이기 때문에 서버에 데이터를 요청하여 받아오는 로직을 수행하기 적합하다.
    • beforeMount
      • created 단계 이후 template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후 el 속성에 지정한 화면 요소(돔)에 인스턴스를 부착하기 전에 호출되는 단계이다.
      • render() 함수가 호출되기 직전의 로직을 추가하기 좋다.
    • mounted
      • el 속성에 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계로, template 속성에 정의한 화면 요소(돔)에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계다.
      • 다만, 돔에 인스턴스가 부착되자마자 바로 호출되기 때문에 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 HTML 코드로 변환되는 시점과 다를 수 있다.
    • beforeUpdate
      • el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환된다. 치환된 값은 뷰의 반응성(Reactivity)을 제공하기 위해 $watch 속성으로 감시한다. 이를 데이터 관찰이라고 한다.
      • 또한 beforeUpdate는 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계이며, 변경 예정인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있다. 만약 여기에 값을 변경하는 로직을 넣더라도 화면이 다시 그려지지 않는다.
    • updated
      • 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계다. 데이터 변경으로 인한 화면 요소 변경까지 완료된 시점이므로, 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은단계다. 이 단계에서 데이터 값을 변경하면 무한 루프에  빠질 수 있기 때문에 값을 변경하려면 computed, watch와 같은 속성을 사용해야한다. 따라서 데이터 값을 갱시하는 로직은 가급적이면 beforeUpdate에 추가하고, updated에서는 변경 데이터의 화면 요소(돔)와 관련된 로직을 추가하는 것이 좋다.
    • beforeDestory
      • 뷰 인스턴스가 파괴되기 직전에 호출되는 단계다. 이 단계에서는 아직 인스턴스에 접근할 수 있다. 따라서 뷰 인스턴스의 데이터를 삭제하기 좋은 단계다.
    • destroyed
  • 뷰 컴포넌트
    • 컴포넌트란?
      • 컴포넌트(Component)란 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미한다.
      • 컴포넌트 간의 관계는 자료구조의 트리(Tree) 모양과 유사하다.
      • 트리란 컴퓨터 자료구조 중 하나로, 노드끼리의 연결이 부모 - 자식의 구조를 따른다.
  • 컴포넌트 등록하기
    • 컴포넌트를 등록하는 방법은 전역과 지역의 두 가지가 있다.
    • 지역(Local) 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖는다.
    • 전역(Global) 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다.
    • Vue.component('컴포넌트 이름', {
   // 컴포넌트 내용
 });
  • 뷰 컴포넌트 통신
    • 컴포넌트 간 통신과 유효 범위
      • 앵귤러1이나 백본(Backbone.js)과 같은 초창기 자바스크립트 프레임워크에서는 한 화면을 1개의 뷰(View)로 간주했다.
      • 따라서 한 화면의 데이터를 해당 화면 영역 어디서든 호출할 수 있었다.
      • 하지만 뷰(Vue.js)의 경우 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없다.
      • 그 이유는 컴포넌트마다 자체적으로 고유한 유효 범위(Scope)를 갖기 때문이다.
  • 상하위 컴포넌트 관계
    • 뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 방법을 따라야한다.
    • 가장 기본적인 데이터 전달 방법은 바로 상위(부모) - 하위(자식) 컴포넌트 간의 데이터 전달 방법이다.
  • 상위에서 하위 컴포넌트로 데이터 전달하기
    • props 속성
      • props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성이다.
      • props 속성을 사용하려면 먼저 하위 컴포넌트의 속성에 정의해야한다. 
        • Vue.component('child-component', {
   props: ['props 속성 이름'],
});
      • 다음 상위 컴포넌트의 HTML 코드에 등록된 child-component 컴포넌트 태그에 v-bind 속성을 추가한다. 
        • <child-component v-bind:props 속성 이름="상위 컴포넌트의 data 속성"></child-component>
        • props 속성을 사용한 데이터 전달 예제 
          • <div id="app">
 <child-component v-bind:propsdata="message"></child-component>
</div>
          • <script>
Vue.component('child-component', {
          props:['propsdata']
          template:'<p>{{ propsdata }}</p>',
});

new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue! passed from Parent Component'
    }
   });
</script>
  • 하위에서 상위 컴포넌트로 이벤트 전달하기
    • 하위에서 상위는 이벤트를 발생시켜(event emit) 상위 컴포넌트에 신호를 보내면 된다.
    • 뷰에서는 하위에서 상위 컴포넌트로 데이터를 전달할 수 없도록 되어 있기 때문에 이벤트를 발생시켜 보낸다.
      • 이는 뷰의 단방향 데이터 흐름에 어긋나는 구현 방법이기 때문이다.
      • 하지만 향후에 복잡한 뷰 애플리케이션을 구축할 때 이벤트 버스(Event Bus)를 이용하여 데이터를 전달해야 할 경우가 있다.
    • <div id="app>
  <child-component v-on:show-log="printText"></child-component>
      //하위 컴포넌트의 이벤트명, 상위 컴포넌트의 메서드명
</div>
    • Vue.component('child-component', {
  template: '<button v-on:click="showLog">show</button>',
  methods: {
      showLog: function(){
          this.$emit('show-log');
      }
    }
   }
  });
  
  var app = new Vue({
     el: '#app',
     data: {
        message: 'Hello Vue! passed from Parent Component'
      },
      methods: {
        printText: function(){
           console.log("received an event");
       }
     }
   });
  • 같은 레벨의 컴포넌트 간 통신
    • 이벤트 버스 형식
      • 이벤트 버스(Event Bus)는 개발자가 지정한 2개의 컴포넌트 간에 데이터를 주고받을 수 있는 방법이다.
      • // 이벤트 버스를 위한 추가 인스턴스 1개 생성
var eventBus = new Vue();
      • // 이벤트를 보내는 컴포넌트
methods: {
   메서드명: function() {
       eventBus.$emit('이벤트명', 데이터);
    }
  }
      • //이벤트를 받는 컴포넌트
methods: {
    created: function(){
       eventBus.$on('이벤트명', function(데이터){
         ...
       });
     }
  }
    • 이벤트 버스를 활용하면 props 속성을 이용하지 않고도 원하는 컴포넌트 간에 직접적으로 데이터를 전달할 수 있어 편리하지만 컴포넌트가 많아지면 어디서 어디로 보냈는지 관리가 되지 않는 문제가 발생한다.
    • 이 문제를 해결하려면 뷰엑스(Vuex)라는 상태 관리 도구가 필요하다.
    • 뷰엑스는 중, 대형 애플리케이션에서 컴포넌트 간의 데이터 관리를 효율적으로 하는 라이브러리다.

 

상용 웹 앱을 개발하기 위한 필수 기술들 - 라우터 & HTTP 통신

  • 뷰 라우터
    • 상용 웹 앱의 경우 여러 페이지로 구성되어 있기 때문에 페이지 간에 이동을 돕는 라우터를 사용해야 한다. 
    • 라우터(Router)를 이해하기 위해서는 먼저 라우팅(Routing)이 무엇인지 알아야 한다.
    • 라우팅이란 웹 페이지 간의 이동 방법을 말한다.
    • 라우팅은 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA, Single Page Application)에서 주로 사용하고 있다.
    • 싱글 페이지 애플리케이션은 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지를 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱시하는 패턴을 적용한 애플리케이션이다.
    • 뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리다.
    • <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Router Sample</title>
  </head>
  <body>
     <div id="app>
        <h1>뷰 라우터 예제</h1>
        <p>
          <router-link to="/main">Main 컴포터넌트로 이동</router-link>
          <router-link to="/login">Login 컴포넌트로 이동</router-link>
        </p>
       <router-view></router-view>
     </div>
    • var Main = {template: '<div>main</div>' };
var Login = {template: '<div>login</div>' };

var routed = [
    {path: '/main', component: Main},
    {path: '/login', component: Login}
];
 
var router = new Router({
    routes
});

var app = new Vue({
   router
}).$mount('#app');
  • 네스티드 라우터
    • 네스티드 라우터(Nested Router)는 라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다.
    • 네스티드 라우터는 화면을 구성하는 컴포넌트의 수가 적을 때는 유용하지만 한 번에 더 많은 컴포넌트를 표시하는 데는 한계가 있다.
  • 네임드 뷰
    • 네임드 뷰(Named View)는 특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식이다.
    • 네스티드 라우터는 상위 컴포넌트가 하위 컴포넌트를 포함하는 형식이지만 네임드 뷰는 같은 레벨에서 여러 개의 컴포넌트르 한 번에 표시한다.
  • 뷰 HTTP 통신
    • 웹 앱에서 서버에 데이터를 요청하는 HTTP(HyperText Transfer Protocol) 통신은 필수로 구현해야 하는 기능이다.
    • 웹 앱 HTTP 통신의 대표적인 사례로는 제이쿼리(jQuery)의 ajax가 있다. ajax는 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고도 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기법이다.
    • 뷰에서도 ajax를 지원하기 위한 라이브러리를 제공한다. 뷰 프레임워크의 필수 라이브러리로 관리하던 뷰 리소스와 요즘 가장 많이 사용하는 액시오스(axios)다.
    • 액시오스
      • 액시오스(Axios)는 현재 뷰 커뮤니티에서 가장 많이 사용되는 HTTP 통신 라이브러리다.
      • 액시오스는 Promise 기반의 API 형식이 다양하게 제공되어 별도의 로직을 구현할 필요 없이 주어진 API만으로도 간편하게 원하는 로직을 구현할 수 있다.
      • Promise는 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 객체다. 자바스크립트는 단일 스레드(thread)로 코드를 처리하기 때문에 특정 로직의 처리가 끝날 때까지 기다려주지 않는다. 따라서 데이터를 요청하고 받아올 때까지 기다렸다가 화면에 나타내는 로직을 실행해야 할 때 주로 Promise를 활용한다.

 

화면을 개발하기 위한 기본 지식과 팁 - 템플릿 & 프로젝트 구성

  • 뷰 템플릿
    • 뷰의 템플릿(Template)은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성이다.
    • 템플릿 속성을 사용하는 방법은 두 가지로, 첫 번째는 ES5에서 뷰 인스턴스의 template 속성을 활용하는 방법이다.
    •  
    • new Vue({ template: '<p>Hello {{ message }}</p>' });
    • 여기서 템플릿 속성에 대해 한 가지 알아둘 특징이 있다. 사용자가 볼 수는 없지만 라이브러리가 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기방의 render() 함수로 변환한다.
    • 변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역활을 한다.
    • 두 번째는 <template> 코드를 활용하는 방법이다.
    •  
    • <!-- ES6 : 싱글 파일 컴포넌트 체계 --> <template> <p>Hello {{ message }}</p> </template>
    • 템플릿에서 사용하는 뷰의 속성과 문법은 다음과 같다.
      • 데이터 바인딩
        • 데이터 바인딩(Data Binding)은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미한다. 주요 문법으로는 {{ }} 문법과 v-bind 속성이 있다.
        • v-bind는 아이디, 클래스, 스타일 등의 HTMLL 속성(attributes) 값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식이다. 형식은 v-bind 속성으로 지정할 HTML 속성이나 props 속성 앞에 접두사로 붙인다.
        • v-bind:문법을 :로 간소화할 수 있다. 하지만 되도록이면 v-bind 속성을 이용하는 것이 기존 HTML 문법과 구분도 되고 다른 사람이 코드를 파악하기도 쉽다.
      • 자바스크립트 표현식
        • 뷰의 템플릿에서도 자바스크립트 표현식을 쓸 수 있다. 데이터 바인딩 방법 중 하나인 {{ }} 안에 자바스크립트 표현식을 넣으면 된다.
        • 자바스크립트 표현식을 사용할 때 주의할 점은 자바스크립트의 선언문과 분기 구문을 사용할 수 없다.
        • 또 복잡한 연산은 인스턴스 안에서 처리하고 화면에는 간단한 연산 결과만 표시해야 한다.
      • 디렉티브
        • 뷰 디렉티브(Directive)란 HTML 태그 안에 v-접두사를 가지는 모든 속성들을 의미한다. 앞에서 v-bind 속성도 디렉티브에 해당된다.
      • 이벤트 처리
        • 웹 앱에서 사용자의 클릭이나 키보도 입력과 같은 이벤트를 처리하는 것은 당연하다. 뷰 역시 화면에서 발생한 이벤트를 처리하기 위해 v-on 디렉티브와 methods 속성을 활용한다.
      • 고급 템플릿 기법
        • 고급 템플릿 기법은 실제 애플리케이션을 개발할 때 유용한 속성으로, 앞에서 배운 데이터 바인딩, 디렉티브와 같은 기본적인 문법과 함께 사용한다.
        • computed 속성
          • 데이터를 가공하는 등의 복잡한 연산은 뷰 인스턴스 안에서 하고 최종적으로 HTML에는 데이터를 표현만 해야하는데, computed 속성은 이러한 데이터 연산들을 정의하는 영역이다.
          • computed 속성의 장점은 data 속성 값의 변화에 따라 자동으로 다시 연산한다.
          • 두 번째 장점은 캐싱이다. 동일한 연산을 반복해서 하지 않기 위해 연산의 결과 값을 미리 저장하고 있다가 필요할 때 불러오는 동작이다.
        • computed 속성과 methods 속성의 차이점
          • computed 속성과 methods 속성의 가장 큰 차이점은 methods 속성은 호출할 때만 로직이 수행되고, computed 속성은 대상 데이터의 값이 변경되면 자동적으로 수행된다.
          • 수동적으로 데이터를 갱신하느냐, 능동적으로 데이터를 갱신하느냐의 차이점이 있다.
        • watch 속성
          • watch 속성은 데이터 변화를 감지하여 자동으로 특정 로직을 수행한다. computed 속성과 유사하지만 computed 속성은 내장 API를 활용한 간단한 연산 정도로 적합한 반면에, watch 속성은 데이터 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합하다.
  • 뷰 프로젝트 구성 방법
    • HTML 파일에서 뷰 코드 작성 시의 한계점
      • 뷰 애플리케이션은 여러 개의 컴포넌트로 화면을 구성하고, 페이지 사이를 이동할 때는 라우터를 사용해야 하는데, <script> 태그 안에 HTML 코드는 구문 강조가 적용되지 않기 때문에 오탈자를 찾기 어려울뿐더러, 상위 태그와 하위 태그의 관계를 파악하기 어렵고, 구조적으로 한계에 부딪히게 된다.
    • 싱글 파일 컴포넌트 체계
      • 이러한 문제점을 해결하는 방법이 바로 싱글 파일 컴포넌트(Single File Components) 체계이다.
      • 싱글 파일 컴포넌트 체계란 .vue 파일로 프로젝트 구조를 구성하는 방식을 말한다.
      • .vue 파일 1개는 뷰 애플리케이션을 구성하는 1개의 컴포넌트와 동일하다.
      • .vue 파일은 아래와 같은 기본 구조를 가진다. 
        • <template>
 <!-- HTML 태그 내용 -->
</template>

<script>
export default {
   // 자바스크립트 내용
}
</script>

<style>
  /* CSS 스타일 내용 */
</style>
        • <script>의 export default { } 코드는 ES6의 자바스크립트 모듈화와 관련된 문법이다.
    • 뷰 CLI
      • 앞에서 배운 싱글 파일 컴포넌트 체계를 사용하기 위해서는 .vue 파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환해 주는 웹팩(Webpack)이나 브라우저리파이(Browserify)와 같은 도구가 필요하다. 
      • 웹팩은 웹 앱의 자원(HTML, CSS, 이미지)들을 자바스크립트 모듈로 변환해 하나로 묶어 웹 성능을 향상시켜 주는 자바스크립트 모듈 번들러(module bundler)이다.
      • 브라우저리파이도 웹팩과 유사한 성격의 모듈 번들러지만 웹팩과 다르게 웹 자원 압축이나 빌드 자동화 같은 기능이 없다.
      • 뷰 개발자들이 편하게 프로젝트를 구성할 수 있도록 뷰 코어 팀에서 CLI(Command Line Interface) 도구를 제공한다. CLI는 커맨드 창에서 명령어로 특정 동작을 수행할 수 있는 도구다.
      • 뷰 CLI 설치하려면 노드제이에스가 설치되어 있어야 한다.
    • 뷰 로더
      • 뷰 로더(Vue Loader)는 웹팩에서 지원하는 라이브러리다. 뷰 로더는 싱글 파일 컴포넌트 체계에서 사용하는 .vue 파일의 내용을 브라우저에서 실행 가능한 웹 페이지의 형태로 변환해준다.

 

뷰 중고급 레벨로 올라가기 위한 지식

  • Vuex
    • 뷰엑스(Vuex)는 애플리케이션의 상태 관리(state management)를 돕는 라이브러리이다.
    • 상태(state)란 뷰 data 속성과 비슷하다고 생각하면 된다.
    • 뷰엑스에서 다루는 State, Getters, Mutations, Actions라는 기능의 사용방법과 개념은 범위가 넓은 주제이다. 따라서 뷰의 기본적인 개념들을 잡아 가면서 추후에 필요할 때 배우는 것이 좋다.
      • 공식 사이트 : https://vuex.vuejs.org/en/intro.html
  • 뷰의 반응성
    • 뷰의 반응성(Vue Reactivity)은 뷰가 데이터 변화를 감지했을 때 자동으로 화면을 다시 갱신하는 특성이다.
    • 뷰의 반응성에 대해 알아두면 프레임워크가 내부적으로 화면을 그리는 방법, 가상 돔이 동작하는 방법, 화면을 빠르게 그리기 위해 브라우저에 부하를 주지 않고 돔을 추가, 삭제하는 방법을 익힐 수 있다.
  • 서버 사이드 렌더링
    • 서버 사이드 렌더링(Server-Side Rendering)은 뷰엑스와 마찬가지로 별도의 라이브러리와 공식사이트가 있을 정도로 광범위한 주제이기 때문에 자세히 다루기는 어렵지만, 서버 사이드 렌더링과 클라이언트 사이드 렌더링(Client-Side Rendering)에 대한 차이는 알고 있어야한다.

 

뷰 개발을 위한 웹팩

  • 웹팩이란?
    • 웹팩은 흔히 모듈 번들러라고 알려져있다.
    • 공식 홈페이지에서는 웹팩을 '서로 연관이 있는 모듈 간의 관계를 해석하여 정적인 자원으로 변환해 주는 변환 도구'라고 정의한다.
    • 웹팩은 모든 파일의 내용을 1개의 자바스크립트 파일 안에 다 넣어 버리고 해당 자바스크립트 파일만 로딩해도 웹 앱이 돌아가게하는 취지를 갖고 있다.
    • 그렇다면 '왜 모든 파일의 내용을 1개의 파일에 담느냐?'이다. 
    • 이 부분은 로딩 속도를 향상시키는 것과 연관이 있다. 일반적으로 웹 페이지를 브라우저에 나타내기 위해 웹 화면을 구성할 때 화면 구성에 필요한 자바스크립트, CSS, 이미지 파일마다 서버로 보내는 HTTP 요청이 발생한다. 따라서 HTTP 네트워크 요청 숫자가 늘어나면 늘어날수록 웹 화면 로딩 시간은 길어질 수 밖에 없다.
  • 웹팩 데브 서버
    • 웹팩 데브 서버(webpack-dev-server)란 웹팩 설정 파일의 변화를 감지하여 빠르게 웹팩을 빌드할 수 있도록 지원하는 유틸리티이자 노드제이에스(Node.js) 서버이다.

 

뷰 개발을 위한 ES6

  • ES6란?
    • ES6(ECMAScript 2015)는 최신 자바스크립트 문법이자 스펙이다. ECMA에서 자바스크립트의 첫 표준을 제정한 이래 2015년에 문법적으로 가장 큰 변화가 있었다. 이렇게 변경된 자바스크립트를 ECMAScript 2015 또는 ES6라고 부르고, 기존 자바스크립트를 ES5라고 부른다.
    • ES6는 개발자가 더 쉽게 코드를 작성할 수 있도록 문법을 단순화하고, 미숙한 코딩으로 인한 오류를 미연에 방지하기 위해 언어 자체에서 유효 범위를 제한하는 등의 기능을 추가했다.
    •  
    • // ES5 var num = 100; var sumNumbers = function(a, b) { return a + b; }; sumNumbers(10, 20); // 30
    • // ES6
const num = 100;
let sumNumbers = (a, b) => {
   return a + b;
};

sumNumbers(10, 20); //30
    • Import와 Export
      • import와 export는 자바스크립트 모듈화와 관련된 기능이다.
      • 모듈화란 코드를 특정 기능이나 로직 단위로 구분하여 각각 모듈로 관리하는 것을 말한다.
      • 각 모듈은 다른 모듈에 영향을 주지 않고 독립적으로 실행할 수 있어야한다.

 

뷰 CLI에서 사용하는 NPM

  • NPM 소개
    • 뷰 CLI로 프로젝트를 구성하고 실행할 때 npm install, npm run dev와 같은 명령어를 사용했다. NPM(Node Package Manager)은 '전 세계 자바스크립트 라이브러리가 존재하는 공개 저장소'이다. 자바스크립트의 활용 범위가 넓어지면서 자바스크립트 라이브러리를 쉽게 다운로드할 수 있는 NPM은 현대 웹 앱에서는 없어서는 안 될 도구다.

 

뷰와 제이쿼리를 같이 사용해도 될까?

  • 뷰에서 제이쿼리가 과연 필요할까?
    • 제이쿼리(jQuery)는 현재 대다수의 기업 시스템에서 활용하고 있는 자바스크립트 라이브러리다. 2006년에 등장한 이래로 많은 기업에서 도입하여 기업용 시스템을 구축하였다.
    • 우선 정답은 '뷰에서 제이쿼리는 필요 없다'이다. 제이쿼리처럼 뷰에서도 화면의 요소를 쉽게 접근할 수 있는 ref 속성을 제공한다. 또한 화면의 특정 요소 이벤트도 v-on 디렉티브로 처리할 수 있다.

 

 

 

 

'Book' 카테고리의 다른 글

자바 ORM 표준 JPA 프로그래밍  (0) 2021.10.13

관련글

댓글

티스토리툴바