Vuex는 Vue.js app에 대한 상태관리패턴 + 라이브러리이다.

Vuex를 사용하면 컴포넌트 간 통신을 아래와 같이 수행할 수 있다.

Vue의 핵심 구성요소는 아래와 같다.

Actions의 의미는 아래와 같다.

Mutations의 의미는 아래와 같다.

State의 의미는 아래와 같다.

State가 변했을 때 출력되는 화면을 변하게 하기 위해서 Getters를 쓴다. Getters의 의미는 아래와 같다.

원래는 아래와 같이 컴포넌트 통신을 해야 한다.

// Step00View.vue

<template>
  <div class="text-center">
    <h2>당신이 좋아하는 파트를 선택하세요</h2>
    <result-component :total="count" />
    <subject-component @add-tot-count="addTotalCount" title="코딩"></subject-component>
    <subject-component @add-tot-count="addTotalCount" title="알고리즘"></subject-component>
  </div>
</template>

<script>
import ResultComponent from "@/components/step00/ResultComponent";
import SubjectComponent from "@/components/step00/SubjectComponent";

export default {
  data() {
    return {
      count: 0,
    };
  },
  components: {
    ResultComponent,
    SubjectComponent,
  },
  methods: {
    addTotalCount() {
      this.count += 1;
    },
  },
};
</script>
<style scoped>
.text-center {
  text-align: center;
}
</style>

// ResultComponent.vue

<template>
  <h2>{{ total }}</h2>
</template>

<script>
export default {
  // props: ["total"],
  computed: {
    total() {
      return this.$store.state.count;
    },
  },
};
</script>

<style></style>

// SubjectComponent.vue

<template>
  <button @click="addCount">{{ title }} - {{ count }}</button>
</template>

<script>
export default {
  name: "SubjectComponent",
  props: ["title"],
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    addCount: function () {
      this.count += 1;
      // this.$emit("addtotcount");
      this.$store.state.count++;
    },
  },
};
</script>

<style></style>

하지만 Vuex를 쓰면 아래와 같이 컴포넌트 통신을 할 수 있다.

// store/index.js

export default new Vuex.Store({
  state: {
    count: 0,
  },
  actions: {
    asyncAddOne(context) { // 첫번째 인자로 context가 자동 주입
      setTimeout(() => {
        context.commit("addOne");
      }, 2000);
    },
  },
  mutations: {
    ADD_ONE(state) { // 첫번째 인자로 state가 자동 주입
      state.count += 1;
    },
    ADD_TEN_COUNT(state, payload) {
      state.count += payload;
    },
    ADD_OBJ_COUNT(state, payload) {
      state.count += payload.num;
    },
  },
  getters: {
    // 복잡한 계산식을 처리 : computed
    countMsg(state) { // 첫번째 인자로 state가 자동 주입
      let msg = "10번보다 ";
      if (state.count > 10) {
        msg += "많이 ";
      } else {
        msg += "적게 ";
      }
      return msg + " 호출됨(" + state.count + ")";
    },
  },
});

// Step07View.vue

<template>
  <div class="text-center">
    <h2>당신이 좋아하는 파트를 선택하세요</h2>
    <result-component />
    <subject-component title="코딩"></subject-component>
    <subject-component title="알고리즘"></subject-component>
  </div>
</template>

<script>
import ResultComponent from "@/components/step07/ResultComponent";
import SubjectComponent from "@/components/step07/SubjectComponent";

export default {
  components: {
    ResultComponent,
    SubjectComponent,
  },
};
</script>
<style>
.text-center {
  text-align: center;
}
</style>    

// ResultComponent.vue

<template>
  <div>
    <h2>{{ total }}</h2>
    <h2>{{ countMsg }}</h2>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    // countMsg() {
    //   return this.$store.getters.countMsg;
    // },
    ...mapGetters(["countMsg"]),

    total() {
      return this.$store.state.count;
    },
  },
};
</script>

<style></style>

// SubjectComponent.vue

<template>
  <div>
    <button @click="addCount">{{ title }} - {{ count }}</button>
    <button @click="addTenCount">{{ title }} - {{ count }}</button>
    <button @click="addObjCount">{{ title }} - {{ count }}</button>
    <button @click="asyncCount">Action {{ title }} - {{ count }}</button>
  </div>
</template>

<script>
import { mapMutations, mapActions } from "vuex";
export default {
  name: "SubjectComponent",
  props: ["title"],
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    ...mapMutations({
      addMOne: "ADD_ONE",
      addMTenCount: "ADD_TEN_COUNT",
      addMObjCount: "ADD_OBJ_COUNT",
    }),
    ...mapActions(["asyncAddOne"]),
    addCount: function () {
      this.count += 1;
      // this.$store.commit('addOne');
      this.addMOne();
    },
    addTenCount: function () {
      this.count += 10;
      // this.$store.commit('addCount', 10);
      this.addMTenCount(10);
    },
    addObjCount: function () {
      let num = Math.round(Math.random() * 100);
      this.count += num;
      // this.$store.commit('addObjCount', { num });
      this.addMObjCount({ num });
    },
    asyncCount() {
      // this.$store.dispatch("asyncAddOne");
      this.asyncAddOne();
    },
  },
};
</script>

<style></style>

Vue에서 권고하는 Promise 기반의 HTTP 통신 라이브러리를 axios라고 한다. axios를 사용하기 위해선 아래와 같은 과정을 거친다.

1. npm install axios 로 axios를 설치한다.
2. import axios from "axios"로 axios를 불러온다.
3. axios.get(URL) or axios.post(URL) .. 으로 Request를 정의한다.
4. .then()로 일반적인 동작을, .catch()로 오류 발생 시 동작을 정의한다.

URL에 따라 Component를 연결하고 설정된 Component를 보여줄 때 Vue-Router를 사용한다.

Vue-Router 설정 예시는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <style>
      .router-link-exact-active {
        color: red;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
  </head>

  <body>
    <!-- 현재 라우트에 맞는 컴포넌트가 렌더링 -->
    <div id="app">
      <h1>Board - Router</h1>
      <p>
        <router-link to="/">메인</router-link>
        <router-link to="/board">자유게시판</router-link>
        <router-link to="/qna">질문게시판</router-link>
        <router-link to="/gallery">사진게시판</router-link>
        <router-view></router-view> 
      </p>
    </div>

    <script>
      // 라우트 컴포넌트
      const Main = {
        template: "<div>메인 페이지</div>",
      };
      const Board = {
        template: "<div>자유 게시판</div>",
      };
      const QnA = {
        template: "<div>질문 게시판</div>",
      };
      const Gallery = {
        template: "<div>갤러리 게시판</div>",
      };

      // 라우터 객체 생성
      const router = new VueRouter({
        routes: [
          {
            path: "/",
            component: Main
          },
          {
            path: "/board",
            component: Board
          },
          {
            path: "/qna",
            component: QnA
          },
          {
            path: "/gallery",
            component: Gallery
          },
        ]
      });

      const app = new Vue({
        el: "#app",
        router, // Vue 인스턴트 라우터 주입
      });
    </script>
  </body>
</html>

실행 결과는 아래와 같다.

아래와 같이 router 안 mode를 "history"로 설정해보자.

const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/",
      name: 'main',
      component: Main
    },
    {
      path: "/board",
      name: 'board',
      component: Board
    },
    {
      path: "/qna",
      name: 'qna',
      component: QnA
    },
    {
      path: "/gallery",
      name: 'gallery',
      component: Gallery
    },
  ]
});

그럼 아래처럼 일반적인 링크로 출력된다.

router에 값을 넘겨줄 땐 아래와 같이 값을 넘겨준다.

export default {
  template: `<div>
    자유 게시판
    <ul>
      <li v-for="i in 5">
        <router-link :to="'/board/' + i">{{i}}번 게시글</router-link>
        <!-- <router-link :to="{name: 'boardview', params: {no: i}}">{{i}}번 게시글</router-link> 랑 동일 -->
        <!-- <a :href="'#' + i" @click="$router.push({name: 'boardview', params: {no: i}})">{{i}}번 게시글</a> 랑 동일 -->
      </li>
    </ul>
  </div>`,
};

중앙에서 값을 받고 다시 넘겨주는 건 아래와 같다.

const router = new VueRouter({
  routes: [
    ...
      path: '/board/:no',
      name: 'boardview',
      component: BoardView,
    },
    ...
  ],
});

값을 다시 받는 방법은 아래와 같다.

export default {
  template: `<div>
    {{no}}번 게시물 상세정보
    <hr>
    <router-link :to="/board">목록</router-link>
    <!-- <router-link :to="{name: 'board'}">목록</router-link> 랑 동일 -->
    <!-- <a href="#board" @click="$router.push('/board')">게시판</a> 랑 동일 -->
   </div>`,
  data() {
    return {
      no: 0,
    };
  },
  created() {
    this.no = this.$route.params.no;
  },
};

아래와 같이 라우트를 중첩할 수 있다.

const router = new VueRouter({
  mode: 'history',
  routes: [
    ... 
    {
      path: '/board',
      name: 'board',
      component: Board,
      redirect: '/board/list',
      children: [
        {
          path: 'list',
          name: 'boardlist',
          component: BoardList,
        },
        {
          path: 'write',
          name: 'boardwrite',
          component: BoardWrite,
        },
        {
          path: 'detail/:no',
          name: 'boardview',
          component: BoardView,
        },
        {
          path: 'update/:no',
          name: 'boardupdate',
          component: BoardUpdate,
        },
      ],
    },
    ...
  ],
});

Template + Script + Style로 이뤄진 vue 파일을 SFC라고 한다. 각 구성요소의 의미는 아래와 같다.

1. <template> : 구조, 단 하나만 포함 가능
   2. <script> : 기능, 단 하나만 포함 가능
   3. <style> : 스타일, 여러 개 포함 가능

Vue는 다양한 Instance를 지원한다. 그 예시는 아래와 같다.

1. Method : 특정 기능을 수행함

