Meteor와 React.js를 이용한 웹앱 제작

대학교 2학년 수업시간에 Meteor와 React.js를 이용한 웹앱을 제작하는 과제가 있었다.

학생들을 위해 학교 내 동아리들을 모아놓고, 마음에 드는 동아리를 구독해 정보를 찾아볼 수 있도록 하는 웹사이트를 제작했다.

https://uhm-gitclubs.github.io/ (소개 페이지) 

 

종강 이후, 프로그래밍 실력을 늘리기 위해 프로젝트를 진행하고 싶었다. 무엇을 제작할지 고민하던 중 아버지가 회사 관련 일로 모바일 앱이 있으면 편하겠다고 하시는 말을 듣고, 위 과제의 경험을 살려 아버지가 필요한 앱을 만들자고 생각하게 되었다.

 

처음에는 모바일 앱을 원한다고 하셔서, 안드로이드 스튜디오로 앱을 제작해야 할지 고민했다. 안드로이드 스튜디오를 사용했던 경험은 전혀 없었고, 어디서부터 시작해야 할지 막막했다. 그러던 중, 과제로 제작했던 것은 웹으로 작동하는 웹앱이었기에 모바일에서도 주소를 입력하고 들어가면 작동할 것이라 생각했다. 조금 더 알아보니 안드로이드 스튜디오를 이용하여 앱을 이용해 웹을 표시해주는, 웹 뷰 앱을 쉽게 만들 수 있다는 것을 알게 되었다. 우선 수업 때 배웠던 대로 기능하는 웹사이트를 만들어 보자고 생각해서 바로 작업을 시작했다.

 

아버지가 요구한 것은 직원들을 위한 체크리스트였다. 매일매일 몇 가지 항목을 체크하여 제출하면, 그 결과가 저장되어 관리자 계정으로 하루별/한 달 별 통계를 확인할 수 있는 앱이 필요했다.

• 체크리스트 화면
• 하루별 통계
• 한 달 별 통계

위 세 페이지가 가장 메인이 되는 페이지이며, 이 세 페이지의 기능은 아버지가 요구한 대로 빠짐없이 구현했다.

 

체크리스트 화면만 제대로 구현한다면, 통계를 표시하는 것은 간단한 작업이라고 생각했기에 우선 체크리스트 화면에 들어갈 구성들과 페이지를 구현했고, 이후에 통계 화면들을 구현했다.

 

저장 형식은 처음에는 nested object 형식으로 정보를 저장하려 했다.

Ex) { 20210601 : { 공장 1 : { 이름 : [] }, 공장 2 : { 이름: [] } }

실제 코드로 적어보니 매우 지저분했고, 나중에 관리하기에도 어려움이 있어보여서 간단하게 날짜별로 하나의 데이터베이스를 추가하기로 했다. 하지만 또 하나의 난관이 있었는데,  날짜가 지날 때마다 어떻게 유저들의 체크리스트를 초기화하고, 그날의 정보를 어떻게 저장할지 였다.

맞는 방법인지는 모르겠지만,

1. 11시 30분부터 11시 40분까지 전역 변수 submited를 false로 바꾸고,

2. 11시 45분부터 11시 55분까지 다음날용 새 데이터베이스를 만들고,

3. 체크리스트를 초기화 한 후, submited를 다시 true로 바꿔 중복 제출이 되지 않도록 했다.

4. 그리고 날짜가 넘어가면, 11시 45분에 만든 데이터베이스를 이용하도록 했다.

 

React앱은 사용자가 웹에 접속해있지 않다면 자바스크립트 코드를 실행하지 않는다는 사실을 알아냈다. 테스트를 해볼 당시에 항상 웹에 접속해 있던 채로 테스트를 했기에 바로 문제를 알 수 없었다. 테스트를 진행하지 않은 첫날 문득 걱정이 되어 확인해 본 것이 행운이었다. 따라서 이 문제를 해결할 수 있는 방법을 찾기 위해 여러 가지 생각을 해보았다.

 

가장 먼저 떠오른 해결안으로는 누군가가 항상 웹에 접속해 있으면 해결될 것이라고 생각했다. 지금까지는 내가 웹에 접속을 함으로써 자바스크립트 코드를 문제없이 실행시켰지만, 매일 내가 컴퓨터를 켜둘 수 없고, 이는 분명한 문제이기 때문에 혹시 서버 쪽에서 상시로 인터넷 창을 켜 둘 수 없는 방법이 있는지 찾아보기 시작했다. 하지만 원하는 방법을 찾지 못했고, 분명 날짜가 바뀔 때마다 데이터베이스를 업데이트하는 정석적인 방법이 있을 것이기에 그에 대해 더욱 알아보기로 했다.

 

크론(CRON)이라는 것을 알아냈다.

https://www.npmjs.com/package/cron

cron

나는 Meteor를 사용하여 제작을 했기에 meteor용 CRON을 다운로드하였지만, 날짜 또는 시간을 지정하여 무언가 함수를 호출할 수 있다는 점은 같아서 어렵지 않게 내가 원하는 기능을 구현할 수 있었다. 이후에도 원하는 날짜에 무언가 제출하는 등의 기능이 필요하다면 cron을 사용할 수 있겠다.

 

 

 

그 후는 과제로 만들었던 앱과 비슷한 점이 많았기에 수월하게 진행할 수 있었다. 

 

초안 완성 후, 몇가지 피드백을 거친 뒤 요구했던 기능을 모두 가진 웹앱을 완성하게 되었다. 디자인적으로 훌륭하지는 않지만 갖추어야 할 기능은 모두 갖추었다. 

 

 

하이브리드 앱의 장점은 역시 유지보수가 쉽다는 점이다. 앱을 다시 다운로드하거나 업데이트하는 일 없이 기능 추가와 버그 해결이 가능하다는 점은 큰 장점인 것 같다. 이번 프로젝트는 휴대폰의 기능을 크게 쓰지 않는 프로젝트였기에, 웹뷰 형식으로 앱을 만든 것은 좋은 선택이었다고 생각한다.

 

 

현재 코드들이 완벽하지 않고, 보완해야 할 점도 많다. 하지만 학교 과제에서 벗어난 첫 프로젝트로는 좋은 시작을 했다고 생각되며 꾸준한 공부를 통해 앞으로도 다양한 앱들을 만들고자 한다.

 

 

https://www.meteor.com/

Meteor Software: A Platform to Build, Host, Deploy and Scale Full-Stack Javascript Applications

https://reactjs.org/

React – A JavaScript library for building user interfaces