| 개요
2021년 2학기. 웹프로그래밍 실습 과목은 팀프로젝트로 진행 되었으며, 팀원들과의 아이디어 도출 회의 끝에 경상국립대 학생생활관 식당인 '아람관'의 식단 제공 및 메뉴 좋아요 기능을 프로젝트로 채택했다.
아람관은 당시 스마트폰 어플리케이션으로 식단 제공을 하고 있었는데, 잦은 오류와 불편한 사용감 때문에 학생들은 학교 식당 사이트에 직접 찾아가서 식단을 보아야 하는 어려운 점이 있었다.
이 점을 해결하기 위해서 직관적인 식단을 제공하기 위해 웹사이트를 제작하게 되었고 차별점을 두기 위하여 각 메뉴에 대한 '좋아요' 기능을 넣기로 했다.
Since. 2021-11-26 (release version 1.0)
AramByeol
아람관 별점을 매겨보자!
arambyeol.kro.kr
| 기술스택
[Backend]
- 데이터베이스 : Maria DB
- 프레임워크 : Flask
- 데이터 스크래핑 : Python Lib. - Selenium, Beautifulsoup4
- 서버 : OracleCloud free server (Ubuntu 20.04 LTS)
[Frontend]
- HTML, CSS, JavaScript - JQuery
여기서 나는 백엔드를 담당했다. 서버 구축부터 스크래핑, DB, API구현 등을 맡았고 후에는 프론트엔드에서 JavaScript로 API연동을 맡았다.
(로고와 Error페이지 디자인도 내가했다!!)
- 서버 구축 : 처음에는 AWS를 사용하려 했지만 1년 제약이 있었고, 네이버 클라우드 서비스 역시 1년 제약이 있었다. 그래서 기간 제약이 없는 Oracle 사의 OracleCloud 무료 서버를 사용하게 되었다. Ubuntu OS를 사용하는 리눅스 환경에서 구현을 하였다.
- DB 구축 : 데이터베이스를 구축하기 위해 MariaDB를 사용하였다.
- week 테이블 : 월화수목금토일의 날짜가 들어 있다. 스크래핑 해온 메뉴 데이터들의 날짜와 대조하기 위해서 사용 된다. 웹페이지에는 3일치 식단만 보여줄 것이기 때문에 오늘을 기준으로 모레 데이터들을 필터링 해야 한다.
- morning, lunch, dinner 테이블 : 아람관 식단 페이지에서 스크래핑 하여 가공된 자료들의 아침, 점심, 저녁 메뉴들을 담게 된다. 'day' 필드에는 해당하는 요일이 들어 가며, 'course' 필드에는 'A,B,C, 테이크아웃 등' 코스가 들어 간다. 'menu' 필드에는 메뉴가 들어 간다.
- menudata 테이블 : 스크래핑 해온 메뉴들을 차근차근 쌓는다. 'reviewcount' 필드에는 해당 메뉴에 별점을 부여한 수가 담긴다. 'score' 필드는 'reviewcount' 필드로 총합을 나눠서 평균치를 계산하여 담고 있다.
- review 테이블 : 이 테이블은 추후 게시판 기능을 넣어 사용하려고 했지만 구현되지 않아서 사용되지 않았다.
- users 테이블 : 아람별 웹사이트에 회원가입한 사용자의 id 및 password를 담고 있다. password는 암호화 되어 있다.
- views 테이블 : 웹페이지의 방문수를 카운팅 하는 테이블이다.
- 데이터 스크래핑 : Python의 'bs4'를 사용하여 웹페이지를 스크래핑 하려고 했지만 해당 사이트가 '동적 웹페이지'여서 불가능하여 'Selenium'을 사용해 구글 '크롬'엔진으로 스크래핑 했다. 스크래핑 한 자료를 'bs4'로 가공하고 DB와 연동하여 저장하였다.
- API 구현 : Python의 프레임워크 라이브러리인 'Flask'를 사용했다. 직관적인 사용법과 계층적인 방식 때문에 플라스크를 사용하게 되었다.
| 구현
- 메인 화면
- 평가 화면
- 로그인 화면
- 에러 페이지
| 후기
첫 프로젝트인 만큼 기대감도 많았고, 설렘도 컸지만 의견 충돌이 종종 있었다. 하지만 잘 단합하고 극복하여 이와 같은 결과물을 이뤄낼 수 있었다. 협업 능력을 키울 수 있어서 좋았고 팀원들 간 협력하는 방법을 습득하였다.
백엔드 지식이 늘어 났다. 프론트엔드와 백엔드 간의 API 연동 등 통신하는 방법 및 방식을 알게 되었고 서버 관리 및 보안의 중요성을 알게 되었다.
설계 회의 때, 기대감에 가득찬 채 배달의 민족 홈페이지 처럼 역동적인 웹페이지를 만들자니, 앱으로 출시를 해보자니.. 여러 의견들이 공중을 떠다녔지만 결국 모두 흩어져서 없어졌다... 이 점이 매우 아쉽다.
| 참고
[1] https://limetimeline.github.io/project/Arambyeol_project/
AramByeol Project
학교식당 식단표에 별점을 매기는 웹페이지.
limetimeline.github.io
[2] https://github.com/DonghyeonKang/AramByeol
GitHub - DonghyeonKang/AramByeol
Contribute to DonghyeonKang/AramByeol development by creating an account on GitHub.
github.com
[3] https://www.gnu.ac.kr/dorm/ad/fm/foodmenu/selectFoodMenuView.do?restSeq=47&mi=7278
경상국립대학교 학생생활관
경상국립대학교 학생생활관 홈페이지에 오신 것을 환영합니다.
www.gnu.ac.kr
