>웹 프론트엔드 >JS 튜토리얼 >JavaScript로 Word Unscrambler 구축(4부)

JavaScript로 Word Unscrambler 구축(4부)

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-10-16 18:26:02909검색

안녕하세요 여러분! ?

지난번에 최고의 API를 찾기 위해 작은 모험을 떠났고 몇 가지 옵션을 테스트한 후 Wordnik을 선택했습니다. 방대한 단어 데이터베이스가 있고 API 키를 얻는 데 일주일이 걸렸지만 마침내 얻었습니다. 이제 이를 통합하고 순열에서 생성된 단어가 실제로 유효한지 확인할 차례입니다.

과제: 단어 검증

제가 깨달은 한 가지는 Wordnik을 포함한 대부분의 사전 API에는 단어가 존재하는지 확인할 수 있는 직접적인 방법이 없다는 것입니다. 정의와 예를 제공하지만 직접적인 검증은 제공하지 않습니다.
이 문제를 해결하기 위해 저는 Wordnik의 Scrabble 점수 엔드포인트를 사용했습니다. 논리는 간단합니다. 단어에 스크래블 점수가 있으면 유효한 것으로 간주됩니다.

이 유효성 검사를 구현하는 코드는 다음과 같습니다.

async function isValidWord(word) {
    const apiKey = 'API_KEY'; // use your own API keys
    const url = `https://api.wordnik.com/v4/word.json/${word}/scrabbleScore?api_key=${apiKey}`;

    try {
        const response = await fetch(url);

        if (response.status === 200) {
            return true;  // Word is valid
        } else if (response.status === 404) {
            return false; // Word not found in dictionary
        } else {
            console.error(`Error: Received status ${response.status} for word "${word}"`);
            return false; 
        }
    } catch (error) {
        console.error('Error checking word validity:', error);
        return false;
    }
}

async function descrambleWords() {
    const input = document.getElementById('scrambledInput').value;
    const combinations = generatePermutations(input); 
    const validWords = [];

    // Check each word one by one for validity
    for (const word of combinations) {
        const isValid = await isValidWord(word);
        if (isValid) {
            validWords.push(word); // Only push valid words
        }
    }

    const categorizedWords = categorizeByLength(validWords); 
    displayResults(categorizedWords); 
}

무너뜨리기

비동기 함수 isValidWord(word)

이 함수는 스크래블 점수 엔드포인트를 쿼리하여 Wordnik API에 특정 단어가 존재하는지 확인하는 역할을 합니다.

  1. URL 설정:

    • 이 함수는 확인하려는 단어를 사용하여 API 요청을 구성하고 이를 스크래블 점수 엔드포인트의 기본 URL에 추가합니다.
    • 예: "apple"이라는 단어의 경우 URL은 다음과 같습니다. https://api.wordnik.com/v4/word.json/apple/scrabbleScore?api_key=YOUR_API_KEY.
  2. API 요청:

    • wait fetch(url)는 Wordnik API에 HTTP 요청을 보냅니다.
    • 응답 처리:
      • 200(OK): API가 200 상태를 반환하면 해당 단어가 존재하고 스크래블 점수가 있음을 의미합니다. 이를 유효한 단어로 간주하여 true를 반환합니다.
      • 404(찾을 수 없음): API가 404를 반환하면 해당 단어가 사전에 없는 것이므로 false를 반환합니다.
      • 다른 상태 코드는 오류로 기록되며, 단어가 유효하지 않거나 문제가 있음을 나타내기 위해 false를 반환합니다.

비동기 함수 descrambleWords()

입력된 단어를 해독하고 각 순열의 유효성을 검사하는 주요 기능입니다.

  1. 입력 받기:

    • 먼저 document.getElementById('scrambledInput').value를 사용하여 입력 필드에서 뒤섞인 단어를 가져옵니다.
  2. 순열 생성:

    • 이 함수는 generatePermutations(input)를 호출하여 뒤섞인 단어의 가능한 모든 조합을 생성합니다.
  3. 각 단어 유효성 검사:

    • 그런 다음 각 순열을 반복하고 isValidWord(word)를 호출하여 유효한지 확인합니다.
    • 단어가 유효한 경우(예: Wordnik API에 존재하는 경우) validWords 배열에 추가됩니다.

Building a Word Unscrambler with JavaScript (part 4)
GitHub에 푸시하기 전에 API 키를 보호하는 방법을 찾는 대로 라이브 링크를 공유하겠습니다.

또 다른 장애물은 Wordnik의 API에 의해 부과된 속도 제한이었습니다. 제한을 초과하면 유효성 검사 프로세스에서 429(요청이 너무 많음) 오류가 발생하여 모든 것이 중단되었습니다. 제가 고려하고 있는 잠재적인 해결책은 API 과부하를 방지하기 위해 제한에 도달할 때 지연을 추가하는 것입니다.

더 좋은 아이디어나 제안이 있으면 언제든지 댓글로 공유하거나 Twitter를 통해 저에게 연락해 주세요.

다음: 성능을 최적화하고 속도 제한에 대한 해결책을 찾고 입력이 숫자가 아닌 문자열만 허용하도록 할 것입니다.
더 많은 업데이트를 기대해 주세요!

위 내용은 JavaScript로 Word Unscrambler 구축(4부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.