javascript | MAC OS 파일 첨부시 자소 분리 현상 (No glyph for U+0000 in font 'fontName' )
MAC OS의 파일을 업로드하며 해당 파일의 파일명을 그대로 가져와 PDF에 목록화 시키는 기능 개발간 오류 (No glyph for U+1103 (ᄃ) in font fontname) 가 발생하여 확인해보니
한글이 자소 분리현상(한글 → ㅎ ㅏ ㄴ ㄱ ㅡ ㄹ)이 발생하여 해당 이슈를 확인해보았습니다.
원인
Mac os에서의 NFD 정규화방식을 통하여 저장한 데이터를 추가적인 정규화 과정없이 바로 저장하게 되는경우 해당 현상이 발생하는 것으로 보여집니다.
오류내용
간단히 오류발생 내용을 확인해보면 아래와 같이 "ㄷ"이란 글자에 대한 에러가 발생하고있는데
해당 ㄷ이란 글자의 출처를 확인해보면 아래 사진과 같이 "뒹구르르.png"파일의 첫 글자로 확인이 가능해집니다.
여기서 간단히 해당 글자를 확인하던 중 발견한 것이 아래와 같이 "뒹" 이란 글자에서 3 글자로 나뉘어져 이동이 가능한 부분이였습니다.
(GIF 이미지)
이에 자소분리로 인한 오류로 인지하고 찾아보니 아래와같이 MAC os의 정규화 방식으로 인하여 발생하는 이슈였으며, 정규화 방식을 NFC로 바꿔주는 방법으로 해결하였습니다.
NFD 와 NFC의 방식 차이
NFD
- MAC os의 경우에는 정규화 방식을 NFD 방식 (모든 음절을 분해하여 저장하는 방식)
- 한글 → ㅎ + ㅏ + ㄴ + ㄱ + ㅡ + ㄹ
- 해당 정규화 과정을 통해 저장된 'ㅎ'이 일반적으로 사용하는(더존폰트에 존재하는) 'ㅎ'글자와는 다른 글자로 적용되어 위 에러가 발생한것으로 보여집니다.
NFC
- Windows의 경우에는 NFC 방식 (모든 음절을 분해하지만 다시 결합시켜 저장하는 방식)
- 한글 → ㅎ + ㅏ + ㄴ + ㄱ + ㅡ + ㄹ → 한글
- 보편적인 저장 방식으로 일반적인 html에서는 해당 방식이 적용되어있습니다.
해결방법(JS 기준)
- 저장하려는 String 변수에 NFD로 저장된 파일을 NFC 정규화 방식으로 변경하여 저장해주면 일반적인 한글 폰트로 정상 저장되는 것이 확인되었습니다.
- 추가적으로 모든 파일 업로드시마다 해당 함수를 적용하는게 좋은지는 확인이 필요할 것 같습니다.
const after_fileName = before_fileName.normalize('NFC')(GIF 이미지)
참고자료
'Dev > [Javascript] React...' 카테고리의 다른 글
| React 클래스 변수와 State변수의 역할 및 차이 (1) | 2023.03.14 |
|---|---|
| fakepath local image File path 로컬 이미지 미리보기 / createObjectURL - javascript (0) | 2023.02.20 |
| [JavaScript] rest & delete 연산자 / 불변성을 유지하며 Object에서 내부 key 삭제하기 (0) | 2023.02.08 |
| 클로저를 활용한 static 변수 만들기 - [javascript] (0) | 2023.01.27 |
| React js | UI Component wrapper / container 방식 children Array 중 일부만 노출 이슈 (0) | 2023.01.18 |
