다른

간단하게 주석으로 간략 기능정리.

<template>
  <div>
    <button @click="changeText">{{ text }}</button>
    {{ watchMessage }}
    
    <h1>함수 호출 값 : {{ changeText() }}</h1>
    <h1>함수 호출 값 : {{ changeText() }}</h1>
    <h1>함수 호출 값 : {{ changeText() }}</h1>

    <!-- computed는 데이터로 인식되어 함수 호출시에도 ()를 쓰지 않음.  -->
    <h1>computed 함수 호출 값 : {{ computedText }}</h1>  
    <h1>computed 함수 호출 값 : {{ computedText }}</h1>
    <h1>computed 함수 호출 값 : {{ computedText }}</h1>
    <!-- console.log 를 보면 computed를 세번 호출했지만 캐싱으로 인해 실제 호출은 한번만 수행됨 -->
  </div>
</template>
<script>
export default {
    data() {
      return {
        // vue 에 사용될 변수는 여기서 선언
        text : 'vue test 문구 입니다.',
        watchMessage : ''
      }
    },  
    methods: {
      // methods : 사용할 함수는 여기서 정의
      changeText() {
        // 변수가 객체 접근시 this 키워드 이용.
        console.log('일반 mothods로 호출');
        this.text = '변경됨.'
      }
    },
    computed: {
      // computed : 캐싱기능이 있어 내부 로직 수행은 한번만 함.
      // methods와 사용법은 동일하나 return 이 필수. 
      // 형태는 함수지만 데이터로 인식됨.
      computedText() {
        console.log('computed를 생성하였습니다.')
        return this.text.split('').reverse().join('')
      }
    },
    watch: {
      // watch: 변수에 트리거를 걸어둔다. 해당 변수 값이 변경됨을 감지하면 실행됨.
      // 사용예 : paging 번호 클릭 처리 시 
      text(){ // 내가 감시할 변수와 같은 명칭의 함수를 생성하는 것이 필요함.
        this.watchMessage = 'watch 동작함'
      }
    },
}

</script>
<style>
  
</style>

아래와 같은 URL 이 있다고 치자. 

http://localhost:8080/id/abcd.efg

 abcd 와 efg 사이에 점 ( . )이 있다.

@slf4j
@RequestMapping(value = {"/id/{userId}"}
public String TestController(@PathVariable String userId) {
	log.info(userId);
    .
    .
}

url에 해당하는 컨트롤러에서는 

"abcd" 만 출력하게 된다.

abcd 다음에 들어간 점( . ) 이후로는 인식되지 않는다.

@도 마찬가지.

이럴때는

@slf4j
@RequestMapping(value = {"/id/{userId:.+}"}
public String TestController(@PathVariable String userId) {
	log.info(userId);
    .
    .
}

위처럼 

@RequestMapping 의 url에 해당하는 곳 뒤쪽에 ":.+" 를 붙여 넣어주자.

그럼 점( . ) 같은 문자도 정상적으로 문자로 인식한다.

약관동의 관련 작업을 하면서

체크박스 전체 선택 처리와 validation 체크 구현이 필요하여 작업한 내용을 정리해본다.

* HTML 영역

<input type="checkbox" v-model="agreeAll" value="all"> <!-- 전체선택 -->

<input type="checkbox" v-model="agreeChecked" value="agree1"> <!-- 동의1 -->
<input type="checkbox" v-model="agreeChecked" value="agree2"> <!-- 동의2 -->

* Script 영역

data: function () {
    return {
    	.....
    	agreeCheckList: ["agree1", "agree2"],	// 비교를 위한 전체 CheckList 변수
    	agreeChecked: [],			// 체크 된 목록을 담을 배열 변수
    	....
    }
},
computed: {
    agreeAll: {
        get: function () {
            return this.agreeCheckList.length === this.agreeChecked.length;
        },
        set: function (event) {
            this.agreeChecked = event? this.agreeCheckList : []; // 전체 대상을 넣거나 비우는 역할
        },
    }
}

간단히 설명하면

1. 전체선택 v-model 인 agreeAll 은 computed 로 만들어 줌.

2. agreeCheckList 는 전체 선택시 대상이 되는 모든 value 값을 미리 넣어두어 실제 체크 된 항목과 비교하기 위함.

3. agreeChecked는 실제 체크 된 항목만 저장되는 model

* 동의 여부 체크 로직

// 체크여부 확인
if( this.agreeChecked.length !== this.agreeCheckList.length ){

    const notChecked = this.agreeCheckList.filter(v => !this.agreeChecked.includes(v));
    if( notChecked[0] === "agree1") {
        alert('agree1는 필수입니다.');
        return;
    }
    if( notChecked[0] === "agree2") {
        alert('agree2는 필수입니다.');
        return;
    }
}

agreeCheckList 에 필터를 사용하여 agreeChecked 에 없는 항목을 리턴받아 처리하였다.

반복문으로 처리할까 하다가 항목이 두개뿐이라서 필터로 구현했다.

ref 와 reactive 는 vue3에서 추가된 Composition api로, 이를 이용하여 반응형 data를 사용할 수 있다.

*특징
- ref : 어떤 타입이든 사용가능. 주로 원시타입 변수 사용.
- reactive : Object, Array등 객체타입만 사용가능.

*접근 방식
- ref : 
  script에서 사용 시 : .value 를 붙여 사용 

// 스크립트에서 ref 사용하기
import {ref} from "vue"; // vue에서 ref 객체 import
const 변수명 = ref(초기값); // 초기값은 option.

//example
<script>
  const refParam = ref();
  refParam.value = "ref 테스트"; // 값 변경
  console.log(refParam.value); // 값 출력
</script>

 vue tag에서 사용시 : {{변수명}} 로 사용

// tag 에서 ref사용
<template>
  {{refParam}}
</template>

<script>
  import {ref} from "vue";
  const refParam = ref("test1234");
</script>

  tag 속성에서 사용시 : 속성명 앞에 콜론(:)추가 및 변수명 그대로를 사용

// tag 에서 ref사용
<template>
  <div>
  	<Button :label=refParam />
  </div>
</template>

<script>
  import {ref} from "vue";
  const refParam = ref("test1234");
</script>

 - reactive

// reactive 사용하기

<template>
   <!-- {{객체명.변수명}} 과 같이 일반 object 처럼 사용한다 -->
  {{reactiveParam.param1}}
  {{reactiveParam.param2}}
</template>

<script>
  import {reactive} from "vue";	// vue에서 reactive import

  const reactiveParam = reactive({
    param1: 1,
    param2: "문자열"
  })
</script>

Spring Cloud의 오픈소스. 

MSA의 기반 구조가 되는 Service Discovery 의 한 종류로 IP, PORT, ID값을 저장 / 관리하는 Rest 기반 미들웨어 서버.

 * Service Discovery : MSA에서 다수의 서비스 관리가 필요함에 따라 서비스 호출 경로 등의 정보들을 저장, 관리하는 것.  

  => 클라이언트가 서비스 호출 시 해당 서비스의 위치를 Eureka 에게 물어봄. (굳이 물어보는 이유? MSA에서는 서비스들의 IP와 PORT가 지속적으로 변함. 이를 관리하고 있는것이 Eureka 이기 때문.)

간단한 설정과 서비스별 LB(로드밸런싱) 이 가능한 장점.

Eureka 는 Server 와 Client로 나눔.

 - MSA 내 Client 서비스가 시작되면 유레카 Server  에 해당 Client 등록됨.

 - 주기적으로 ping으로 서버를 확인하며 리스트를 관리함.