영화 개봉 예정일 일정 등록 서비스 COCi
사이드 프로젝트 1. 리액트 웹앱으로 영화 개봉일 등록 서비스 만들기
+++++ 최종 추가
도메인이 만료되었습니다 ㅜ
거기다 네이버가 PC 영화 페이지를 서비스 종료해서
크롤링하던 페이지가 없어져버렸네요.
처음부터 다시 만들어야 할 상황이 되었는데ㅜㅜ
개발에서 손을 뗀지 꽤 되어서 당분간은 작은 연습 프로젝트들만 소소하게 하다가
다른 개봉예정작 페이지를 선정해서 작업해야할 것 같네요.
코씨는 일단 서비스 종료로 해둬야할 것 같습니다 ㅠ
네이버에서 긁어온 개봉 예정 영화 목록에서 관심 있는 영화들을 체크하여
본인의 구글 캘린더에 일정으로 등록하여 활용할 수 있는 서비스.
아직 추가하고 싶은 기능들이 많지만 우선 1차 오픈을 해버렸다.
노마드 코더에서 ReactJS로 웹 서비스 만들기 강의로 리액트를 처음 접하고 필요한 부분만 구글링 해서 만든 서비스라 허접함 주의를 요함.
How To Use
구글 이미지를 선택하여 구글 계정으로 로그인합니다.
영화 목록에서 등록 버튼을 클릭하거나 영화 포스터 또는 제목을 눌러 사이드 리스트에 추가합니다.
사이드 리스트의 영화는 × 버튼을 누르거나 동일한 영화의 제목/포스터를 한번 더 누르면 삭제됩니다.
리스트에 원하는 영화를 다 추가하면 add Calendar 버튼을 누릅니다.
영화 일정을 추가할 구글 캘린더를 선택하고 일정에 등록 버튼을 누릅니다.
Tip (구글 캘린더에 추가한 영화 일정 활용하기)
구글 캘린더의 캘린더 목록에서 좌측 옵션 버튼을 눌러 설정 및 공유 페이지로 들어갑니다.
페이지 하단 쪽의 iCal 형식의 비공개 주소에 있는 url을 복사합니다.
네이버 캘린더의 경우 캘린더 페이지에서 좌측 내 캘린더 타이틀 쪽에 마우스를 올려 오른쪽의 +버튼을 누르고 URL로 구독하기를 누릅니다.
원하는 캘린더 명을 입력하고 url 추가에 복사해두었던 iCal 형식의 비공개 주소를 입력합니다.
원하는 알림이 있으면 선택하고 등록합니다.
기타 iCal 구독을 제공하는 서비스는 같은 URL로 각 서비스에 맞는 방식으로 이용할 수 있습니다.
What I Use
firebase ( auth, firestore )
node js
react js
source
Image : Unsplash , Naver
Data : Naver
Api : Google( Calendar, Auth )
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 폴더 내의 public에 Movie.json을 만든다. 그리고 node-run-cmd를 활용해 git add, commit, push를 실행시키게 했고 그것은 잘 작동되었다.
여기서 내가 간과했던 것은 실제로 서비스되는 것은 service 폴더 자체가 아니라 service에서 yarn deploy
를 실행시키고 그 내용이 반영되는 gh-pages라는 것이다.
나는 고민에 빠졌고, 내 크롤러가 일을 마친 후 git push까지 완료 후에 그냥 터미널 작업 그대로
cd../service 한 뒤 yarn deploy를 node-run-cmd로 실행시키면 되지 않을까 하는 단순한 생각도 해봤는데 작동하지 않았다.
덕분에 테스트로 깃 트리를 몇 번 지저분하게 만들고서야 watch에 대해 생각하게 되었다.
그래서 지금 크롤러 v1의 완료 모습은, 크롤러가 public에 Movie.json을 실행시키고 git push까지 마치면 service 내 package.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분의 시간이 너무 아까웠다.
어쨌든 코씨 1차 버전 정말 완료!
++++ 추가
웅팍님이 알려주셔서 점검해본 결과 (감사합니다!)
https 이슈 때문에 현재 크롬에서 안전하지 않은 접근이라고 뜹니다.
제가 현재 개발 직업군에서 한발 물러나 다른 쪽 일을 배우고 있기 때문에 개발에 투자할 시간이 현저히 줄어들어 파악이 늦어 죄송합니다 ㅠ
해당 이슈를 수정할까 하다가 도메인도 교체하고 원래 예정되어있던 버전2를 진행하기 위해
버전1을 그대로 유지한 채 새로 개발을 들어가기로 했습니다.
개발할 시간이 현저히 줄어들었기 때문에 작업시간이 좀 오래 걸릴 수 있습니다.ㅜㅜ 대략 6개월 정도 예상하고 있습니다. 버전 2는 반응형 웹으로 하여 모바일에서도 사용할 수 있으실 거예요.
여유가 되면 업그레이드 버전 앱까지 배포 예정입니다. 아마 이건 버전 3쯤...(자체 알림 기능 등 다양한 기능 추가 예정입니다.)
