뷰 JS (Vue JS) 튜토리얼 1 | Vue 인스턴스, 속성, 메소드

뷰의 설치는 아래 포스팅을 참고한다. 이번 포스팅 부터는 뷰JS 튜토리얼을 기록한다.

 

뷰 JS CDN 으로 쉽게 시작하기 | 프론트엔드 프레임워크 시작하기 (tistory.com)

뷰 JS CDN 으로 쉽게 시작하기 | 프론트엔드 프레임워크 시작하기

 

뷰 JS를 다루는데 있어서 가장 중요한 콘트롤은 Vue 인스턴스에 있다.

 

Vue 인스턴스로 여러가지를 할 수 있다.

 

아래의 코드는 Vue 인스턴스를 생성한다. el 은 element 요소의 약자이고 #vue-app 이 있는 웹문서의 id에 연결된다.

 

data 는 해시 테이블 같은 한 쌍으로 되어있다. Vue 객체를 사용해서 Dom에 액세스 하므로 웹페이지를 조작할 수 있다.

new Vue({
  el: '#vue-app',
  data:{
    name: 'Kayken'
  }
});

 

Vue 가 요소를 찾아내는 방법은 el 과 data 요소를 통해서이다. 이런 식으로 div 태그에 연결하여 바로 사용이 가능하다.

 

data 안에 요소를 추가하면 vue-app 안에서 몇개라도 사용할 수가 있다. html에 프로그래밍의 요소를 집어넣을 수 있다.

 

객체지향 프로그래밍의 관점으로 보면 Vue 는 객체이고, el 은 참조되있는 메모리의 주소를 가리키고, data는 클래스의 속성(멤버변수)라 할 수 있다. 속성을 몇개 더 추가해보자. 문자열 뿐 아니라 정수형도 가능하다. 여기서 조작하는 값은 모두 HTML 파일에 즉시 반영할 수 있는 값이다.

 

주의할 부분은 문법이 일반 언어와 다르다. 하나의 행이 끝날 때 콤마를 어떻게 사용하는지 패턴을 잘 봐둔다. 중괄호 {}마지막 행에서는 콤마를 사용하지 않는다.

 

프레임워크에서는 {{}} 이중괄호를 사용한다 던가 이런 특별한 문법이 적용된다. 적응하는데 시간이 걸릴 것이다. 하지만 프레임워크가 왜 이렇게 번거로운 문법을 사용해야 할까? 그것은 원래 언어가 가지고 있는 규칙 안에서 움직여야 하기 때문이다. 프레임워크는 하나의 언어가 아니라 언어안에서 돌아가는 시스템이다.

 

네이티브 코드는 모든 자유를 주지만 실상 아무것도 없는 상태의 마음만 자유일 뿐이다. 반면 프레임워크는 좀 더 엄격하다. 쉽게 말하면 프로그래머에게 해야할 것과 하지 말아야 할 것을 구분해준다. 프로그래머는 해야할 일을 하면 된다.

 

프레임워크의 장점을 이용하려면 콤마를 두번 찍거나 ,, 중괄호를 {{}} 두개 사용하는 정도는 감수해야 한다. 한 개 사용하는 자리는 네이티브 코드에 주어진 권리다.

 

초보자가 코딩을 배우며 다음 단계로 갈 때 마다 이런 장벽이 생긴다. 알 수 없는 코드의 투성이라도 너무 고민을 하지 않는게 좋다. 어떤 천재적 프로그래머라도 그 모든 코드를 다 이해하는 사람은 없다. 물론 컴퓨터에 대하여 완벽하게 이해하는 사람은 있다. 컴퓨터 구조는 이론이고 코딩은 실전이라는 선에서 이해하고 넘어가자.

 

---

다음은 메소드를 만들어 보자. 객체지향을 배웠다면 메소드가 클래스에서 사용하는 함수라는 것을 알고 있을 것이다.

 

다음은 몇가지 메소드의 예제다. 여기서도 네이티브 코드의 문법과 다른 부분에 주의한다. : 콜론이라던가 익명함수 스타일로 작성되있다.

 

new Vue({
  el: '#vue-app',
  data:{
    name: 'Kayken7',
    job: 'freelancer',
    number: 999
  },
  methods:{
    greet: function(){
      return 'Hello Vue.js!'
    },
    parameter: function(name) {
      return 'Hello ' + name
    },
    parameter2: function() {
      return 'Hello ' + this.job + '!'
    }
  }
});

 

어떻게 사용되는지는 연결된 Html 파일을 보면 알 수 있다.

 

중첩 중괄호 {{}} 안의 문법은 네이티브 코드의 문법과 비슷하다. 아마 네이티브 코드와 바깥 코드를 구분 짓도록  {{}} 벽을 쌓기 때문인 것 같다.

 

메소드의 호출은 () 괄호가 들어가야 한다. 매개변수도 넘겨줄 수 있다. 웹브라우저는 아래와 같을 것이다.

 

 

이제 Vue.js에서 Vue 인스턴스를 가지고 멤버변수와 메소드를 어떻게 사용하는지 알게되었다!

 

 

* 깃허브 코드

kayken7/Tutorial