[Vue.js] Vue의 기초 및 핵심 개념 : 일부 요소에서 Vue의 동작양상

Vue.js 란?

자바스크립트 프레임워크로 대화형이자 반응형인 웹 프론트엔드를 구축한다. 여기서 웹 프론트엔드란 브라우저에서 실행되는 웹 애플리케이션을 말한다.

Vue.js는 JavaScript로 쓰기 적합하다 JavaScript는 브라우저에서 사용하는 프로그래밍 언어로 사용자가 페이지를 로드한후 브라우저에서 실행된다. 프레임워크란 JavaScript를 비롯한 모든 프로그래밍 언어에서 서드 파티 라이브러리를 말한다.

다른 일반 라이브러리와 달리 프레임워크는 추가기능을 제공할 뿐 아니라 규칙을 안내한다. 애플리케이션 구축시 코드의 작성법에 대한 명확한 구조와 아이디어를 제공한다. .유틸리티 기능과 규칙을 제공하는것이라 할 수 있다.

그러면 Vue 를 왜 사용하는 걸까? 우리는 Vue.js를 이용해서 대화형이고 반응형인 웹 프론트엔드를 구축할 수 있기 때문에 사용한다.

반응형은 앱이 사용자의 작업에 즉각 응답한다는 뜻이다. 즉 사용자가 무언가 입력하면 이에 따라 새로고침이나 특정 동작을 하지 않고도 앱이 반응하도록 만드는 것이다. ex) 입력하지 않은 창에 유효성 검사 오류가 뜨는 것

또한 Vue.js는 사용자가 보는 것과 연관되어 있다. 즉 Vue.js는 서버 사이드 프레임워크가 아니다.  그렇기 때문에 개발에 있어 PHP나 Node와 조합해서 사용하더라도 하나의 단에서 함께 사용하지는 않는다. 그럼 Vue.js는 무엇일까? Vue.js 는 브라우저 사이트 프레임워크이다. 사용자가 보는 것을 제어하고 풍부한 사용자 인터페이스를 제공한다. 서버와 통신할 수 있는 웹 어플리케이션을 위해.

 

Vue 는 두가지 방식으로 사용할 수 있다.

1. HTML 페이지의 일부분을 제어하거나 더욱 반응형이며 대화형으로 만들 때 사용한다.

예를 들어 페이지의 사이드 바를 동적으로 변화 시키는 등의 작업등을 말한다. 페이지의 모든 요소를 Vue로 제어하지 않아도 괜찮다. 화면상 대화형 요소가 필요하지 않은 곳엔 Vue를 사용할 필요가 없기 때문이다. 

2. 페이지 내 요소를 모두 조정할 때 사용한다.

모든 요소를 렌더링하고 조정하기 위해 Vue를 사용하기도 한다. 이를 싱글 페이지 애플리케이션(SPA) 접근방식 이라고 한다. 서버는 오로지 HTML 페이지 하나만 전송한다. 기본적으로 마크업은 없지만 Vue와 Vue의 코드를 불러오는 스크립트는 모두 들어가 있다. 이후 Vue코드는 페이지가 로드된 이후에 브라우저 내 화면에서 무엇을 렌더링할지 정의한다. 

 

Vue를 통해 실행되는 모든 내장 디렉티브는 이름이 v-로 시작한다. 여기서 디렉티브란 일종의 지시사항을 이야기한다.

v-html : 콘텐츠를 요소의 여닫는 태그 사이에 설정하면서 Vue에 해당 콘텐츠는 HTML로 인식한다.

v-bind : 속성의 값을 설정함

v-on : 특정 이벤트에 반응할 때 쓰는 디렉티브로 콜론 뒤에 수신하려는 이벤트를 적어주면 된다.

 <!-- HTML 코드의 일부 -->

<section id="events">
      <h2>Events in Action</h2>
      <button v-on:click="counter++">Add</button> // html 이벤트가 모두 들어갈 수 있음
      <p>Result: {{ counter }}</p>
    </section>

//JavaScript

const app = Vue.createApp({
  data() {  // 이때 data는 임의로 함수명을 변경할 수 없다. 무조건 data라고 써야함
    return {
      counter: 0,
    };
  },
});

app.mount("#events");

Vue로 관리하는 HTML 코드에 간단한 JS 표현식을 만들 수 있다.

Add 버튼을 누르면 숫자가 올라감

버튼을 누를때마다 카운터의 값이 바뀐다.   숫자를 더하고 값을 다루는 일은 Vue의 역할이다. 출력값과 이벤트 리스너를 어디에 둘 것인지 선언만 하면 된다. 가장 중요한 작업은 실제로 렌더링 하는 페이지에서 필요한 해당 부분만을 업데이트 하는 것이다. 보통의 HTML 코드는 문서를 새로고침하거나 페이지를 바꿔야 화면이 바뀐다. 그러나 Vue는 HTML 상에서 버튼을 클릭했을 때 카운터 변화를 감지하고 해당 부분만 업데이트 하도록 돕는다.