예시는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <script>
      let vm = new Vue({
        data: {
          count: 1,
        },
        created() {
          console.log(this.count);
        },
        methods: {
          incCount() {
            console.log("incCount 호출됨");
            this.count++;
          },
        },
      });
      vm.incCount();
      console.log(vm.count); // 2
    </script>
  </body>
</html>

method 안에서 data에 접근하기 위해선 this를 사용해야 한다.

실행 결과는 아래와 같다.

2. Filter : 텍스트 형식을 쉽게 변환함

filter는 전역 filter와 지역 filter로 나뉜다. 예시는 아래와 같다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vue.js</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <div>
      <input type="text" v-model="msg" />
    </div>
    <div>
      <h2>결과 :</h2>
      <h3>{{ msg | count1 }}</h3>
      <h3>{{ msg | count2('문자를 넣어보세요') }}</h3>
    </div>
  </div>

  <script>
      // 전역 필터
    Vue.filter('count1', (val) => {
      if (val.length == 0) {
        return;
      }
      return `${val} : ${val.length}자`;
    });
    new Vue({
      el: '#app',
      data: {
        msg: '',
      },
      // 지역 필터
      filters: {
        count2(val, alternative) {
          if (val.length == 0) {
            return alternative;
          }
          return `${val} : ${val.length}자`;
        },
      },
    });
  </script>
</body>
</html>

{{ msg | count1 }} 에서 count1의 매개 변수인 val가 msg가 된다.

실행 결과는 아래와 같다.

3. Computed : 특정 데이터를 변경이 없을 경우 캐싱해 사용하다가 데이터가 변경되면 이를 반영함

예시는 아래와 같다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vue.js</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <input type="text" v-model="message" />
    <p>원본 메시지: "{{ message }}"</p>
    <p>역순으로 표시한 메시지1: "{{ reversedMsg }}"</p>
    <p>역순으로 표시한 메시지2: "{{ reversedMsg }}"</p>
    <p>역순으로 표시한 메시지3: "{{ reversedMsg }}"</p>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: '안녕하세요 여러분',
      },
      computed: {
        reversedMsg: function () {
          console.log('꺼꾸로 찍기');
          return this.message.split('').reverse().join('');
        },
      },
    });
  </script>
</body>

</html>

실행 결과는 아래와 같다.

만약 Computed를 Method로 쓰면 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <input type="text" v-model="message" />
      <p>원본 메시지: "{{ message }}"</p>
      <p>역순으로 표시한 메시지1: "{{ reversedMsg() }}"</p>
      <p>역순으로 표시한 메시지2: "{{ reversedMsg() }}"</p>
      <p>역순으로 표시한 메시지3: "{{ reversedMsg() }}"</p>
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          message: '안녕하세요 여러분',
        },
        methods: {
          reversedMsg: function () {
            console.log('꺼꾸로 찍기');
            return this.message.split('').reverse().join('');
          },
        },
      });
    </script>
  </body>
</html>

실행 결과는 아래와 같다. Computed와 달리 함수가 여러번 호출됨을 알 수 있다.

4. Watch : 특정 데이터가 변경될 경우 다른 데이터에 이를 반영함

예시는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>원본 메시지: "{{ message }}"</p>
      <p>역순으로 표시한 메시지: "{{ reversedMsg }}"</p>
      <input type="text" v-model="message" />
    </div>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: 'Hello',
          reversedMsg: '',
        },
        watch: {
          message: function (newVal, oldVal) {
            console.log(newVal, oldVal);
            this.reversedMsg = newVal.split('').reverse().join('');
          },
        },
      });
    </script>
  </body>
</html>

실행 결과는 아래와 같다.

Vue는 여러 Event를 지원한다.

Vue는 다양한 Event를 지원한다. 종류는 아래 3가지가 있다. 하나씩 살펴보자.

1. v-on directive

예시는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <button v-on:click="greet">Greet</button>
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          name: "SAMSUNG",
        },
        methods: {
          greet: function (event) {
            alert("Hello " + this.name + "!");
            console.dir(event.target);
          },
        },
      });
    </script>
  </body>
</html>

실행 결과는 아래와 같다.

2. inline method handler

예시는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <form action="http://www.naver.com">
        <button v-on:click="greet1('SAMSUNG')">Greet</button>
        <button v-on:click="greet2($event, 'SAMSUNG')">Greet</button>
      </form>
    </div>
    <script>
      new Vue({
        el: '#app',
        methods: {
          greet1: function (msg) {
            alert('Hello ' + msg + '!');
            console.dir(event.target);
          },
          greet2: function (e, msg) {
            if (e) e.preventDefault(); // event의 새로 고침을 막는 역할
            alert('Hello ' + msg + '!');
            console.dir(e.target);
          },
        },
      });
    </script>
  </body>
</html>

1번 버튼을 누른 최종 결과는 아래와 같다.

alert 창으로 Hello SAMSUNG을 띄우고 페이지를 이동한다.

2번 버튼을 누른 최종 결과는 아래와 같다.

alert 창으로 Hello SAMSUNG을 띄우고 페이지를 이동하지 않는다.

3. Event Modifier

예시는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>페이지 이동</h2>
      <a href="test29.html" @click.prevent="sendMsg">페이지 이동 막기</a><br />
    </div>
    <script>
      new Vue({
        el: '#app',
        methods: {
          sendMsg() {
            alert('이동할까요?');
          },
        },
      });
    </script>
  </body>
</html>

그럼 페이지 이동이 되지 않는다.

Vue에선 $refs 속성을 이용해 DOM에 접근할 수 있다. 예시는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
      .success {
        color: dodgerblue;
      }

      .fail {
        color: darkred;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <h2>엘리먼트 참조하기</h2>
      <!-- 아이디 : <input type="text" v-model="id"> -->
      아이디 : <input type="text" v-model="id" ref="id" @keyup="idCheck" />
      <button @click="idCheck">아이디 중복 체크</button>
      <div v-bind:class="{success : isSuccess, fail : isFail}" v-bind:style="myStyle" v-html="msg"></div>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          id: '',
          msg: '',
          isSuccess: false,
          isFail: false,
          myStyle: {
            fontSize: '25px',
          },
        },
        methods: {
          idCheck() {
            if (this.id.length < 5 || this.id.length > 12) {
              this.msg = `아이디는 5자이상 12자리 이하입니다.`;
              this.$refs.id.focus();
              console.dir(this.$refs.id);
              this.isSuccess = false;
              this.isFail = false;
              return;
            } else {
              if (this.id === 'samsung') {
                this.msg = `<b>${this.id}</b>는 사용할 수 없습니다.`;
                this.isSuccess = false;
                this.isFail = true;
              } else {
                this.msg = `<b>${this.id}</b>는 사용할 수 있습니다.`;
                this.isSuccess = true;
                this.isFail = false;
              }
            }
            console.log(this.$refs.id.value);
          },
        },
      });
    </script>
  </body>
</html>

실행 결과는 아래와 같다.

※ Vue의 가장 중요한 목적 중 하나가 개발자가 DOM을 사용하지 않게 하는 것이므로 $refs가 권장되진 않는다.

Vue는 CSS Class Binding을 지원한다.

v-bind:class는 true, false로 CSS를 지정할 수 있다.

예시는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css">
      .completed {
        text-decoration: line-through;
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <ul>
        <li :class="{completed: todo.done}" :style="myStyle" v-for="todo in todos">
          {{todo.msg}}
          <button @click="complete(todo)" class="btn">완료</button>
        </li>
      </ul>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          todos: [
            {
              msg: '5시간 잠자기',
              done: false,
            },
            {
              msg: '알고리즘 1시간 공부하기',
              done: false,
            },
            {
              msg: 'Vue 1시간 공부하기',
              done: false,
            },
          ],
          myStyle: {
            fontSize: '20px',
          },
        },
        methods: {
          complete: function (todo) {
            todo.msg = todo.msg + '완료';
            todo.done = !todo.done;
          },
        },
      });
    </script>
  </body>
</html>

실행 결과는 아래와 같다.

Vue는 Form Input Binding을 지원한다.

v-model 디렉티브를 사용하여 Form에 양방향 데이터 바인딩을 생성할 수 있다. 하나씩 살펴보자.

1. text, textarea

예시는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <div>
        아이디 :
        <input v-model.trim="id" placeholder="아이디를 입력하세요" />
        <!-- v-model은 기본적으로 모든 key stroke가 발생할 때마다 값을 업데이트 시킨다.
            .lazy 수식어를 추가하여 change 이벤트 이후에 동기화 할 수 있습니다. -->
        <input v-model.lazy="id" placeholder="아이디를 입력하세요" />
      </div>
      <div>
        메세지 :
        <textarea v-model="message" placeholder="내용을 입력하세요"></textarea>
      </div>
      <p>{{ id }} 님에게 보내는 메세지 : {{ message }}</p>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          id: '',
          message: '',
        },
      });
    </script>
  </body>
</html>

실행 결과는 아래와 같다.

2. checkbox

예시는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <div>당신이 가고 싶은 지역을 선택하시오</div>
      <input type="checkbox" id="buk" value="부울경" v-model="checkedAreas" />
      <label for="buk">부울경</label>
      <input type="checkbox" id="gwangju" value="광주" v-model="checkedAreas" />
      <label for="gwangju">광주</label>
      <input type="checkbox" id="gumi" value="구미" v-model="checkedAreas" />
      <label for="gumi">구미</label>
      <input type="checkbox" id="daejeon" value="대전" v-model="checkedAreas" />
      <label for="daejeon">대전</label>
      <input type="checkbox" id="seoul" value="서울" v-model="checkedAreas" />
      <label for="seoul">서울</label>
      <br />
      <span>체크한 이름: {{ checkedAreas }}</span>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          checkedAreas: [],
        },
      });
    </script>
  </body>
</html>

실행 결과는 아래와 같다.

3. radio

