수민정의 기술블로그

개요 뷰를 통해 대규모, 소규모 App 을 만들때 html 파일에 Vue 코드를 다 끼워 넣는 일은 Vue 가 가지는 컴포넌트 기반의 특성을 무시하는 일과도 같다. 재사용성, 가독성, 직관성 을 얻게해주는 MVVM 모델의 장점이 무너지는 것으로 보인다. 그러므로 Single File Component 를 이용하여 .vue 파일로 컴포넌트를 나누고 ES6 와 연계하여 코드의 가독 성과 직관성, 재사용성을 꾀한다. 이를 위한 Project 구조, 파일, 기능 등을 만들어주는 것이 Vue CLI 이다. Vue CLI Single File Component 체계를 위해서 .vue 파일을 웹 브라우저가 이해할 수 있는 형태의 파일로 변환해주어야한다. 이런 기능을 제공해주는 녀석들은 Module Bundler 라고..

Vue Template Vue Template 는 HTML CSS 등 과 기술한 JS 로직들과 연결시켜 사용자가 볼 수 있는 DOM 으로 렌더링하는 속성이다. 내부적으로 React 의 Virtual DOM 기반, render() 함수를 호출하여 ( Vue LifeCycle 의 beforeMount ) 화면을 그린다. 이때 Vue 의 Reactivity 가 화면에 더해진다. doli0413.tistory.com/713?category=951835 2.Vue Instance 와 속성, 라이프 사이클 개요 Vue Instance 란 필수적으로 생성해야만 하는 기본적 단위이다. Vue Instance 가 DOM Element 에 마운팅 되기 때문에 템플릿 기호에 Vue Instance 에 정의한 data() {..

Axios 는 Ajax 와 같이 Vue 에서 제공하는 HTTP 통신 라이브러리 이다. Promise 기반의 API 형식이 제공되는 등 주어진 API 로도 충분히 원하는 로직을 작성 가능하다. NPM npm i -g axios --save 임포트 사용법은 Ajax 와 굉장히 유사하다. cli 로 다운로드 받아 package.json 에 추가했을 시에 import 시켜주면 된다. {{MainPageGreeting}} GuidePage InfoPage 러닝 가이드 xn--xy1bk56a.run/axios/guide/api.html#%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-%EB%A9%94%EC%84%9C%EB%93%9C API | Axios 러닝 가이드 API 구성(configurat..

개요 Routing 이란 웹 페이지 간의 이동 방법 이다. SPA 싱글페이지 어플리케이션에 사용되며 이는 미리 페이지를 받아 놓고 클라이언트의 라우팅을 사용하여 화면을 전환시키는 방법을 말한다. 소위 말하는 깜빡임 (새로고침) 이 없기에 UX 가 상승된다. Vue 에서는 이를 위해 Vue Router 를 제공한다. Vue Router 에서 제공하는 태그 : anchor 태그로서 지정한 URL 로 이동시킨다. : URL 에 맞는 컴포넌트를 뿌려주는 영역이다. URL 에 따라 유동적으로 변화한다. SingFileComponent 체계에서의 Vue Router 일단 package.json 에 vue-router 를 등록시키고 설치해야한다. npm i vue-router --save router 의 설정을 정의..

컴포넌트란 화면을 구성하는 하나의 영역이다. 화면을 구조화하여 같은 패턴으로 개발하거나 재사용할 수 있게 해준다. 각 컴포넌트는 Root Component 밑에 있으며 Tree 형식을 가진다. Single File Compoent 의 전역 컴포넌트와 지역 컴포넌트 전역 컴포넌트는 main.js 에서 Vue 변수에 component() 를 사용하여 등록하면 된다. 지역 컴포넌트는 export -> import 문으로 가져다가 쓸 수 있다. 보통 이 방법을 사용한다. 지역 컴포넌트는 Vue 생성자에 components 속성으로 {이름:컴포넌트} 를 기재한다. import Vue from 'vue' import App from './App.vue' import globalComponent from "@/com..

개요 Vue Instance 란 필수적으로 생성해야만 하는 기본적 단위이다. Vue Instance 가 DOM Element 에 마운팅 되기 때문에 템플릿 기호에 Vue Instance 에 정의한 data() {} 속성이 적용되는 것이다. 보통 정의된 생성자를 통해 new 연산자로 만들어내며 SingleFileComponent 에서는 .vue 파일에 정의된 script 란에 속성을 정의하여 Vue Instance 를 생성해 낸다. el, name 처럼 부착될 DOM Element 를 지정하며 이는 Vue가 전역 Component 인지, 지역 Component 인지 판가름하는 중요한 사항이다. SingleFileComponent 에서는 export -> import 문으로 Component 를 끌어다쓴다...

MVVM 패턴 이란 Model - View - View Model 패턴을 말한다. 화면의 요소를 제어하는 코드 , 데이터를 제어하는 로직을 분리시켜 코드를 직관적이게 만든다. View 는 사용자가 보는 화면이다. DOM 은 HTML 정보를 담은 Tree DOM Listener 는 DOM 의 변경사항에 반응하여 로직을 실행시키는 장치이다. Model 은 데이터를 담은 용기 VM 이라고 불리는 View Model 은 View 와 Model 의 중간에 있으며, DOM Listener 와 Data binding 을 가진다. 예를 들면, Click . KeyUp KeyPress 같은 이벤트가 발생시에 DOM LIstener 가 이를 감지하고 기술된 로직을 실행한다. 여기서 Data Binding 이 작동하며, D..

v-model 은 동적으로 입력값을 받아 Vue Instance 에 매핑시키는 역할을 한다. v-on:이벤트 = 작동 메서드 | 일어나는 이벤트를 감지하여 Vue Instance 의 methods 속성에 기재한 로직을 실행한다. 하위 컴포넌트의 This 는 거슬러 올라가 Root Component 까지 간다. 추측하기에 ES6 의 Arrow Function 은 바인딩이 컴포넌트 안에서 머무는 듯 하다. 바인딩이 안된다. 어디까지나 추측이다. v-for 는 for-in 문으로 순회를 돌린다. v-bind:key 로 key 를 지정하여 순회속도를 가속화시킨다. Object.entries() 는 Object 를 Map 으로 변환시키며 순회 메서드를 사용하게 해준다. {{todoItem}} 객체를 저장시킬때 O..

사용자 스스로로 하여금 크기를 조정할 수 있게 해주는 태그이다. 해당 설정은 index.html 에 넣어주면 된다. 파비콘 웹 페이지 제작시 Title 옆에 뜨는 아이콘. www.favicon-generator.org/ Favicon & App Icon Generator Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons. www.favicon-generator.org index.html 에 추가해준다. AweSome Incon fontawesome.com/how-to-use/customizing-wordpress..

ES5 var cmp = { template : 'my component' }; new Vue({ el:'', components: { 'my-cmp':cmp } }); ES6