Issue

네이티브로 구현되어있던 알림함 페이지를 vue로 옮기게 되었습니다.

알림함 목록을 api로 받는 것이 아닌 네이티브에서 직접 받아야해서 알림 목록 호출 앱스킴을 실행해서 로컬스토리지에 저장된 알림 목록을 받습니다.

네이티브에서 알림 목록을 로컬스토리지에 저장하는 과정에서 텍스트에 포함된 특수문자의 \" → " 로 변경되었고, vue에서 로컬스토리지를 파싱할 때 에러가 났습니다.

{ "pushTitle": "안녕하세요 "야호" 입니다" }

  1. 네이티브 → localStorage.setItem
  2. 저장 시 \" → " 로 이스케이프 소실
  3. JSON.parse 실패
  4. base64 인코딩 계층 도입으로 해결

Trouble Shooting

localStorage.setItem 하는 과정에서 \ 가 제외되기 때문에 base64로 인코딩한 값을 로컬스토리지에 삽입, vue에서 로컬스토리지의 값을 가져와 crypto-js로 디코딩해 알림 목록을 노출시켰습니다.

const decodeWithBase64 = (encoded: string) => {
    return Utf8.stringify(CryptoJS.enc.Base64.parse(encoded));
};

if (!localStorage.getItem('messageList')) {
    return;
}
const messageList: RootState['messageBox'] = JSON.parse(localStorage.getItem('messageList')?.replace(/\n/g, '') as string);
const decodedMessageList = messageList.map((message) => {
    return {
        ...message,
        pushTitle: decodeWithBase64(message.pushTitle),
        pushMsg: decodeWithBase64(message.pushMsg),
    };
});