Vue.js + Vite + Typescript 를 활용해서 오늘의 명언 앱 만들어보기 #2

↓ 이전 포스팅 ↓

Vue.js + Vite + Typescript 를 활용해서 오늘의 명언 앱 만들어보기 #1

 

지난 시간에는 프로젝트의 기본 세팅을 완료했으니

이번 시간에는 실제 외부API를 불러와 적용해보고 간단한 스타일링까지 해보겠음..

 

 

기본 디렉토리 구조는 이렇게 될 예정 (사실 매우 간단)

 

 

src/components 디렉토리 내에

QuoteCard.vue 파일을 생성하자

 

<template>
  <div class="quote-card">
    <p class="quote-content">"{{ quote }}"</p>
    <p class="quote-author">— {{ author }}</p>
  </div>
</template>

 

일단 대충 모양만 잡아두고

상세한 스타일링은 나중에...

 

<script lang="ts" setup>
import { ref, onMounted } from 'vue'

const quote = ref('로딩 중...')
const author = ref('')

onMounted(async () => {
  const res = await fetch('https://api.quotable.io/random')
  const data = await res.json()
  quote.value = data.content
  author.value = data.author
})
</script>

 

외부 API를 사용할 거임

QuoteCard.vue 작성을 대충 끝냈다면 App.vue로 가서

 

<template>
  <div id="app">
    <h1>오늘의 명언</h1>
    <QuoteCard />
  </div>
</template>

 

마찬가지로 기본 틀을 조금 잡아준다

 

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

 

ts영역에서 QuoteCard를 import해준다

 

 

이런 화면이 나오고 있다면 일단 성공적

하지만 뭔가 아쉽다

 

 

https://noonnu.cc/index

눈누

 

눈누에 들어가서 최대한 가슴이 웅장해지는 폰트를 찾아본다

 

 

 

너로 정했다

 

 

src/assets/ 디렉토리 내에

fonts 폴더 만들고, 거기다가 폰트파일 집어넣자 (웹폰트로 해도됨)

 

src/assets/ 디렉토리 내에

fonts.css 파일을 생성하고, 아래와 같이 작성

@charset "utf-8";

@font-face {
    font-family: 'Tenada';
    src: url('./fonts/Tenada.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-family: 'Tenada', serif;
}

 

fonts.css의 작성이 끝났으면 저장 후,

main.ts 내에 다음의 한 줄을 추가

 

import './assets/fonts.css'

 

 

뭔가 좀 더 웅장해졌다.

 

 

그런데... 뭔가 여전히 허전하다.

 

<template>
  <div id="app">
  	<!-- 오늘 날짜를 넣어보자 -->
    <div class="date">{{ today }}</div>
    
    <h1>오늘의 명언</h1>
    <QuoteCard />
  </div>
</template>

 

App.vue 템플릿 구조 수정

 

 

npm install dayjs

 

dayjs 설치

 

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

const today = dayjs().format('YYYY-MM-DD')
</script>

 

App.vue의 ts단을 이렇게 수정한다

 

#app {
  text-align: center;
  padding: 2rem;
}

.header {
  margin-bottom: 2rem;
}

.date {
  font-size: 0.875rem;
  color: #213547;
  margin-bottom: 0.25rem;
}

h1 {
  padding: 0;
  margin: 1rem 0;
}

 

CSS는 그냥 대충...이렇게

 

 

 

적절히 웅장하다

 

 

하지만, 새로운 명언을 보고 싶을때 마다 F5를 누르는 것은 어딘가 짜치지 않은가?

버튼같은것 하나 있으면 딱 좋을텐데...

 

버튼은 못참지

QuoteCard.vue로 돌아가자

 

<template>
    <!-- Quote Card -->
  <div class="quote-card">
    <p class="quote-content">"{{ quote }}"</p>
    <p class="quote-author">— {{ author }}</p>
    <button @click="fetchQuote" class="refresh-btn">새 명언 불러오기</button>
  </div>
</template>

 

템플릿 구조를 수정해주자

 

 

<script lang="ts" setup>
import { ref, onMounted } from 'vue'

const quote = ref('로딩 중...')
const author = ref('')

async function fetchQuote() {
  try {
    const res = await fetch('https://api.quotable.io/random')
    if (!res.ok) throw new Error('API 오류 발생')
    const data = await res.json()
    quote.value = data.content
    author.value = data.author
  } catch (error) {
    quote.value = '명언을 불러올 수 없습니다. 좀 더 훌륭한 사람이 되세요.'
    author.value = ''
    console.error(error)
  }
}

onMounted(() => {
  fetchQuote()
})
</script>

 

일종의 refresh버튼을 통해 새로운 데이터를 불러오도록

ts구간을 이렇게 수정해줘 보았다

 

 

좀 더 많이 웅장해졌다.

백엔드까지 고려했다면 번역API로 한글번역까지 하려고 했는데

현상황에선 굳이 굳이 스러움

아무튼 외부API로 오늘의 명언 불러오기 완성!