광고차단 컴포넌트 잔재 텍스트와 헤드 이스케이프 오류 제거
목차
두 군데 동시에 터진 자잘한 버그를 한 커밋으로 처리했다.
뭘 고쳤나
Base.astro의 <head> 안에 literal \n이 들어가 있었다. 즉 실제 줄바꿈 문자가 아니라 \n 문자열 두 글자가 그대로 HTML에 박혀있던 것. 그리고 AntiAdblock.astro에는 이미 제거됐어야 할 money/ssul 관련 텍스트가 남아있었다.
두 이슈 모두 "기능이 깨진다"기보다 "있으면 안 될 것들이 있다"는 류의 문제다. 크리티컬하지는 않지만, 발견하면 바로 처리해야 하는 종류이기도 하다.
Base.astro — literal \n 이 왜 생기나
Astro에서 <head> 영역을 구성할 때 템플릿 문자열을 동적으로 조합하다 보면 이런 실수가 생긴다. 예를 들어:
---
const description = someData?.desc ?? "기본값\n두번째 줄";
---
<meta name="description" content={description} />
이런 식으로 JS 문자열 안에서 \n을 쓰면 실제 개행이 되지만, 반대로 어딘가에서 JSON이나 외부 데이터를 끌어오거나, 문자열을 직접 이어붙이다가 이스케이프 처리가 꼬이면 \n 두 글자가 그대로 출력된다.
<head> 안에서 \n이 literal로 박히면:
<meta>content 값에 노출될 경우 SEO 파서가 이상하게 읽을 수 있음<title>태그에 들어가면 탭 타이틀에\n이 그대로 보임<script>블록 내부면 JS 파싱 에러로 이어질 수도 있음
이번엔 어느 위치였는지에 따라 심각도가 달랐겠지만, 어쨌든 의도하지 않은 문자가 <head>에 있다는 것 자체가 방치할 이유가 없다.
이런 류의 버그는 보통 로컬에서 view-source로 직접 뜯어보거나, 빌드 결과물 HTML을 눈으로 훑다가 잡힌다. 자동화 린트가 잘 안 잡는 영역이기도 하다.
AntiAdblock — money/ssul 잔재 정리
AntiAdblock.astro에서 money, ssul 같은 단어가 남아있었다는 건, 이전에 해당 컴포넌트가 다른 맥락으로 쓰이던 시절의 흔적이 그대로 살아있었다는 뜻이다. 아마 컴포넌트를 재활용하거나 복사해서 쓰는 과정에서 원본 텍스트를 미처 다 지우지 못한 케이스일 가능성이 높다.
광고 차단 감지 컴포넌트 특성상, 안에 들어가는 텍스트가 사용자에게 직접 노출된다. 거기에 현재 서비스와 무관한 단어들이 섞여 있으면:
- 사용자 입장에서 맥락이 안 맞는 문구가 보임
- 코드 리뷰 때 "이게 의도한 건가요?" 질문이 계속 나옴
- 나중에 컴포넌트를 건드릴 때 혼란 가중
이런 잔재 텍스트는 당장 오동작을 일으키지 않아서 우선순위가 낮아지기 쉬운데, 그게 오히려 문제다. 쌓이면 "이 코드베이스 관리가 되고 있나?"라는 신뢰 문제로 이어진다. 작은 것도 발견하면 그냥 치우는 게 맞다.
회고
변경 파일이 두 개고 각각 성격이 다른 수정이지만 한 커밋으로 묶은 건, 둘 다 "있으면 안 될 것 제거"라는 맥락이 동일해서다. 각각 커밋을 나눌 만한 논리적 분기점이 없었고, 같은 눈으로 훑다가 발견한 것들이라 함께 처리했다.
이런 커밋은 팀 입장에서 PR로 올릴 때 설명이 조금 필요하다. "뭘 고쳤는지"가 제목만 봐서는 맥락이 잘 안 잡히기 때문이다. 커밋 메시지에 각 항목을 짧게라도 나열해두는 게 나중에 git log 뒤질 때 도움이 된다. 이번엔 그걸 비교적 명확하게 적어뒀다고 생각한다.
작은 fix지만 쌓이지 않게, 보이면 바로.
끝.
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.