Today I Learned : Vue.js 랜더링시 해결 과정 중 배운 것 정리

 

어제 Do it! 프런트엔드 UI 개발 with Vue.js의 구현을 모두 끝냈다. 해당 책을 기획이자 디자인, 와이어프레임이라고 생각하고 했던 사이드 프로젝트가 끝이 났다.

그리고 오늘부터 좀 더 프런트엔드답게 고정 데이터인 부분을 => axios 호출해서 가져오는 형태 또는 모듈화 및 추상화를 넣어주는 리팩토링을 시작하고자 했다.

 

과정에서 몇 가지의 문제점이 생겼습니다. 또 해결해 가면서 배운 것들을 정리하는 과정을 가져볼까 합니다.

 

---

 

 

0. 이전에 구현 중 localhost:5147/ 로 이동시 index.vue로 이동하게 라우팅이 되어 있었습니다. 하지만 index.vue는 아래와 같이 구현되어 있었습니다.

 

<template>
  <div>
    <section id="wrap" class="subPageMain">
      <h1 class="blind">웹사이트 제목</h1>
      <Header></Header>
      <section id="container">
        <RouterView />
      </section>
      <Footer></Footer>
    </section>
  </div>
</template>

<script setup lang="ts">
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
</script>

 

이렇기 때문에 path: "/"으로 갈 경우 content가 비어있는 페이지가 바로 보이게 되죠. 

 

0. 해결: 리다이렉트를 이용해서 문제를 해결

 

const withPrefix = (prefix: any, routes: any) =>
  routes.map((route: any) => {
    route.path = prefix + route.path
    return route
  })

const pageRouter = {
  path: '/',
  name: 'layout',
  component: () => import('@/layout/index.vue'),
  children: [
    {
      path: '/',
      redirect: '/main' // <=== 경로로 접속 시 /main으로 리다이렉트!!
    },
    {
      path: '/main',
      name: 'main',
      component: () => import('@/views/main.vue')
    },
    ...withPrefix('/book', [
      {
        path: '/',
        component: () => import('@/views/Books/Books.vue')
      },
      {
        name: 'book',
        path: '/:tabId',
        component: () => import('@/views/Books/Books.vue')
      }
    ]),
    {
      path: '/reference',
      name: 'reference',
      component: () => import('@/views/Reference/reference.vue')
    },
    {
      path: '/movieclass',
      name: 'movieclass',
      component: () => import('@/views/MovieClass/movieclass.vue')
    },
    {
      path: '/classample',
      name: 'classample',
      component: () => import('@/views/ClassSample/classsample.vue')
    },
    {
      path: '/company',
      name: 'company',
      component: () => import('@/views/Company/company.vue')
    }
  ]
}

export default pageRouter

 

---

 

1. axios를 호출하려고 하는데 백엔드 서버가 없는 상황.. express.js를 배웠지만 이거 리팩토링 학습하자고 그걸 하기에는 배보다 배꼽이 더 큰 느낌... 해서 mock 서버를 만드는 법을 배웠는다. - json.server 이용!

 

1-1. json-server를 설치하는 법

yarn global add json-server를 해도 되지만, 만약에 여러분이 npm을 사용하는 경우엔 제대로 작동하지 않을 수 도 있습니다.

$ npm i -g json-server

 

설치가 완료되었으면, fake-server라는 디렉터리를 만들고, 그 안에 db.json이라는 파일을 만드세요.

$ mkdir fake-server
$ touch db.json

 

db.json의 파일 내용은 다음과 같이 memo라는 배열을 입력해 주시면 되겠습니다:

db.json

{
  "data": [
      {
          "id": 1,
          "title": "first data title",
          "body": "first data content"
      }
  ]
}

 

그다음에, fake-server 디렉터리에서 다음 명령어를 통하여 서버를 실행하세요

json서버가 db.json을 바라보겠다. 포트 3001을 이용해서 대충 이렇게 이해하고 쓰고 있습니다.

또한 json서버를 라우팅 하고 싶을 때는

$ json-server --watch db.json --port 3001

 

아래 코드와 같이 할 수 있습니다.

json-server --watch data1.json --routes routes1.json --port 3001
json-server --watch data2.json --routes routes2.json --port 3002

// example routes1
{
  "/posts": "/posts",
  "/comments": "/comments"
}

// example data1.json
{
  "posts": [
    { "id": 1, "title": "Post 1" },
    { "id": 2, "title": "Post 2" }
  ],
  "comments": [
    { "id": 1, "text": "Comment 1" },
    { "id": 2, "text": "Comment 2" }
  ]
}

 

3. axois로 호출하고 응답받은 json 데이터 NewBooks.it, NewBooks.sicence.. 이렇게 있는 형태이고, it, service만 string으로 받아서 데이터를 치환하고 싶다면? 대괄호 표기법을 써서 해결해 보자!

const addContent = (newBookTitleName: string, index: number) => {
  showBookNewBook.value = []
  showBookNewBook.value = (Newbooks.value as any)[newBookTitleName]; // Push the new data to content
  isActiveNumber.value = index // Reset the active index
}

 

 

4. json 데이터를 주석표시해서 정보를 전달하고 싶을 때가 있을 것이다. 그럴 때는 이런 방법을 사용한다.

 

{    
     "Newbooks" : {
      "__comment__": "책 카테고리 탭에 따른 다른 종류의 책 데이터 모음", <== 요런식으로 주석표시
      "Newbooks": [ {
        "imgurl": "/images/books_image/book01.jpg",
        "name": "Do it! 웹 사이트 따라 만들기",
        "subdec": "HTML, CSS, 자바스크립트 문법서는 공부했지만, 웹 사이트를..."
      },
....

 

 

---

후기

 

이만 main.vue를 리팩토링 하면서 문제점을 만나고

해결하던 과정에서 배운 정리 목록들을 마치고자 한다.

아직 리팩토링이 끝나지 않았으므로 계속 올릴 예정이다.