Study Note

CommandLineRunner

• SpringBoot Application을 시작할 때 특정 코드를 실행하기 위한 인터페이스
• 이 인터페이스를 구현한 빈은, SpringBoot Application이 시작될때 실행된다.

예제

SayHello.java

package hello.hellospring;

import org.springframework.stereotype.Component;

@Component
public class SayHello {
    public void say(String greeting) {
        System.out.println("say hello : " + greeting);
    }
}

• 간단한 인사말을 출력하는 클래스

HelloCommandLineRunnser.java

package hello.hellospring;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.CommandLineRunner;
import org.springframework.stereotype.Component;

@Component
public class HelloCommandLineRunner implements CommandLineRunner {

    @Autowired
    private SayHello sayHello;

    @Override
    public void run(String... args) throws Exception {
        sayHello.say("Hello!!!!");
    }
}

• CommandLineRunner 인터페이스의 run() 메소드를 구현하고 있다.
• run() 메소드에서는 SayHello의 say() 메소드를 호출한다.
• 따라서, 이 코드는 SpringBoot 어플리케이션이 실행 시작 지점에,
  SayHello의  say() 메소드를 호출한다.

결과

methods

정의

methods {
   add(num) {
      this.num += num;
   }
}

사용

<button v-on:click="add(10)"> add 10 </button>

• 템플릿에서 데이터를 바인딩할 때 사용한다.
• data binding, event binding
• 컴포넌트의 렌더링 주기에 맞춰 매번 수행된다.
• 따라서, event binding에서는 methods를 주로 사용한다.

computed

정의

computed: {
   number() {
      return this.num + 10;
   }
}

사용

<div>Added Number : {{ number }}</div>

• data binding에만 사용된다.
• event binding에는 사용되지 않는다.
• 다른 데이터를 기반으로 하는 데이터를 가져오기 유용하다.
• 의존하는 데이터가 변경될 때만 재실행되거나 재평가된다.
  (다른 데이터가 변경될 때는 재평가 되지 않는다)
• 따러서, 다른 데이터에 의존하는 데이터에 주로 사용한다.
• 연산을 하는 함수이지만, 결과를 데이터처럼 사용할 것이기 때문에,
  이름을 addNumber() 라고 짓지 않고, data를 다루듯이 number() 라고 하였다.

watch

정의

watch: {
   number(newValue, oldValue)	{
      this.number = newValue + 10;
   }
},
data() {
  return {
     number: 0
  }
}

사용

<div>Added Number : {{ number }}</div>

• 템플릿에 직접 사용하지 않는다.
• 템플릿 내부에서 참조하지 않지만, data, computed property를 포함한 어느 property든 감시할 수 있다.
• 데이터 변경에 대한 반응(reaction)을 코드로 실행할 수 있다.
• ex) http request, timer 설정, local storage에 데이터 저장
• 주로, 데이터가 아닌 업데이트에 watch를 사용
  (바뀌는 데이터를 토대로, 데이터가 아닌 내부에서 업데이트하는 작업이 있는 경우 사용)
• 바뀌기 전의 값과 갱신후의 값을 파라미터로 받을 수 있다.

[참조]

• Udemy
  Vue - 완벽 가이드 (Router 및 Composition API 포함)
  https://www.udemy.com/share/107reM/

v-model (양방향 바인딩)

자동으로 input의 value로 입력된 값이

Vuejs의 data와 바인딩 된다.

입력 이벤트가 발생하면, 입력된 값을 Vuejs의 data의 name 속성에 바인딩하고,

이를 통해 Vuejs의 data의 name 속성 값이 바뀌면, 그 값이 input의 value에 바인딩된다.

양방향으로 통신하기 때문에, 양방향 바인딩이라고 한다.

<input type='text'
    v-model='name'>

아래의 코드와 동일하다고 보면 된다.

<input type='button'
    v-bind:value='name'
    v-on:input='setName' />

v-model을 사용하면, 

• 위 코드에서 사용되는 setName()  메소드는 작성하지 않아도 된다.
• data에 'name' 속성은 필요하다.

form의 기본적인 동작은 서버로 보내는 것이다.

그러면서, 화면의 데이터가 리셋되게 된다.

submit.prevent는 이런 form의 기본 동작이 되지 않도록 제어한다.

form의 기본적인 동작

<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div id="app">
    <form>
      <input type='text'>
      <button> 클릭하세요 </button>
    </form>
  </div>
</template>

<script>
export default {
};
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

a,
button {
  color: #4fc08d;
}

button {
  background: none;
  border: solid 1px;
  border-radius: 2em;
  font: inherit;
  padding: 0.75em 2em;
}
</style>

버튼을 클릭하면, form의 기본적인 동작이 실행된다.

submit.prevent

<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div id="app">
    <form v-on:submit.prevent='btnClick'>
      <input type='text'>
      <button> 클릭하세요 </button>
    </form>
  </div>
</template>

