본문 바로가기

분류 전체보기56

[Vue.js] 인스턴스, 컴포넌트, 라우터, axios, 템플릿 문법, CLI *Vue는 무엇인가? MVVM 패턴의 뷰모델 (viewModel) 레이어에 해당하는 화면(view)단 라이브러리 *Reactivity 구현 Object.defineProperty(대상 객체, 객체의 속성, { //정의할 내용 }) // 객체의 동작을 재정의 하는 문법 ​ Object.defineProperty(viewModel, 'str', { // 속성에 접근했을 때 동작을 정의 get : function(){ console.log('접근'); }, // 속성에 값을 할당했을 때 동작을 정의 set : function(newValue){ console.log('할당', (newValue)); div.innerHTML = newValue; } }); ​ *Reactivity 라이브러리화 하기 라이브러리화.. 2021. 5. 6.
Vuex - 프로젝트 구조화 및 모듈화 *프로젝트 구조화와 모듈화 방법1 -아래와 같은 store 구조를 어떻게 모듈화 할 수 있을까? ​ 예제) // store.js import Vue form 'vue' import Vuex from 'vuex' ​ export const store = new Vuex.Store({ state : {}, getter : {}, mutations : {}, actions : {} }); ​ 힌트 : Vuex.Store({})의 속성을 모듈로 연결 ​ -ES6의 import & Export를 이용하여 속성별로 모듈화 import Vue from 'vue' import Vuex form 'vuex' import * as getters from 'store/getters.js' import * as mutatio.. 2021. 5. 3.
Vuex - 헬퍼 함수 *각 속성들을 더 쉽게 사용하는 방법 - Helper store에 있는 아래 4가지 속성들을 간편하게 코딩하는 방법 -state -> mapState -getters - > mapGetters -mutations -> mapMutations -actions -> mapActions ​ * 헬퍼의 사용법 -헬퍼를 사용하고자 하는 Vue파일에서 아래와 같이 해당 헬퍼를 로딩 ​ //App.vue import {mapState} from 'vuex' import {mapGetters } from 'vuex' import {mapMutations} from 'vuex' import {mapActions} from 'vuex' export default { computed(){... mapState(['num'].. 2021. 5. 3.
Vuex- 주요 기술 요소 Vuex 기술 요소 - state : 여러 컴포넌트에 공유 되는 데이터 data - getters : 연산된 state 값을 접근하는 속성 computed - mutations : state값을 변경하는 이벤트 로직, 메서드 methods - actions : 비동기 처리 로직을 선언하는 메서드 aysnc methods ​ *state란? - 여러 컴포넌트 간에 공유할 데이터 = 상태 ​ // vue data : { massage : " hello vue.js"; } //Vuex state : { message : "hello vue.js"; } ​ {{message}} ​ {{this.$store.state.message}} ​ *getters란? : state 값을 접근하는 속성이자 computed(.. 2021. 5. 3.
ES6 for Vue.js - Modules Modules : 자바스크립트 모듈화 방법 -자바스크립트 모듈 로더 라이브러리 (AMD, Commons JS)기능을 js 언어 자체에서 지원 -호출되기 전까지는 코드 실행과 동작을 하지 않는 특징이 있음 ​ * Vuex : 상태 관리 라이브러리 ​ 개요 -복잡한 애플리케이션의 컴포넌트들을 효율적으로 관리하는 Vuex라이브러리 소개 -Vuex 라이브러리의 등장 배경인 Flux패턴 소개 -Vuex 라이브러리의 주요 속성인 state, gatters, mutations, actions 학습 -Vuex를 더 쉽게 코딩할 수 있는 방법인 Helper기능 소개 -Vuex로 프로젝트를 구조화하는 방법과 모듈 구조화 방법 소개 ​ 목차 -Vuex 라이브러리 소개 -Flux 패턴 소개 -Vuex 컨셉과 구조 -Vuex .. 2021. 4. 30.
ES6 for Vue.js - Enhanced Object Literals (향상된 객체 리터럴) - Enhanced Object Literals : 향상된 객체 리터럴 1. 객체의 속성을 메서드로 사용할 때 function예약어를 생략하고 생성 가능 ​ var dictionary = { words : 100, ​ //ES5 lookup : function (){ console.log("find words"); }, ​ //ES6 lookup(){ console.log("find words"); } } ​ 2. 객체의 속성명과 값 명이 동일할 때 아래와 같이 축약 가능 예시1) var figures = 10; var dictionary = { // figures : figures figures }; ​ 예시2) components: { 'TodoFooter' : TodoFooter, 'TodoHead.. 2021. 4. 30.

티스토리툴바