dev_0hoon

https://vuejs.org/guide/extras/composition-api-faq.html Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org공식사이트의 설명 https://joshua1988.github.io/vue-camp/reuse/composition.html Composition API 🆕 | Cracking Vue.js컴포지션 API Vue 2Vue 3 컴포지션(Composition API)은 컴포넌트 코드 재사용성을 높여주는 API입니다. Vue 2에서 플러그인 형태로 지원 (opens new window)되다가 Vue 3부터 라이브러리 공식 API로 채택되었습니joshua1988.github.io캡틴판교의 설명 option..

mapState- Vuex에 선언한 state 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼//App.vueimport {mapState} from 'vuex'computed() { ...mapState(['num']) // num() {return this.$store.state.num}}//store.jsstate: { num: 10}{{this.$store.state.num}} -->{{ this.num }} mapGetters- Vuex에 선언한 getters 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼//App.vueimport { mapGetters } from 'vuex'computed() { ...mapGetters(['reversMessage']) }// store.jsgetters: ..

mutations- state의 값을 변경할 수 있는 유일한 방법이자 메서드- 뮤테이션은 commit()으로 동작시킨다.//store.jsstate: {num :10},mutations: { printNumbers(state) { return state.num }, sumNumbers(state, anotherNum) { return state.num + anotherNum; }}//App.vuethis.$store.commit('printNumbers');this.$store.commit('sumNumbers', 20);//store.jsstate: { storeNum: 10},mutations: { modifyState(state, payload) { console.l..

개요 - 복잡한 애플리케이션의 컴포넌트들을 효율적으로 관리하는 Vuex 라이브러리 소개- Vuex 라이브러리의 등장 배경인 Flux 패턴 소개- Vuex 라이브러리의 주요 속성인 state, getters, mutations, actions 학습- Vuex를 더 쉽게 코딩할 수 있는 방법인 Helper 기능 소개- Vuex로 프로젝트를 구조화 하는 방법과 모듈 구조화 방법 소개 지금까지 배운 뷰의 지식으로 쉽게 말하면 아래는 이렇다.state - datagetters - 컴퓨티드mutations - 메소드actions - 비동기메소드 Flux란?- MVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴 - Undirectional data flowAction -> Dispatcher -> Model..

Moudules - 자바스크립트 모듈화 방법- 자바스크립트 모듈 로더 라이브러리 (AMD, Commons JS)기능을 js 언어 자체에서 지원- 호출되기 전까지는 코드 실행과 동작을 하지 않는 특징이 있음// libs/math.jsexport function sum(x, y) { return x + y;}export var pi = 3.14593;//main.jsimport {sum} from 'libs/math.js'sum(1, 2); //util.jsexport default function(x) { return console.log(x);}//main.jsimport util from 'util.js'console.log(util); // function (x) {return console.log(..

- 객체의 속성명과 값 명이 동일할 때 아래와 같이 축약 가능var figures = 10;var dictionary = { //figures: figures, figures}

- 객체의 속성을 메서드로 사용할 때 function 예약어를 생략하고 생성 가능 var dictionary = { // ES5 lookup : function() { console.log('found stg'); }, lookup() { console.log('found stg'); }}: function() 생략 가능

Arrow Function - 화살표 함수- 함수를 정의할 때 function 이라는 키워드를 사용하지 않고 => 대체- 흔히 사용하는 콜백 함수의 문법을 간결화// ES5 함수 정의 방식var sum = function(a, b) { return a + b;}// ES6 함수 정의 방식var sum = (a, b) => { return a + b;}sum(10, 20); 화살표 함수 사용 예시// ES5var arr = ["a", "b", "c"];arr.forEach(function(value) { console.log(value); //a, b, c});// ES6var arr = ["a","b","c"];arr.forEach(value => console.log(value));글자수가 적어짐에 은..