[Vue3.js] Vue3+nodejs+mariadb로 게시판 만들기(2) - 뷰 개발환경 세팅(마무리)

지난 포스팅에서 진행하지 못했던 내용을 작업해보려고 한다.

(하다가 오류 나서 시간이 없어서 급하게 종료..)

 

지난 포스팅과 동일한 환경에서 우선 아래 명령어를 실행하여 화면을 띄운다.

 

npm run serve

 

나는 composition api를 사용할 것이기 때문에 HelloWorld.vue와 App.vue에 setup을 선언하고, defineComponent 되어 있는 부분을 삭제한다.

 

[HelloWorld.vue의 script 부분]

 

<script lang="ts" setup>

</script>

 

[App.vue의 script 부분]

 

<script lang="ts" setup>
import HelloWorld from './components/HelloWorld.vue';

</script>

 

음? 어제는 이거 할 때 오류 발생했었는데.. 뭐지 잘된다.

우선 무시하고, 다음 세팅을 진행하자.

 

UI 프레임워크는 vuetify를 사용하려고 한다.

Ctrl+C를 눌러 서버를 종료하고, 아래 명령어를 입력하자.

 

vue add vuetify

 

불과 몇 달 전까지만 해도 Vue3에서는 vuetify를 사용할 수 없었지만, 지금은 베타 버전으로 사용이 가능한 듯하다.

'굳이 베타 버전을 써야 하는가?'에 대한 의문이 들긴 하지만, 나의 현재 목적은 우선 '경험해보는 것'이기 때문에 그냥 진행하려고 한다.

 

어차피 곧 출시가 될 예정이니, 해보는 것도 나쁘지 않을 것 같다.

 

위 명령어를 입력하면 아래와 같이 뜬다.

 

 

가장 아래 옵션 선택

 

그럼 src/plugins 폴더가 새로 생기며 vuetify.ts 파일이 생긴 것을 확인할 수 있다.

그리고 App.vue와 HelloWorld.vue를 확인해보면, 기껏 지워놨던 defineComponent가 다시 부활했다.

 

다시 지워준다. 하지만 HelloWorld의 경우 template도 구조가 변경된 것을 확인할 수 있다.

그래서 HelloWorld.vue 소스는 아래처럼 변경해야 한다.

 

1. defineComponent 삭제

2. setup추가 및 data() 안에 있는 변수들 별도 선언

 

<script lang='ts' setup>
  const ecosystem = [
        {
          text: 'vuetify-loader',
          href: 'https://github.com/vuetifyjs/vuetify-loader',
        },
        {
          text: 'github',
          href: 'https://github.com/vuetifyjs/vuetify',
        },
        {
          text: 'awesome-vuetify',
          href: 'https://github.com/vuetifyjs/awesome-vuetify',
        },
      ],
      importantLinks = [
        {
          text: 'Chat',
          href: 'https://community.vuetifyjs.com',
        },
        {
          text: 'Made with Vuetify',
          href: 'https://madewithvuejs.com/vuetify',
        },
        {
          text: 'Twitter',
          href: 'https://twitter.com/vuetifyjs',
        },
        {
          text: 'Articles',
          href: 'https://medium.com/vuetify',
        },
      ],
      whatsNext = [
        {
          text: 'Explore components',
          href: 'https://vuetifyjs.com',
        },
        {
          text: 'Roadmap',
          href: 'https://vuetifyjs.com/en/introduction/roadmap/',
        },
        {
          text: 'Frequently Asked Questions',
          href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
        },
      ];
</script>

 

그리고 이쯤에서 다시 서비스를 실행해보자.

 

npm run serve

 

오? 화면이 뭔가 더 이뻐진 것을 확인할 수 있다.

 

 

 

 

 

 

그리고 vuetify 공식 문서에서 게시판 목록 화면과 게시글 작성 화면으로 사용할만한 UI를 찾아보자.

 

목록 화면은 v-table을 사용하여 만들었다.

 

src/components/BoardList.vue 컴포넌트 생성 후 아래 코드 입력

<template>
  <v-table>
    <thead>
      <tr>
        <th class="text-left">
          번호
        </th>
        <th class="text-left">
          제목
        </th>
        <th class="text-left">
          작성자
        </th>
      </tr>
    </thead>
    <tbody>
      <tr
        v-for="item in list"
        :key="item.id"
      >
        <td>{{ item.id }}</td>
        <td>{{ item.title }}</td>
        <td>{{ item.writer }}</td>
      </tr>
    </tbody>
  </v-table>
</template>

<script lang="ts" setup>

const list = [
    { id: 1, title: '첫 번째 게시글', writer: 'artistjay' },
    { id: 2, title: '두 번째 게시글', writer: 'artistjay' },
    { id: 3, title: '세 번째 게시글', writer: 'artistjay' },
    { id: 4, title: '네 번째 게시글', writer: 'artistjay' },
    { id: 5, title: '다섯 번째 게시글', writer: 'artistjay' },
    { id: 6, title: '여섯 번째 게시글', writer: 'artistjay' },
]
</script>

 

그리고 App.vue에 가서 HelloWorld를 참조하던 것을 BoardList로 변경

 

<template>
  <v-app>
    <v-main>
      <BoardList/>
    </v-main>
  </v-app>
</template>

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

 

화면 확인

 

 

이쁘진 않지만 원하는 대로 나왔다.

 

vuetify 공식 문서에서 게시글 작성 화면도 찾아보자.

단순하게 v-text-field와 v-textarea를 사용하여 만들었다.

 

src/components/BoardWrite.vue 컴포넌트 생성 후 아래 코드 입력

<template>
    <v-form>
        <v-text-field
            label="제목"
        ></v-text-field>
        <v-textarea
          label="내용"
        ></v-textarea>
    </v-form>
</template>

<script lang="ts" setup>
</script>

 

그리고 아까와 마찬가지로 App.vue에서 BoardList 대신 BoardWrite를 참조한다.

 

그리고 화면 확인

 

 

완성!

 

다음 포스팅에서는 목록 화면과 작성 화면에 이동가능한 router 설정을 해보도록 하겠다.