Nuxt에서 redirect 설정하기

Issue

프론트엔드 개발 업무를 수행하다보면 페이지마다 리디렉션 처리를 해야 할 경우가 빈번히 발생한다. 이에 따라 Nuxt.js에서의 리디렉션 처리 방법을 정리해보려고 한다.

Problem

• https://dev.glamai.com/rankings/editors-pick/bathbody/* -> https://dev.glamai.com/rankings/editors-pick/bath-body/*
• 위 path가 포함된 모든 url이 redirect 되어야함

Solution

1. nuxt.config.js 파일에서 redirect를 설정하여 해당 URL로의 리다이렉트를 구현

export default {
  // ...
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        path: '/rankings/editors-pick/bathbody/:slug',
        redirect: (to) => {
          return '/rankings/editors-pick/bath-body/' + to.params.slug
        }
      })
    }
  }
}

위 코드에서 extendRoutes 함수를 사용하여 새로운 경로를 추가하고, redirect 속성을 이용하여 리다이렉트할 경로를 지정한다. :slug은 동적 라우트 매개변수로, 실제 경로에서 해당 부분에 들어가는 값을 의미한다. 이 값을 활용하여 새로운 경로를 생성한다.

2. middleware를 사용하여 라우팅 전에 작업 수행

우선, middleware 디렉토리에 redirect.js 파일을 생성한다. 그리고 아래와 같이 코드를 작성

export default function ({ route, redirect }) {
  if (route.path.startsWith('/rankings/editors-pick/bathbody/')) {
    return redirect(route.path.replace('/rankings/editors-pick/bathbody/', '/rankings/editors-pick/bath-body/'))
  }
}

그리고, nuxt.config.js 파일에서 middleware를 등록한다.

module.exports = {
  // ...
  router: {
    middleware: ['redirect']
  }
}

3. .htaccess 파일을 사용하여 리다이렉트를 설정하는 방법

.htaccess 파일은 웹 서버에서 사용되는 설정 파일로, 리다이렉트나 URL 재작성 등의 작업을 수행할 수 있다.

RewriteEngine On
RewriteRule ^rankings/editors-pick/bathbody/(.*)$ /rankings/editors-pick/bath-body/$1 [R=301,L]

위 코드를 .htaccess 파일에 추가하면, /rankings/editors-pick/bathbody/:slug 경로로 접근했을 때 자동으로 /rankings/editors-pick/bath-body/:slug 경로로 리다이렉트된다.
하지만 .htaccess 파일을 사용하려면 웹 서버가 Apache와 같은 서버여야 하며, 서버 설정이 허용되어 있어야 한다. 따라서, 사용 가능한지 확인해보고 적용해야 한다.

What I Learn

리다이렉트는 프론트엔드 개발에서 사용자를 한 URL에서 다른 URL로 보내는 데 사용되는 일반적인 방식이다. URL 구조 변경, 페이지 재설계 또는 오래되었거나 잘못된 URL에서 사용자를 리다이렉트하는 등 리다이렉트가 필요한 이유를 알게되었다.
1. 기존 주소를 리다이렉트하면 검색 엔진에서 새로운 페이지를 색인할 수 있다. 검색 엔진은 웹사이트의 콘텐츠를 수집할 때, 링크를 따라가면서 페이지를 탐색하는데, 페이지가 존재하지 않는 경우에 검색 엔진의 크롤링이 멈추게 된다. 이를 방지하기 위해, 존재하지 않는 페이지를 다른 유효한 페이지로 리다이렉트하는 것이 검색 엔진 최적화 (SEO)에 매우 중요하다. 새로운 페이지가 색인되면 검색 결과에서 노출될 가능성이 높아지기 때문이다.
2. 사용자가 새로운 페이지를 쉽게 찾을 수 있다. 예를 들어, 기존 주소가 변경되거나 삭제되었을 때, 사용자는 오류 페이지를 보게 된다. 하지만 기존 주소를 새로운 페이지로 리다이렉트하면 사용자는 자동으로 새로운 페이지로 이동할 수 있다. 다른 예로, 사용자가 로그인 페이지에 접속하려고 할 때, 이미 로그인되어 있다면 메인 페이지로 자동으로 이동시켜 주는 것도 리다이렉트이다.
3. 기존 주소를 가지고 있는 다른 웹사이트에서도 새로운 페이지로 연결될 수 있다. 이는 링크 빌딩, 트래픽 유입 등을 통해 웹사이트의 성과 향상에 기여할 수 있다.
4. 긴 URL을 짧게 줄여서 사용자가 쉽게 기억하고 공유할 수 있도록 하는 역할도 한다.
5. 사용자가 입력한 개인정보나 민감한 데이터를 포함하는 페이지를 보호하기 위해, HTTPS 프로토콜을 사용하고, HTTP에서 HTTPS로 리다이렉트하는 것이 좋다.

따라서, 기존 주소를 리다이렉트하는 이유는 검색 엔진 최적화, 사용자 경험 향상, 링크 빌딩 등 다양한 이유로 인해 필요하다. 하지만 기존 주소를 리다이렉트하더라도, 새로운 주소를 할당하지 않는 경우는 거의 없다. 새로운 페이지를 만들어서 기존 페이지에 대한 정보를 전달하고, 새로운 페이지를 색인하도록 해야 한다.

프론트엔드 개발에서 리다이렉트를 구현할 때 염두해 두어야 할 몇 가지 사항

• SEO에 유의
  • 리다이렉트는 웹사이트의 검색 엔진 최적화(SEO)에 영향을 미칠 수 있으므로 주의해서 처리하는 것이 중요하다. 영구(301) 리다이렉트는 검색 엔진 값을 이전 URL에서 새 URL로 전송하므로 임시(302) 리다이렉트보다 선호된다.
• 철저한 테스트
  • 리다이렉트를 구현하기 전에 의도한 대로 작동하는지 철저히 테스트하는 것이 중요하다. 이는 수동으로 수행하거나 자동화된 테스트 도구를 사용하여 수행할 수 있다.
• 사용자 경험 고려
  • 리다이렉트는 사용자 경험을 염두에 두고 설계해야 한다. 사용자가 올바른 URL로 전송되는지 확인하는 것은 물론 예기치 않거나 혼란스러운 리다이렉트가 발생하지 않도록 하는 것도 중요하다.
• 올바른 방법 선택
  • 서버측 리다이렉트, 클라이언트측 리다이렉트 또는 JavaScript 리다이렉트를 사용하는 등 프론트엔드 개발에서 리다이렉트를 구현하는 방법에는 여러 가지가 있다. 요구 사항과 요구 사항에 가장 적합한 방법을 선택하는 것이 중요하다.