01. vue.js?

프론트와 관련된 라이브러리/프레임워크는 주로 react, typescript 등이 있다.

그 중 이번에 혼자 독학해보기로 마음 먹은 것은 vue.js(뷰)이다.

 

vue.js의 특징은 선언적 렌더링이라는 특징이 있다.

말만 들으면 무슨 말인지 당최 모르지만 프론트엔드에 지식이 있다면 간단한 예시로 이해가 가능할 듯 싶다.

 

선언적 렌더링
 
선언적 렌더링을 간단한 코드로 살펴보기 위해서 HTML코드와 JS코드
그리고 vue.js로 작성된 코드를 비교해보자.

그 전에 vue.js를 사용하기 위해선 cdn으로 vue를 설치해야한다.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

다음과 같은 코드를 입력해주고 본격적으로 비교를 해보자

 

1. JavaScript로 div안에 Hello world 만들기

<div id="ex1">

</div>

<script>
    ex1 = document.getElementById('ex1');
    ex1.innerHTML = 'Hello World'
</script>

다음과 같이 innerHTML 함수를 사용해서 원하는 문자열을 직접 입력하는 식으로 div 안에 Hello World를 렌더링 했다.

 

2. vue.js로 같은 결과물 만들어보기

 

<div id="app">
    {{message}}
</div>

var app = new Vue({
	el: '#app',
    data: {
    	message: 'Hello World'
        }
    })

이번에도 마찬가지로 Hello World를 렌더링 했다.

즉, 'message'라는 변수를 선언 후 객체 형식으로 적용할 DOM 요소를 선택 후 그 변수의 값을 data라는 객체 안에 선언한 방식이라고 이해하면 되겠다.

 

이렇게 요소 하나에만 렌더링 하는 경우에는 vue.js의 장점을 잘 모르겠다고 생각할 수도 있지만

 

나중에 살펴볼 반복문 조건문에서 vue.js의 장점은 더욱 도드라진다.

 

만약 innerHTML로 반복문을 사용하게 되면 `<li> 원하는 데이터 값 </li>`와 같이 HTML 코드도 신경쓰면서 코드를 작성해야하지만 vue.js로 사용하면 인라인 요소안에 v-for 작성 후 사용하면 된다.

구체적인 내용은 다음 포스트에서 다뤄보도록 하자!