최근 내 블로그 글 목록을 보다가 흥미로운 점을 발견했다.
글 목록에서 콜론(:)이 깨져 보이는 것이다.
원래는 https://engineering.ab180
이여야 하는 경로가 https://engineering.ab180
로 보였다. 글 내부에서는 정상적으로 보이지만, 미리보기 설명에서 이런 현상이 보였다.
원인을 파악해보기로 했다.
해당 현상에 대해서는 지식이 부족해 다양한 키워드로 검색을 진행해보았다.
:
을 검색해보자 나오는 정보는 hex string
이였다. 콜론을 hex string
으로 나타내면 3A
이고, 이는 아스키 코드에서의 콜론을 의미한다.
RFC-2396
에 따르면 특정 문자들은 특별한 의미가 있기에 인코딩을 해줘야 한다고 한다.
그래서 네이버에 콜론을 검색해보면 콜론이 인코딩된 %3A
로 변환되는 것을 볼 수 있다.
이는 한글도 마찬가지이다. 한글은 아스키 코드로 나타낼 수 없기에 인코딩된다
https://it-eldorado.tistory.com/143
https://search.naver.com/search.naver?query=%3A
그런데 이는 당연히 https://
에서의 콜론에는 해당하지 않는다.
:
은 스키마를 구분하기 위해 예약 되어져 있고, https 다음의 콜론이 그 역활을 담당하기 때문이다. https://en.wikipedia.org/wiki/URL
일단 인코딩 문제는 아니다.
정말 다행히도 velog는 소스코드를 공개하고 있다.
https://github.com/velopert/velog-client
클론을 받아서 살펴보니 포스트 목록을 보여주는 코드 2가지가 보인다.
소스코드
// src/components/common/PostCard/tsx
<p>
{post.short_description.replace(/:/g, ':')}
{post.short_description.length === 150 && '...'}
</p>
:
를 콜론으로 바꾸는 코드가 존재한다.// src/components/common/FlatPostCard/tsx
<p>{post.short_description}</p>
remarkjs
의 strip 관련 로직으로 추측 관련글// src/components/common/FlatPostCard/tsx
<p>{post.short_description.replace(/:/g, ':')}{post.short_description.length === 150 && '...'}</p>
우선 프론트에서 보이는 버그를 수정하기 위해 이렇게 바꿔주었다.
그리고 PR을 올렸다.
https://github.com/velopert/velog-client/pull/424
왜 저 문자를 사용하는지는 다음에 살펴봐야겠다.
remarkjs
에서 변환 과정을 거치며 필요한 로직인 듯 하다. 관련 글 참조