[실습] 뷰(Vue)로 공지사항/게시판 구현하기 - 기본(리스트/테이블) 화면 UI, 레이아웃(Layout) 구현하기

제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 

제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.

 

혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요!

---

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

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

 

---

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

사전 준비

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

• 프론트엔드(Frontend) 개발 환경 구축하기: https://logs-jejustone.tistory.com/45
  • 프로그램 설치
  • 프로젝트 구축
  • 프로젝트 구동 테스트
• 뷰(Vue.js)로 관리자/직원 전용 Web Application 개발하기
  • UI/Layout 구현하기: https://logs-jejustone.tistory.com/47
  • Navigation Bar, Side Bar, Menu 구현하기: https://logs-jejustone.tistory.com/48

 

혹시라도 아래 개념이 잘 기억나지 않으시는 분들은 관련 링크를 참조하시기 바랍니다.

• 뷰 싱글 파일 컴포넌트 체계: https://logs-jejustone.tistory.com/16
• 뷰 프로젝트 구조: https://logs-jejustone.tistory.com/12

 

---

파일 구조

Notice의 기본(게시글 리스트, 테이블) 화면의 기본적인 레이아웃을 구현하기 위해서 작업해야 할 파일은 총 1개입니다.

아래 폴더/파일 트리 구조와 호출 흐름도는 Notice 페이지가 전체 구현이 완료된 후 갖춰질 구조입니다.

작업할 파일에 대한 간략한 설명은 아래를 참고하시면 됩니다.

•  NoticeList.vue
  • 목적: Notice 페이지 내 좌측에 위치한 영역을 관리하는 컴포넌트로 공지사항 리스트 및 리스트에 대한 조작 기능을 제공하는 파일
  • 경로: src\components\user-web\notice

 

---

결과 이미지

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

---

Layout 구조

공지사항 게시판의 기본 영역은 크게 3가지 Layout으로 구성되어 있습니다.

1. 조작 영역: 리스트/테이블 영역에 대한 조작 버튼이 제공되는 영역
2. 콘텐츠 영역: 게시판에 대한 리스트/테이블이 표시되는 영역

 

---

소스 코드

src\components\user-web\notice\NoticeList.vue

기본(리스트/테이블) 화면을 구현하는 파일로 기능 구현을 제외한 UI/Layout을 Vuetify를 이용하여 구현한 코드입니다.

 

<template>

UI/Layout을 구성하는 코드가 위치한 영역입니다.

<template>
  <div class="ma-md-5">
    <div class="d-flex justify-end mt-5">
      <!-- For Notice List Manipulation > View Detail -->
      <v-btn text outlined class="mx-md-1 elevation-2">VIEW DETAIL</v-btn>

      <!-- For Notice List Manipulation > Register  -->
      <v-btn text outlined class="mx-md-1 elevation-2">REGISTER</v-btn>

      <!-- For Notice List Manipulation > Modify  -->
      <v-btn text outlined class="mx-md-1 elevation-2">MODIFY</v-btn>

      <!-- For Notice List Manipulation > Delete  -->
      <v-btn text outlined class="mx-md-1 elevation-2">DELETE</v-btn>
    </div>

    <!-- For Notice List -->
    
    <v-data-table
      single-select
      show-select
      class="mt-md-2 elevation-5"
      :headers="headers"
      :items="data"
      :items-per-page="10"
    >  
  </div>
</template>

• 조작 영역:
  • <v-btn>: Vuetify에서 제공하는 버튼 태그
  • 우측을 기준으로 아이템이 보이도록 'd-flex justify-end' 를 class로 선언
  • 버튼의 스타일을 통일화하여 'text outlined'으로 지정, 약간의 그림자 효과를 위해 'elevation'을 class로 선언
• 콘텐츠 영역: 
  • <v-data-table>: Vuetify에서 제공하는 데이터가 표시될 테이블 태그
  • <script>의 data 영역에서 header와 items를 설정하는 코드로 구현되어 있음 
    • 향후 DB Table에서 데이터를 read하여 표시하는 방향으로 구현 변경 예정
  • Vuetify에서 기본적으로 페이징 기능으로 한 페이지에 표시할 행의 수를 '5/10/15/All' 단위로 제공
    • 기본적으로 한 페이지당 표시될 행의 수를 10개로 설정

 

<script>

UI/Layout에 해당하는 데이터나 동작하는 함수를 구현하는 코드가 위치한 영역입니다.

<script>
export default {
  data() {
    return {
      // For Notice List
      headers: [
        {
          text: "Category",
          value: "category",
        },
        {
          text: "Title",
          value: "title",
        },
        {
          text: "Date",
          value: "date",
        },
        {
          text: "Name",
          value: "name",
        },
      ],
      data: [
        {
          id: "1",
          category: "Competition",
          title: "The 3rd Competition Open!",
          date: "2022/11/01",
          name: "SYSTEM",
        },
        {
          id: "2",
          category: "System Check",
          title: "2022/12/10 System Check",
          date: "2022/12/01",
          name: "SYSTEM",
        },
        {
          id: "3",
          category: "System Check",
          title: "2022/12/15 System Check",
          date: "2022/12/10",
          name: "SYSTEM",
        },
        {
          id: "4",
          category: "System Check",
          title: "2023/01/01 System Check",
          date: "2022/12/21",
          name: "SYSTEM",
        },
        {
          id: "5",
          category: "Competiton",
          title: "The 4th Competition Open!",
          date: "2023/01/01",
          name: "SYSTEM",
        },
        {
          id: "6",
          category: "Etc",
          title: "Test Announcement",
          date: "2023/01/05",
          name: "SYSTEM",
        },
      ],
    };
  }
};
</script>

• headers: <v-data-table>의 헤더에 표시될 항목에 대한 정보를 담고 있는 변수
  • 향후 DB Table에서 read하여 뿌려주는 방식으로 변경 예정
• data: <v-data-table>의 바디에 표시될 항목에 대한 정보를 담고 있는 변수
  • 향후 DB Table에서 read하여 뿌려주는 방식으로 변경 예정

 

 

---

References

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