[keyword] 라우팅 동적경로를 이용해 keyword값을 이용해 라우팅이 되는 중임.
뒤에 id값도 붙기에 고유 URL 형성이 잘된다고 생각했음.
그런데 기사제목인 keyword에 특수문자가 들어오기 시작하면서 URL 파라미터에 포함되는 것이 문제.
? 이나 % 같은 것들이 붙으면서 failed to decode param이라는 에러가 생겼음.
<Link href={`${companyName}/${item.keyword.replace(/[^a-zA-Z0-9ㄱ-ㅎ가-힣\s]/g, '')}?id=${item.items.map((item, index) => item.id)}`} css={[reset.link, mq({처음엔 이렇게 해결하면 쉬웠음. 그런데 실제 기사에 % 나 특수문자를 표현해야하는 경우가 있었는데 물론 해당 페이지에서 또 api호출로 해결하면 되지만.... 비효율적이고 애초에 그러면 이렇게 폴더구조를 잡은 이유가 없지 않은가.
따라서 이러한 방법이 있었다.
URL 형성할때 Link 컴포넌트로 들어가는데 그떄 keyword 값은 인코딩값을 넣어준다. 어차피 id로 detailNews를 뽑아야하기에 추후 API 호출에는 문제없었다.
const encodedKeyword = btoa(unescape(encodeURIComponent(keyword)));
그리고 keyword를 props로 받은 곳에서 디코딩 해주는 방법이다.
const decodedKeyword = decodeURIComponent(escape(atob(encodedKeyword)));
이렇게 하면 어떤 특수문자를 써도 문제없이 URL 구성을 할수 있고 props 로 전달받은 후에 디코딩을 하면 특수문자를 그대로 표현할 수 있다.
원래 회사 기사제목은 사람이 작성하다보니 특수문자 같은 것들을 넣지않았기에 이런 작업도 필요없었지만 AI 관련 작업을 하면서 컨트롤이 불가능한 영역이다보니 프론트에서 해결하면서 생긴 이슈,