<script>
export default {
  methods: {
    btnClick() {
      alert('hello!')
    }
  }
};
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

a,
button {
  color: #4fc08d;
}

button {
  background: none;
  border: solid 1px;
  border-radius: 2em;
  font: inherit;
  padding: 0.75em 2em;
}
</style>

v-on:submit.prevent

form의 기본적인 동작이 수행되지 않고,

지정한 메서드가 실행된다.

Javascript에서의 event.preventDefault()와 같은 효과가 있다.

처음에는 엄마와 함께 하는 여행기인줄 알았다.

하지만 이 책은 여행기라기 보다는

엄마에 대한, 엄마를 떠나보내는 작가의 에세이가 더 맞는 것 같다.

<< 안녕 엄마 안녕 유럽 >>

http://www.yes24.com/24/goods/28426802

한국말 중에 정말 희한한 말이 '안녕'이다.

만나서 반가워도 '안녕'

헤어질 때도 '안녕'

책 제목의 '안녕'이 어떤 안녕일까.

이 책은

너무 예쁘고 감성적인 사진들과

엄마에 대한 추억으로 가득 채워져 있다.

작가는 여행 속에서

엄마와의 이야기를 떠올리며 조금씩 엄마를 이해해간다.

항상 그렇듯

뒤늦게 깨닳아지는 것들이 있다.

나도 나이가 먹고 나서야

엄마라는 '사람'에 대해서 생각하게 되면서

이제야 뒤늦게 이해하게 되는 것들이 있다.

짧은 글 안에 담겨 있는 많은 이야기들이 느껴졌다.

여행을 통해 삶에 대해서 생각하고,

엄마를 생각하고,

나를 생각하고.

사실 spring도 오랫동안 사용해왔지만

제대로 알고 있냐고 누군가 묻는다면 대답은 '글쎄...' 였다.

그리고 요즘 많이 사용되는 spring boot.

그 둘의 차이가 궁금하기도 하고, 

제대로 한번 spring에 대해 공부해 보고 싶기도 해서 이 책을 보게 되었다.

[실전 스프링 부트 워크북]

http://www.yes24.com/24/Goods/41052847

이 책을 다 보고나서 이 책의 특징을 몇가지 정리해 보았다.

예제가 자세하고, 예제에 대한 설명이 충실하다.

책을 보면서 가장 좋았던 것이 바로 이 점이다. 

예제 소스가 자세히 나와 있다는 것, 그리고 예제 소스에 대한 설명이 충실하다는 것.

초보자에게 제일 중요한 것은 뭐니뭐니해도 자세한 예제이다.

그리고, 예제 제시보다 중요한 것은 그에 대한 설명!

환경 설정부터 예제 소스에 이르기까지 꼼꼼하게 설명되어 있어서,

하나라도 이해 못하면 너무너무 답답해하는 나 같은 초보자도

내용을 이해하고 따라하는데 많은 도움이 되었다.

옮긴이 주가 있어서 도움이 되었다.

이 책은 번역서인데, 원서에 있는 내용을 역자가 번역하면서

추가로 설명이 필요한 부분에는 추가로 설명을 더했는데,

이런 부분들이 나같은 초보자에게는 많은 도움이 되었다.

한글과 영문이 병기되어 있어 좋았다.

사실 나는 어떤 기술에 대해 초보자일 때는 번역서를 별로 선호하지 않는 편이다.

아무래도, 원래 영어로 된 용어들을 번역하는 과정에서 

그 용어가 한글로 번역될때 어려운 단어로 번역이 된다거나 

영문을 그냥 한글로 소리나는 대로 쓰는 경우 무슨 말인지 잘 모르겠다거나 하는 경우가 많이 생겨서

혼란스러울 때가 많기 때문이다.

그러나 이 책은 혼란이 예상되는 경우에는 한글 옆에 영문을 동시에 표기하여 혼란을 줄여주었다.

그래서 초보자인 내가 보기에도 편안하게 읽을 수 있었다.

하나의 프로젝트를 완성시켜 나가는 형태이다.

이 책은 각 챕터별로 각각의 예제가 아닌

'스프링 부트 일기(spring boot journal)'라는 

하나의 프로젝트를 점점 발전시켜 나가는 형태여서

처음부터 끝까지 책을 보고 따라하며 프로젝트를 완성시켜 나가는 재미가 있어서

끝까지 몰입해서 공부하는데 도움이 되었고,

다른 프로젝트를 만드는데도 쉽게 응용할 수 있을 것 같다는 생각이 들었다.

전체적으로,

구체적인 예제와 그에 대한 설명이 충실해서

기본을 잡는데도 좋고, 

나중에도 종종 필요한 부분을 참조하여 개발에 반영 할 수 있을 것 같다.

또한, 번역서를 그대로 번역만 한 것이 아니라,

번역서의 장점을 취하고 한계를 극복하기 위한 노력들이 많이 나타나 있는 것 같아 좋았다.