#TIL_23.07.26

Leutbing·2023년 7월 26일

Vue.js

action

비동기 처리 로직을 선언하는 메서드. 비동기 로직을 담당하는 mutations
데이터 요청, Promise, ES6 async과 같은 비동기 처리는 모두 actions에 선언

기본 흐름

actions에서는 context 인자로 store의 메서드와 속성에 접근할 수 있다.

// store.js
state : {
	num : 10
},
mutations : {
	doubleNumber(state){
    	state.num * 2;
    }
},
actions : {
	delayDoubleNumber(context){ //context로 store의 메서드와 속성 접근
    	context.commit('doubleNumber');
    }
}
// App.vue
this.$store.dispatch('delayDoubleNumber');

비동기 코드 예제 1)

// store.js
mutations : {
	addCounter(state){
    	state.counter++
    },
},
actions : {
	delayedAddCounter(context){
    	setTimeout(()=> context.commit('addCounter'),2000);
    }
}

//App.vue
methods : {
	incrementCounter(){
    	this.$store.dispatch('delayedAddCounter');
    }
}

비동기 코드 예제 2)

//store.js
mutations : {
	setData(state, fetchedData){
    	state.product = fetchedData;
    }
},
actions : {
	fetchProductData(context){
    	return axios.get('https://domain.com/products/1')
      				.then(response => context.commit('setData',response));
    }
}

//App.vue
methods : {
	getProduct(){
    	this.$store.dispatch('fetchproductData');
    }
}

비동기 처리 로직은 action을 사용해야 하는 이유

언제 어느 컴포넌트에서 해당 state를 호출하고 변경했는 확인하기가 어렵다.

여러 개의 컴포넌트에서 mutations로 시간 차를 두고 state를 변경하는 경우이다.

즉, state 값의 변화를 추적하기 어렵기 때문에 mutations 속성에는 동기 처리 로직만 넣어야 한다.

Helper

각 속성들을 더 쉽게 사용하는 방법
Store에 있는 아래 4가지 속성들을 간편하게 코딩하는 방법

state → mapState
getter → mapGetters
mutations → mapMutations
actions → mapActions

사용법

헬퍼를 사용하고자 하는 vue 파일에서 해당 헬퍼를 로딩

import { mapState } from 'vuex'
import { mapGetters } from 'vuex'
import { mapMutations } from 'vuex'
import { mapActions } from 'vuex'

export default {
  computed() { ...mapState(['num']), ...mapGetters(['countedNum']) },
  methods : { ...mapMutations(['clickBtn']), ...mapActions(['asyncClickBtn']) }
}

mapState

Vuex에 선언한 state 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼

// App.vue
import { mapState } from 'vuex'

computed(){
	...mapState(['num'])
  	//num() { return this.$store.state.num; }
}

// store.js
state : {
	num : 10
}

<p>{{ this.num }}</p>

mapGetters

Vuex에 선언한 getters 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼

//App.vue
import { mapGetters } from 'vuex'

computed() { ...mapGetters(['reverseMessage']) }

//store.js
getters : {
	reverseMessage(state){
    	return state.msg.split('').reverse().join('');
    }
}

<!-- <p>{{ this.$store.getters.reverseMessage }}</p>-->
<p>{{ this.reverseMessage }}</p>

mapMutations

Vuex에 선언한 mutations 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼

mapMutations을 이용하는 방법 두가지가 있다.
['mutations에서 지정한 함수']

// App.vue
import { mapMutations } from 'vuex'

methods : {
	...mapMutations(['clickBtn']),
    authLogin(){},
    displayTable(){}
}

// store.js
mutations : {
	clickBtn(state){
    	alert(state.msg);
    }
}

<button @click="clickBtn">popup message</button>

@click="clickBtn" = v-on:click="clickBtn"

{ 이벤트 이름 지정 : 'mutations에서 지정한 함수'}

// App.vue
import { mapMutations } from 'vuex'

methods : {
	...mapMutations({
    	clickButton : 'clickBtn'
    })
}

// store.js
mutations : {
	clickBtn(state){
    	alert(state.msg);
    }
}

<button @click="clickBtn">popup message</button>

mapActions

Vuex에 선언한 actions 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼

//App.vue
import { mapActions } from 'vuex'

methods : {
	...mapActions(['delayClickBtn']),
}

//store.js
actions : {
	delayClickBtn(context){
    	setTimeout(() => context.commit('clickBtn), 2000);
    }
}

<button @click = "delayClickBtn">delay popup message</button>

헬퍼의 유연한 문법

Vuex에 선언한 속성을 그대로 컴포넌트에 연결하는 문법

// 배열 리터럴
...mapMutations([
  'clickBtn', // 'clickBtn' : clickBtn
  'addNumber' // addNumber(인자)
])

Vuex에 선언한 속성을 컴포넌트의 특정 메서드에다가 연결하는 문법

// 객체 리터럴
...mapMutations({
	popupMsg : 'clickBtn' // 컴포넌트 메서드 명 : Store의 뮤테이션 명
})

JAVA

객체 지향 프로그래밍 (OOP : Object-Oriented Programmin)

장점

유지보수 용이
높은 재사용성

Class

클래스 파일

형태
클래스명 객체이름 = new 클래스명
BlackBox 클래스로부터 bbox 객체 생성

//호출 파일
BlackBox bbox = new BlackBox()

클래스변수 선언

static을 붙여주면 된다.
static 변수는 클래스 변수이다.
공통적으로 적용해야되는 상황이 있다면 그 변수는 인스턴스 변수가 아닌 클래스 변수로 생성하면 된다.

boolean 예시

//BlackBox 파일
static boolean canAutoReport = false;

인스턴스를 생성하지 않고 클래스명으로 접근 할 수 있다.

BlackBox.canAutoReport
BlackBox.canAutoReport = true;
System.out.println(" - 개발 후 -");
System.out.println(b1.modelName + "자동 신고 기능 :" + b1.canAutoReport); //true
System.out.println("모든 블랙박스 제품 자동 신고 기능 : "+BlackBox.canAutoReport); //true