예시는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <div>수업을 듣는 지역을 선택하시오</div>
      <div>
        <input type="radio" id="buk" value="부울경" v-model="ckArea" />
        <label for="buk">부울경</label>
        <input type="radio" id="gwangju" value="광주" v-model="ckArea" />
        <label for="gwangju">광주</label>
        <input type="radio" id="gumi" value="구미" v-model="ckArea" />
        <label for="gumi">구미</label>
        <input type="radio" id="daejeon" value="대전" v-model="ckArea" />
        <label for="daejeon">대전</label>
        <input type="radio" id="seoul" value="서울" v-model="ckArea" />
        <label for="seoul">서울</label>
      </div>
      <span>선택한 지역 : {{ ckArea }}</span>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          ckArea: '광주',
        },
      });
    </script>
  </body>
</html>

실행 결과는 아래와 같다.

4. select

단일 선택 가능 실행 예시는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <div>
        <p>수업을 듣는 지역을 선택하시오</p>
        <select v-model="selectedArea">
          <option disabled value="">선택하세요</option>
          <option value="buk">부울경</option>
          <option value="gwangju">광주</option>
          <option value="gumi">구미</option>
          <option value="daejeon">대전</option>
          <option value="seoul">서울</option>
        </select>
      </div>
      <span>선택한 지역 : {{ selectedArea }}</span><br />
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          selectedArea: '',
        },
      });
    </script>
  </body>
</html>

실행 결과는 아래와 같다.

다중 선택 가능 실행 예시는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <div>
        <p>수업을 듣고자하는 지역을 선택하시오(다중가능)</p>
        <select v-model="selectedArea" multiple>
          <option disabled value="">선택하세요</option>
          <option value="buk">부울경</option>
          <option value="gwangju">광주</option>
          <option value="gumi">구미</option>
          <option value="daejeon">대전</option>
          <option value="seoul">서울</option>
        </select>
      </div>
      <span>선택한 지역 : {{ selectedArea }}</span>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          selectedArea: [],
        },
      });
    </script>
  </body>
</html>

실행 결과는 아래와 같다.

Vue는 Component를 지원한다.

HTML을 확장하여 재사용 가능한 코드로 캡슐화한 것이 Component이다. Component는 전역 Component와 지역 Component로 나뉜다. 예시는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app1">
      <my-global></my-global> // 케밥 케이스 필수!!
      <my-global></my-global>
      <my-local></my-local> // 케밥 케이스 필수!!
      <my-local></my-local>
    </div>
    <div id="app2">
      <my-global></my-global>
      <my-global></my-global>
      <my-local></my-local>
      <my-local></my-local>
    </div>
    <script>
      // 전역 Component
      Vue.component("MyGlobal", { // 케밥 케이스 권장
        template: "<h2>전역 컴포넌트임</h2>",
      });
      new Vue({
        el: "#app1",
        components: {
          // 지역 Component
          MyLocal: { // 케밥 케이스 권장
            template: "<h2>지역 컴포넌트</h2>",
          },
        },
      });
      new Vue({
        el: "#app2",
      });
    </script>
  </body>
</html>

실행 결과는 아래와 같다.

Component 간 변수는 공유된다. 아래 예시를 살펴보자.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <h2>컴포넌트 데이터 공유 문제</h2>
    <div id="app">
      <count-view></count-view>
      <count-view></count-view>
      <count-view></count-view>
    </div>
    <template id="countview">
      <div>
        <span>{{ count }}</span>
        <button @click="count++">클릭</button>
      </div>
    </template>
    <script>
      let num = {
        count: 0,
      };
      Vue.component("count-view", {
        data() {
          return num;
        },
        template: "#countview",
      });
      new Vue({
        el: "#app",
      });
    </script>
  </body>
</html>

실행 결과는 아래와 같다.

따라서 각 태그마다 데이터를 관리하게 할 수 있다. 아래 예시를 살펴보자.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <h2>컴포넌트 데이터 공유 문제 해결</h2>
    <div id="app">
      <count-view></count-view>
      <count-view></count-view>
      <count-view></count-view>
    </div>
    <template id="countview">
      <div>
        <span>{{ count }}</span>
        <button @click="count++">클릭</button>
      </div>
    </template>
    <script>
      Vue.component("count-view", {
        template: "#countview",
        data() {
          return {
            count: 0,
          };
        },
      });
      new Vue({
        el: "#app",
      });
    </script>
  </body>
</html>

실행 결과는 아래와 같다.

Vue는 Component 간 통신을 지원한다.

Vue는 Component 간 데이터 전달을 지원한다. 부모에서 자식은 props라는 특별한 속성, 자식에서 부모는 event로만 데이터 전달이 가능하다.

부모에서 자식으로 데이터를 전달하는 경우부터 살펴보자. 해당 예시는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <h2>props test</h2>
      <!-- 동적 props -->
      <child-component v-bind:props-data="message"></child-component>
    </div>
    <script>
      //하위 컴포넌트
      Vue.component("child-component", {
        props: ["propsData"],
        template: "<span>{{ propsData }}</span>",
      });
      new Vue({
        el: "#app",
        data() {
          return {
            message: 'hello samsung',
          };
        },
      });
    </script>
  </body>
</html>

원리는 아래와 같다.

따라서 출력 결과는 아래와 같다.

props로 객체를 전달할 때 객체 이름으로 전체 객체 데이터를 넘길 수 있다. 아래 예시를 살펴보자.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <h2>컴포넌트 객체 데이터 전달</h2>
    <div id="app">
      <member-view v-bind:member="user"></member-view>
    </div>
    <template id="memberview">
      <div>
        <div>이름 : {{ member.name }}</div>
        <div>나이 : {{ member.age }}</div>
        <div>이메일 : {{ member.email }}</div>
      </div>
    </template>
    <script>
      Vue.component("member-view", {
        props: ["member"],
        template: "#memberview",
      });
      new Vue({
        el: "#app",
        data() {
          return {
            user: {
              name: "홍길동",
              age: 22,
              email: "hong@ssafy.com",
            },
          };
        },
      });
    </script>
  </body>
</html>

출력 결과는 아래와 같다.

다음은 자식에서 부모로 데이터를 전달하는 경우를 살펴보자. 자식은 이벤트를 발생시키기 위해 $emit 메서드를, 부모는 이벤트를 수신하기 위해 $on 메서드를 사용한다.

예시는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <h4>당신이 좋아하는 파트를 선택하세요</h4>
      <h2>총 투표수 : {{ total }}</h2>
      <subject v-on:add-total-count="addTotalCount" title="코딩"></subject>
      <subject v-on:add-total-count="addTotalCount" title="알고리즘"></subject>
    </div>
    <script>
      Vue.component("Subject", {
        template: '<button v-on:click="addCount">{{title}} - {{ count }}</button>',
        props: ["title"],
        data: function () {
          return {
            count: 0,
          };
        },
        methods: {
          addCount: function () {
            this.count += 1;
            // 부모 v-on:이름 에 해당하는 이름의 이벤트를 호출
            this.$emit("add-total-count", "인자도 넘길수 있어요."); // payload
          },
        },
      });

      new Vue({
        el: "#app",
        data: {
          total: 0,
        },
        methods: {
          addTotalCount: function (msg) {
            console.log(msg);
            this.total += 1;
          },
        },
      });
    </script>
  </body>
</html>

출력 결과는 아래와 같다.

Vue는 Model + View + ViewModel 패턴을 사용한다. 형태는 아래와 같다.

각 요소의 설명은 아래와 같다.

1. Model : 순수 JS 객체
2. View : 웹 페이지의 DOM
3. ViewModel : View와 Model을 연결하고 자동으로 바인딩하여 양방향 통신을 지원

MVC 패턴과 MVVM 패턴의 차이점은 아래와 같다.

MVC 패턴 : View가 화면 갱신, Model이 데이터 갱신을 수행한다. MVVM 패턴 : View가 화면 갱신하면 ViewModel이 이를 인식하고 Model에 데이터 갱신을 요청한다.

Vue는 Vue 객체를 생성할 수 있도록 지원한다.

Vue 객체의 형태는 아래와 같다.

new Vue({
    el: "#app", // querySelector랑 똑같음
    data() {
        return {
            message: "Hello Vuejs!!!!",
        };
    },
});

Vuew 객체 속성의 의미는 아래와 같다.

Vue 객체의 Life Cycle은 아래와 같다.

Life Cycle 속성의 의미는 아래와 같다.

실제 사용 예시는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>{{message}}</h2>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          message: "Life Cycle Hooks.",
        },
        beforeCreate() {
          console.log("beforeCreate!!!");
        },
        created() {
          console.log("created!!!");
        },
        mounted() {
          console.log("mounted!!!");
        },
        updated() {
          console.log("updated!!!");
        },
      });
    </script>
  </body>
</html>

Console 화면은 아래와 같다.

Vue는 여러 Directive를 지원한다.

Vue는 기능 지원을 위해 다양한 Directive를 지원한다. 그 종류는 아래와 같다.

1. v-model : 양방향 바인딩 처리

실행 예시는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="msg"/>
      <div>{{msg}}</div>
    </div>
    <script>
      let app = new Vue({
        el: "#app",
        data: {
          msg: "Hello Vue~!",
        },
      });
    </script>
  </body>
</html>

실행 결과는 아래와 같다.

이 때 input의 값이 바뀌면 div, data의 값도 바뀐다.

2. v-bind : 엘리먼트의 속성과 바인딩 처리

실행 예시는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 속성을 바인딩 합니다. -->
      <div v-bind:id="idValue">v-bind 지정 연습</div>
      <button v-bind:[key]="btnId">버튼</button>

      <!-- 약어를 이용한 바인딩. 주로 이걸 사용 -->
      <div :id="idValue">v-bind 지정 연습</div>
      <button :[key]="btnId">버튼</button><br />

      <a v-bind:href="link1">삼성</a>
      <a :href="link2">네이버</a>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          idValue: "test-id",
          key: "class",
          btnId: "btn1",
          link1: "http://www.samsung.com",
          link2: "http://www.naver.com",
        },
      });
    </script>
  </body>
</html>

실행 결과는 아래와 같다.

3. v-show : 조건에 따라 엘리먼트를 출력한다.

실행 예시는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div v-show="isShow">{{msg}}</div>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          isShow: true,
          msg: "보이나요?",
        },
      });
    </script>
  </body>
</html>

isShow가 true일 때 출력은 아래와 같다.

