Unicode

1
2

NFC: 'é' (U+00E9) - 단일 코드 포인트
NFD: 'e' (U+0065) + '◌́' (U+0301) - 두 개의 코드 포인트

1
2
3
4

1바이트: 0xxxxxxx                     (ASCII 문자)
2바이트: 110xxxxx 10xxxxxx            (라틴어 확장, 키릴 문자 등)
3바이트: 1110xxxx 10xxxxxx 10xxxxxx   (한글, 한자, 히브리어 등 대부분의 문자)
4바이트: 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx (이모지, 희귀 문자 등)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// JavaScript 예시

// 문제: 단순한 length 속성은 코드 유닛 수를 반환
let family = "👨‍👩‍👧‍👦";
console.log(family.length);  // 11 (여러 코드 포인트의 조합)

// 해결 1: 스프레드 연산자 사용
console.log([...family].length);  // 1 (시각적 문자 수)

// 해결 2: 정규식으로 특수 문자 인식
let regex = /\p{Emoji}/gu;  // Unicode 속성 이스케이프 (ES2018+)
console.log(family.match(regex).length);

1
2
3
4
5
6

// JavaScript 예시
let s1 = "\u00E9";          // é (선조합형)
let s2 = "e\u0301";         // é (조합형: e + ◌́)

console.log(s1 === s2);     // false (다른 코드 포인트 시퀀스)
console.log(s1, s2);        // 시각적으로 동일: "é é"

1
2
3
4
5
6
7

// JavaScript 예시
// 정규화 후 비교
console.log(s1.normalize('NFC') === s2.normalize('NFC'));  // true
console.log(s1.normalize('NFD') === s2.normalize('NFD'));  // true

// 로케일 인식 비교
console.log(s1.localeCompare(s2, 'en', { sensitivity: 'base' }));  // 0 (동등)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

-- MySQL 예시

-- 1. 데이터베이스 생성 시 적절한 문자셋 지정
CREATE DATABASE mydb CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

