[MITHON] Node.js 단어 출력, 특정 단어 정보 출력, 퀴즈 기능 api 구현 (json 파일)

[2024-10-18 ~ 2024-10-19]
미림 마이스터고 교내 해커톤인 미톤이 있었습니다!
이때 제작했던 api를 공유하려고 합니다.

프로젝트는 '문해력을 키우기 위해 책의 문단 속 단어를 학습하는 앱'라는 주제로 진행하였습니다.

만든 api 3가지

1. 모든 단어를 반환하는 api
2. 특정 단어를 입력하면 단어의 단어와 함께 뜻과 예문을 반환하는 api
3. 랜덤으로 단어를 뽑아 그 뜻을 문제로 하고 정답을 포함한 4개의 단어 선택지가 섞여서 랜덤으로 나오는 api

프로젝트 Backend 깃허브

https://github.com/naji2-2/gullap_backend.git

myword.json

const wordData = require('./word.json');

→ 필요한 데이터가 있는 json 파일을 require를 이용해 받아왔습니다.

{
    "게재" : {
            "meaning" : "글이나 그림 따위를 신문이나 잡지 따위에 실음",
            "example" : "인간의 선한 행위에는 어떤 공리성도 게재되어서는 안 된다."
        },
    "생애" : {
            "meaning" : "살아 있는 한평생의 기간",
            "example" : "사실 나는 무인된 자의 마지막 사치로서, 나의 생애에서 이기고 지는 일이 없기를 바랐다."
        },
     .
     .
     .
}

→ word.json 파일은 이런 형태로 구성되어 있습니다.

모든 단어를 반환하는 api

// 모든 단어 반환
app.get('/myword', (req, res) => {
    const words = Object.keys(wordData);
    res.json(words);
});

→ json 파일을 ocject 형태로 만들어 두었기 때문에 object의 key값이 단어입니다.

• Object.keys(obj) : Object라는 내장 객체의 메서드, object의 키값을 묶어 배열로 반환
• 참고 )
  Object.values() : object의 속성 값을 배열로 묶어 배열로 반환
  Object.entries() : object의 키 값과 속성 값을 묶어 배열로 반환

특정 단어를 입력하면 단어의 단어와 함께 뜻과 예문을 반환하는 api

// 단어의 뜻과 예문을 반환
app.get('/myword/:word', (req, res) => {
    const { word } = req.params;
    const wordInfo = wordData[word];

    if (wordInfo) {
        res.json({
            word: word,                // 단어
            meaning: wordInfo.meaning, // 뜻
            example: wordInfo.example  // 예문
        });
    } else {
        res.status(404).json({ error: '단어를 찾을 수 없습니다.' });
    }
});

랜덤으로 단어를 뽑아 그 뜻을 문제로 하고 정답을 포함한 4개의 단어 선택지가 섞여서 랜덤으로 나오는 api

// 퀴즈 문제와 선택지 4개를 반환
app.get('/quize', (req, res) => {
    // TODO : 랜덤으로 특정 단어를 지정하고 그 뜻을 문제로 냄
    const words = Object.keys(wordData);
    const randomIndex = Math.floor(Math.random() * words.length);
    const word = words[randomIndex];    // 랜덤으로 정답 단어 지정
    const question = wordData[word].meaning;

    // 정답 제외한 단어 배열
    const remainwords = words.filter(wrd => wrd !== word);

    // 정답 제외 랜덤으로 단어 3개 선택
    const randomOptions = [];
    while (randomOptions.length < 3) {
        const randIndex = Math.floor(Math.random() * remainwords.length);
        const randomWord = remainwords[randIndex];

        // 이미 선택된 단어가 아닌 경우에만 추가
        if (!randomOptions.includes(randomWord)) {
            randomOptions.push(randomWord);
        }
    }

    // 선택지 배열
    const options = [];
    randomOptions.forEach(wrd => {
        options.push(wrd);
    });

    options.push(word); // 배열에 정답을 포함

    // 선택지를 섞음
    const shuffle = (array) => array.sort(() => Math.random() - 0.5);
    const shuffledOptions = shuffle(options);   // 섞인 선택지

    res.json({
        question: question, // 문제
        options: shuffledOptions, //선택지
        result : word   // 정답
    });

});

• Math.floor() : Math의 내장함수, 소수점 이하를 버림
• Math.random() : Math의 내장함수, 0보다 크거나 1보다 작은 부동 소수점 의사 난수를 반환

배열 셔플 코드

array.sort(() => Math.random() - 0.5

위 코드는 배열을 무작위로 섞기 위해 사용되는 코드이다.
Math.random() 메서드는 0 ~ 1 사이의 난수값이 나오므로
-0.5를 하여 양수와 음수 모두 나오게 하는 것인데

sort() 메소드는 음수냐 양수냐에 따라 요소의 순서를 바꿈으로 이를 이용한 것이다.

음수 : 첫 번째 요소가 두 번째 요소보다 앞으로
양수 : 첫 번째 요소가 두 번째 요소보다 뒤로

하지만 값이 완전히 공평하지는 않다.
내가 만든 코드에서는 단어가 겹치면 다시 랜덤을 돌려야함으로 불필요하게 많은 반복이 일어날 수 있다. 추후 개선 예정

https://velog.io/@keeper1826/sort를-이용한-셔플의-문제점-javaScript

자세한 내용은 이 블로그를 통해 보시길 추천합니다.