isShow가 false일 때 출력을 아래와 같다.

이 때, msg는 렌더링이 된다는 점을 기억하자.

4. v-if, v-else-if, v-else : 조건에 따라 엘리먼트를 화면에 렌더링

실행 예시는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div>
        <span>나이 : </span>
        <input type="number" v-model="age"/>
      </div>
      <div>
        요금 :
        <span v-if="age < 10">무료</span>
        <span v-else-if="age < 30">7000원</span>
        <span v-else-if="age < 60">10000원</span>
        <span v-else>3000원</span>
      </div>
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          age: 0,
        },
      });
    </script>
  </body>
</html>

실행 결과는 아래와 같다.

5. v-for : 배열이나 객체의 반복

실행 예시는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- 범위 반복문, 배열 반복문 처리 -->
    <h2>v-for</h2>
    <div id="app">
      <h2>범위지정(4)</h2>
      <span v-for="i in 4"> {{i}} </span>

      <h2>문자열 배열</h2>
      <ul>
        <li v-for="name in regions">{{name}}</li>
      </ul>

      <h2>문자열 배열 - 위치</h2>
      <ul>
        <li v-for="(name, i) in regions">번호 : {{i}}, 지역 : {{name}}</li>
      </ul>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          regions: ["광주", "구미", "대전", "서울", "부울경"],
        },
      });
    </script>
  </body>
</html>

실행 결과는 아래와 같다.

6. template : 여러 개의 태그들을 묶어서 처리

실행 예시는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <h2>template 태그 사용하기</h2>
    <div id="app">
      <label>반수 : </label>
      <input type="number" v-model.number="count" />
      <template v-if="count % 2 == 0">
        <h4>여러개의 태그를 묶어서 처리해야 한다면??</h4>
        <h4>template 태그를 사용해 보자</h4>
        <h4>만약에 template가 없다면?? 각태그마다 v-if?</h4>
      </template>
      <template v-for="(region, index) in samsung" v-if="region.count === count">
        <h3>지역 : {{region.name}} ({{region.count}}개반)</h3>
      </template>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          count: 0,
          show: false,
          samsung: [
            {
              name: "광주",
              count: 2,
            },
            {
              name: "구미",
              count: 2,
            },
            {
              name: "대전",
              count: 3,
            },
            {
              name: "서울",
              count: 12,
            },
            {
              name: "부울경",
              count: 2,
            },
          ],
        },
      });
    </script>
  </body>
</html>

실행 결과는 아래와 같다.

SpringBoot의 특징은 아래와 같다.

1. 자주 사용되는 library들이 미리 조합되어 있다.
2. xml 같은 복잡한 설정을 자동으로 처리한다.
3. 내장 서버를 포함해서 tomcat같은 WAS를 추가로 설치하지 않아도 개발 가능하다.
4. JAR 파일로 Web Application을 개발할 수 있다.

OPEN API는 프로그래밍에서 사용할 수 있는 개방되어 있는 상태의 인터페이스이다. 대부분의 OPEN API는 REST 방식으로 지원된다.

REST는 Representational State Transfer의 약어로, 개념은 아래와 같다.

하나의 URI는 하나의 고유한 리소스를 대표하도록 설계 + 전송방식 -> 원하는 작업 지정

REST의 구성은 아래와 같다.

1. 자원 : URI(JSON, XML)
2. 행위 : 전송방식(HTTP Method)
3. 표현

기존 Service와 REST Service의 차이는 아래와 같다.

REST Service는 기본 Service와 달리 View에 대한 신경 쓸 필요없이 반환될 데이터만 JSON이나 XML로 전달하면 된다. 또한, 기본 Service는 GET과 POST만으로 자원에 대한 CRUD를 처리하고, URI는 액션을 나타낸다. 하지만 Rest Service는 GET, POST, PUT, DELETE를 사용하여 CRUD를 처리하고, URI는 제어하려는 자원을 나타낸다.

REST는 정해진 표준이 없고 관습적인 표준만 존재한다. 내용은 아래와 같다.

REST 관련 Annotation은 아래와 같다.

MyBatis를 사용하는 Data Access Layer는 아래와 같다.

MyBatis-Spring의 주요 컴포넌트의 역할은 아래와 같다.

주요 컴포넌트의 설명은 아래와 같다.

Spring에서 Tomcat 서버를 연결할 때 아래와 같은 설정을 거친다. Tomcat -> server.xml -> context.xml -> web.xml -> root-context.xml -> member.xml -> ... 주요 사항만 알아보자.

1. context.xml

<?xml version="1.0" encoding="UTF-8"?>
<Context>
    <Resource name="jdbc/samsung" auth="Container" type="javax.sql.DataSource" 
            maxTotal="100" maxIdle="30" maxWaitMillis="10000" 
            username="samsung" password="samsung" driverClassName="com.mysql.cj.jdbc.Driver"     
            url="jdbc:mysql://localhost:3306/samsungweb?serverTimezone=UTC&amp;useUniCode=yes&amp;characterEncoding=UTF-8"/> 
    <WatchedResource>WEB-INF/web.xml</WatchedResource>
</Context>

현재까진 클라이언트가 필요로 하면 DB에 연결해 DataSource를 만들었다. 이제는 DB 연결을 톰캣에게 맡겨 DB를 미리 연결해둔다. 따라서 DataSource를 미리 만든다.

2. root-context.xml

<bean id="dataSource" class="org.springframework.jndi.JndiObjectFactoryBean">
    <property name="jndiName" value="java:comp/env/jdbc/samsung"></property>
</bean>

가져올 DataSource는 java:comp/env/jdbc/samsung 안에 있는 걸 알려준다.

<bean id="sqlSessionFactoryBean" class="org.mybatis.spring.SqlSessionFactoryBean">
    <property name="dataSource" ref="dataSource"/>
    <property name="configLocation" value="classpath:mybatis-config.xml"/>
    <property name="mapperLocations">
        <list>
            <value>classpath:mapper/member.xml</value>
        </list>
    </property>
</bean>

sqlSessionFactoryBean을 만든다. 이 때, DB, mybatis, mapper 정보를 넘겨준다.

<bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate">
    <constructor-arg ref="sqlSessionFactoryBean"></constructor-arg>
</bean>

sqlSession을 만든다.

