뷰로 작업을 하다 보면 예상치 못하게 페이지 오류가 나거나 찾지 못하는 url이 나오는 경우가 있다.
이 때 에러 처리를 해주던지 해야 한다.
프로그래밍을 하다보면 세세한 부분을 신경써야 할 때가 생각보다 많이 있다.그게 물건으로 치면 마감이 잘된 물건과 같다고 생각이 든다.
물론 완벽하도록 노력을 해야 겠지만 어떤 경우에 오류가 발생할지는 알수가 없기 때문에 404페이지로 리다이렉트 시키면 좋다.
개발시에도 수없이 만든 page를 테스트를 하고 확인을 하고 갱신을 하겠지만 그래도 실제 서비스를 하게 되면 예상치 못하는 문제가 많이 발생을 한다.
어차피 해야 하는 것이라면 처음부터 해버리자.
참고로 글 쓰는 기준으로 vue-cli는 3.9.3버전이다.
vue는 2.6.10 버전이다.
혹은 코드상에서 main.js쯤에
console.log( Vue.version );
이거나
alert(`Vue version : ${Vue.version}`);
vue --version <-- vue cli 버전 확인
npm list | grep vue <-- 프로젝트에 있는 뷰 버전 확인
요즘 즐겨 쓰는 visual studio code.
생각보다 가벼우면서 개발하는데 불편함이 없다.
터미널을 열어서 간단하게 프로젝트를 만들자.
폴더를 만들었다면 이동 후 vue create .
폴더를 만들면서 프로젝트를 만들려면 vue create 이름
생성시 기본옵션은 선택된 assets로 진행.
만들어진 프로젝트를 열어보면 대출 아래처럼 구조가 잡혀있다. 그중에 router.js를 열어보자.
라우터에 하나를 추가할 예정이다.
적당한 곳에 추가를 한다.
404페이지로 리다이렉트가 되고 /404주소에는 PageNotFound 뷰의 내용을 보여준다.
즉 주소창/404페이지로 자동으로 보내지면서 실 url은 https://~~~~/404로 된다.
{
path: '*',
redirect: '/404'
},
{
path: '/404',
component: PageNotFound
},
컴포넌트를 사용할 수 있도록 router.js에서 불러오자.
코드는 대략 아래와 같을 것이다.
자 마지막으로 views에 PageNotFound.vue를 생성하고 알맞은 내용을 입력해 주면 완료가 된다.
이제 정말 그런지 확인을 해보자. 참고로 visual studio code에서는 상단 Terminal 메뉴 -> new Terminal을 하면 아래쪽에 생긴다.
npm run serve로 실행을 하고 확인을 해보자.
샘플을 위해서 기본 프로젝트이기 때문에 익숙한 첫화면인 Home과 About Welcome to Your Vue.js App이라는 문구가 보이는 첫화면이 나온다.
404에러 페이지를 만나기 위해서 상단 주소창에 아무렇게나 입력을 해보자.
보는것처럼 404페이지로 리다이렉트가 되어서 입력된 페이지의 내용이 보여진다.
크게 복잡한 부분도 없을 뿐더러 실서비스를 해야 한다면 생각을 해봐야 할 페이지이다.
습작을 할 때는 세세한 페이지 처리는 나도 귀찮아서 안하는 편이지만 상용소스를 만들거나 의뢰받은 일을 해야 할 때는 꼼꼼하게 처리를 해줘야 한다.
그 중에 하나가 페이지 에러 인데 이러한 처리를 해주지 않는다면
사용자의 눈에는 하얀 백색의 화면만 보고 잠시 몇초간 기다리거나 멍때리게 될 것이다.
그 시간이 지나면 뭔가가 잘못된걸 알아차린다.
이렇게 해서 오늘은 vue에서 잘못된 페이지를 404로 보내서 처리를 하는 부분을 알아보았다.