회사에서 쓰는 프론트엔드 프레임워크는 '뷰'를 쓰고 있다.
무엇보다 프론트엔드는 자바스크립트만 잘 할 줄 안다면(물론, HTML, CSS 도 알아야 하지만) 어느 프레임워크를 쓰던지 쉽게 적응이 가능하다
그야말로 프레임워크는 자바스크립트를 유용하게 쓰기위한 '프레임워크' 일뿐!
틈틈이 자바스크립트를 얼른 마스터해야겠다...
📌 Vue.js 란?
웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크
뷰는 화면단 라이브러리이자 프레임워크이다
프레임워크
개발자들의 개발 생산성을 높이기 위해 일정한 틀과 규칙에 따라 개발하도록 미리 구조를 정의해 놓은 도구
라이브러리
자주 사용되는 기능들을 모아 재활용할 수 있도록 정리한 기술 모음집
돔
HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리
돔 리스너
돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
📌 뷰의 장점
- 배우기 쉽다
- 성능 우수, 빠름
- 앵귤러의 데이터 바인딩 특성과 리액트의 가상 돔(Virtual DOM) 기반 렌더링 특징 모두 갖춤
📌 Vue.js 의 특징
UI 화면단 라이브러리
뷰는 UI화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리
MVVM 패턴
화면을 모델(Model) - 뷰(View) - 뷰 모델(ViewModel) 로 구조화하여 개발하는 방식
이러한 방식으로 개발하는 이유는 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해할 수 있고, 추후 유지보수가 편안해짐
- View(뷰) : 사용자에게 보이는 화면
- Model(모델) : 데이터를 담는 용기, 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장
- Data Binding(데이터 바인딩) : 뷰(View)에 표시되는 내용과 모델의 데이터를 동기화
- ViewModel(뷰 모델) : 뷰와 모델의 중간 영역, 돔 리스너와 데이터 바인딩을 제공하는 영역
MVVM 구조의 처리 흐름
(예시) 앞 구조도의 처리 흐름 이해 위해 구글 사이트에서 검색어를 입력하여 살펴보면
여기서 뷰(View)는 사용자게 비춰지는 구글 검색 화면 전체를 의미
돔(DOM)은 구글 로고, 검색 창, 키보드와 마이크 아이콘 [Google 검색] 버튼 등 화면에 나타나는 HTML 문서 상의 모든 요소
[Google 검색] 버튼을 클릭했을 때 돔 리스너(DOM Listener)에서 버튼의 클릭을 감지
버튼이 동작하면 검색 결과를 보여주는 로직이 처리, 이 처리 과정에서 데이터 바인딩(Data Binding)이 관여하는데
검색 결과에 해당하는 데이터를 모델(Model)에서 가져와 화면에 나타내 준다
컴포넌트 기반 프레임워크
Component란
조합하여 화면을 구성할 수 있는 블록을 의미
컴포넌트 기반 방식으로 개발하는 이유는 코드를 재사용하기가 쉽기 때문
뷰의 경우 컴포넌트를 썼을 때 HTML 코드에서 화면의 구조를 직관적으로 파악할 수 있다
양방향 데이터 바인딩 + 단방향 데이터 바인딩
양방향 데이터 바인딩
- Two-way Data Binding
- 앵귤러의 특징
- 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것
단방향 데이터 흐름
- One-way Data Flow
- 리액트의 특징
- 컴포넌트의 단방향 통신
- 컴포넌트 간에 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게끔 프레임워크가 구조화되어 있는 것
가상 돔 렌더링 방식
빠른 화면 렌더링(Rendering)을 위해 리액트의 가상 돔 렌더링 방식을 적용
사용자 인터렉션(user interaction)이 많은 요즘의 웹 화면에 적합한 동작 구조를 갖춤
가상 돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신
-> 브라우저 입장에서는 성능 부하가 줄어들어 일반 렌더링 방식보다 더 빠르게 화면을 그릴 수 있다
📌 Vue 의 두 가지 핵심 기능
선언적 렌더링 (Declarative Rendering)
- Vue 는 템플릿 구문 {{ 데이터 }} 을 활용하여 데이터를 선언적으로 출력(렌더링)할 수 있도록 한다.
반응성 (Reactivity)
- Vue 는 Javascript 상태 변경을 자동으로 추적하고 변경이 발생하면 DOM을 효율적으로 업데이트 한다.
=> Vue 를 사용하면 자바스크립트를 사용하는 것보다 빠르게 어플리케이션을 제작할 수 있다
📙 바인딩 (v-bind)
- 엘리먼트 속성에 데이터를 바인딩(연결)
<!DOCTYPE html>
<html lang="en">
<head>
<title> Vue </title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<input type="text" v-bind:placeholder="message">
</div>
<script>
const Counter = {
data() {
return {
message: '텍스트를 입력해주세요'
}
}
}
Vue.createApp(Counter).mount('#app')
</script>
</body>
</html>v-bind 속성은 데이터(상태) 속성에 바인딩할 때 사용하는 특수 속성이다.
바인딩된 DOM은 placeholder 속성을 Vue 인스턴스의 message 속성으로 최신 상태를 유지한다 (반응형 동작)
그리고 이렇게 v- 접두어가 붙은 특수 속성을 디렉티브(directive) 라고 한다
📙 이벤트 핸들링(v-on)
사용자가 앱과 상호 작용할 수 있게 v-on 디렉티브를 사용하여 Vue 인스턴스의 메소드를 호출하는 이벤트 리스너를 추가할 수 있다
<p>{{ message }}</p>
<button type="button" v-on:click="reverseMessage">reverseMessage</button>
...
methods: {
reverseMessage() {
this.message = this.message
.split('')
.reverse()
.join('')
}
}이 방법은 직접적으로 DOM(p 엘리먼트)을 건드리지 않고 앱의 상태만 업데이트를 한다
즉, 모든 DOM의 조작은 Vue에 의해 처리되고 있다
📙 양방향 바인딩(v-model)
Vue는 양식(input, select 등) 의 입력과 앱의 상태(data)를 양방향으로 바인딩하는 v-model 디렉티브를 제공한다
<p>{{ bindingMessage }}</p>
<input type="text" v-model="bindingMessage" />
...
data() {
return {
bindingMessage: '안뇽',
};
},
📙 조건문
엘리먼트 표시여부는 v-if 특수 속성(디렉티브)으로 제어할 수 있다
<p v-if="visible">보이나요?</p>
<button type="button" v-on:click="visible = true">visible</button>
...
data() {
return {
visible: false,
};
},
📙 반복문
v-for 는 배열에서 데이터를 가져와 아이템 목록을 표시하는데 사용할 수 있다
<ul>
<li v-for="todo in todos">{{ todo }}</li>
</ul>
...
data() {
return {
todos: ['vue', 'react', 'js'],
};
},'Vue.js' 카테고리의 다른 글
| [Vue.js] Options API vs Composition API (0) | 2023.02.12 |
|---|---|
| [Vue.js] 컴포넌트에 대해 (0) | 2023.02.09 |
| [Vue.js] 뷰 컴포넌트 (0) | 2022.05.01 |
| [Vue.js] Vue Instance (0) | 2022.05.01 |
| [Vue.js] Vue.js 개발 환경 설정 (0) | 2022.04.30 |
