TIL- 1회차

2021.02.13

velog 블로그 첫 시작

1회차

• 블로그에 첫 글쓰기

• Vue3 기본 공부

vue

Vue.js란?

• 공식문서를 참고하였습니다.
  Vue.js - 번역판(vue2.x버전까지 번역)
  Vue.js - 영문판(최신 버전인 vue3내용 추가)
• 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 이다. Vue는 점진적으로 채탈할 수 있도록 설계되었습니다.
• Vue.js는 뷰 레이어에 특화된 라이브러리입니다..
• MVVM패턴, 프로그레시브 프레임워크에 영향을 받은 설계사상으로 인해 점진적으로 필요한 기능 및 라이브러리나 기존의 프로젝트와의 통합이 용이합니다.

프로그레시브(Progressive) 프레임워크 : 점진적인 개선을 통해 작성, 애플리케이션의 규모와 어떤 브라우저를 선택하든 상관없이 단계적으로 유연한 적용이 가능합니다.

MVVM패턴 : 마틴 파울러의 Presentation 모델 패턴에서 파생된 디자인 패턴입니다. MVVM 패턴의 목표는 비즈니스 로직과 프레젠테이션 로직을 UI로부터 분리하는 것입니다. 비즈니스 로직과 프레젠테이션 로직을 UI로부터 분리하게 되면, 테스트, 유지 보수, 재사용이 쉬워집니다.
모델(Model), 뷰(View), 뷰 모델(View Model)로 구성됩니다.

특징

• 낮은 학습 비용 : Vue.js는 상세한 문서와 가이드를 제공하는 공식 문서가 존재하며, 한국어 번역 페이지도 제공하고 있습니다.
  Vue코어 라이브러리와 함께 다양한 라이브러리를 지원하며, 라우터에는 공식적으로 지원하는 vue-router가 있으며, 상태관리를 위한 라이브러리로 vuex가 존재한다. 또한 Vue.js가 제공하는 강력한 툴링 기능인 vue-cli는 라우팅, vuex, eslint, css전처리, test 등의 개발환경을 새로운 프로젝트에 쉽게 구축해줍니다.
• 싱글 파일 컴포넌트 : 코드의 재사용성과 유지보수의 효율성을 높이기 위해 UI 및 기능들을 작은 단위로 쪼개어 관리할 수 있습니다. 다양한 프레임워크들이 이미 컴포넌트 기반의 개발 방식을 지니고 있습니다. Vue.js에서 제공하는 싱글 파일 컴포넌트(Single File Component)는 확장자가 .vue인 하나의 파일에 템플릿(HTML), 로직(Javascript), 스타일(Style) 코드로로 구성됩니다.

<template>
  <p>{{ greeting }} World!</p>
</template>

<script>
module.exports = {
  data: function () {
    return {
      greeting: 'Hello'
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

Vue.js 공식문서의 싱글 파일 컴포넌트 소개 내용

주목해야 할 중요한 점은 관심사 분리가 파일 타입 분리와 같지 않다는 것입니다. 현대적인 UI 개발에서 코드베이스를 서로 얽혀있는 세 개의 거대한 레이어로 나누는 대신, 느슨하게 결합 된 컴포넌트로 나누고 구성하는 것이 더 중요합니다. 컴포넌트 내부에서 템플릿, 로직 및 스타일이 본질적으로 결합되어 배치되면 컴포넌트의 응집력과 유지 보수성이 향상됩니다.

기존의 구조와 표현 및 동작이 각기 다른 파일로 나뉘는 방식을 하나의 파일에 느슨하게 결합된 것임을 알 수 있습니다. 어떠한 뷰의 레이아웃을 각 파트들이 트리 형태로 구성되듯이, 싱글 파일 컴포넌트를 활용하면 이에 대응되는 컴포넌트를 트리 구조로 구성하여 개발할 수 있습니다.

• Virtual DOM 지원 : Vue.js 2.0에 Virtual DOM이 추가 되었습니다.

  Virtual DOM은 HTML DOM의 추상화 개념이며 DOM의 복사본을 메모리 내에 저장하여 사용합니다. 즉, 실제 DOM에 접근하여 변경사항을 반영하는 것이 아닌 메모리에 Virtual DOM을 생성하여 JavaScript 객체를 변경하기에 화면 전체를 다시 렌더링하지 않으며, 비용이 훨씬 저렴합니다.

• 리액티브 데이터 바인딩 & 양방향 데이터 바인딩 : Vue.js 는 DOM요소와 리액티브 데이터 바인딩을 통해 자바스크립트 데이터를 연결해 줍니다.

  리액티브 데이터 바인딩 : HTML 템플릿 안에서 대상 DOM 요소에 바인딩 을 지정해 Vue.js 가 해당 데이터의 변화를 감지할 때마다 바인딩된 DOM 요소에 표시되는 내용도 함께 업데이트하는 것을 의미합니다.

• 단방향 데이터 바인딩 : 상위 컴포넌트에서 하위 컴포넌트 방향으로 데이터를 전달하는 구조입니다.

  값이 자바스크립트에서 DOM요소로 일방적으로 전달됩니다. 자바스크립트쪽에서 위치한 데이터 값이 변경되면 변경된 값이 웹 페이지에도 자동으로 반영되는 기능입니다.

• 양방향 데이터 바인딩 : 어느 한쪽이 변경되면 다른 한쪽도 동기화되어 변경되는 구조입니다.

  input 요소등 사용자의 입력을 받는 DOM요소는 요소에서 받아온 데이터와 자바스크립트 데이터를 서로동기화하는 바인딩을 지정합니다. 이런 경우 자바스크립트의 데이터 값이 변경될때마다 DOM요소의 표시 내용이 수정되며, 사용자의 입력이 감지될때마다 자바스크립트 데이터가 수정됩니다. 이런 방법으로 자바스크립트 데이터와 DOM요소 데이터의 동기화 상태를 유지하고, 자바스크립트와 DOM요소가 서로 최신 데이터를 주고받을 수 있습니다.