/review-kanji

https://review-kanji.herokuapp.com/

Primary LanguageHTML

Review-kanji

한자 암기 도우미

설명

2020년 대 코로나 시국, 한자공부를 시작한 본인은 아주 무식한 방법으로 공부했다. 바로 외워질 때 까지 계속해서 한자를 종이에 쓰고, 한자의 음과 뜻을 책을 가려가며 암기했다 하지만, 아주 큰 난관에 봉착했다. 바로 자신도 모르게 한자의 음과 뜻을 슬쩍 보게된다는 것이었다. 하단에 있는 사진이 그때 암기했던 한자 책이다. 손바닥으로 가리다보니 다음 한자로 넘어가는 그 찰나에 보이기도 하고, 배열도 항상 같아서 관성으로 암송하는 경우도 있었다. 20200724_193143 매번 손바닥으로 가리는 것도 피곤하고, 암기 효율도 떨어지는 듯 해 만들기로 결심한 것이 바로 이 review-kanji 서비스이다. 처음으로 백엔드를 사용해 보는 것이었기 때문에, node.js 의 콜백에 아주 매운맛을 많이 보았다. 당시에는 개인 서버가 없어서 Heroku에 Deploy하고, 군대에서도 공부할 때 아주 유용하게 써먹었었다. 다만 22년 11월부터 무료 요금제가 없어져서, 이번에 내가 가진 서버로 옮기는 겸 readme를 쓰고있다.

사용 기술

  • jQuery
  • Node.js
    • cheerio
    • puppeteer
    • mysql

결과

/

main-top

  • 상단에는 한자면강 이라 써있다. 참고로 勉強는 공부의 일어 표현이다. 누르면 홈으로 이동한다.

  • SECTION 에는 40~50개 정도의 한자가 저장되어있다. 각 SECTION 을 누르면 /?id=SECTION_NUM 으로 이동한다.

main-bottom

  • 하단에는 복습탭, 갱신과 수집 버튼이 있다.

    • 복습 버튼은 등록된 전체 한자 중 틀렸던 한자를 시험볼 수 있게 해준다.
    • 갱신 버튼은 하단에 기록된 각 SECTION 별 정답률을 갱신해준다.
    • 수집 버튼은 `/get 페이지로 이동시킨다.

  • NUM1/NUM2 로 표시된 부분은, 전체 등록된 한자 대 암기된 한자의 비율을 보여준다.

  • 하단에 표시된 그래프는, 각 SECTION의 암기 완료 비율을 보여준다.

    •     색은 정답 비율이다.
    •     색은 오답 비율이다.

  • TOP버튼을 누르면 페이지의 최상단으로 이동한다.

/?id=SECTION_NUM

  • 상단 부분은 동일하다. section-bottom
  • 하단 부분은 시험, 초기화와 삭제 버튼이 있다.
    • 시험 버튼은 해당 SECTION의 한자들을 시험볼 수 있게 해준다.
    • 초기화 버튼은 해당 SECTION의 시험 결과를 초기화 해준다.
    • 삭제 버튼은 해당 SECTION을 db에서 제거한다.
      • 함부로 실행하면 안되므로, 암호가 걸려있다. 다만 보안 수준은 형편없다.

/test

test

  • 기본적으로 한자의 '음'만을 답하면 된다.
    • 뜻은 따로 물어보지 않는다.
    • 입력칸은 한 글자만 입력할 수 있도록 제한되어있다.
  • ajax를 통해 서버와 연결을 주고받는다.
    • 예전에 짠 코드이다보니 비효율적인 부분이 있다.
      • css로 처리할 수 있는 부분을 굳이 통채로 주고받기
      • 매번 채점할 때 마다 db에 쿼리를 날리기
  • 마지막 문제까지 다 풀면 /result 페이지로 이동하는 버튼이 생성된다.

/result

score

  • 틀린 문제에 형광 표시가 되어있다.
    • 한자를 누르면, 네이버 사전으로 이동해서 뜻을 보여준다.
  • SHOW 버튼을 누르면, 틀린 한자로 이동할 수 있다.
  • 페이지의 마지막에 도달하면, SCORE을 보여준다.

/get

get

  • 네이버 사전에서 새로 등록된 한자를 크롤링하고, 새로운 SECTION을 생성해준다.
  • 따로 한자를 받는 부분이 있으면 좋겠으나, 본인이 네이버 단어사전을 자주 썼기 때문에 웹 크롤링을 선택했다.