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

 요약 

 총 프로젝트 기간 

2022.05.31 ~ 07.03

 5주차 

2022.06.27 ~ 07.03

 역할 

백엔드, 근데 이제 필요시 프론트엔드를 곁들인...

 완료 항목 

• log 남기기 (morgan + winston)
• LetsEncrypt 인증서 발급 (standalone 방식)
• SSL 적용 (https 연결 확인)
• 자잘한 버그 개선 (쿼리 오류 및 비동기 제어 등)
• [FE] 마이페이지 checklist heatmap 구현
• web push 여러 번 전송되는 문제 해결
• 발표 자료 준비
• 최종 발표

---

 회고 

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

- SSL 적용

드디어... 1,2,3차 프로젝트를 하며 거의 염원이 된 자물쇠 채우기에 성공했다. 사실 2차 때 삽질하면서 3차 때는 VM 문제만 해결되면 정말 잘 채울(?) 자신이 있었는데 예상치 못하게 3차 때는 Docker를 사용하게 됐다...ㅎㅎ 새로운 걸 써보는건 정말 좋지만 난 진짜 Docker가 너무 어려웠다...! VM에 nginx가 안깔려있는데 어디서 nginx 설정을 하는거야? 부터 멘붕...이었는데 nginx 파일은 또 로컬에서 만들어서 컨테이너에 nginx를 설치하고 설정파일을 바꿔치기 하더라. 그래서 docker hub에 있는 certbot을 사용해 LetsEncrypt로 인증서를 발급하면 됐는데! 이상하게 문제없을 certbot 컨테이너 연결이 안됐다... 자꾸 3초에 한 번씩 죽었다... 그래서 코치님의 도움으로 그냥 nginx 컨테이너에 접속해 그 안에서 인증서를 발급받고 그러면 그 이미지가 삭제되면 날아가는 거니까 docker cp 명령어를 사용해 로컬로 옮겨서 docker-compose의 volumes 옵션을 사용했다. 그러고 나서야 좀 docker와 docker-compose에 대한 이해가 됐고 배포를 맡아 하셨던 백엔드 팀원의 도움도 컸다. 결국 혼자 힘으로 해결하진 못했지만 이제 인증서 발급 방식에 4가지 중 한 가지로 성공했다고 생각하고 다음번엔 DNS TXT나 Webroot 방식으로 성공해보고 싶다!😙

 

- heatmap 구현

깃헙 잔디! yearly로 봤을 때 가장 보기 좋고 우리의 체크리스트 색깔을 보여주기에 너무 좋은 선택지였다. 처음에 그걸 뭐라 부르는지도 몰라서 구글링하다가 heatmap이란 단어를 알게 됐고, 가장 많이 쓰이는 것 같은 라이브러리를 선택했다. 그런데 실습 코드대로 똑같이 했는데 우리 프로젝트에 데려오면 절대 안되는거다🤔 그래서 프론트 코치님께 헬프를 쳤고, 코치님께서 직접 코드를 뜯어 분석해주신 결과 그 라이브러리 내부에서 돌아가는 훅이 문제가 된거고.. 찾아보니 React 18에서 동작하지 않는 이슈가 있다고 링크를 보내주셨다. 진짜로 내가 실습한 코드는 React 17. 따라서 쿨하게 버리고 다음날 다른 라이브러리로 다시 시도했고 (front 기능 치고) 나름 쉽게 성공했다! 

 

- web push 여러 번 전송 문제 해결

이제 배포도 거의 마무리 되고 기능 테스트만 하는 중인데 이상하게  web push가 한 번에 4개.. 많게는 7개씩 전송이 됐다. 미칠노릇🤗 제발 와라 와라 푸시 알림 와라 할 때는 안오더니 그 염원을 담아 폭풍으로 오는 것 같았다. 이유를 모르겠어서 하루는 heatmap을 하며 넘어가려 했지만 녹화 영상을 찍으려는데 액션을 눌러도 계속 뜨는 알림이... 누가 봐도 이상했다. 따라서 발표 전날 코치님과 함께 고쳐보려고 애를 썼지만 모든 단계를 천천히 검토해봐도 문제가 될 만한 부분이..? service worker가 가장 수상했는데 동작 방식을 완벽하게 이해한 게 아니라서 해결할 수 없었다..ㅎㅎ 그러다가 옵션 중 tag가 유일한 푸시 알림을 보장한다는 글을 보고 수정해서 배포했지만 하필 그 때 env 파일 경로가 localhost로 들어가서 그날밤 테스트할 마지막 기회인 12시를 넘겼다. (타임어택 완벽) 그래서 새벽까지 발표준비나 하다가 잤는데 아침에 일어나보니 깔끔하게 하나만 오는 푸시 알림...?! 어제 고친게... 맞았는데... 재배포 후에 테스트를 못해봐서 5시간이나 고통받다가 잔~ 그래도 해결돼서 너무 기분 좋게 녹화하고 발표할 수 있었다.

 2. 발표 준비 

- PPT & 대본
사실 이번주는... 내 안좋은 버릇이 다시 튀어나올만큼 최종 발표에 대한 걱정이 컸던 것 같다. 또 살아보니(?) 나는 완벽하게 하고 싶고 어렵다고 생각하는 일일수록 미루고 다른 일부터 하는 안좋은 경향이 있는데, 따라서 전날까지도 발표 준비보다 버그 개선과 기능 구현에 힘을 썼다. 그 결과는? 당연히 밤샘 발표 준비~ PPT는 분명히 맡은 분께서 다 제작해서 넘겨줬다고 생각했는데, 딱 내가 작성해서 드린 Web Push 설명 부분만 굉장히 마음에 안들었고...😕 그래서 백엔드 코치님이 추천하신 UML 시퀀스 다이어그램 방식으로 다 뜯어고쳤다. 처음 만들어보니 이게 맞나 의문이 들어 예시를 찾아가며... 겨우 만들었는데 결국 다음날 발표 직전까지 빠진 화살표를 채워넣었다. 아무 불만 없이 8차 수정까지 해주시며 애니메이션 넣어주신 front분께 정말 감사했다😍

 

