[삽질기록] Linter가 코드를 링크로 인식한ㄷㅏ?! (CI 통과시키는 꼼수)

MDN 문서 번역 오픈소스에 기여하며 CI 과정에서 예상치 못한 lint 에러가 발생했다.

https://github.com/mdn/translated-content/pull/28472

[ko] meta programming 신규 번역 by minseonkkim · Pull Request #28472 · mdn/translated-content

 

---

🚨 문제 상황

기존 영어 문서에 이러한 코드가 포함되어 있었고, 번역할 때 코드 부분에는 손을 대지 않는 것이 규칙이기 때문에

이 부분은 그대로 둬야 했던 상황! 하지만.. 

markdown에서 []()은 링크 문법이고, lint는 이 부분을 링크를 잘못 쓴 걸로 인식해서 ()[] -> []()로 바꾸라는 에러를 띄웠다😅

---

🛠️ 해결 과정

이 문제를 해결하기 위해 여러 방법을 시도했다.
처음에는 괄호나 대괄호의 순서를 바꿔보았지만 의도한 표현을 유지하기 어려웠다.

<span> 태그를 넣어 보았으나 또 다른 lint 에러가 발생했다.

결국 zero-width space(&#8203;) 를 활용해 괄호와 대괄호 사이에 보이지 않는 구분자를 삽입하는 방법을 사용했다.

 

 

눈에 보이는 결과는 동일하지만, lint 입장에서는 더 이상 링크 문법으로 인식하지 않게 된다.
이렇게 수정하니 CI도 정상적으로 통과되었다.

---

📚 배운 점

• Lint는 때로는 의도치 않은 문법도 잡아내기 때문에, 에러 로그를 꼼꼼히 확인하는 습관이 필요하다.
• 눈에 보이지 않는 특수문자 &#8203;는 이런 경우에 유용한 해결책이 될 수 있다.
• 앞으로 문서를 작성할 때는 괄호와 대괄호의 조합이 링크 문법으로 오해받을 수 있음을 염두에 두어야 한다.