Home [React] ㄱ,ㄴ,ㄷ 필터링
Post
Cancel

[React] ㄱ,ㄴ,ㄷ 필터링


관리자의 집 프로젝트 진행중 수강생을 ㄱ,ㄴ,ㄷ등의 자음으로 필터링하는 기능이 있어 해결한 방법을 적어보려고 한다. 내 머리로는 해결하기 어려워 구글링과 챗gpt의 도움을 받았다.

전체 완성 코드

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
// 현재 필터링할 한글자음
const 현재자음 = "";

// 필터링될 이름 list
const names = [
  "김태영",
  "이지훈",
  "박지우",
  "최민준",
  "정서윤",
  "강도윤",
  "황수빈",
  "한승혁",
  "손서은",
  "윤도현",
];

// 유니코드 상의 한글자음 순서를 객체 형태로 만들어둔 변수
const array = {
  : {
    text: "",
    value: 0,
  },
  : {
    text: "",
    value: 1,
  },
  : {
    text: "",
    value: 2,
  },
  : {
    text: "",
    value: 3,
  },
  : {
    text: "",
    value: 4,
  },
  : {
    text: "",
    value: 5,
  },
  : {
    text: "",
    value: 6,
  },
  : {
    text: "",
    value: 7,
  },
  : {
    text: "",
    value: 8,
  },
  : {
    text: "",
    value: 9,
  },
  : {
    text: "",
    value: 10,
  },
  : {
    text: "",
    value: 11,
  },
  : {
    text: "",
    value: 12,
  },
  : {
    text: "",
    value: 13,
  },
  : {
    text: "",
    value: 14,
  },
  : {
    text: "",
    value: 15,
  },
  : {
    text: "",
    value: 16,
  },
  : {
    text: "",
    value: 17,
  },
  : {
    text: "",
    value: 18,
  },
};

function filterByInitial(initial, str) {
  const filteredStr = str
    .split(" ")
    .filter((word) => {
      // 첫번쨰 글자만 비교하기 위해 문자열의 0번쨰만 추출
      const firstChar = word.charAt(0);

      // 아래에서 따로 설명 필요 (1)
      const choCode = (firstChar.charCodeAt(0) - 44032) / 588;

      // 아래에서 따로 설명 필요 (2)
      return Math.floor(choCode) === initial;
    })
    .join(" ");

  // 이름을 return
  return filteredStr;
}

console.log(
  names.filter((name) => filterByInitial(array[현재자음].value, name))
); // ["김태영","강도윤"]

const choCode = (firstChar.charCodeAt(0) - 44032) / 588

charCodeAt()을 사용하여 이름의 첫글자인 firstChar변수를 유니코드 형식으로 변형해준다. ex) "김"의 유니 코드값은 44608

첫글자의 유니코드에서 44032를 빼는 이유는 44032가 한글 "가"의 유니코드 값이며 한글 자음, 모음 조합 글자중 가장 첫번쨰이기 때문이다 44032를 뺴주므로 "가"에서 몇번쨰로 떨어져있는 글자인지 알 수 있다. 문자열 "김"은 "가"에서 576순서 떨어져있다.

그리고 588은 한글의 중성(21), 종성(27)의 갯수를 곱한수인데 588로 나누는 이유는 초성 하나의 중성과 종성을 사용해 조합할 수 있는 수이기 때문이다. (firstChar.charCodeAt(0) - 44032)이 코드의 결과에서 588을 나누어서 0번대가 나온다면 "ㄱ"초성의 중성, 종성 조합인 588개의 한글이 끝나지 않았으므로 "ㄱ"초성의 해당하는 문자열임을 알 수 있다.

만약 firstChar변수가 문자열 "최"라면 "최"는 유니코드 45796이며 "가"에서 유니코드상 8,540순서 떨어져있다. 8,540를 588로 나누면 14.52380...이 나오는데 소수점은 버리며 14이며 초성 순서로보면 14번째는 "ㅊ"으로 성공!

  • 중성: ㅏㅐㅑㅒㅓㅔㅕㅖㅗㅘㅙㅚㅛㅜㅝㅞㅟㅠㅡㅢㅣ (21개)
  • 종성: ㄱㄲㄳㄴㄵㄶㄷㄹㄺㄻㄼㄽㄾㄿㅀㅁㅂㅄㅅㅆㅇㅈㅊㅋㅌㅍㅎ (27개)

마치며

혹시 잘못된 정보나 궁금하신 게 있다면 편하게 댓글 달아주세요.
지적이나 피드백은 언제나 환영입니다.

This post is licensed under CC BY 4.0 by the author.