Javascript) 한글 파일명 업로드 시 파일 이름이 깨지는 현상 (Mac - 자/모음 분리)

안녕하세요, 코린이의 코딩 학습기 채니 입니다.
개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

 

한글 파일명 업로드 시 파일 이름이 깨지는 현상 (자/모음 분리)

 

예)

실제 파일명 : 스크린샷 2023-02-06 오후 3.01.14.png

특정 글자 : 스크린

상황 : 파일명에 특정 글자인 "스크린"이 포함되어있는지 비교를 하고 싶었을 때

 

DB와 console에는 실제 파일명과 동일하게 찍혀서 동일한 문자열을 가지고 있다고 생각하였지만,

문자 비교를 했을 때 아래처럼 false가 출력되었습니다.

 

혹시 중간에 이상한 단어가 껴있나 싶어서 trim을 해보기도 하고, 정규식으로 한글 + 영어 + 특수문자(. -)만 받아보아도 동일하게 계속 false 출력...

클라이언트에서 서버 측으로 파일을 넘겨줄 때 utf8으로 인코딩 → base64로 인코딩하여 넘겨주는 것이 문제인가 싶었지만, 그냥 아무것도 안한 origin filename 자체가 문제였던 것ㅠ

 

console에 한글만 짤라서 length를 구해보니,

출력 결과가 자/모음을 분리한 글자수와 동일해서 열심히 구글링을 해본 결과,

첫번째는 DB 저장 값 / 두번째는 직접 타이핑

 

맥에서는 파일명을 저장할 때 "ㅎㅏㄴㄱㅡㄹ"처럼 자음과 모음을 분리하여 저장하게 되어 발생한 문제였던 것이였습니다!

Javascript에서 지원해주는 normalize() 함수를 이용하여 자/모음을 분리하는 NFD 정규화가 아닌 NFC 정규화를 사용해주어 문제를 해결해주었습니다.

 

왜 DB와 콘솔에는 정상적으로 찍혔던 걸까..?

→ NFC 방식이 보편적이라 일반적으론 NFC 방식이 적용되어 있었기 때문..^^

 

아래 포스팅을 확인하면 더더욱 자세한 내용을 확인할 수 있음!

 

❋ 관련 포스팅

http://haah.kr/2017/09/22/mac-filename-normalization/

Mac에서 올린 한글 파일명(NFD 정규화) 문제

https://egg-programmer.tistory.com/293#--%--normalize--%EB%A-%BC%--%ED%--%B-%ED%--%-C%--%EB%-C%--%EC%-D%--%--%EB%B-%A-%EB%B-%--