코드로 우주평화
JavaScript 로 단어 유효성 검사, 무의미한 단어 걸러내기 본문
프로젝트를 하다 보면, 사용자가 입력한 단어가 유효한지 검사해야 하는 경우가 많습니다. 특히, 'ㅁㄴㅇ', 'wwwww' 와 같은 무의미한 단어를 어떻게 걸러낼 수 있을까요?
이번 글에서는 간단한 정규식과 사전 API 를 사용해 한글과 영어 단어의 유효성을 검사하는 방법을 소개하겠습니다.
왜 단어 유효성 검사가 필요할까요?
단어 유효성 검사는 사용자가 입력하는 단어가 실제로 존재하는 단어인지 확인하는 과정입니다. 예를 들어, 단어 검색기를 만든다고 할 때 무작위 문자가 입력되면 제대로된 결과가 나오지 않거나 에러가 발생할 수 있겠죠. 개발자는 이러한 경우를 별도로 핸들링해야하기 때문에 미리 사전에 유효성을 검사하는 것이 좋습니다.
정규식을 활용한 단어 유효성 검사
먼저, 우리는 단어가 한글 또는 영어로만 구성되어 있는지 확인하는 간단한 정규식을 사용할 수 있습니다. 이를 통해 숫자나 특수문자와 같은 불필요한 입력을 쉽게 필터링할 수 있습니다.
const wordPattern = /^[가-힣a-zA-Z]+$/;
이 정규식은 단어가 한글(가-힣
)이나 영어(a-zA-Z
) 문자의 조합으로만 이루어졌는지 확인합니다. 만약 입력된 단어가 이 패턴과 일치하지 않으면 유효하지 않은 단어로 판단합니다.
사전 API 를 활용한 단어 조회
만약, 검사하는 단어가 알파벳이라면 단순히 정규식만으로는 유효한 단어인지 구분하기 어렵습니다. 이때에는 사전 API 를 활용하여 실제 존재하는 단어인지 조회할 수 있습니다.
const response = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${input}`);
if (response.ok) {
const data = await response.json();
return data.length > 0 && data[0].word; // word 키가 존재하면 유효한 단어로 간주
}
return false;
여기서 사용되는 API는 `https://api.dictionaryapi.dev/api/v2/entries/en/` 입니다. 이 API는 단어에 대한 상세 정보를 제공하며, 이 정보를 통해 단어의 유효성을 판단할 수 있습니다.
한글의 경우에도 마찬가지로 외부 API 를 활용할 수 있습니다. 이 글에서는 다루지 않지만 [한국어기초사전]에서 제공하는 오픈 API 가 있습니다. (링크)
최종 구현 코드
모든 조건을 종합하면, 다음과 같은 단어 유효성 검사 함수를 만들 수 있습니다:
export async function isValidWord(input: string) {
const wordPattern = /^[가-힣a-zA-Z]+$/;
if (!wordPattern.test(input)) {
return false; // 입력이 한글이나 영어가 아닌 경우
}
try {
if (/^[a-zA-Z]+$/.test(input)) { // 영어 단어 라면
const response = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${input}`);
if (response.ok) {
const data = await response.json();
return data.length > 0 && data[0].word; // word 키가 존재하면 유효한 단어로 간주
}
return false;
}
if (/^[가-힣]+$/.test(input)) { // 한글 단어 라면
// ... 한글 조회 로직 구현
}
return true; // 유효한 한글 단어는 통과
} catch (error) {
console.error('API 요청 중 오류 발생:', error);
return false;
}
}
만약, 사전 API 를 사용하고 싶지 않다면 또 다른 방법도 있습니다.
바로 LLM 모델을 활용하는 것입니다. CLOVA 나 OpenAI 에서 제공하는 LLM 모델을 활용하면 해당 단어가 실제 존재하는 단어인지 확인 할 수 있습니다. 단, 이 경우에는 LLM 모델의 환각에 의해 답변의 정확도가 떨어질 수 있으니 temperature 과 top_p 파라미터를 조절하여 정확도를 올리는 것이 좋습니다.
마무리
정규식과 사전 API, 나아가 AI를 활용하여 한글과 영어 단어를 검증하는 방법에 대해 알아보았습니다. 이러한 방법들을 통해 데이터의 정확성을 높이고, 사용자 경험과 서비스의 신뢰도를 향상시켜 보시길 바랍니다.
'나는 이렇게 학습한다 > Frontend' 카테고리의 다른 글
Next.js 에서 iOS와 Android 사용자 핸들링 방법 (3) | 2024.09.02 |
---|---|
Next.js 컴포넌트에서 URL 경로 기반 상태 관리 (0) | 2024.08.15 |
Tailwind CSS로 줄바꿈 방지와 긴 문자열 생략하기 (0) | 2024.08.07 |
TypeScript 타입 종류 한 번에 정리 (0) | 2024.08.06 |
React 의 useEffect 를 쉽게 이해해보자! (0) | 2024.08.06 |