[Web] 학교사이트 개발일기 -기본적인 디자인 및 급식 크롤링 구현-

보통 학교는 그 학교만의 홈페이지가 분명 있을 것이다.

없는 학교가 오히려 이상할정도로 다 각자의 홈페이지를 갖고 있을텐데 그게 사실 쓰라고 있는거라기 보다는

형식상 존재하는 것이기 때문에 학생들이 많이 이용하지도 않고 사용하려고하면 많이 번거롭다.

그래서 저는 저희학교 사이트를 간단하게나마 직접 만들어서 학생편의용으로 만들어보려고 한다.

 

서버는 nodejs로 만들기로 했다

// server.js
app.get('/', (req, res) => {
  ClientIP = requestIp.getClientIp(req) // 요청한 클라이언트 아이피
  console.log('=================================')
    console.log('ClientIP: ' + ClientIP + '\nServer Connection Occurred');
    console.log('=================================')
  res.render('main', {main_option: main_option});
})

main.ejs로 넘겨줄때 같이 넘겨주는 저 값은 아래사진에 해당하는 내용인 메인화면에 띄울 이동페이지에 대한 정보들이 들어있다

main_option.json

메인화면은 대충 학교사진을 배경으로해서 투명한 네비바에 부트스트랩 카드를 사용했다

이번에는 저기 첫번째 카드버튼에 적힌 '오늘의 급식' 페이지에 들어갈 급식을 크롤링 할것이다

네이버에다가 '(학교이름) 급식' 이렇게 적으면 그 학교에 해당하는 급식이 자동으로 뜨니까 저는 여기에서 가져오기로 했다.

먼저 파일을 생성해준 뒤에

axios 모듈과 cheerio 모듈을 이용한다.

let mealResult = {
    date: [],
    meal: []
};

showMeal_List = [];

크롤링된 결과물이 들어갈 공간을 만들어주고 최종적으로 유저에게 전달할 내용물이 들어갈 공간을 만들어주었고

const getHtml = async () => {
  try {
    return await axios.get("https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=1&ie=utf8&query=%EB%82%A8%EC%A3%BC%EA%B3%A0%EB%93%B1%ED%95%99%EA%B5%90+%EA%B8%89%EC%8B%9D");
  } catch (error) {
    console.error(error);
  }
};

주소를 가져온다음에

function mealSearch(todayDate){
getHtml()
  .then(html => {
    let ulList = [];
    let dateStrong_List = [];
    let mealUl_List = [];
    const $ = cheerio.load(html.data);
    const $dataList = $("ul").children("li.menu_info");

    $dataList.each(function(i, elem){
        dateStrong_List.push($(this).find('strong').text().split(' ')[1] + $(this).find('strong').text().split(' ')[2]);
        mealUl_List.push($(this).find('ul').text())
      })

    mealResult["date"] = dateStrong_List;
    mealResult["meal"] = mealUl_List;

    for(k=0; k < mealResult["date"].length; k++){
        if(mealResult["date"][k].indexOf(todayDate)!=-1){
            showMeal_List.push(mealResult["date"][k] + ": " +  mealResult["meal"][k])
        }
    }
    return showMeal_List
  })
  .then(res => log(res));
}

mealSearch 함수를 만들고 거기다가 '24일' 이런식으로 날짜를 넣게되면, 먼저 네이버에 올라온 모든 급식을 가져와서 저장해둔다음에 지정된 날짜에 해당하는 점심, 저녁급식을 가져와서 출력하게 했다.

아마 이부분은 나중에 수정될거같다. 다른 날짜의 급식을 볼때마다 다시 새로 크롤링하는게 많이 비효율적인 것

같다.

[
  '13일[점심]:  *콩나물밥(한우)5.6.13. 씨앗멸치볶음5.6. 꼬들단무지 로제떡볶이1.2.5.6.10.13.15.16. 깻잎순무침 치즈케이크아이스크림1.2.5. '
]

결과물은 대충 이렇다.

module.exports = mealSearch;

그다음 모듈화를 해주면? 이제 서버쪽 코드에서 가져다가 쓸 수 있게 되는것이다.

 

이제 가져온 급식을 페이지에 띄워주면 될 것 같다!