[실습] 뷰(Vue)로 공지사항/게시판 구현하기 - Root/상위 컴포넌트 화면 기능 개발

---

오늘의 Vue.js 실습 목표는 "공지사항/게시판 만들어보기!" 입니다.

본 게시글에서 다루는 사항은 공지사항/게시판 기본(테이블) 화면의 기능을 구현하는 과정입니다.

Spring Boot로 구현한 REST API를 통해 DB 데이터를 조작하는 과정은 별도의 포스팅에서 다룰 예정입니다.

 

---

공지사항/게시판 구현하기 - 기본(리스트/테이블) 화면

사전 준비

아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다.

• [실습] 뷰(Vue)로 공지사항/게시판 구현하기 - 기본(테이블) 화면 기능 개발
• [실습] 뷰(Vue)로 공지사항/게시판 구현하기 - 상세 화면 기능 개발
• [실습] 뷰(Vue.js)로 관리자/직원 전용 Web Application 개발하기 - 메뉴에 공지사항/게시판 연동하기
  • '소스코드 > BaseNotice.vue' 관련 부분

 

---

결과 이미지

구현하기에 앞서 본 글을 따라하시면 아래와 같이 공지사항 화면의 레이아웃이 구성되는 것을 확인하실 수 있습니다.

 

▶ 초기 상태

▶ VIEW DETAIL

▶ REGISTER

▶ MODIFY

▶ DELETE

 

---

소스 코드

src\views\user-web\notice\BaseNotice.vue

전체 코드를 확인하실 분들은 아래 더보기를 클릭해주세요.

<template>
  <v-container>
    <div class="text-h4 font-weight-medium ma-2">NOTICE</div>

    <v-divider></v-divider>

    <v-row>
      <v-col cols="8">
        <NoticeList v-on:changeMode="changeMode"></NoticeList>
      </v-col>
      <v-col cols="4">
        <NoticeDetail
          :mode="mode"
          :notice="notice"
          v-on:finishProcess="finishProcess"
        ></NoticeDetail>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import NoticeList from "./../../../components/user-web/notice/NoticeList.vue";
import NoticeDetail from "./../../../components/user-web/notice/NoticeDetail.vue";

const MODE_INIT = "INIT";
const MODE_DELETE = "DELETE";

export default {
  data() {
    return {
      mode: MODE_INIT,
      notice: [],
    };
  },
  methods: {
    changeMode: function (mode, notice) {
      this.mode = mode;
      if (mode !== MODE_DELETE && mode !== MODE_INIT) {
        if (notice[0] !== undefined) {
          this.notice = notice[0];
        } else {
          this.notice = [];
        }
      } else {
        this.notice.id = notice[0].id;
      }
    },
    finishProcess: function () {
      this.mode = MODE_INIT;
    },
  },
  components: {
    NoticeList,
    NoticeDetail,
  },
};
</script>

<style></style>

 

<template>

<template>
  <v-container>
    ...
        <NoticeList v-on:changeMode="changeMode"></NoticeList>
        ...
        <NoticeDetail
          :mode="mode"
          :notice="notice"
          v-on:finishProcess="finishProcess"
        ></NoticeDetail>
      ...
  </v-container>
</template>

• Event
  • :mode | :notice = 하위 컴포넌트로 전달할 데이터 코드 정의
  • v-on = 하위 컴포넌트에서 전달받은 이벤트 시그널과 연결하는 함수 코드 정의

 

<script>

<script>
...
const MODE_INIT = "INIT";
const MODE_DELETE = "DELETE";

export default {
  data() {
    return {
      mode: MODE_INIT,
      notice: [],
    };
  },
  methods: {
    changeMode: function (mode, notice) {
      this.mode = mode;
      if (mode !== MODE_DELETE && mode !== MODE_INIT) {
        if (notice[0] !== undefined) {
          this.notice = notice[0];
        } else {
          this.notice = [];
        }
      } else {
        this.notice.id = notice[0].id;
      }
    },
    finishProcess: function () {
      this.mode = MODE_INIT;
    },
  },
  ...
};
</script>

• data 영역
  • mode: 선택된 조작 모드(등록, 수정, 삭제, 상세보기) 정보
  • notice: 선택된 공지사항/게시글 정보
• methods 영역
  • changeMode: 공지사항 기본 화면에서 조작 모드가 변경되었을 때 상세 화면으로 전달하기 전 처리 함수
  • finishProcess: 공지사항 상세 화면에서 처리가 해야할 처리가 완전히 끝났을 때 호출되는 함수

 

 

---

References

• Vuetify Tutorial: https://vuetifyjs.com/en/
• Vue.js 공식 사이트: https://vuejs.org/guide/quick-start.html