React Native #3 React Native 설치하기
2018-11-15
Escape, Unicode, ASCII 그리고 encodeURI, encodeURIComponent, normalize까지
2020-01-03
Explanation
오늘은 좀 제목부터 좀 두서없이… Escape와 Unicode, ASCII 그리고 encodeURI, encodeURIComponent.
마지막으로 normalize까지 알아보려 합니다.
이렇게 묶은게 관련이 있는 듯, 없는 듯.. 어떻게 이름을 지어야 할 지 몰라서 그냥 주욱 적었어요.
음.. 이름 그대로 주로 URI의 값을 인코딩 해주는 메서드에요.
셋은 사실 별로 다르지 않아요.
1. eccodeURI()
|
1 |
A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) # |
를 제외한 모든 문자를 escape 처리합니다.
2. encodeURIComponent()
|
1 |
A-Z a-z 0-9 - _ . ! ~ * ' ( ) |
를 제외한 모든 문자를 escape 처리합니다.
2. escape()
|
1 |
A-Z a-z 0-9 / @ + - _ . * |
를 제외한 모든 문자를 escape 처리합니다.
각각 필요한 상황에 맞게 사용하면 되겠죠??
위에서 특수 문자들을 escape 처리한다고 했는데 escape라는게 정확하게 뭘까요??
여기서부터는 개인적으로 짧게 알아보고 정리한 글이기 때문에 잘못된 부분이 있을 수 있습니다!
잘못된 부분이 있다면 댓글로 알려주시면 감사할 것 같아요 :)
우선은 아주 간단하게 이스케이프 문자와 이스케이프 시퀀스에 대한 위키 링크!
이스케이프 문자: https://ko.wikipedia.org/wiki/%EC%9D%B4%EC%8A%A4%EC%BC%80%EC%9D%B4%ED%94%84_%EB%AC%B8%EC%9E%90
이스케이프 시퀀스: https://ko.wikipedia.org/wiki/%EC%9D%B4%EC%8A%A4%EC%BC%80%EC%9D%B4%ED%94%84_%EC%8B%9C%ED%80%80%EC%8A%A4
제 마음대로 추측을 더하여 정의해보자면,
이스케이프 시퀀스가 좀 더 상위 개념인거 같고 거기에 속한 개념이 이스케이프 문자고,
이스케이프 시퀀스의 의미는 ‘컴퓨터와 주변 기기의 상태를 바꾸는 데에 쓰이는 일련의 문자열이다’
라고 하는데, 이건 머리가 아프니 접어두고…
이스케이프 문자는 ‘이스케이프 문자를 이용하여 문자의 뜻을 바꾸어 사용할 수 있다.’
가령 예를 들면, (위키백과 예시)
|
1 2 3 4 5 6 |
console.log("안녕하세요, "여러분" 환영합니다."); // 이러면 너무도 당연히 오류 // 그래서 console.log("안녕하세요, \"여러분\" 환영합니다."); // 요기서 \" 요것이 이스케이프 시퀀스 // 그 밖에도 \n(줄바꿈) 뭐 이런 예약 문자가 있죠?? |
공신력 있는 Microsoft Docs를 확인하고,
https://docs.microsoft.com/ko-kr/cpp/c-language/escape-sequences?view=vs-2019
백슬래시(\) 뒤에 문자나 숫자 조합이 오는 문자 조합을 이스케이프 시퀀스라고 한다고 하네요.
그리고 이스케이프 문자와 이스케이프 시퀀스는 대충, 그냥 같은 의미로 사용되는거 같아요.
‘시퀀스’라는 단어와 ‘문자’라는 단어는 뭔가 다른 의미로 구분된 거 같은데..
이 부분은 좀 더 알아봐야 겠어요.
앞서 이야기한 ‘encodeURI’ 메서드로 ‘”(큰따옴표)’를 인코딩하면 아래와 같답니다.
|
1 2 |
console.log(encodeURI('"')); // "%22" |
여기서 22는 무었일까요?!
바로 ASCII 코드로 “가 16진수로 22랍니다.
16진수 ASCII 문자를 출력하는 이스케이프 시퀀스를 사용해서 출력해보면
여기서 잠깐! 그럼 % 는 무었일까요??
요것은 숙제입니다. 정답을 아시는 분은 댓글로 남겨주세요.
|
1 2 |
console.log('\x22'); // " |
대략 ASCII 코드가 무엇인고 하면,
https://namu.wiki/w/%EC%95%84%EC%8A%A4%ED%82%A4%20%EC%BD%94%EB%93%9C
참 쉽죠잉…
‘ㄱ’ 을 encodeURI를 호출해보면
|
1 2 |
console.log(encodeURI('ㄱ')); // %E3%84%B1 |
와우! 잘은 모르겠지만 아마도 ASCII 코드 3개가 합쳐저서 ㄱ을 의미하는 건가봐요.
그럼 ㄱ을 escape로 호출하면??
|
1 2 |
console.log(escape('ㄱ')); // %u3131 |
대충 예상하셨겠지만 u3131은 유니코드에요.
|
1 2 3 |
const a = '\u3131'; console.log(a); // ㄱ |
만약에 한글로 긴 문자열을 URI에 사용한다면, encodeURI보다 escape를 쓰는게 좋을 수도 있을 거 같아요.
|
1 2 3 4 |
encodeURI('안녕하세요'); // "%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94" escape('안녕하세요'); // "%uC548%uB155%uD558%uC138%uC694" |
아하,
그리고 이렇게만 보면 escape는 Unicode의 문자열로 인코딩? 되는거 같지만,
ASCII 코드가 있으면 ASCII코드로 인코딩되요.
|
1 2 |
escape('"'); // "%22" |
똑똑하죠??
글이 의식의 흐름을 따라 normalize까지 오게 되었습니다.
노멀라이즈?? 정규하라고 하는데요.
normalize() 메서드는 ES6에 추가되었답니다.
|
1 |
Boolean('안녕' === '안녕'); |
위에 내용을 복사해서 브라우저 개발자도구 콘솔이나 Node에서 붙여넣기 해보시면,
두둥 ‘false’가 출력된 답니다.
신기하쥬??
앞에 ‘안녕’은 normalize(‘NFD’) ‘정규형 정준 분해’ 방식으로 초성, 중성, 종성을 각각 유니코드로 분리하여서 아래와 같은 상태인거에요.
|
1 2 3 4 5 6 7 8 |
console.log('안녕'.normalize('NFD')); // ㅇ \u3147 // ㅏ \u314F // ㄴ \u3134 // ㄴ \u3134 // ㅕ \u3155 // ㅇ \u3147 // 안녕 - \u3147\u314F\u3134\u3134\u3155\u3147 |
그리고 뒤에 ‘안녕’은 ‘NFC’ ‘정규형 정준 결합’ 방식으로 음절 단위로, 아래와 같답니다.
|
1 2 3 4 |
console.log('안녕'.normalize()) // 입력하지 않으면 기본값 'NFC'; // 안 \uC548 // 녕 \uB155 // 안녕 - \uC548\uB155 |
그냥 이건 참고로 https://hun-a.github.io/2018/12/18/js-normalize/ 글을 보시면,
Mac OS에서는 NFD 방식을 사용하고 Windows OS에서는 NFC 방식을 사용해서,
두 OS간 파일을 이동하다보면 ㅇㅏㄴㄴㅕㅇ… 이렇게 되는 걸 심심치 않게 볼 수 있답니다.
두서없이 그냥 막연히 위 내용들로 포스팅해야지 생각만 하고 있다가,
막상 포스팅을 하니 정말 두서없는 글이었네요.
그냥 개인적으로,
아스키코드라거나 유니코드, 이스케이프 등등.. 사실 자주 쓰진 않고, 가끔씩만 보게되니 익숙하지 않아서
이렇게 틈틈히 한번씩 정리하면서 익숙해지는게 좋은거 같아서 적어 보았답니다~
생각해보니 캐릭터 인코딩(UTF-8, UTF-16) 부분도 한 묶음이었는데, 깜박하고 안적었네요, 시간이 늦은 관계로 이건 다음 기회에..
