일간 페이지 제목의 관사 중복 버그 수정
목차
일간 마스터 페이지에서 제목 렌더링 시 "of the The" 처럼 관사가 중복되던 문제를 고쳤다. symbol 데이터 정규화 문제였다.
발견한 증상
일간 페이지의 타이틀이나 메타데이터에서 문법적으로 어색한 중복 텍스트가 표시되는 버그였다. 예를 들어 "The"라는 관사가 두 번 붙거나, 전치사와 관사 조합이 이상하게 나타나는 식이다. 사용자 입장에선 페이지가 제대로 작성되지 않은 것처럼 보여서 신뢰도가 떨어지는 문제였다.
원인 분석
Next.js 동적 라우트인 [slug]/page.tsx에서 렌더링하는 과정을 살펴보니, symbol 데이터(아마도 카테고리명이나 상징 이름 같은)에 이미 "The"를 포함한 상태로 저장되어 있었다. 그런데 렌더링 로직에서 또다시 prefix로 "The"를 추가하는 바람에 중복이 생겼던 것이다.
// 문제가 있던 패턴 (개념적)
const title = `of the ${symbol.name}`; // symbol.name = "The Something"
// 결과: "of the The Something"
이런 류의 버그는 보통 이런 상황에서 발생한다:
- 백엔드에서 내려주는 데이터와 프론트엔드 렌더링 로직의 가정이 맞지 않을 때
- 데이터 정규화 규칙이 명확하지 않아 각 계층(DB → API → UI)에서 다르게 처리할 때
- 동적 텍스트 조합 시 조건 체크 없이 무조건 prefix/suffix를 붙일 때
해결 방식
symbol 데이터 앞에 이미 관사가 있는지 체크하고, 없을 때만 "The"를 추가하는 식으로 정규화했다.
// 고친 후 (개념적)
const symbol = fetchSymbolData();
const prefix = symbol.name.startsWith('The ') ? '' : 'The ';
const title = `of ${prefix}${symbol.name}`;
또는 symbol.name을 저장할 때부터 prefix 없이 순수 이름만 저장하고, 렌더링 레이어에서 "The"를 붙이는 방식도 있다. 어느 방식이든 핵심은 데이터 소스와 렌더링 로직 간 계약을 명확히 하는 것이다.
회고하며 배운 점
이 버그는 작아 보이지만, 팀 관점에서 중요한 신호들을 던진다:
데이터 정규화의 경계가 불명확했다. symbol 같은 기본 데이터 타입이 어느 계층에서 어떻게 가공되는지 문서화되지 않으면, 각 개발자가 다른 가정으로 코드를 짜게 된다. 프로젝트 초기에 "이 필드엔 prefix가 포함된다/포함되지 않는다" 같은 규칙을 팀 간에 정하고 테스트나 스키마 수준에서 강제하는 게 나중의 이런 버그를 줄인다.
동적 텍스트 조합 시 조건부 로직이 필수다. 단순히 문자열을 이어 붙이는 것처럼 보여도, 실제로는 여러 데이터 소스에서 온 값들을 합치는 것이다. 각 값이 "이미 가공된 상태인지" "순수한 상태인지" 추적하고, 필요하면 체크해야 한다.
작은 텍스트 버그도 함께 검수할 가치가 있다. 사용자 노출 텍스트는 눈에 쉽게 띄고, 고치는 cost가 낮지만 신뢰도 impact는 크다. 코드 리뷰할 때 "UI 텍스트 이상함" 같은 지적도 놓치지 않고, 원인을 파고드는 습관이 중요하다.
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.