우리 학교 외박 신청은 절차도 복잡하고 인터페이스도 사용자 친화적이지 않아서 학생들의 원성이 높다. (물론 나를 포함) 그래서 가끔 이런 외박 신청을 쉽게 해주는 어플이 만들어지기를 기대하는 글이 에브리타임이라던지.. 그런 곳에 올라오곤 했다. 방법을 모색중이던 차에, 어떤 분이랑 운좋게 에브리타임에서 만나게 되어 같이 어플을 만들게 되었다.
초기 앱
에브리타임에서 만나게 된 분은 aws lambda를 이용하여 요청이 오면 크롤링하여 외박신청을 하는 구조를 가지고 있었는데, 문제점은 한번 신청하는데 최소 20~30초는 걸린다는 점이었다. 이 문제점을 해결하고자 내가 backend를 맡았다.
먼저 나는 get 또는 post를 이용한 외박 신청 요청 방법이 존재할 것이라고 생각했다. 따라서 외박 신청할 때 일어나는 패킷을 분석해보기로 했다.
패킷 분석
패킷 분석에는 Burp Suite를 사용했다. 패킷 분석을 시도하면 아래 사진처럼 어디에 무엇을 보내는지 다 나온다.
나는 이 방법으로 노가다 끝에 로그인 하는 방법을 알아냈다. 그 후에 이젠 외박신청 하는 방법을 알아 낼 차례였다.
학교 외박 신청하는 곳인데, 여기서 버튼을 눌러보면서 노가다했다. 하나의 버튼을 눌러도 오가는 요청이 한 5~6개는 되는 것 같다. 노가다 끝에 외박 신청할 때 post 요청을 보내는 주소랑 같이 보내는 XML 양식을 알아냈다.
이 때 처음 알았던건, 내부 데이터베이스에서 학생 학번이 아니라 기숙사생을 분류하는 또 다른 학번이 존재했다는 것이다. 이 학번을 알아내야 외박 신청을 보낼 수 있었다. 그래서 상벌조회같은 버튼을 눌러보면서 그 학번을 요청하는 패킷이 존재하나 살펴보았다. 그리고 노가다 끝에 그 학번을 가져오는 post 요청 주소를 발견할 수 있었다..
덤으로 현재 년도와 학기를 알아내는 요청도 발견했다. 이것도 외박 신청 할 때 XML 양식에 꼭 넣어주어야 할 것 이었다. 이로써 모든 준비가 끝났고, 파이썬을 이용하여 모든 요청이 잘 되는 것도 확인했다.
기존 크롤링은 30초 걸렸지만, 이제는 로그인까지 하면 3~4초 정도, 로그인 세션을 유지한 상태면 약 1초(신청할 날짜의 수에 따라 조금 다름)면 모든 신청이 끝났다. 엄청난 성과였다.
이후 React Native의 expo로 앱을 제작하기로 하고, 내가 그나마 조금 써본 자바스크립트를 활용하기 위해 모든 코드를 nodejs 환경으로 옮겼다. http 요청은 axios를 사용했고, xml에 대해서 파싱할 때 cheerio를 사용했다. 그리고 쿠키 저장도 필요해서 axios-cookiejar-support를 이용했다.
앱 제작 시작
모든 것을 완료하고, 이제 본격적으로 앱을 만들기 시작했다. 사실 백엔드가 해줄일은 크게 없었고 프론트가 할일이 엄청 많았다. 거의 90% 정도를 프론트가 해주었다.
프론트가 기본 로그인 프로토타입을 만들고 이제 내가 뒤에 로직을 옮기려는데 문제가 생겼다. 방법이 있는지 없는지는 잘 모르겠지만, 프론트에서 1개의 http 요청은 괜찮지만 로그인할 때 2개 이상의 http 요청을 처리해야 하는데, 이 경우에 로그인이 완료 됐는지 안됐는지 처리하기가 애매하다고 하는 것이다.
그래서 처음엔 백엔드 없이 클라이언트에서 학교 api를 이용해 직접 여러번 정보를 가져오는 것으로 설계하였는데, 이제 백엔드를 띄워서 그것과 통신하도록 설계를 바꾸었다.
이에 프론트 분이 aws lambda를 사용하는 serverless 프레임워크를 제안하셨고, 그걸 따르기로 결정했다.
글씨가 좀 별로지만, 대략 위 그림처럼 설계를 바꾸었다. serverless에 대해선
Serverless 프레임워크 사용해서 배포하기
AWS의 Labmda나 Azure의 Functions, Google의 Cloud Functions를 사용해서 서버리스를 구성하게 된다면 각각의 함수를 작성하는 것은 물론이고 그에 맞는 환경 설정을 매번 해주는 것 또한 큰 일이다.이를 해
velog.io
이 곳에서 많은 도움을 받았다.
serverless를 이용하니, 기존에 React Native에서의 라이브러리 호환성을 걱정할 필요가 없었고, 오직 로직에만 집중할 수 있어서 좋았다. 또 aws lambda를 설정하는 복잡한 과정을 넘기고 빠르게 설정해줘서 시간도 절약했다.
앱 제작 진행과정
API 형태로 개발을 시작했다. 내가 만든 함수는 총 4가지로, 로그인, 외박 신청, 외박 신청 내역 조회, 상벌점 내역 조회를 만들었다.
상벌점 내역은 이전 초기 앱에서 받은 피드백을 바탕으로 기능 추가를 했다. 이것도 노가다하면서 주소를 찾았다...여기서는 코드를 전부 소개하지 않고 간단하게만 소개하겠다.
나는 요청할때 필요한 xml양식과 요청할때 주소를 따로 저장하기 위해 각각 xmls, requestFunc라는 모듈로 분리했다. 그것을 import하는 과정이 위에 있다. 그리고 axios에 대해서 설정하는 과정이다. 혹시 차단되는 경우가 있을까봐 User-Agent를 window, chrome을 사용하는 것처럼 정보를 넣는다.
먼저 post 요청으로 받아온 id와 password를 저장하고 쿠키 저장을 위해 cookiejar을 선언한다. 그것이 위의 과정이다.
login 함수의 일부분이다. 우리는 세션을 두 번 얻어와야하는데, 일단 학교 홈페이지에서 한 번 그 다음 통합정보시스템 이라는 곳에서 한 번 얻어온 과정이다.
마지막으로 정보들을 전부 모아서 body에 담은 다음, json 형태로 변경하여 응답 코드와 함께 return 해준다. 사실 이런 것들은 전부 어려운게 크게 없었으나, error handling 과정이 조금 어려웠다.
우리는 우리가 가진 서버에 로그인 시도하는 것이 아니라, 학교 홈페이지에 로그인 할 수 있도록 중간 과정을 만드는 역할이라 비밀번호가 틀린다던지 그런 과정을 처리할 수 없었다. 왜냐면 비밀번호가 틀리든 맞든 전부 200 코드로 날아오기 때문이다.
따라서 비밀번호가 틀려서 로그인이 안되면, 학생 이름이 공백이 된다는 점을 이용하여 비밀번호가 틀릴 경우를 잡았다.
아래는 그 코드 내역이다.
어떤 오류가 발생하던 404코드를 반환하며, 에러 메시지만 달라질 수 있도록 처리하였다. 나머지도 이러한 작업들의 반복이고, 요청하는 주소만 다르다.
자세한 코드는 github에서 볼 수 있다.
2022/04/24 추가 ) 현재 리팩토링을 진행하여 이 글에 작성한 코드는 릴리즈 1.0.0에서 볼 수 있다. 현재 버전은 1.1.0이다.
https://github.com/AUTO-Overnight/Auto_Overnight_API
GitHub - AUTO-Overnight/Auto_Overnight_API
Contribute to AUTO-Overnight/Auto_Overnight_API development by creating an account on GitHub.
github.com
끝으로
그렇게 해서 우선은 expo 공용계정을 하나 판 다음 그곳에 앱을 올리는 형식으로 배포하였다. 그리고 에브리타임에 올리고 꽤 뜨거운 반응을 얻었다.
물론 고생은 거의 프론트가 했지만.. ㅋㅋㅋ 이후에 구글 플레이 스토어에 앱도 심사완료되면서 플레이 스토어에도 배포되었다.
https://play.google.com/store/apps/details?id=com.ww8007.AutoOvernight
설치 수가 100을 넘어갔다. 실 서비스에 비하면 많은 숫자는 아니지만, 처음 겪어보는 성과라 만족했다. ios 앱스토어는 비용이 어마무시한 관계로... 아마 올리지 않을듯 하다.
위는 출시일부터 오늘(2021/9/27)까지 aws lambda에서 함수 총 호출 횟수를 나타낸 것인데 출시 첫날엔 로그인 횟수가 203회까지 찍혔다.
안정된 이후엔 하루당 10~20회를 왔다갔다하고 있다. 아마 신청을 한번에 해놓고 따로 어플을 켤 일이 없으니 저정도 수치로 나타나는 것 같았다.
우리가 만든 것을 사람들이 좋아해주는게 신기한 경험이면서 재밌었다.
혹여나 프론트와 어플이 궁금하다면
https://github.com/AUTO-Overnight/Auto_Overnight
GitHub - AUTO-Overnight/Auto_Overnight: 학교 외박신청 자동화 App Based in React Native
학교 외박신청 자동화 App Based in React Native. Contribute to AUTO-Overnight/Auto_Overnight development by creating an account on GitHub.
github.com
이 곳을 참조해주길 바란다.
'Backend > Nodejs' 카테고리의 다른 글
학교 외박 신청 어플 - 리팩토링 (0) | 2022.05.02 |
---|