본문 바로가기

💻WEB FrontEnd/프레임워크 Vue

(17)

재사용 & 컴포지션(2) - 사용자 지정 디렉티브 참고한 사이트 v3.vuejs-korea.org/ko-kr/guide/custom-directive.html 1. 사용자 지정 디렉티브 Vue는 코어에 포함된 기본 디렉티브 세트 외에도 사용자 정의 디렉티브를 등록할 수 있다. 1) 디렉티브 등록 방법 사용자 지정 디렉티브를 등록하는 방법은 2가지 방법이 있다. 전역으로 등록하는 방법 로컬 검포넌트에 등록하는 방법 전역 선언 Vue 인스턴스 선언하기 전에 Vue.directive 전역 등록을 시켜준다. // 전역 사용자 정의 디렉티브 v-focus 등록 Vue.directive('focus', { // 바인딩 된 엘리먼트가 DOM에 삽입되었을 때... inserted: function (el) { // 엘리먼트에 포커스를 줍니다 el.focus() } }..

재사용 & 컴포지션(1) - 믹스인 믹스인은 이름이 나타내고 있는 것처럼 컴포넌트에 무언가를 섞어 원하는 것을 구현하는 기능이다. 믹스인을 구현하고 동작시키는 과정을 순서대로 쓰면 아래와 같이 정리할 수 있다. 1. 믹스인할 객체를 만들고 2. 컴포넌트에 객체를 믹스인하고 3. 나머지 부분을 구현해 완성한다 참고한 사이트 kr.vuejs.org/v2/guide/mixins.html velog.io/@bluestragglr/Vue.js-Mixin 1. 기초 Mixins는 Vue 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법이다. mixin 객체는 모든 구성 요소 옵션을 포함할 수 있다. 컴포넌트에 mixin을 사용하면 해당 mixin의 모든 옵션이 컴포넌트의 고유 옵션에 “혼합”된다. // mixin 객체 생성 var myMixin ..

인라인 스타일 바인딩 1. 객체 구문 1) v-bind 인라인 스타일 바인딩 이용 v-bind:style 객체 구문은 매우 직설적으로, 거의 CSS 처럼 보이지만 JavaScript 객체이다. 속성 이름에 camelCase와 kebab-case를 사용할 수 있다. data: { activeColor: 'red', fontSize: 30 } 2) 스타일 객체에 직접 바인딩 하여 템플릿이 더 간결하도록 만드는 것이 좋다. data: { styleObject: { color: 'red', fontSize: '13px' } } 2. 배열 구문 v-bind:style에 대한 배열 구문을 이용하여 여러 개의 스타일 객체를 사용할 수 있다. 3. 자동 접두사 v-bind:style에 브라우저 벤더 접두어가 필요한 CSS 속성 (예: tr..

클래스 바인딩 v-bind 디렉티브를 사용할 때 class와 style을 사용해 원하는 스타일링을 할 수 있다. v-bind:class="클래스명" v-bind:class="{ 클래스명: 조건 }" 위처럼 v-bind:class는 문자열과 객체 또는 배열을 둘 다 받을 수 있다. 객체를 받은 경우에는 클래스명은 객체의 속성 키에, 해당 클래스가 적용되야 하는 조건이 속성 값으로 들어간다. 1. 객체 구문 1) v-bind 클래스 바인딩을 이용한 클래스 토글 클래스를 동적으로 토글하기 위해 v-bind:class에 객체를 전달할 수 있다. 아래 구문은 active 클래스의 존재 여부가 데이터 속성 isActive의 참 속성에 의해 결정된다. 2) 여러 클래스 토글 여러 클래스를 토글하려면 아래 코드와 같이 객체에 필드를..

v-model 바인딩 캡틴판교님의 게시물을 참고해 작성된 내용입니다. 1. v-model v-model 지시자는 애플리케이션 모델에 폼 데이터를 연결할 때 사용된다. ※ 바인딩 지시자 v-bind v-model 주로 HTML 속성 바인딩에 사용 주로 입력과 폼 바인딩에 사용 2. v-model 사용법 1) v-model 사용해 바인딩 new Vue({ data: { inputText: '' } }) 2) v-bind와 v-on을 사용해 바인딩 new Vue({ data: { inputText: '' }, methods: { updateInput: function(event) { var updatedText = event.target.value; this.inputText = updatedText; } } }) 1번 방법과 2..