3. member.xml (mapper)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" 
    "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.samsung.member.model.mapper.MemberMapper">

    <resultMap type="memberDto" id="member">
        <result column="user_id" property="userId"/>
        <result column="user_name" property="userName"/>
    </resultMap>

    <select id="idCheck" parameterType="String" resultType="int">
        select count(user_id)
        from members
        where user_id = #{userid}
    </select>

    <insert id="joinMember" parameterType="memberDto">
        insert into members (user_name, user_id, user_password, email_id, email_domain, join_date)
        values (#{userName}, #{userId}, #{userPwd}, #{emailId}, #{emailDomain}, now())
    </insert>

    <select id="loginMember" parameterType="map" resultMap="member">
        select user_id, user_name
        from members
        where user_id = #{userid} and user_password = #{userpwd}
    </select>

</mapper>

mapper의 sql을 정의한다.

4. MemberServiceImpl.java

import java.util.Map;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.samsung.member.model.MemberDto;
import com.samsung.member.model.mapper.MemberMapper;

@Service
public class MemberServiceImpl implements MemberService {
    private SqlSession sqlSession;

    @Autowired
    public MemberServiceImpl(SqlSession sqlSession) {
        super();
        this.sqlSession = sqlSession;
    }

    @Override
    public int idCheck(String userId) throws Exception {
        return sqlSession.getMapper(MemberMapper.class).idCheck(userId);
    }

    @Override
    public void joinMember(MemberDto memberDto) throws Exception {
        sqlSession.getMapper(MemberMapper.class).joinMember(memberDto);
    }

    @Override
    public MemberDto loginMember(Map<String, String> map) throws Exception {
        return sqlSession.getMapper(MemberMapper.class).loginMember(map);
    }
}

sqlSession에서 설정된 함수를 실제로 실행한다.

Spring은 Mapper Interface를 지원한다.

Mapper Interface는 mapping 파일에 기재된 SQL을 호출하는 Interface이다. 이를 사용하면 위의 예제에서 바뀌는 부분은 아래와 같다.

1. root-context.xml

<bean id="sqlSessionFactoryBean" class="org.mybatis.spring.SqlSessionFactoryBean">
  <property name="dataSource" ref="dataSource"/>
  <property name="typeAliasesPackage" value="com.samsung.*.model"/> <!-- Alias 지정 가능 -->
  <property name="mapperLocations" value="classpath:mapper/*.xml"/>
</bean>

2. MemberServiceImpl.java

import java.util.Map;

import org.springframework.stereotype.Service;

import com.samsung.member.model.MemberDto;
import com.samsung.member.model.mapper.MemberMapper;

@Service
public class MemberServiceImpl implements MemberService {
    private MemberMapper memberMapper;

    public MemberServiceImpl(MemberMapper memberMapper) {
        super();
        this.memberMapper = memberMapper;
    }

    @Override
    public int idCheck(String userId) throws Exception {
        return memberMapper.idCheck(userId);
    }

    @Override
    public void joinMember(MemberDto memberDto) throws Exception {
        memberMapper.joinMember(memberDto);
    }

    @Override
    public MemberDto loginMember(Map<String, String> map) throws Exception {
        return memberMapper.loginMember(map);
    }
}

Spring은 transaction 관리를 지원한다.

Spring은 자동 트랜잭션 관리를 지원한다. 해당 코드는 아래와 같다.

<!-- root-context.xml -->

<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
    <property name="dataSource" ref="dataSource" />
</bean>

<tx:annotation-driven transaction-manager="transactionManager"/>

Exception이 일어나면 rollback, 일어나지 않으면 commit을 자동으로 수행한다.

File Upload를 하기 위해선 몇 개의 추가 기능을 넣어줘야 한다. 그 기능은 아래와 같다.

1. pom.xml : commons-fileupload Library 추가

2. servlet-context.xml : property 추가

1. maxUploadSize : 최대 업로드 가능한 파일의 바이트 크기
2. maxInMemorySize : 디스크에 임시 파일을 생성하기 전 메모리에 보관할 수 있는 최대 바이트 크기

3. write.jsp : form 설정

4. BoardDto.java : 멤버변수 추가

5. FileInfoDto.java : 멤버변수 추가

1. saveFolder : 저장된 폴더
2. originFile : 원본 파일의 이름
3. saveFile : 실제 저장된 파일의 이름

6. BoardServiceImpl.java : 전체적인 수정

mfile.transferTo가 일어난 시점부터 사용자의 컴퓨터에 파일이 저장된다. 그리고 DB에는 파일의 이름만 저장된다.

7. board.xml : 전체적인 수정

Spring은 File Download를 지원한다.

File Download를 하기 위해선 몇 개의 추가 기능을 넣어줘야 한다. 그 기능은 아래와 같다.

1. list.jsp

2. servlet-context.xml

3. BoardController.java

4. FileDownLoadView.java

Spring은 Interceptor를 지원한다.

실제 비즈니스 로직과는 분리되어 처리해야 하는 기능들을 넣을 때 Interceptor를 이용한다. 비슷한 기능으론 Filter와 AOP가 있다. 차이점은 아래와 같다.

Filter : Servlet Context -> Dispatcher Servlet에 적용됨. Intercept : Handler Adapter -> Controller에 적용됨. AOP : Controller -> Model에 적용됨.

Interceptor를 사용하기 위해선 HandlerInterceptor를 상속받아야 한다. HandlerInterceptor가 제공하는 메서드는 아래와 같다.

각 메서드의 차이점은 아래 그림을 참고하자.

MVC Pattern은 확장성을 위한 웹 구조이다. 자세한 내용은 해당 링크를 참고하자.

Spring MVC의 구성요소는 아래와 같다.

1. DispatcherServlet

모든 클라이언트의 요청을 전달받는다. Controller에게 Client의 요청을 전달하고, Controller가 리턴한 결과값을 View에게 전달하여 알맞은 응답을 생성한다.

2. HandlerMapping

클라이언트의 요청 URL을 어떤 Controller가 처리할지를 결정한다.

3. Controller

클라이언트의 요청을 처리한 뒤, Model을 호출하고 그 결과를 DispatcherServlet에 알려준다.

4. ModelAndView

Controller가 처리한 데이터 및 화면에 대한 정보를 보유한 객체

5. ViewResolver

Controller가 리턴한 뷰 이름을 기반으로 Controller의 처리 결과를 보여줄 View를 결정한다.

6. View

Controller의 처리결과를 보여줄 응답하면을 생성한다.

아래는 Spring MVC 요청 흐름을 보여준다.

2, 3번 과정과 6, 7번 과정은 Spring에서 자동으로 해준다. 5번 과정에서 String을 리턴하기도 한다.

Spring MVC의 동작 원리는 체계적이다.

Spring MVC의 동작 원리는 아래와 같다.

해당 과정은 web.xml로 설정할 수 있다. web.xml의 예시는 아래와 같다.

<?xml version="1.0" encoding="UTF-8"?> <!-- 1번 과정 -->
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

    <!-- The definition of the Root Spring Container shared by all Servlets and Filters --> 
    <context-param>
        <param-name>contextConfigLocation</param-name> 
        <param-value>/WEB-INF/spring/root-context.xml</param-value> <!-- 3번 과정 -->
    </context-param>

    <!-- Creates the Spring Container shared by all Servlets and Filters -->
    <listener> 
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> <!-- 2번 과정 -->
    </listener>

    <!-- Processes application requests -->
    <servlet>
        <servlet-name>appServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name> <!-- 7번 과정 -->
            <param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup> <!-- 이 줄 때문에 WAS가 실행될 때 DispatcherServlet가 같이 생성됨. --> <!-- 따라서 6번 과정은 생략됨. -->

    </servlet>

    <servlet-mapping>
        <servlet-name>appServlet</servlet-name> <!-- 5번 과정 -->
        <url-pattern>/</url-pattern> <!-- / 이하의 모든 걸 받는다는 의미 -->
    </servlet-mapping>
</web-app>

<!-- 4번 과정은 개발자가 Service, DAO 등 로직을 만듦. -->
<!-- 8번 과정은 DispatcherServlet이 적절한 Controller가 실행됨. -->

AOP가 주목하는 관심 사항은 아래와 같다.

1. 핵심 관심 사항 : 문제를 해결하기 위함.
2. 공통 관심 사항 : 전체에 적용하기 위함.

이 때, 공통 관심 사항을 Aspect라는 독특한 모듈 형태로 사용함으로써 객체지향적인 개념을 지키는 것이 AOP의 핵심 기능이다.

AOP는 아래와 같은 상황에 적용된다.

메서드 성능 검사, 트랜잭션 처리, 예외 반환 등

Spring은 AOP의 일부를 지원한다.

Spring에서 알아야 할 AOP 용어는 아래와 같다.

1. Target : 부가기능을 부여할 대상. 핵심 기능을 담고 있는 모듈.
2. Advice : 어느 시점에 어떤 Aspect를 적용할 지 정의한 것.
3. JoinPoint : Aspect가 적용될 수 있는 지점. Target이 구현한 모든 메서드는 JoinPoint
4. PointCut : Aspect가 적용될 JoinPoint
5. Aspect(Advice + PointCut) : 여러 객체에서 적용되는 공통 관심 사항. Singleton 형태
6. Advisor(Advice + PointCut) : Spring에서만 사용되는 Aspect의 특별한 용어.
7. Weaving : PointCut에 Advice를 삽입하는 과정.

PointCut 표현식은 아래와 같다.

Execution 표현식은 아래와 같다.

Execution 표현식의 예시는 아래와 같다.

<aop:pointcut id="pointCut" expression="execution(public * entity.Person.*(..))>"

이는 entity 패키지에 있는 Person 클래스의 접근 제한자가 public인 모든 메서드를 의미한다.

package에서 .은 해당 package만, ..은 해당 package와 하위 package까지 가리킨다. class에서 +는 해당 class를 구현한 자식 class를 가리킨다. method .. 은 매개변수에 영향을 받지 않고 모든 method를 가리킨다.

기존 프로그래밍과 AOP 프로그래밍의 차이는 아래와 같다.

Spring에서 사용하는 AOP의 특징은 아래와 같다.

1. Proxy 기반 AOP

Proxy는 Advice를 Target 객체에 적용하면서 생성되는 객체이다. 따라서 Proxy는 런타임에 생성된다.

2. Intercept (Proxy가 호출을 가로챔)

(전처리 Advice) Proxy는 Target 객체에 대한 호출을 가로챈 다음 Advice의 부가기능 로직을 수행한다. 그 후, Target의 핵심기능 로직을 호출한다.

(후처리 Advice) 또는 Target의 핵심기능 로직을 호출한 후 Advice의 부가기능 로직을 수행한다.

3. method JoinPoint만 지원

Target의 Method가 호출되는 Runtime에만 Advice를 적용할 수 있다.

Framework란 엔터프라이즈 급 애플리케이션을 만들기 위한 모든 기능을 종합적으로 제공하는 경량화된 솔루션이다.

Spring Framework란 자바로 엔터프라이즈 애플리케이션을 만들 때 포괄적으로 사용하는 프로그래밍 및 컨피그레이션 모델을 제공해 주는 Framework이다.

아래는 Spring 삼각형이다. 이를 통해 Spring Framework의 구조를 파악해보자.

1. POJO(Plain Old Java Object)

객체지향적인 원리에 충실하면서, 환경과 기술에 종속되지 않고 필요에 따라 재활용될 수 있는 방식으로 설계된 오브젝트이다.

2. PSA(Portable Service Abstraction)

환경의 변화와 관계없이 일관된 방식의 기술로의 접근 환경을 제공하는 추상화 구조이다. 즉, 잘 만든 인터페이스를 의미한다.

3. IoC(Inversion of Control) / DI(Dependency Injection)

IoC란 객체 간의 관계가 느슨하게 연결됨을 의미한다. 이를 구현하는 방법 중 하나가 DI 이다.

4. AOP(Aspect-Oriented Programming)

OOP를 돕는 보조적인 기술로, 기능 분리의 문제를 해결하기 위해 만들어진 프로그래밍 패러다임이다.

Spring Framework의 모듈은 아래와 같다.

각 모듈의 설명은 아래와 같다.

※ Framework와 Library의 차이는 아래와 같다.

Framework는 프레임워크가 제어권을 가지지만, Library는 개발자가 제어권을 가진다.

Spring은 IoC / DI를 지원한다.

IoC란 객체 간의 관계가 느슨하게 연결됨을 의미한다. IoC의 유형은 아래와 같다. 하나씩 살펴보자.

1. Dependency Lookup

컨테이너가 lookup context를 통해서 필요한 자원이나 오브젝트를 얻는 방식이다. 그 중 대표적인 방식이 JNDI이다.

2. Dependency Injection

Object에 lookup 코드를 사용하지 않고 컨테이너가 직접 의존 구조를 Object에 설정한다. setter 삽입, 생성자 삽입, 함수 삽입 방식이 존재한다.

IoC를 지원하는 데 컨테이너가 반드시 필요하다. 컨테이너의 정의는 아래와 같다.

객체의 생성, 사용, 소멸에 해당하는 생명주기를 관리하는 컴포넌트이다.

그 중 Spring DI 컨테이너는 빈이라는 객체의 생명주기를 관리한다. 그래서 빈팩토리라고도 한다. 빈팩토리에 여러 가지 컨테이너 기능을 추가하여 ApplicationContext라고 한다. 자세한 내용은 아래 그림을 참고하자.

빈팩토리와 ApplicationContext의 상속 관계는 아래와 같다.

Spring은 빈에 대한 여러 설정을 지원한다.

스프링에서 빈에 대한 설정은 생성범위, 아이디 등 다양하다.

스프링에서 빈에 대한 설정은 3가지 방법으로 가능하다.

1. XML 문서
2. Annotation
3. Java 코드

하나씩 살펴보자.

Spring은 XML 문서로 빈에 대한 설정을 할 수 있다.

App에서 사용할 Spring 자원들을 설정하는 파일이 XML 문서이다. Root tag는 <beans>이며 파일명은 상관없으나 applicationContext.xml을 권장한다. 아래 사진을 참고하자.

빈 객체 생성 및 주입은 <bean> 태그를 통해 이루어진다. 아래 사진을 참고하자.

기본 속성의 의미는 아래와 같다.

name : 주입 받을 곳에서 호출할 이름 설정 id : 주입 받을 곳에서 호출할 유일한 이름 설정 class : 주입할 객체의 클래스 scope : 생성 범위 설정. 기본값은 singleton

scope의 종류는 아래와 같다.

설정한 빈을 java 파일에서 가져오는 방법은 아래와 같다.

스프링 빈의 의존 관계를 설정할 땐 2가지 방법을 사용한다.

첫번째 방법은 생성자를 통해 의존 관계를 설정하는 방법이다. 아래 예시를 살펴보자.

만약 위와 같은 클래스를 bean으로 설정한다고 생각해보자. 그러면 아래와 같이 bean을 생성한다.

순서를 생각하지 않으려면 type, index, name 등으로 유일하게 구분해줘야 한다. 그 방법은 아래와 같다.

만약 주입 받는 매개변수가 참조형일 경우 아래와 같이 설정한다.

이때, PlayerService가 playerDao에 의존된다고 정의한다.

두번째 방법은 속성을 통해 의존 관계를 설정하는 방법이다. 아래 예시를 살펴보자.

아래는 Player 클래스의 setter이다. 이 때, setter 이름을 property에서 name으로 사용한다. 아래 예시를 살펴보자.

만약 주입 받는 매개변수가 참조형일 경우 아래와 같이 설정한다. 이 때는 bean의 id 값을 ref의 값으로 넣는다.

List, Set 등 Collection 계열은 각각의 주입 방식이 존재한다. 하나씩 살펴보자.

1. List

2. Set

3. Map

4. Properties

Spring은 Annotation으로 빈에 대한 설정을 할 수 있다.

생성자나 setter가 아닌 Annotation으로 빈에 대한 설정을 할 수 있다.

빈의 특성이나 종류를 나타내는 Annotation을 Stereotype Annotation이라 한다. 이를 통해 빈을 자동등록할 수 있다. 자세한 내용은 아래와 같다.

DI를 설정하는 Annotation은 @Autowired, @Resource, @Inject 등이 있다. 자세한 내용은 아래와 같다.

@Autowired의 사용 예시는 아래와 같다.

1. 멤버변수 사용 예시

2. 생성자 사용 예시

3. 일반메서드 사용 예시

Qualifier는 동일 타입의 빈이 여러 개일 경우 이름을 주어 구분할 수 있게 한다.

DB 모델링 순서는 개념적 모델링 -> 논리적 모델링 -> 물리적 모델링을 거친다.

위 과정을 통해 실제 업무에 필요한 DB가 만들어진다. 하나씩 살펴보자.

DB 모델링의 첫번째 과정은 개념적 모델링이다.

개념적 DB 모델링의 정의는 아래와 같다.

업무분석을 바탕으로 우선 개체를 추출하고 개체 내에 속성을 구성하며 개체 간의 관계를 정의해서 ER-Diagram을 정의하는 단계

개념적 DB 모델링은 아래와 같이 이뤄진다.

ER-Diagram의 예시는 아래와 같다. 네모는 개체, 타원은 속성, 마름모는 관계를 의미한다.

개체의 정의는 아래와 같다.

사용자와 관계가 있는 주요 객체로써 업무 수행을 위해 데이터로 관리되어야 하는 사람, 사물, 장소, 사건 등

개체를 찾는 법은 아래와 같다.

1. 영속적으로 존재한다.
2. 새로 식별이 가능한 데이터 요소를 가진다.
3. 개체는 반드시 속성을 가진다.
4. 명사적으로 표현이 가능하다.

속성의 정의는 아래와 같다.

개체의 성질, 분류, 수량 등을 나타내는 세부사항

속성의 종류는 아래와 같다.

1. 기초 속성 : 기본적으로 제공되는 속성
2. 추출 속성 : 기초 속성에서 계산을 통해 얻어지는 속성
3. 설계 속성 : 실제로 존재하진 않치만 시스템의 효율성을 위해 설계자가 임의로 부여하는 속성

식별자의 정의는 아래와 같다.

한 개체 내에서 인스턴스를 유일하게 구분할 수 있는 단일 속성 또는 속성 그룹

식별자의 종류는 아래와 같다.

1. 후보키 : 개체 내에서 인스턴스를 구분할 수 있는 속성
2. 기본키 : 후보키 중 각 인스턴스를 유일하게 식별하기 위해 선정된 하나의 속성
3. 대체키 : 후보키 중에서 기본키로 선정되지 않은 속성
4. 복합키 : 둘 이상의 속성을 묶은 속성
5. 대리키 : 필요에 의해 인위적으로 추가한 속성

관계의 정의는 아래와 같다.

두 개체간의 업무적인 연관성

관계를 설정하는 순서는 아래와 같다.

1. 관계가 있는 두 실체를 실선으로 연결하고 관계를 부여한다.

예시는 아래와 같다.

2. 관계 차수를 표현한다.

차수성이란 한 실체의 인스턴스가 다른 실체의 몇 개의 인스턴스와 관련될 수 있는가를 말해준다.

예시는 아래와 같다.

1:1, 1:N, N:1 N:M 관계가 가능하다.

3. 선택성을 표시한다.

선택성이란 있어도 되는지 없어도 되는지를 말해준다.

예시는 아래와 같다.

optional이면 개체가 없어도 된다.

DB 모델링의 두번째 과정은 논리적 모델링이다.

논리적 DB 모델링의 정의는 아래와 같다.

ER-Diagram을 Mapping Rule을 적용하여 관계형 DB 이론에 입각한 스키마를 설계하고 필요하다면 정규화를 하는 단계

Mapping Rule은 아래와 같다.

Mapping Rule을 적용한 사례는 아래와 같다.

정규화의 정의는 아래와 같다.

속성간에 존재하는 함수적 종속성을 분석해서 관계형 스키마를 더 좋은 구조로 정제하는 과정

정규화 단계는 아래와 같다. 한 단계씩 살펴보자.

1. 제 1 정규화 : 반복되는 그룹 속성을 제거한다.

아래는 제 1 정규화 전 테이블을 보여준다.

주문번호, 주문일, 회원번호, 회원명, 회원등급이 중복해서 저장됨을 알 수 있다.

따라서 중복성을 없애기 위해 해당 테이블에 제 1 정규화를 적용하면 아래와 같다.

따로 테이블을 만듬으로써 데이터의 중복없이 데이터를 저장할 수 있다.

2. 제 2 정규화 : 복합키 중 하나의 속성에 다른 속성이 의존하는 속성을 제거한다.

아래는 제 2 정규화 전 테이블을 보여준다.

기본키가 (주문번호, 상품코드) 인데, 상품코드 속성에만 의존하는 상품명, 단위, 단가 속성이 존재한다.

따라서 종속성을 없애기 위해 해당 테이블에 제 2 정규화를 적용하면 아래와 같다.

3. 제 3 정규화 : 기본키가 의존하지 않고 일반 속성에 의존하는 속성을 제거한다.

아래는 제 3 정규화 전 테이블을 보여준다.

회원번호 속성은 기본키가 아님에도 회원명, 회원등급 속성은 회원번호 속성에 의존한다.

따라서 종속성을 없애기 위해 해당 테이블에 제 3 정규화를 적용하면 아래와 같다.

둘 이상의 테이블에서 데이터가 필요한 경우 JOIN을 사용한다.

JOIN의 특징은 아래와 같다.

1. 일반적으로 JOIN 조건을 포함하는 where 절을 테이블 수 - 1개 만큼 작성한다.
2. 일반적으로 테이블의 기본 키나 외래 키로 구성된다.

JOIN에는 INNER JOIN과 OUTER JOIN이 있다. 하나씩 알아보자.

MySQL은 INNER JOIN을 지원한다.

N개의 테이블 간 교집합을 이용하여 합쳐지는 가장 일반적인 JOIN을 INNER JOIN이라고 한다.

아래는 INNER JOIN의 예시이다.

select e.employee_id, e.first_name, e.salary, e.department_id, d.department_name
from employees e (inner) join departments d
on e.department_id = d.department_id
where e.employee_id = 100;

일반적으로 join하는 테이블은 모두 alias로 별칭을 붙여준다. 또한, join 조건은 on 절에 일반 조건은 where 절에 사용한다.

USING을 사용하여 INNER JOIN을 할 수도 있다.

select e.employee_id, e.first_name, e.salary, e.department_id, d.department_name
from employees e (inner) join departments d
using (department_id)
where e.employee_id = 100;

두 sql 모두 사번이 100인 사원을 출력한다.

조건을 명시하지 않은 INNER JOIN을 NATURAL JOIN이라고 한다. 아래 예시를 살펴보자.

select d.department_id, d.department_name, l.city
from departments d natural join locations l
where d.department_id = 10;

NATURAL JOIN은 자동으로 JOIN 되는 테이블들 중 이름과 타입이 같은 열을 모두 JOIN 조건으로 묶어준다. 따라서 department_id가 10인 부서가 출력된다.

※ NATURAL JOIN은 이름과 타입이 같은 열을 모두 JOIN 조건으로 묶기 때문에 의도하지 않은 결과를 부를 수도 있으므로 사용에 주의가 필요하다.

MySQL은 OUTER JOIN을 지원한다.

INNER JOIN은 한쪽 테이블에는 데이터가 존재하지만 다른 테이블에는 데이터가 존재하지 않을 때 출력되지 않는다는 단점이 있다. 이를 극복하고자 MySQL은 OUTER JOIN을 지원한다.

OUTER JOIN의 종류는 LEFT OUTER JOIN, RIGHT OUTER JOIN이 있다. 하나씩 살펴보자.

왼쪽 테이블 중 JOIN 조건에 일치하지 않는 데이터를 출력하고자 할 때 LEFT OUTER JOIN을 사용한다. 사용 예시는 아래와 같다.

select e.employee_id, e.first_name, d.department_name
from employees e left outer join departments d
using (department_id);

출력 결과에는 부서가 없는 사원도 출력된다.

오른쪽 테이블 중 JOIN 조건에 일치하지 않는 데이터를 출력하고자 할 때 RIGHT OUTER JOIN을 사용한다. 사용 예시는 아래와 같다.

select d.department_name, e.employee_id, e.first_name
from employees e right outer join departments d
using (department_id);

출력 결과에는 직원이 없는 부서도 출력된다.

MySQL은 SubQuery를 지원한다.

SubQuery란 다른 쿼리 내부에 포함되어 있는 Select 문을 의미한다. SubQuery 사용 시 주의점은 아래와 같다.

1. 반드시 ()로 감싸진다.
2. 반드시 단일 행 또는 다중 행 비교 연산자와 함께 사용된다.

SubQuery의 종류는 아래와 같다.

1. 중첩 서브 쿼리 : where 문에 작성하는 서브 쿼리
2. 인라인 뷰 : from 문에 작성하는 서브 쿼리
3. 스칼라 서브 쿼리 : select 문에 작성하는 서브 쿼리

MySQL은 중첩 서브 쿼리를 지원한다.

where절에 사용되는 서브 쿼리를 중첩 서브 쿼리라고 한다. 중첩 서브 쿼리는 단일 행 혹은 다중 행 혹은 다중 열을 반환한다.

단일 행 반환 예시부터 알아보자. 아래 예시를 살펴보자.

select employee_id, first_name, department_id
from employees
where department_id = (
                        select department_id
                        from employees
                        where first_name = 'adam'
                        );

위 경우에서 이름이 adam인 사람은 단 한 명임을 보장한다. 따라서 adam과 같은 department_id를 가진 직원들을 출력한다.

다음엔 다중 행 반환에 대해 알아보자. 다중 행 비교 연산자는 아래와 같다.

1. in : 서브 쿼리 결과 중 단 하나라도 일치하면 참
2. any : 서브 쿼리 결과 중 단 하나라도 만족하면 참
3. all : 서브 쿼리 결과를 모두 만족해야 참

다중 행 사용 예시는 아래와 같다.

select employee_id, first_name
from employees
where salary > any (
                    select salary
                    from employees
                    where department_id = 30
                    )
order by salary;

위 코드를 실행하면 모든 직원들 중 department_id가 30인 사람들의 급여 중 하나라도 급여가 높으면 출력된다. 이 때, 급여로 오름차순되어 출력된다.

마지막으로 다중 열 반환 예시를 살펴보자. 아래 예시를 살펴보자.

select employee_id, first_name
from employees
where (salary, department_id) in (
                                    select salary, department_id
                                    from employees
                                    where commission_pct is not null
                                    and manager_id = 148
                                    );

위 코드를 실행하면 manager_id가 148번이고, 커미션은 받는 직원의 급여와 department_id가 같은 직원이 출력된다.

MySQL은 인라인 뷰를 지원한다.

FROM절에 사용되는 서브 쿼리를 인라인 뷰라고 한다. 인라인 뷰는 임시적인 뷰이기 때문에 데이터베이스에는 저장되지 않는다.

인라인 뷰 사용 예시는 아래와 같다.

select e.employee_id, e.first_name, e.salary, e.department_id
from (
    select distinct department_id
    from employees
    where salary < (select avg(salary) from employees)
    ) d join employees e
on d.department_id = e.department_id;

위 코드를 실행하면 모든 사원의 평균 급여보다 급여가 낮은 사원들과 같은 부서에서 일하는 사원들이 출력된다.

MySQL은 스칼라 서브 쿼리를 지원한다.

SELECT절에 사용되는 서브 쿼리를 스칼라 서브 쿼리라고 한다. 스칼라 서브 쿼리는 하나의 행만 반환한다.

스칼라 서브 쿼리 사용 예시는 아래와 같다.

select e.employee_id, e.first_name, salary, department_id,
    (select avg(salary) from employees where department_id = 60) as avg60
from employees e
where department_id = 60;

위 코드를 실행하면 department_id가 60인 사람들이 출력된다. 이 때 모든 출력 결과에 department_id가 60인 사람들의 평균 급여가 함께 출력된다.

DDL로 데이터 구조를 생성, 변경, 제거할 수 있다.

DB 생성, 변경, 삭제 DDL은 아래와 같다.

1. 생성

DB 생성 시에는 아래와 같은 방법으로 생성한다.

1. default character set : 문자를 컴퓨터에 저장할 때 사용하는 규칙들의 집합
2. collate : 문자들을 서로 비교할 때 사용하는 규칙들의 집합

실제 사용 예시는 아래와 같다.

create database dbtest
default character set utf8mb3 collate utf8mb3_general_ci;

2. 변경

DB 변경 시에는 아래와 같은 방법으로 변경한다.

실제 사용 예시는 아래와 같다.

alter database dbtest
default character set utf8mb3 collate utf8mb3_general_ci;

3. 삭제

DB 삭제 시에는 아래와 같은 방법으로 삭제한다.

실제 사용 예시는 아래와 같다.

drop database dbtest;

테이블 생성 시에는 아래와 같은 방법으로 생성한다.

제약 조건의 종류는 아래와 같다.

실제 사용 예시는 아래와 같다.

CREATE TABLE samsung_member (
    idx INT NOT NULL AUTO_INCREMENT,
    userid VARCHAR(16) NOT NULL,
    username VARCHAR(20),
    userpwd VARCHAR(16),
    emailid VARCHAR(20),
    emaildomain VARCHAR(50),
    joindate TIMESTAMP NOT NULL DEFAULT current_timestamp,
    constraint samsung_member.pk PRIMARY KEY (idx)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

제약 조건은 아래 따로 설정해주고, 이름도 붙여주는 것이 좋다.

MySQL은 데이터에 접근할 수 있도록 인덱스를 지원한다.

인덱스를 사용하면 데이터의 검색, 입력, 수정, 삭제 시간을 줄일 수 있다. 인덱스는 클러스터형 인덱스와 보조 인덱스가 있다. 각 인덱스의 특징은 아래와 같다.

특정 나열된 데이터들을 일정 기준으로 정렬해 주는 인덱스를 클러스터형 인덱스라고 한다. 클러스터형 인덱스의 특징은 아래와 같다.

1. 테이블 당 하나만 생성 가능하다.
2. 보조 인덱스보다 검색은 더 빠르지만, 입력과 수정과 삭제는 더 느리다.
3. MySQL에선 PK -> UNIQUE & NOT NULL -> 임의로 보이지 않는 컬럼 순으로 클러스터형 인덱스를 지정한다.

후보키에 부여 가능한 인덱스를 보조 인덱스라고 한다. 보조 인덱스의 특징은 아래와 같다.

1. 테이블 당 여러개 생성 가능하다.
2. 생성시 데이터 페이지는 그냥 둔 상태에서 별도의 페이지에 인덱스를 구성한다.
3. 클러스터형 인덱스보다 입력과 수정과 삭제는 더 빠르지만, 검색은 더 빠르다.

인덱스의 문제점은 아래와 같다.

따라서 인덱스를 생성할 때는 아래와 같은 전략을 따른다.

MySQL은 사용자가 인덱스를 지정할 수 있도록 지원한다.

클러스터형 인덱스는 alter table로, 보조 인덱스는 create index로 인덱스를 생성할 수 있다.

보조 인덱스 생성 예시를 살펴보자. 단순 보조 인덱스는 아래와 같이 생성 가능하다.

create index samsung_address_area_idx
on samsung(address_area)

show index from samsung; 로 인덱스를 확인해보면 아래와 같다.

첫번째 인덱스는 클러스터형 인덱스로 기본키라 클러스터형 인덱스로 자동 설정됐다. 두번째 인덱스가 설정한 단순 보조 인덱스이다.

고유한 보조 인덱스는 아래와 같이 생성한다.

create unique index samsung_user_name_idx
on samsung(user_name);

이 때, user_name이 unique 하지 않으면 오류가 발생한다.

show index from samsung; 로 인덱스를 확인해보면 아래와 같다.

두번째 인덱스가 고유한 보조 인덱스이다. 고유한 보조 인덱스가 설정된 후 해당 열에 값이 중복되는 데이터를 insert 하면 오류가 발생한다.

클러스터형 인덱스는 alter table로, 보조 인덱스는 drop index로 인덱스를 삭제할 수 있다. 인덱스를 모두 삭제할 때는 보조 인덱스부터 삭제한다.

아래는 보조 인덱스 삭제 예시이다.

drop index samsung_user_name_idx on samsung;

show index from samsung; 로 인덱스를 확인해보면 아래와 같다.

MySQL은 View를 지원한다.

데이터베이스에 존재하는 가상의 테이블을 View라고 한다. View는 필요한 데이터만 보여줌으로써 보안성이나 편의성을 확보하는 데 활용된다.

View의 특징은 아래와 같다.

1. 실제 행과 열을 가지고 있다.
2. 테이블처럼 물리적으로 저장되는 것은 아니다.
3. 테이블과 달리 실제 데이터가 없고 SQL만 저장한다.
4. 삽입, 삭제, 갱신 작업에 많은 제약이 걸리지만 가능하다.

View는 아래와 같은 방법으로 생성한다.

실제 사용 예시는 아래와 같다.

create or replace view vsam 
as 
select * 
from sam99 
where a > 3

위 코드의 의미는 아래와 같다.

sam99 table에서 a 속성값이 3 초과인 행만 모아 vsam 이란 View를 만들거나 교체한다.

카운팅 정렬의 정의는 아래와 같다.

항목들의 순서를 결정하기 위해 집합에 각 항목이 몇 개씩 있는지 세는 작업을 하여 시간 복잡도 O(리스트 길이 + 정수의 최대값)에 정렬하는 효율적인 정렬

카운팅 정렬의 제한 사항은 아래와 같다.

1. 정수나 정수로 표현할 수 있는 자료에만 적용할 수 있다.
2. 집합 내의 가장 큰 정수를 알아야 한다.

{0, 4, 1, 3, 1, 2, 4, 1}을 카운팅 정렬해보자. 그 과정은 아래와 같다.

1번 과정

Data에서 각 항목들의 발생 횟수를 세어 Counts 배열에 저장한다.

2번 과정

Counts의 원소 바로 앞 원소의 값을 원래 원소 값에 배열의 앞에서부터 더해준다.

3번 과정

Data의 끝에서부터 Data의 값을 접근한다. 이 때, Data의 값을 인덱스로 Counts의 값을 1 줄여준다. 그리고 줄어든 Counts의 값을 인덱스로 Temp 배열에 Data의 값을 저장한다.

4번 과정

Data를 모두 접근할 때까지 3번 과정을 반복한다.

알고리즘에서 정렬할 때 선택 정렬을 활용할 수 있다.

선택 정렬의 정의는 아래와 같다.

가장 작은 값의 원소부터 차례대로 선택하여 위치를 교환하는 방식으로 시간 복잡도 O(N^2)에 정렬하는 정렬

선택 정렬의 정렬 과정은 아래와 같다.

1번 과정

주어진 리스트 중에서 최소값을 찾는다.

2번 과정

그 값을 리스트의 맨 앞에 위치한 값과 교환한다.

3번 과정

리스트의 끝에 도달하기 바로 전까지 1, 2번 과정을 반복한다.

알고리즘에서 정렬할 때 퀵 정렬을 활용할 수 있다.

퀵 정렬의 정의는 아래와 같다.

특정 값을 기준으로 작은 것은 왼쪽으로 큰 것은 오른쪽으로 위치하는 작업을 반복하여 시간 복잡도 O(Nlog(N))에 정렬하는 정렬

퀵 정렬의 정렬 과정은 아래와 같다.

1번 과정

임의의 기준 값을 잡는다. 여기선 가장 왼쪽 값을 기준 값으로 잡았다.

2번 과정

기준 값을 제외한 가장 왼쪽부터 기준 값보다 더 크거나 같을 때까지 인덱스를 이동한다. 또한 가장 오른쪽부터 기준 값보다 작을 때까지 인덱스를 이동한다. 위의 두 가지 조건을 모두 만족하면 두 값을 교환한다.

3번 과정

2번 과정을 반복하다가 왼쪽 포인터가 오른쪽 포인터보다 커지면 기준 값과 오른쪽 포인터 값을 교환한다.

4번 과정

배열의 모든 요소가 확정될 때까지 1, 2, 3번 과정을 반복한다.

명제란 참과 거짓을 명확히 판별할 수 있다는 문장이다. 예시는 아래와 같다.

두 변의 길이가 같다면 이등변 삼각형이다. (참)

명제가 참이면 대우는 참이고, 명제가 거짓이면 대우는 거짓이다. 예시는 아래와 같다.

이등변 삼각형이 아니면 어느 두 변의 길이를 선택해도 길이가 다르다. (참)

알아야 하는 명제는 아래와 같다.

1. 2로 나눠지는 자연수는 짝수고, 2로 나눠지지 않는 자연수는 홀수다.
2. 마방진은 각 행의 합, 열의 합, 대각선들의 합이 모두 같다.
3. 유리수는 서로소인 두 정수의 나눗셈으로 표현할 수 있고, 표현할 수 없으면 무리수다.
4. 0이 아닌 수로 다른 수를 나눴을 때 나머지가 0이면 나눈 수는 나눠진 수의 약수이다.

알고리즘에 수학 이론을 활용할 수 있다.

활용할 수 있는 수학 이론은 아래와 같다.

1. 페르마의 소정리 : p가 소수고 p가 a의 약수가 아니면 a^p-1 = 1 (mod p) 이다.
2. 배열 차원 변환 : A가 1차원이고 B가 2차원이다. 그럼 A[i] = B[i/col][i%col], B[i][j] = A[i*col+j] 이다.

문자열 패턴 매칭 문제의 정의는 아래와 같다.

이 때, 문자열 X 안에 문자열 Y가 존재하는가?

이를 완전 탐색으로 풀면 아래와 같이 풀 수 있다.

해당 알고리즘의 시간 복잡도는 O(MN) 이다. 좀 더 효율적인 방법을 찾아보자.

문자열 패턴 매칭 문제에 라빈-카프 알고리즘을 활용할 수 있다.

문자열 검색을 위해 해시 값 함수를 사용하는 알고리즘을 라빈-카프 알고리즘이라 한다. 원리는 아래와 같다. 찾으려는 패턴의 해시 값은 패턴을 숫자로 바꾼 4321이라 가정해보자.

그럼 숫자 문자열을 패턴의 길이만큼 잘라 해시 값을 구해 해시 값이 같으면 패턴이 있다고 판단한다.

이 때 아래처럼 슬라이딩 윈도우를 활용할 수 있다.

해당 알고리즘의 고려사항은 아래와 같다.

1. 패턴이 문자열이며 길이가 길어지면 길이에 제한을 두기 위해 mod 연산을 취한다.
2. 1번 연산으로 인해 해시 값이 일치하는 해시 충돌이 일어날 수 있고, 이 때는 문자열이 일치하는 지 하나하나씩 다시 검사한다.

해당 알고리즘의 시간 복잡도는 최악의 경우 O(MN) 이지만, 대부분 O(1)에 가깝다.

문자열 패턴 매칭 문제에 보이어 무어 알고리즘을 활용할 수 있다.

문자열을 오른쪽에서 왼쪽으로 비교하는 알고리즘을 보이어 무어 알고리즘이라 한다. 원리는 아래와 같다.

문자열의 오른쪽 끝에 있는 문자가 불일치하고 이 문자가 패턴 내에 존재하지 않을 때를 살펴보자. 비교 문자열 크기만큼 점프가 가능하다.

이번엔 문자열의 오른쪽 끝에 있는 문자가 불일치하고 이 문제가 패턴 내에 존재할 때를 살펴보자. 일치하는 문자가 있는 곳까지 점프가 가능하다.

따라서 패턴 불일치가 발생할 때 본문 포인터의 점프 횟수를 기록한 skip 배열을 만든다. 아래는 rithm 패턴 문자열의 skip 배열 예시다.

skip 배열을 이용하면 아래와 같이 비교된다.

해당 알고리즘의 시간 복잡도는 최악의 경우 O(MN) 이지만, 최선의 경우 O(N/M) 이다. 평균적으로 가장 빠른 속도를 가지는 알고리즘이기도 하다.

플로이드 워샬은 다익스트라와 달리 음의 가중치에서도 최단 경로를 찾을 수 있다. 따라서 음의 가중치에서 최단 경로를 찾을 때 주로 사용한다.

플로이드 워샬의 주요 아이디어는 아래와 같다.

1~n 까지의 모든 정점을 경유 가능한 정점들로 고려하며 모든 쌍의 최단 경로를 계산한다.

이는 1~n 까지의 모든 정점들을 반드시 경유하는 경로를 의미하지 않음을 주의하자.

플로이드 워샬의 부분 문제는 아래와 같이 정의된다.

Dijk = 정점 {1, 2, ..., k} 중 경유 가능한 정점들로 고려하여, i부터 j까지의 최단 경로

플로이드 워샬의 도출 과정은 아래와 같다.

1. k = 1일 때

i != j != k인 상황에서 1을 첫번째 경유지로 고려해보자. 그럼 i에서 j까지의 경로는 1을 거쳐서 가는 경로, 1을 거치지 않는 경로가 있다. 이 중 거리가 짧은 경로가 최단 경로로 정의된다.

아래 그림은 위 상황을 잘 보여준다.

※ Dij0은 아무 것도 경유하지 않은 경로를 의미한다.

2. k = 2일 때

이번엔 2를 두번째 경유지로 고려해보자. 이 때 1을 경유지로 할지 말지를 고려한 결과가 사용된다. 그럼 i에서 j까지의 경로는 2를 거쳐서 가는 경로, 2를 거지치 않는 경로가 있다. 이 중 거리가 짧은 경로가 최단 경로로 정의된다.

아래 그림은 위 상황을 잘 보여준다.

※ Dij1은 첫 번째 경유지를 고려한 최단 경로를 의미한다.

3. k = n일 때

이번엔 n을 n번째 경유지로 고려해보자. 이 때 n-1을 경유지로 할지 말지를 고려한 결과가 사용된다. 그럼 i에서 j까지의 경로는 n을 거쳐서 가는 경로, n을 거지치 않는 경로가 있다. 이 중 거리가 짧은 경로가 최단 경로로 정의된다.

아래 그림은 위 상황을 잘 보여준다.

이를 일반식으로 정리하면 아래와 같다.

따라서 플로이드 워샬의 구현은 아래와 같다. 이 때 D는 정점 간 거리로 초기화가 필요하다. 플로이드 워샬의 시간 복잡도는 O(N^3)이다.

플로이드 워샬을 실제로 구현하면 아래와 같다.

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.util.StringTokenizer;

public class Floyd {

    public static void main(String[] args) throws Exception {
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        int N = Integer.parseInt(br.readLine());

        int[][] arr = new int[N][N];

        for (int i = 0; i < N; i++) {
            StringTokenizer st = new StringTokenizer(br.readLine());

            for (int j = 0; j < N; j++) {
                arr[i][j] = Integer.parseInt(st.nextToken());
            }
        }

        for (int k = 0; k < N; k++) {
            for (int i = 0; i < N; i++) {
                for (int j = 0; j < N; j++) {
                    arr[i][j] = Math.min(arr[i][j], arr[i][k] + arr[k][j]);
                }
            }
        }

        for (int i = 0; i < N; i++) {
            for (int j = 0; j < N; j++) {
                System.out.print(arr[i][j] + " ");
            }

            System.out.println();
        }
    }
}

입력값은 아래와 같다.

4 0 10 1 5 10 0 2 4 1 2 0 3 5 4 3 0

출력 결과는 아래와 같다.

0 3 1 4 3 0 2 4 1 2 0 3 4 4 3 0