- 시연 영상 녹화

그렇게 PPT랑 대본을 겨우 완성하고 다음날 오전에 push 알림이 하나만 오는 것도 확인하고 시연 영상을 녹화하려고 하는데! 30분에 한 번씩 찾아오는 기회가 그렇게 야속할수가 없었다. 전날 시나리오는 다 짜놔서 그대로 클릭만 하면 될 거라고 생각했지만...쉽지 않았다. 9시 반부터 시도했는데 11시, 그러니까 4차 시도만에 만족스러운 녹화를 성공했다. web 버전 성공하면 android가 말썽이고 녹화하려는데 갑자기 녹화 앱이 실행이 안되고😂 그래도 다행히 11시에는 성공해서 바로 씻고 영상 편집에 돌입했다. 영상 편집..? 나와는 전혀 상관없는 분야였는데 부랴부랴 구글링으로 쉬운 영상 편집 툴 검색해서 프로그램 설치 두 개만에 적응한 뒤 필요없는 부분 자르고~ 구간별 배속 조정하고~ 시간 있었으면 화면에서 주목해야 할 부분 포인트도 줄 수 있었을텐데 살짝 아쉬웠다. 그래도 내힘으로 편집까지 성공했다는거!! 근데 이제 얼마 남지 않은 시간😮

 

- 발표 연습

그래서 결론은 발표 연습할 시간이 너무 부족했다... 배속을 겁나 돌려놓은 영상은 이제 내가 정지해가며 겨우 따라잡아야 하는 속도였고 PPT 대본은 또 왜 그렇게 많은지 10분을 넘길게 확실한데 심장은 벌써 긴장해서 심각하게 나댔다.. 그래도 겨우 겨우 진정하고 처음부터 끝까지 연습 2번정도 하자 우리팀 차례가 됐다! 근데 역시나 ㅠㅠ 초반은 빠르게 할 생각이 맞았지만 나중에 팀원들과 코치님들 말을 들으니 1.5배속 돌려놓은줄 알았다고 했다 ㅋㅋㅋㅋ 또 이제 진정해서 페이스 찾은거 같았는데 이제는 영상이 3배속 ㅋㅋㅋ 게다가 심장이 너무 빨리 뛰어서 꼬이는 발음까지~ 도저히 잘했다고 할수가 없는 발표였는데 그래도 바꾼 UML 시퀀스 다이어그램의 효과인지 영상은 잘 녹화했던건지 이번엔 코치님들의 질문이 와다다 들어왔다!! Web Push 관련 질문 7에 AI 관련 질문 3정도? 나름 다 대답할 수 있는 선이어서 너무 어버버하진 않았는데... 그래도 팀원들은 무조건 잘했다고 해주셔서 감사했다😖

 3. 결과 발표 

결과는 마지막 팀이 끝나고 바로 1시간정도 후에 발표됐다. 당일엔 상위 다섯 팀만 발표하고 3주 뒤쯤 데모데이에 필수 참가할 세 팀을 선정, 데모데이에서 1,2,3등이 가려지는 방식이다. 일단 그래서 상위 다섯 팀 안에 들었어야 했는데!!! 됐다...😲 기대 안한건 아닌데 진짜 됐다!!!!😝 진짜 내 체력... 노력... 별 거 없는 코딩 실력... 다 갈아서 만든 마지막 프로젝트였고 1,2차 팀프로젝트 때 수상을 못해서 너무 들고 싶었는데 이게 되네~ 그렇게 행복하게 잠이 들었다(?)

 4. 끝 

사실 나는 엘리스를 하며 1,2,3차 프로젝트 기간 중에는 다른 곳에 거의 신경을 쓰지 못했다. 특히 2차 프로젝트 때는 광주에서 집안일이 있어 병원을 왔다갔다 하며 프로젝트를 했더니... SSAFY 지원 시기를 놓친게 제일 후회된다. 그리고 3차 프로젝트 때는 네이버 부스트 캠프를 지원해놓고 log 만든다고 코테 시간을 깜빡했지😣 이런 날 알면서도 알람을 안 맞춰둔 내 잘못이다. 그래서 지금 SSAFY 합격하거나 다른 교육을 바로 듣는 엘리서들, 혹은 더 나아가 취업을 한 엘리서들을 보면 대단하다는 생각이 드는데 그래도 후회는 없다. 나는 프로젝트 하며 정말 최선을 다했고 이제 쫌만 쉬고 Web Push 대장정을 까먹기 전에 블로그에 기록하며 새로 공부할 방향과 계획을 세울 예정이다. 코치님께서 백엔드 엔지니어로서의 취업에 JAVA를 정말 많이 강조하셔서 추천해주신 책으로 공부해 볼 예정이다. 그리고 코테 준비는 파이썬으로!! 무조건 하루에 두 문제 이상 푸는 게 목표다. 취업까지 미뤄가며, 공부 더 많이 할 거 감수하며 내가 선택한 개발자의 길이니~ 화이팅해서 열심히 해보자!😊

 

아니 근데 이거 정말... 회고라고 쓰고 일기라고 읽는다 ㅎㅎ;;