프로젝트 계기

CGV아르바이트를 하면서 출근 시간 때문에 머리 아픈적이 한 두번이 아니다... 본인만 그런줄 알았는데, 일하는 모든 아르바이트생들이 항상 자신의 출근시간을 헷갈려 했다.

이유는?
출근 시간은 당일 마지막 영화시간을 기준으로 계산을 한다.
하지만 영화 시간은 전날 까지도 변경이 되는 경우가 있다. 또 휴게시간을 포함하여 계산하기 때문에 시간 계산에 약한; 사람들은 은근히 계산하는 데 애먹는다.
또한 자신이 계산한 시간이 맞는지 재차 확인하게 되는 불편함이 있었다..

결과
출근 시간을 잘못 계산하여 지각하는 아르바이트생들이 간혹 있어 당사자들에게도 좋지 않고, 같이 일하는 다른 근무자들에게도 피해를 준다.

프로젝트 기능

1. header
   헤더에는 우선 오늘 날짜와 cgv김포한강점으로 이동할 수 있는 링크를 두어 오늘 날짜와 영화 시간표를 쉽게 확인할 수 있도록 했다. (-이 점은 서버와 연결하면서 개선 해줌)

2. Movie

   이전에 진행한 영화 정보 사이트들의 api를 활용해 일일 박스오피스 정보를 불러와서 렌더링 해보았다. 이는 일일 박스오피스로 오늘 바쁜 영화 시간대를 확인하고자? 추가 했다. 

   (api 불러오기를 연습할 겸 넣어보기도 했다.)

3. Time
   가장 중요한 시간을 계산하는 부분이다.

   	이 표에 맞춰서 개발했고, moment라이브러리를 이용해서 쉽게 구현할 수 있었다.

   (이전에 moment 라이브러리가 있다는 것을 모르고 직접 시간을 문자열로 바꾸고, 나누고, 계산하는 기능을 구현 했지만.. 기능이 작동은 하지만 코드가 무의미하게 길어졌다.)

   • 서버와 연결한 이유가 여기 있는데, 처음에는 출근 시간을 계산하기 위해 마지막 영화시간을 cgv웹에 들어가 확인한 뒤, 직접 입력하여 결과값을 나오게 했는데 과정도 불편할 뿐더러 영화시간이 바뀌게 되면 바로 반영이 안된다는 것이 가장 큰 단점이였기 때문에 이를 해결하기 위함이었다.

일단 해당 프로젝트는 이 3가지 컴포넌트를 중점으로 개발했다.

Server

서버는 expressjs로 구축했고, 영화시간을 크롤링하여 프론트엔드로 데이터를 넘겨주는 역할을 했다.

네이버에 cgv김포한강 을 검색하면 나오는 시간표를 크롤링 하는 방법으로 개발해봤다.

데이터 처리

데이터를 단순히 크롤링 하면

time =  ["21:30" ,"22:30" , "20:00"]

이런 형태로 배열에 담기는데 필요한건 가장 마지막 영화 시간이였다.
그래서 배열을 sort하고 마지막 데이터 값을 뽑아 왔다.

todayTimes.sort((time1, time2) => {
           const minutes1 = timeToMinutes(time1);
           const minutes2 = timeToMinutes(time2);
           return minutes1 - minutes2;
       });



const lastTodayTime = todayTimes[todayTimes.length - 1];

github parttime_fullstack

서버를 배포하려고 했는데 현재 cloudtype이 유료 정책으로 바뀌면서 서버 호스팅 서비스를 찾기 전에는 server부분이 필요하지 않은 방식으로 배포 중이다.

배포중인 사이트
=> 현재 아르바이트 생들이 사용중인 웹이다. 이는 시간을 직접 입력해줘야 한다.