인공지능 웹 서비스 프로젝트 3주차 회고

 요약 

 총 프로젝트 기간 

2022.05.31 ~ 07.03

 3주차 

2022.06.13 ~ 06.19

 역할 

백엔드

 완료 항목 

• Schedule MVP 체크리스트 생성 / 조회 기능 구현 완료
• Schedule MVP 체크리스트 조회 기능 getter로 보완
• Schedule MVP 코드 merge
• 다른 사람 체크리스트 생성 안되는 문제 해결
• web-push 실습 web, android에서 각각 성공
• Pill my rhythm 코드에 web-push 적용
• 구독 API 구현 - device_token값 DB에 JSON 객체 타입으로 저장
• 구독 취소 API 구현
• [FE] web-push 구독, 구독 취소 버튼 및 함수 구현
• push-test API 구현 - 사용자가 등록한 기기에 모두 푸시 알림
• 중간 발표 PPT 내용 작성
• 중간 발표 대본 작성 및 준비

---

 회고 

 1. 구현하면서 어려웠던 부분 

- push API

하 정말.. 정말이지 1차 때는 CRUD에서 크게 안 벗어났다 치고 2차때부터 3차까지 적용한 모든 기능중에 가장 어려운 것 같다. 일단 알아본 결과 자바스크립트로 push api를 사용하는 방법에는 크게 두 가지가 있었다. npm 라이브러리인 web-push를 사용하는 것이나 Firebase Cloud Messaging을 사용하는 방법. 나는 처음에 FCM을 사용하고 싶었는데 정말 예제 코드를 봐도 무슨 소린지 어떻게 동작하는지 모르겠고 프로젝트를 만들어놓고 서버키부터 못찾아서 포기하고 npm 라이브러리를 사용하기로 했다.

 

그러고도 블로그로는 절대 모르겠어서 유튜브 영상 보고 겨우겨우 web, android에서 push 알림이 오도록 실습에 성공했는데, 이후로는 우리 프로젝트에 구독 api, 테스트 push api 만드는 것까지는 술술 했지만 또 무슨 이유에선지 자꾸 내가 넣은 값으로 메세지가 가지 않고 실습한 코드의 메세지로 알림이 가는 거다.. 심지어 android 환경에서는 실습 코드에서 메세지를 바꿨는데도 어디선가 예전 메세지로 알림이 날아왔다.. 정확한 이유는 모르겠지만 짐작가는건 내가 실습 코드와 우리 프로젝트 코드에서 같은 public key를 사용했다는 것..! 그래서 이 문제는 키를 바꾸니까 해결됐다.

 

- subscribe, unsubscribe는 되는데 push는 안되는 문제

이후 이 문제로 또 한참 막혀서 한밤중에 해결했는데... 진짜 어이없는 이유여서 허무했지만 나 혼자 해결했다는 게 너무 기뻤다😣 실습했던 코드와 같은 메소드를 사용했고 정말 다른 사람들이 web-push 짠 코드 보면 이제 이해도 다 되고 내 코드랑 로직은 똑같은데 안됐고.. push만 안되는건 service-worker.js 파일의 문제이기 때문에 console.log 다 찍어보고 window 객체가 undefined라는 사실을 알아냈다. 근데 그래도 어떻게 바꿔야 하는지 모르겠다가 실습 코드에서도 window 객체는 없고 self 객체만 존재한다는 걸 알아서 self로 바꿔서 성공했다... 웃긴건 원래 짠 코드는 self였는데 eslint가 "빨간색" 밑줄쫙 그어서 없다 안된다 그러길래 구글링해서 window.self로 바꿨다는거? 그랬더니 빨간줄이 사라졌어서 그게 문제일거라고는 상상도 못했다🤯 근데 self가 안된다는건 그냥 eslint 설정이 typescript였기 때문이고... 나는 그 부분은 js로 작성했기 때문에 상관없는 오류였다... 그래서 심지어 빨간줄 있어도 잘 동작하지만;; 보기 안좋으니 무시하라는 주석 넣어주니까 깔끔해졌다.

 2. 중간 발표 

3주차 일요일(19일)은 중간 발표날이었다. 나는 전날까지 PPT에 내용만 채워서 front 팀원분께 넘겨드렸는데, 너무 허접했지만 팀원분께서 진짜 갓벽한 디자인의 PPT로 탈바꿈해주셨다🤩 내용 너무 잘 채워주셔서 그대로 쓰면 됐어가지구 편했다는 말씀까지... 열심히 만들어주셨으니 발표를 망칠 수 없었고~ 중간 발표여도 발표는 떨리기 때문에 대본도 열심히 작성했고 시간 체크를 위해 연습도 했다. 결과는 뭐... 망한 것 같진 않았는데 떨려서 발음이 좀 꼬였지만 ㅋㅋㅋ;; 발표가 끝나고 코치님들께서 질문이 많이 없어서 막상 또 질문 없으니까 서운했는데(?) 빈말인지는 모르지만 "너무 잘해서 질문이 없나요~?", "완성도가 높아서 이대로만 진행되면 좋은 성적 기대할 수 있을 것 같네요", "프로젝트에 대한 이해도가 높으신 것 같아 발표를 이해하기 쉬웠습니다" 등 좋은 말씀을 남겨주셨다😆 이 분위기 그대로 최종 발표까지~~~

 3. 느낀점 

사실 기술스택을 바꾼 영향으로 내 예상보다 프론트와 백이 모두 진행 속도가 느렸고, 팀장으로서 일정 관리를 못하고 있나 하는 고민이 많았는데.. 열심히 하는 팀원들을 더 푸시하는 것도 문제가 있는 것 같고... 그래서 욕심을 버려야겠다~ 버려야겠다 하면서 처음 기획했던 때보단 의욕이 좀 사라졌었던 것 같다. 기획할 땐 주제도 엄청 좋은 아이디어 같았는데 프로젝트 진행하며 익숙해지니(?) 확신도 없었고.. 근데 중간 발표를 통해 (물론 아직 남은 기능 수두룩이지만) 좋은 피드백을 들으니 기분도 좋고 다시금 의지가 샘솟았다!!!

 4. 마무리 

엘리스의 1차 프로젝트는 2주가 채 안됐다. 13일 정도? 근데 그 짧은 기간에도 정말 똑같이 환경 세팅하고, 기능 구현하고, back-front api 연결하고, 디자인 개선하고, 배포하는 그 모든 과정을 진행했다. 이제 마지막 프로젝트가 딱 그 정도(2주) 남았는데 1차 프로젝트 때 생각하면 정말 엄청 많은 시간이 남은 것 같다. 프론트엔드는 이제 api 연결 단계이고 백엔드는 아직 challenge 적인 기능이 꽤 남아서 쉽지 않겠지만 그래서 더 기대되는~😙 체력 관리도 해야 하지만 정말 잘 끝내고 싶다!!

 

갈수록 느끼지만 취업은 좀 늦어져도 보안에서 개발로 갈아타길 잘한 것 같다. 스트레스 없어... 오히려 재밌어... 짜릿해!