nodejs , vue를 이용해서 끝말잇기 만들기 #1

네이버 국어사전 스크래핑

국어사전에 들어가면 이런 식으로 나온다

개발자 도구로 하나하나 열어보겠습니다.

c_b라는 클래스명을 가진 span태그 안에 단어들이 담겨있는 걸 볼 수 있습니다.



이제 cheerio-httpcli로  저 단어들을 가져오도록 하겠습니다.

다른 걸 사용하실 줄 아시면 다른 걸 사용하셔도 됩니다.

 

 

npm i -s cheerio-httpcli

cheerio-httpcli사용법은 그냥 npm에 있는 거 복붙 하셔도 되니까 패스하겠습니다.

import qs from "querystring"
import cheerio from "cheerio-httpcli"


function textsearch(usertext){
    let line  = Math.floor(Math.random() * 6); //난수생성
    let text = String(usertext) + "로시작하는단어" 
    let queryusetest = qs.escape(text) //문자열을 쿼리스트링으로 바꿔줌
    let msg = ""
    const url = `https://dict.naver.com/search.dict?dicQuery=${queryusetest}`; //국어사전에 파라미터로 넘겨줌
    return new Promise(function(resolve, reject) { // 그냥 리턴하면 undefinde가 뜨니까 Promise로 리턴시켜야함
         cheerio.fetch( url, function( error, data, response , body) {
            data('.c_b').eq(line).each(function( idx ) { // 만약에 .c_b를 못찾으면 이 콜백함수를 실행하지않습니다
                msg =  data( this ).text();  //msg에 담아주는데 이 콜백함수를 실행하지않으면 msg 는 "" 겠죠
            })
            if(msg == ""){//msg가 ""라는건 찾지못했다는거니까 lost를 리턴합니다
                resolve("lose")
            }
            else{
                resolve(msg)
            }
        });
    });
}


export {textsearch} //export index.js에서 사용할거에요

 

 

Api

 

Express도 설명은 그냥 안 할게요

npm i -S express

npm -S cros

cros는 나중에 프론트엔드에서 axios로 요청을보낼때 에러가 안나게해줄거에요

그냥하면 에러남

 

import { textsearch } from "./search.js" //아까만든 함수 
import express from 'express';
import cros from "cros"

const app = express();
const port = 3000;

app.use(cros());

app.get('/search', async(req, res) => { //then쓰면 코드 못생겨지니까 async 콜백
    let text = req.param('text') //localhost:3000/search?text=text 해서 넘겨줄수있습니다
    let return_text = await textsearch(text) //await
    res.send(return_text) 그냥 단어니까 그대로 리턴
});

pp.listen(port, () => {
    console.log(`server on ${port}`);
    console.log(`http://localhost:${port}`)
});

 

 

 

 

 

셹으로 시작하는 건 국어사전에 없어서 lose도 제대로 나오죠

프런트엔드는 vue를 사용할 거예요

물론 jquery나 vanilla javascript 쓰셔도 상관없어요