COCi

목록으로

COCi 서비스 바로가기

COCi

2019 Side Project #1 영화 개봉 예정일 일정 등록 서비스 COCi

Calendar, Organize, Cinema

네이버에서 긁어온 개봉 예정 영화 목록에서 관심 있는 영화들을 체크하여 본인의 구글 캘린더에 일정으로 등록하여 활용할 수 있는 서비스 입니다.

노마드코더에서 ReactJS로 웹 서비스 만들기 강의로 리액트를 처음 접하고 필요한 부분만 구글링해서 만든 서비스라 허접함 주의

How To Use

  1. 구글 이미지를 선택하여 구글 계정으로 로그인 합니다.
  2. 영화 목록에서 등록 버튼을 클릭하거나 영화 포스터 또는 제목을 눌러 사이드리스트에 추가합니다.
  3. 사이드 리스트의 영화는 × 버튼을 누르거나 동일한 영화의 제목/포스터를 한번 더 누르면 삭제됩니다.
  4. 리스트에 원하는 영화를 다 추가하면 add Calendar 버튼을 누릅니다.
  5. 영화 일정을 추가할 구글 캘린더를 선택하고 일정에 등록 버튼을 누릅니다.

Tip (구글 캘린더에 추가한 영화 일정 활용하기)

  1. 구글 캘린더의 캘린더 목록에서 좌측 옵션 버튼을 눌러 설정 및 공유 페이지로 들어갑니다.
  2. 페이지 하단 쪽의 iCal 형식의 비공개 주소에 있는 url 을 복사합니다.
  3. 네이버 캘린더의 경우 캘린더 페이지에서 좌측 내 캘린더 타이틀 쪽에 마우스를 올려 오른쪽의 +버튼을 누르고 URL로 구독하기를 누릅니다.
  4. 원하는 캘린더 명을 입력하고 url 추가에 복사해두었던 iCal 형식의 비공개 주소를 입력합니다.
  5. 원하는 알림이 있으면 선택하고 등록합니다.
  6. 기타 iCal 구독을 제공하는 서비스는 같은 URL로 각 서비스에 맞는 방식으로 이용할 수 있습니다.

step

release

What I Use

source

HISTORY

시작

나는 영화 보는 것을 좋아한다. 한창 한가하게 회사만 다닐 때는 일주일에 극장을 8번을 방문한 적도 있었다. 그땐 그냥 볼만한 영화가 있다 싶으면 무조건 보는 편이었어서 인터넷에서 적당한 달력 이미지를 찾고 인쇄하고 보고 싶은 영화들을 줄줄이 나열하고 본 영화는 체크하는 식으로 체크해가며 영화를 봤었다. 그러다간 결국에 네이버 캘린더의 기본 캘린더에 등록하는 방식으로 바꿨는데, 왜 네이버 개봉예정작을 보고 네이버 캘린더에 등록하는데 이렇게 귀찮아야 하는 건지 도무지 이해가 가지 않았다.

그래, 그래서 만들어야지 하고 시작했다.

기획이란…

만들 것을 정하고 나면 진행은 금방 될 것이라 생각했는데 그 후가 진짜 정할 것이 많았다. 백단을 php 로 하려고 했다가 바꾸기도 하고 많은 방황과 수정 끝에 git 트리에 수많은 스태시 상자들이 쌓여갔다.

결국 정말 필요한 기능만 만든 뒤 버전업을 시키는 걸로 결정하고 나니 눈에 제대로 된 스텝이 보이는 듯 했다. 그리고 엉망진창이 된 깃 트리를 보면서 나의 방황을 기록해놓지 않으면 다음 프로젝트에서 반복 될 것 같아 일지를 쓰기로 했다.

2019.01.16

잘 돌아가리라 생각했던 개봉예정작 크롤러가 3일차에 오류를 토해냈다. 여러 생각 끝에 짧은 시간내에 너무 많은 것을 요청했다는 것을 깨달았고, 요청 시간을 조율하면서 그간 미루고 미루던 소스를 정리했다. 시간이 꽤나 걸려 하나의 파일만 정리를 마쳤지만 그 하나로도 뿌듯했다.

이제 내일 해결하고자 하는 미션은 봇으로 돌릴 파일과 직접 바로 실행 시킬 파일을 효과적으로 분리시키는 것이다.

2019.01.17

오늘은 어제 계획했던 대로 파일을 분리 시켰고 그동안 로그 파일을 볼일이 없어 몰랐던