CSR와 SSR의 장단점 을 기본으로 배운 내용입니다. 목차 SPA - CSR MPA - SSR 페이지를 렌더링하는 방법에 따라 SPA와 SSR로 나눌 수 있다. 1. SPA 첫 요청시 딱 한 페이지만 불러오고 페이지 이동시 기존 페이지의 내부를 수정해서 보여주는 방식 SPA(single page application)은 클라이언트 사이드 렌더링(CSR, client side rendering) 방식으로 어플리케이션 생명 주기 중에서 단 한 번만 리소스를 로딩하고, 그 후에는 데이터를 받아올 떄만 서버와 통신한다. 장점 자연스러운 사용자 경험 필요한 리소스만 부분적으로 로딩 서버의 템플릿 연산을 클라이언트로 분산 컴포넌트별 개발 용이 모바일 앱 개발을 염두에 둔다면 동일한 API를 사용하도록 설계 가능 단점 JavaScript ..

vue의 반응성 reactivity 을 기본으로 배운 내용입니다. 목차 1. 반응성 1-1) vue가 변경 내용을 추적하는 방법 1. 반응성 vue가 데이터 변화를 감지했을 때 자동으로 화면을 다시 갱신하는 특성 반응성에 대해 알면 아래와 같은 방법들을 익힐 수 있다! 프레임워크 내부적으로 화면을 그리는 방법 가상 돔이 동작하는 방법 화면을 빠르게 그리기 위해 브라우저에 부하를 주지 않고 돔을 추가,삭제하는 방법 1-1) vue가 변경 내용을 추적하는 방법 Vue 인스턴스에 JavaScript 객체를 data 옵션으로 전달한다. Vue는 모든 속성에 Object.defineProperty를 사용하여 getter/setters로 변환한다. ※ getter / setter 는 사용자에게는 보이지 않으나 속성에 액세스 하거나 수정할 때 Vue가..

Vuex 을 기본으로 배운 내용입니다. 목차 1. 상태 관리 2. Vuex 3. state 4. Getters & Mutations 5. Actions 6. Vuex 헬퍼 함수 (mapGetters, mapMutations, mapActions ) 참고한 사이트 joshua1988.github.io/web-development/vuejs/vuex-start/ joshua1988.github.io/web-development/vuejs/vuex-getters-mutations/ joshua1988.github.io/web-development/vuejs/vuex-actions-modules/ 1. 상태 관리 1-1) 상태 관리 상태 관리란 여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 패턴을 ..

Single File Components 체계 을 기본으로 배운 내용입니다. 참고하면 좋을 게시물 kr.vuejs.org/v2/guide/components.html 1. Single File Components 체계 .vue 파일로 프로젝트 구조를 구성하는 방식 (.vue 파일 1개 = 컴포넌트 1개) 1) .vue 파일의 기본 구조 ex) "컴포넌트명.vue" 파일 {{message}} 2. 컴포넌트 생성하고 등록하기 1) 컴포넌트 생성 프로젝트 폴더의 src폴더 밑에 components폴더 생성 components폴더 안에 "컴포넌트명.vue"파일들을 컴포넌트별로 생성해준다. .vue파일 안에 코드는 아래와 같이 모두 작성해준다. header 2) 컴포넌트 등록 애플리케이션에서 사용할 컴포넌트들은 모두 최상위 컴포넌트인 App.vue에 등록해야..

Vue의 template속성 을 기본으로 배운 내용입니다. 목차 1. 데이터 바인딩(Data Binding) 2. 디렉티브(Directive) 3. 고급 템플릿 기법 template이란 뷰로 화면을 조작하기 위해 제공되는 문법이다. template속성은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해준다. 사용자가 볼 수는 없지만 라이브러리 내부적으로 template속성에서 정의한 마크업+뷰 데이터를 가상 돔 기반의 render()함수로 변환한다. 변환된 reder()함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할을 한다. - temlate속성을 사용하는 방법 1. ES5 2. ES6 : 싱글 파일 컴포넌트 체계 Hello..

이전 1 2 다음

티스토리툴바