-- 2. 테이블 생성 시 문자셋 지정
CREATE TABLE users (
    name VARCHAR(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci
);

-- 3. 콜레이션 선택
-- utf8mb4_unicode_ci: 유니코드 표준 비교 규칙
-- utf8mb4_general_ci: 빠르지만 덜 정확한 비교
-- utf8mb4_bin: 바이너리 비교 (대소문자 구분)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// JavaScript 예시

// URL 인코딩
let originalUrl = "https://example.com/search?q=안녕하세요";
let encodedUrl = encodeURI(originalUrl);
console.log(encodedUrl);  // "https://example.com/search?q=%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94"

// URL 컴포넌트 인코딩 (쿼리 파라미터 값 등)
let searchTerm = "안녕하세요?";
let encodedTerm = encodeURIComponent(searchTerm);
console.log(encodedTerm);  // "%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94%3F"

// 폼 데이터 처리
let form = new FormData();
form.append("name", "홍길동");
// FormData 객체는 자동으로 적절한 인코딩 처리

// 파일명 인코딩 (다운로드 헤더)
function setDownloadHeader(filename) {
    // RFC 5987에 따른 인코딩
    let encodedFilename = encodeURIComponent(filename)
        .replace(/'/g, "%27")
        .replace(/\(/g, "%28")
        .replace(/\)/g, "%29");
    
    return `attachment; filename*=UTF-8''${encodedFilename}`;
}

// Content-Disposition: attachment; filename*=UTF-8''%ED%95%9C%EA%B8%80%20%ED%8C%8C%EC%9D%BC.pdf

1
2
3
4
5

<!-- HTML에서 방향 지정 -->
<p dir="rtl">هذا نص عربي مع English words.</p>

<!-- BiDi 제어 문자 사용 -->
<p>This is English text with &#x202B;מילים בעברית&#x202C; inside.</p>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// JavaScript에서 BiDi 처리
function applyBiDi(text) {
    // U+202A: LTR Override
    // U+202B: RTL Override
    // U+202C: Pop Directional Formatting
    
    // 아랍어/히브리어 감지
    const hasRTL = /[\u0590-\u05FF\u0600-\u06FF]/.test(text);
    
    if (hasRTL) {
        return '\u202B' + text + '\u202C';  // RTL 컨텍스트 적용
    }
    return text;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

# Python 예시
import unicodedata

# 문자 이름 조회
print(unicodedata.name('A'))       # 'LATIN CAPITAL LETTER A'
print(unicodedata.name('한'))      # 'HANGUL SYLLABLE HAN'
print(unicodedata.name('😊'))     # 'SMILING FACE WITH SMILING EYES'

# 문자 분류 확인
print(unicodedata.category('A'))   # 'Lu' (Letter, uppercase)
print(unicodedata.category('1'))   # 'Nd' (Number, decimal digit)
print(unicodedata.category(' '))   # 'Zs' (Separator, space)

# 숫자 값 가져오기
print(unicodedata.numeric('½'))    # 0.5
print(unicodedata.numeric('四'))   # 4.0 (한자 숫자)

# 문자 분해
print(unicodedata.decomposition('Å'))  # 'A 030A' (A + 윗 고리)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// JavaScript 예시
// 터키어의 특수 케이스: 'i' ↔ 'İ', 'ı' ↔ 'I'
let turkishText = "istanbul";
console.log(turkishText.toLocaleUpperCase('tr-TR'));  // "İSTANBUL"
console.log(turkishText.toUpperCase());               // "ISTANBUL"

// 독일어 날카로운 S (ß) 대문자 변환
let germanText = "straße";
console.log(germanText.toLocaleUpperCase('de-DE'));  // "STRASSE"

// 제목 케이스 함수 (첫 글자만 대문자)
function toTitleCase(text, locale = 'en-US') {
    return text.replace(/\b\w+/g, word => 
        word.charAt(0).toLocaleUpperCase(locale) + 
        word.slice(1).toLocaleLowerCase(locale)
    );
}

console.log(toTitleCase("the quick brown fox"));  // "The Quick Brown Fox"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// JavaScript 예시 (ES2018 이상)
// Unicode 속성 이스케이프를 이용한 정규식

// 한글 문자 검사
const hangulRegex = /\p{Script=Hangul}/u;
console.log(hangulRegex.test("안녕"));  // true
console.log(hangulRegex.test("Hello"));  // false

// 이모지 검사
const emojiRegex = /\p{Emoji}/u;
console.log(emojiRegex.test("😊"));  // true

// 공백 문자 필터링
const text = "Hello\u00A0World\u2003!";  // 여러 유형의 공백 포함
const cleanText = text.replace(/\p{White_Space}/gu, " ");  // 표준 공백으로 변환

// 문자 유형별 필터링 (예: 문자만 유지)
const alphaOnly = text.replace(/[^\p{Letter}\p{Mark}]/gu, "");
console.log(alphaOnly);  // "HelloWorld"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

# Python 예시
import re
import unicodedata

# 문자 유형 필터링
def filter_by_category(text, categories):
    return "".join(c for c in text if unicodedata.category(c) in categories)

# 문자와 숫자만 유지
alphanumeric = filter_by_category("Hello, 123!", ['Lu', 'Ll', 'Nd'])
print(alphanumeric)  # "Hello123"

# 악센트 제거 (NFD 정규화 후 결합 표시 제거)
def remove_accents(text):
    nfd = unicodedata.normalize('NFD', text)
    return "".join([c for c in nfd if not unicodedata.combining(c)])

print(remove_accents("café"))  # "cafe"

1
2
3
4
5
6
7
8

<!-- HTML에서 문자셋 선언 -->
<meta charset="utf-8">

<!-- 서버 측 응답 헤더 설정 (예: Express.js) -->
app.use((req, res, next) => {
    res.set('Content-Type', 'text/html; charset=utf-8');
    next();
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// 폼 설정
<form method="post" accept-charset="utf-8">
    <input name="user" value="홍길동">
</form>

// AJAX 요청
fetch('/api/users', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json; charset=utf-8'
    },
    body: JSON.stringify({ name: '홍길동' })
});

1
2
3
4
5
6
7
8
9

// Node.js + MySQL 예시
const mysql = require('mysql');
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'user',
    password: 'password',
    database: 'mydb',
    charset: 'utf8mb4'  // 중요: 모든 Unicode 문자 지원
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 리액트에서 i18next 사용 예시
import { useTranslation } from 'react-i18next';

function MyComponent() {
    const { t, i18n } = useTranslation();
    
    return (
        <div>
            <h1>{t('welcome')}</h1>
            <p>{t('hello', { name: '홍길동' })}</p>
            
            <button onClick={() => i18n.changeLanguage('ko')}>한국어</button>
            <button onClick={() => i18n.changeLanguage('en')}>English</button>
        </div>
    );
}

// 번역 파일 (ko.json)
{
    "welcome": "환영합니다",
    "hello": "안녕하세요, {{name}}님"
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

// Intl 객체 사용 (ECMAScript Internationalization API)

// 날짜 형식화
const date = new Date();
const formatter = new Intl.DateTimeFormat('ko-KR', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
});
console.log(formatter.format(date));  // "2023년 5월 15일 월요일"

// 숫자 형식화
const number = 1234567.89;
console.log(new Intl.NumberFormat('ko-KR').format(number));  // "1,234,567.89"
console.log(new Intl.NumberFormat('de-DE').format(number));  // "1.234.567,89"

// 통화 형식화
console.log(new Intl.NumberFormat('ko-KR', {
    style: 'currency',
    currency: 'KRW'
}).format(number));  // "₩1,234,568"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// Node.js 예시
const fs = require('fs');
const path = require('path');

// 파일 읽기
fs.readFile('한글파일명.txt', 'utf8', (err, data) => {
    if (err) throw err;
    console.log(data);
});

// 파일 쓰기
fs.writeFile('새로운파일.txt', '유니코드 텍스트', 'utf8', (err) => {
    if (err) throw err;
    console.log('파일이 저장되었습니다.');
});

// 안전한 파일명 생성
function sanitizeFilename(filename) {
    // 파일 시스템 금지 문자 및 제어 문자 제거
    return filename
        .replace(/[\/\?<>\\:\*\|"]/g, '_')  // 금지된 문자
        .replace(/[\x00-\x1f\x80-\x9f]/g, '');  // 제어 문자
}

// 웹에서 다운로드 파일명 설정
function setDownloadHeader(res, filename) {
    const encodedFilename = encodeURIComponent(filename);
    res.setHeader('Content-Disposition', `attachment; filename*=UTF-8''${encodedFilename}`);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 유사 문자(예: 라틴 'a'와 키릴 'а') 방지
function detectHomographs(domain) {
    // 다른 스크립트의 문자 섞임 감지
    let scripts = new Set();
    
    for (const char of domain) {
        // 각 문자의 스크립트 속성 확인
        let script = getScriptOfChar(char);
        if (script !== 'Common' && script !== 'Inherited') {
            scripts.add(script);
        }
    }
    
    // 여러 스크립트가 섞여 있으면 의심
    return scripts.size > 1;
}

function getScriptOfChar(char) {
    // Unicode 스크립트 속성 확인 로직
    // 실제로는 라이브러리 사용 권장
    // ...
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// XSS 방어를 위한 HTML 이스케이핑
function escapeHtml(text) {
    return text
        .replace(/&/g, "&")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}

// 의도적인 제어 문자 삽입 방지
function stripControlChars(text) {
    return text.replace(/[\u0000-\u001F\u007F-\u009F]/g, '');
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 일관된 정규화로 우회 방지
function normalizeInput(input) {
    // NFC로 일관되게 정규화
    return input.normalize('NFC');
}

// 데이터베이스 쿼리 전 정규화
function prepareForQuery(text) {
    return normalizeInput(text.trim());
}