게시판 목록 출력

UlBaMe·2023년 2월 5일
0

게시판 만들기 6 - onethejay님

브라우저에서 요청 보내면 프론트에서 받고 백엔드로 돌려서 DB에 있는 자료 받아오는 과정이다.
링크 참고해서 계속 해 본다.


npm i axios

프로젝트인 뷰 인스턴스에다 대고 전역 변수 설정을 해 주는 것 같은데... 귀찮아가지고 그냥 /src/api/index.js에 정의하고 vuex도 설치해서 /src/store/index.js 만들어서 해보려고 한다.

npm i vuex

//main.js
import { createApp } from 'vue';
import App from './App.vue'
import router from './routes/index'
import {store} from '@/store/index';
import './assets/common.css'

createApp(App).use(store).use(router).mount('#app');

// new Vue({
//   render: h => h(App),
//   router,
//   store,
// }).$mount('#app');
// routes/index.js
import { createRouter, createWebHistory } from 'vue-router';

import PageHome from '@/views/PageHome.vue';
import BoardList from '@/views/board/BoardList.vue';

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'PageHome',
      component: PageHome,
    },
    {
      path: '/about',
      name: 'About',
      //meta: { auth: true },
      component: () => import('../views/PageAbout.vue'),
    },
    {
      path: '/board/list',
      name: 'BoardList',
      component: BoardList
    },
    {
      path: '/:pathMatch(.*)',
      component: () => import('../views/NotFoundPage.vue'),
    },
  ]
});

export default router;
// /store/index.js
import { createStore } from 'vuex';

const store =  createStore({
  state() {
    return {
    }
  },
});

export default store;
// /api/index.js
import axios from 'axios';

function createInstance() {
  return axios.create({
    baseURL: process.env.VUE_APP_API_URL,
  });
}

export const instance = createInstance();
// /src/board/index.js
// 학습 노트 조작과 관련된 CRUD API 함수 파일
import { instance } from './index';

// 학습 노트 데이터 목록을 조회하는 API
function fetchBoard() {
  return instance.get('/board/list');
}

export { fetchBoard };

createApp 함수와 생성자로 이것저것 지정해주는 것 사이의 차이가 궁금하긴 한데 자바스크립트도 계속 타입스크립트 쓰는 방향으로 가고 함수형 프로그래밍도 하고 하니까 저렇게 변하나보다. import도 원래 그냥 import Vue from 'vue' 했었는데 아예 vue 안에서 Vue란 객체가 없어지고(createApp()의 리턴값으로 간 것 같긴한데) 함수인 객체들만 잔뜩 있는 것 같더라. vue-router나 vuex도 비슷한 문제가 있어서 수정했다. 하여튼 편하라고 만들어놓은 거긴 해서 오류 메시지나 공식 문서, 구글 검색 등을 열심히 활용하면 어떻게 구현은 되는 것 같다.

views/BoardList.vue 에서 백엔드 서버에 호출을 보내 데이터를 가져오도록 해보자.

<template>
  <div class="board-list">
    <table class="w3-table-all" summary="연습용 자유 게시판">
      <caption>
        자유 게시판
      </caption>
      <thead>
        <tr>
          <th v-for="header, idx in boardHeader" :key="idx" scope="col" v-bind:id="header" > {{header}} </th>
        </tr>
      </thead>
      <!-- <tfoot>
      </tfoot> -->
      <tbody>
      <tr v-for="(row, idx) in boardList" :key="idx" scope="row">
        <td v-for="(key, idx) in row" :key="idx">{{key}}</td>
      </tr>
      </tbody>      
    </table>
    <div class="common-buttons">
      <button type="button" class="w3-button w3-round w3-blue-gray" v-on:click="fnWrite">등록</button>
    </div>
  </div>
</template>

<script>
import {fetchBoard} from '../../api/board';
import _ from 'lodash';

export default {
  data() {
    return {      
      boardHeader: [],
      boardList: [],
    }
  },  
  mounted() {
    this.GetList()
  },
  methods: {
    async GetList() {
        const {data:rawBoardList} = await fetchBoard();        
        const filteredBoardList = rawBoardList.map(post=>_.pickBy(post, (value) => { return !_.isNil(value) }))
        
        this.boardList = filteredBoardList;
        this.InitHeader(Object.keys(filteredBoardList[0]));
      },
      InitHeader(boardHeader) {
      	this.boardHeader=boardHeader;
    },
  },
}

</script>

원 소스에서 약간 수정을 하고 Pagenation 부분은 같이 있으니까 복잡해서 뺐는데... 하다보니 끝이 없는 것 같아서(원래 테이블 제목이나 등록일시 표현 등에 filter 처리를 하려고 했는데 보니까 vue3에서는 권장하지 않는다고 뭐라하고... 피곤하다 ㅠ) 일단락 짓고 나중에 수정하려고 한다. 게시판 목록과 페이지 부분은 나중에 시간 되는대로 컴포넌트화 해서 분리해야하나 싶다.

현재(23/2/7) 구현된 게시판 목록 페이지 상태.

0개의 댓글