리팩토링-유지보수성 높이기-URL path를 상수로 관리

이번에는 URL path를 상수로 변경하는 작업을 해보려합니다.

기존에는 다음과 같이 직접 문자를 입력하는 식으로 관리하였습니다.

import PrimaryLink from "@/app/_components/link/primaryLink";
import PATHS from "@/app/_constants/paths";
import React from 'react';

// 메인 링크
function HomeLink() {
    return (
        <PrimaryLink
            className={"!w-[130px] !h-[42px]"}
            href={`/quiz`}
        >
            퀴즈 풀어보기
        </PrimaryLink>
    );
}

export default HomeLink;

import PrimaryLink from "@/app/_components/link/primaryLink";
import PATHS from "@/app/_constants/paths";
import React from 'react';

// 돌아가기 버튼
function ReturnButton({returnUrl}:{returnUrl:string}) {
    return (
        <PrimaryLink
            color={"primarySecondary"}
            href={`/quiz/${returnUrl}`}>
            돌아가기
        </PrimaryLink>
    );
}

export default ReturnButton;

export async function generateMetadata({
        title:`해설-${data.metaTitle}`,
        description: `해설-${data.metaDescription}`,
        alternates:{
            canonical:`${process.env.NEXT_PUBLIC_BASE_URL}/quiz/explanation/${data.detailUrl}`
           
        }
    }
}

유지보수의 어려움

하지만 위와 같이 관리한다면 특정 URL path를 변경한다면 해당 path를 사용하는 모든 파일을 일일히 찾아서 변경해줘야합니다.

예를 들어, quiz라는 path 대신 code로 변경했다고 합시다.

그러면 quiz 관련 path를 사용하는 모든 파일을 변경해줘야겠죠.

하지만 상수로 관리한다면 해당 상수값만 변경해주면 되죠.

URL path 상수로 관리

그래서 저는 상수 디렉터리에 paths라는 파일을 만들어서 해당 파일에서 path를 관리해보기로했습니다.

// URL 경로를 상수로 정의
const PATHS ={
    HOME: "/",
    QUIZ: "quiz",
    QUIZ_COMPLETED: "quiz/completed",
    QUIZ_RANDOM: (id:string) => `quiz/${id}`, // 퀴즈 랜덤
    QUIZ_DETAIL: (id:string) => `quiz/${id}`, // 퀴즈 상세
    QUIZ_EXPLANATION: (id:string) => `quiz/${id}/explanation`, // 퀴즈 설명
};

export default PATHS;

import PrimaryLink from "@/app/_components/link/primaryLink";
import PATHS from "@/app/_constants/paths";
import React from 'react';

// 퀴즈 완료 링크
function QuizCompletedLink() {
    return (
        <PrimaryLink
            href={`/${PATHS.QUIZ}`}
        >
            다른 퀴즈 풀러가기
        </PrimaryLink>
    );
}

export default QuizCompletedLink;


    const NAVMENU = [
        {
            title: "퀴즈",
            link: PATHS.QUIZ,
        },
   
    ]
    
    import {BASE_URL} from "@/app/_constants/baseURL";
import PATHS from "@/app/_constants/paths";
import type {MetadataRoute} from 'next'

export default async function sitemap():Promise<MetadataRoute.Sitemap>{

    return [
        {
            url: BASE_URL,
            // @todo 마지막 수정날짜로 변경
            lastModified: new Date(),
            changeFrequency: 'monthly',
            priority: 0.5,
        },
        {
            url: `${BASE_URL}/${PATHS.QUIZ}`,
            // @todo 마지막 수정날짜로 변경
            lastModified: new Date(),
            changeFrequency: 'monthly',
            priority: 0.8,
        },
    ]
}

URL path 뿐만 아니라, 상수로 사용하는 값이 있다면 상수 변수로 관리하는 습관이 유지보수에 좋을 것 같네요.