서브폴더 시나리오에서 SVG 스프라이트를 처리하는 로직은 이미 모두 갖춰져 있으며, 여러 사이트에서 성공적으로 사용되고 있습니다. 이번 경우에는 매우 구체적인 엣지 케이스에 부딪힌 것입니다. @vkozyrev의 사이트에서 주요 변수들을 확인해 보겠습니다(브라우저 콘솔에서).
> Discourse.SvgSpritePath
"/svg-sprite/sales-community-staging.rainmakers.co/svg-2-8ed106e6e3d908b1b86898dfe93a7bac0fd358f4.js"
> Discourse.BaseUri
"/sales-community"
문제없어 보입니다. 이제 SVG 스프라이트 시트를 로드할 때 loadScript를 사용하는데, 이는 다시 Discourse.getURL을 호출합니다. 이 함수는 서브폴더 접두사를 추가하는 역할을 합니다. 직접 테스트해 보겠습니다:
> Discourse.getURL(Discourse.SvgSpritePath)
"/svg-sprite/sales-community-staging.rainmakers.co/svg-2-8ed106e6e3d908b1b86898dfe93a7bac0fd358f4.js"
음… 아무것도 일어나지 않았습니다. 다른 랜덤 URL은 잘 동작합니다:
> Discourse.getURL("/blah")
"/sales-community/blah"
조금 더 파고들면 getUrl 내부의 이 라인을 찾을 수 있습니다.
if (url.indexOf(Discourse.BaseUri) !== -1) return url;
즉, 영어로 "URL에 이미 서브폴더 접두사가 포함되어 있으면 포기한다"는 의미입니다. 따라서 여기의 문제는 @vkozyrev의 서브폴더 접두사(/sales-community)가 SVG 스프라이트 시트 URL의 중간에 포함되어 있다는 점입니다.
/svg-sprite/sales-community-staging.rainmakers.co/svg-2-8ed106e6e3d908b1b86898dfe93a7bac0fd358f4.js
이 검사를 더 구체적으로 변경하여, URL의 시작 부분에서만 서브폴더 접두사를 확인하도록 했습니다:
다만, 이로 인해 다른 잠재적인 문제들도 생각납니다… 예를 들어, 누군가가 서브폴더 접두사로 /t나 /about 또는 Discourse에서 사용하는 다른 URL을 원한다면 어떻게 될까요 