tail -f logFile.log

이렇게 tail 을 활용하여 실시간으로 점검할 수 있게 되었다.

그리고 다른 것을 활용하지 않고 javascript 로만 하고자 했기 때문에, 굳이 service 폴더에 봇이 만들어낸 json 데이터 파일을 넣어두었다.

그래서 새로운 개봉 예정 영화 목록을 보여주기 위해선 그 json 파일을 계속 업로드 해줘야해서 git push 명령어도 추가해두었다.

봇이 매일 돌 것이니 아마 뜻밖의 잔디 생성기가 되지 않을까 싶다.

버전2에는 다른 방식을 또 생각해봐야겠다.

이제 당분간은 봇이 잘 도나 확인해가며 UI 를 좀 다듬어야겠다.

2019.01.23

parser 의 크롤러가 돌면서 service 폴더 내의 publicMovie.json을 만든다. 그리고 node-run-cmd 를 활용해 git add, commit, push 를 실행시키게 했고 그것은 잘 작동 되었다.

여기서 내가 간과했던 것은 실제로 서비스 되는 것은 service 폴더 자체가 아니라 service 에서 yarn deploy를 실행시키고 그 내용이 반영되는 gh-pages라는 것이다.

나는 고민에 빠졌고, 내 크롤러가 일을 마친 후 git push 까지 완료 후에 그냥 터미널 작업 그대로 cd ../service 한 뒤 yarn deploynode-run-cmd 로 실행시키면 되지 않을까 하는 단순한 생각도 해봤는데 작동하지 않았다.

덕분에 테스트로 깃트리를 몇번 지저분하게 만들고서야 watch 에 대해 생각하게 되었다.

그래서 지금 크롤러 v1 의 완료 모습은, 크롤러가 public 에 Movie.json 을 실행시키고 git push 까지 마치면

servicepackage.json에 설정한대로 yarn watch를 실행해둔 내 크롤러 작업 용 데스크탑이 크롤링을 마친 뒤 service/public 에 Movie.json 을 업데이트 하면 그 디렉토리를 감시하다가 파일의 변화를 감지하고 yarn deploy를 실행한다.

일단 버전 1 에서 크롤러는 여기까지만 하고, UI 를 다듬고 핵심 기능(네이버 로그인, 일정 추가)을 들어가야겠다.

2019.01.30

네이버 로그인 까지는 끝냈으나 잠시 쉴겸 개인 포폴 사이트 작업을 하다가 파이어베이스를 접했다. 파이어베이스의 firestore 를 보고 흥미가 생겨 기존의 크롤러를 분리해서 새로운 레포로 옮기고 데이터를 다 긁은 뒤 firestore 에 작성하게 했다.

편리하게도 그냥 등록하는 것만으로 url 자체로 접근이 되어서 해당 url 을 fetch 로 요청했다.

그런데 json 데이터 안에 키값으로 데이터의 타입이 적혀있어서 꽤나 귀찮았다.

해결방법이 없으려나…

일단은 네이버 캘린더 작업부터 해야지.

2019.02.08

그놈의 네이버 캘린더를 쓰기 위해서 기나긴 구글링의 시간을 가졌는데 결국엔 원하는 결과를 받아내지 못했다. 그러다 iCal 구독 개념이 있는 것을 알게 되고 그냥 구글로 갈아타자! 하고 생각했다.

구글 캘린더에 추가하고 네이버 캘린더에서 iCal 구독을 하면 결국 똑같겠지.

어제인 2월 7일 firebase 와 google Api auth2 를 활용하여 기존의 네이버 로그인을 구글 로그인으로 변경하는 것에 성공했고 오늘 점심시간을 통해 캘린더 작업도 완료되었다.

난 뭘 위해 네이버와 싸워댄거지…….. 밉다 네이버.

어쨌든 네이버 캘린더와 너무 오래 싸운덕에 벌써 2월이 되어버렸기 때문에 1차버전에서 고도화를 걷어내고 2차버전으로 미루기로 했다.

그러니까 일단은 1차 pc 버전 완료!

2019.02.12

1차 버전 완료됐다고 자랑스럽게 시연을 하는데 auth 에러가 났다. 30분쯤 방황하다가 찾은 이유는 https 가 아니라 http 로 접속했다는 문제…

일단 http 로 접속하면 https 로 리다이렉트 시키기는 했는데 이 오류를 찾으려고 애썼던 30분의 시간이 너무 아까웠다.

ㅠㅠ