404 Not Found

• 사용자가 요청한 리소스가 존재하지 않을 때 응답
• NotFount404 컴포넌트 작성하고 라우터 등록

// views/NotFound404.vue

<template>
  <div>
    <h1>404 NOT FOUND</h1>
  </div>
</template>

<script>
export default {
    name: '404NotFound',
}
</script>

// router/index.js

import NotFound404 from '@/views/NotFound404'

const routes = [
  ...
  {
    path: '/404',
    name: 'NotFound404',
    component: NotFound404
  },
]

• http://localhost:8080/404 확인

• 이렇게 직접 요청하는 방식이 아닌, 요청한 리소스가 존재하지 않을 때 404로 이동하게 하려면?

요청한 리소스가 존재하지 않는 경우

• 모든 경로에 대해서 404 page로 redirect 시키기
  • 기존에 명시한 경로가 아닌 모든 경로가 404 page로 redirect 됨
  • 이때, routes에 최하단부에 작성해야 함 (위에서부터 순서대로 찾기 때문)

// router/index.js

import NotFound404 from '@/views/NotFound404'

const routes = [
  ...
	{
    path: '*',
    redirect: '/404'
  },
]

형식은 유효하지만 특정 리소스를 찾을 수 없는 경우

• 예시) Django에게 articles/1/로 요청을 보냈지만, 1번 게시글이 삭제된 상태
  • 이때는 path: ‘*’를 만나 404 page가 렌더링 되는 것이 아니라 기존에 명시한 articles/:id/ 에 대한 components가 렌더링됨
  • 하지만 데이터가 존재하지 않기 때문에 정상적으로 렌더링이 되지 않음
• 해결책
  • 데이터가 없음을 명시
  • 404 page로 이동해야 함

실습

💡 Dog API 문서(https://dog.ceo/dog-api/) 를 참고하여 동적 인자로 강아지 품종을 전달해 품종에 대한 랜덤 이미지를 출력하는 페이지를 만들어보기

• Axios 설치

$ npm i axios

• DogView 컴포넌트 작성

// views/DogView.vue

<template>
  <div>
  </div>
</template>

<script>
export default {
    name: 'DogView',
}
</script>

<style>

</style>

• routes에 등록
  • ‘*’ 보다 상단에 등록

// router/index.js

import DogView from '@/views/DogView'

const routes = [
  ...,
  {
    path: '/dog/:breed',
    name: 'dog',
    component: DogView
  },
  {
    path: '*',  // 위에 존재하지 않는 모든 것
    redirect: '/404'
  },

]

• Dog api 문서를 참고하여 axios 로직을 작성

// views/DogView.vue

<template>
  <div>
    <img v-if="imgSrc" :src="imgSrc" alt=""><br>
  </div>
</template>

<script>
import axios from 'axios'

export default {
    name: 'DogView',
    data() {
        return {
            imgSrc: null,
        }
    },
    methods: {
        getDogImage(){
            const breed = this.$route.params.breed // 품종 가져오기
            const dogImageSearchURL = `https://dog.ceo/api/breed/${breed}/images/random`

            axios({
                method:'get',
                url: dogImageSearchURL
            })
              .then((response) =>{
                console.log(response)
                const imgSrc = response.data.message
                this.imgSrc = imgSrc
              })
              .catch((error) => console.log(error))
        }
    },
    created() {
      this.getDogImage()
    }
}
</script>

<style>

</style>

• /dog/dingo에 접속하면 dingo 품종에 대한 랜덤 사진이 출력

• axios 요청이 오는 중 동작하고 있음을 표현하기 위한 로딩 메시지 정의

// views/DogView.vue

<template>
  <div>
    <p v-if="!imgSrc">{{ message }}</p>
    <img v-if="imgSrc" :src="imgSrc" alt=""><br>
  </div>
</template>

<script>
import axios from 'axios'

export default {
    name: 'DogView',
    data() {
        return {
            imgSrc: null,
            message: "로딩중..."
        }
    },

• axios 요청이 실패할 경우 자료가 없음을 표현하기

// views/DogView.vue

axios({
        method:'get',
        url: dogImageSearchURL
    })
      .then((response) =>{
        console.log(response)
        const imgSrc = response.data.message
        this.imgSrc = imgSrc
      })
      .catch((error) => {
        this.message=`${this.$route.params.breed}는 없는 품종입니다`
        console.log(error)
    })

• /dog/abc 에 접속

• 이전처럼 메세지를 바꿀수도 있지만 axios 요청이 실패할 경우 404페이지로 이동 시킬 수도 있음

// views/DogView.vue

axios({
        method:'get',
        url: dogImageSearchURL
    })
      .then((response) =>{
        console.log(response)
        const imgSrc = response.data.message
        this.imgSrc = imgSrc
      })
      .catch((error) => {
        this.$router.push('/404')
        console.log(error)
    })

프로젝트 전체 코드 확인

https://github.com/mjieun0956/TIL/tree/master/Vue/12.%20404%20Not%20Found/404-not-found