🔎 참가 과정
구름톤은 구름톤 in JEJU로 알고 있었는데, 구름톤 유니브는 모르고 있었다. 저번 년도에 함께 했던 umc 프로젝트 팀원이 구름톤 유니브 2기에 같이 참여하자고 꼬셔줘서 참가하게 되었다. (이 자리를 빌어서 감사를)
그래서 나는 구름톤유니브 2기의 벚꽃톤을 통해 그동안 너무나도 해보고 싶었던 첫 해커톤 경험을 할 수 있었다.
첫 해커톤, 첫 배포, 첫 pwa 등.. 짧은 기간 안에 너무나도 많은 것들을 배우고 경험하여 무조건 회고를 작성해야겠다 싶었다.
처음 작성해보는 회고라 굉장히 두서없고 횡설수설할 것 같지만 지금 아니면 자꾸만 미룰 것 같아 마구잡이로 끄적여 보려고 한다.
🔖 팀 구성원
👥 팀 구성: 기획자 1, 디자이너 1, 프론트엔드 2, 백엔드 2
🙋🏻♀️ 팀 내 역할: FE
📅 기간: 2024.03.13 ~ 2024.03.24
⌨️ 사용 기술 스택: Next.js Typescript, Styled-components
이번 해커톤은 3월 13일에 개발 기간이 시작되어 3월 24일 오전 7시까지 진행하는 해커톤이였다. 평소 해커톤을 생각하면 무박 2일 안에 아이디어빌딩부터 팀빌딩, 개발까지 다 이루어지는 것으로 알고 있는데 이번 해커톤 방식은 신기했다. 2월 23일 부터 3월 11일 기간동안 모두 비대면으로 아이디어톤부터 팀빌딩이 이루어졌다.
대망의 팀빌딩이 확정되고 3월 11일부터 22일까지 우리 팀은 매일 밤 11시의 데일리 스크럼을 가졌다.
시간이 한정(10일)되어 있었기에 정말 유용했던 방식이라고 생각한다. 매일 자신의 업무를 공유하며 협업하는 과정에서 꼭 필요한 업무만을 가지고 더욱 더 책임감을 가지고 효율적으로 업무를 할 수 있었다. 더군다나 우리 팀은 이 데일리 스크럼 시간을 통해 각 구성원의 최우선 목표를 맞춰 나갈 수 있었다. 더 좋은 방향으로 기획 및 디자인을 수정 해 나가 데모 부스 또한 성공적으로 마칠 수 있었다.
3월 23일 오후 1시에 카카오판교아지트에 모두 모여 셔틀버스를 타고 카카오AI캠퍼스로 이동하였다. 이후 오후 2:30분부터 3월 24일 오전 7시까지 총 3번의 스프린트 시간을 가지고, 오후 5시까지 총 36팀이 데모부스를 진행하고 발표 시간을 가졌다.
나는 이 긴 시간 동안 단 1분도 잠을 자지 않았는데 아니 잠이 오지 않았다. 일단 23일 오후 2시부터 다음날 오전 7시까지 마저 구현 못한 (걱정 레포트) 페이지 개발과 GIF 추가, 장장 4시간을 걸친 vercel 배포와 자잘구리한 오류 해결 등으로 잠이 올 순간이 없었고 . .
발표 시간에도 처음으로 이런 자리에 참여하는 것이였기 때문에 다른 팀들의 프로젝트 발표와 심사위원분들의 심사평이 갠적으로 너무나 흥미롭고 배울 점이 많은 시간이였다.
나의 관점과 심사위원분들의 관점이 다른 것도 너무 신기했고, 어떤 기준으로 심사를 하시는지 그리고 다른 팀들의 아이디어들을 통해 요즘 트렌드가 무엇인지 (생성형 AI) 알 수 있었다.. :) AI가 정말 대세이긴 대세구나..
💡 주제
우리 8팀 걱정보관함의 프로젝트 슬로건은
불쑥 찾아오는 걱정이 당신을 방해하지 못하도록.이였다. 걱정을 담아두고 걱정 시간을 정해 현재에 집중하고 수많은 걱정에 건강하게 대처할 수 있도록 지원하는 서비스이다.
구현한 기능
1. 간단한 회원가입/로그인
2. 미래의 나에게 편지 보내기
3. 과거의 나로부터 편지 받기
4. 오늘의 걱정 넣기
5. 걱정을 분석한 걱정 레포트
6. pwa 및 fcm 푸시알림 적용
7. vercel 배포
🖥️ 구현
일단 해당 프로젝트의 경우 한 페이지에서 앞 뒤로 이동하여 페이지 데이터를 가져와 유지해줘야 하는 부분이 많았기에 특히나 전역 상태를 관리해야 하거나 비동기 처리에 대한 어려움과 복잡함이 많았다.
먼저 회원가입을 구현하려고 하는데
위와 같은 wheelPicker가 회원가입에서의 걱정시간을 정하는 페이지와 미래의 나에게 편지를 보내는 페이지 두 곳에서 필요했다.
당연히 라이브러리가 있을 줄 알았지만,, ㅎ 적당한 라이브러리가 없거나 사용하기가 쉽지 않아 직접 구현하기로 마음을 먹었다.. 1 00 AM 형식인 time picker와 2024년 03월 25일 형식인 date picker 형식이 있었고.. 초기 값 설정도 해줘야 해서 은근히 어렵고 복잡했던 던 것 같다. 그래도 성공적으로 잘 개발하여 페이지를 구현할 수 있음에 너무 뿌듯했다 . . ㅎ-ㅎ (이 wheelPicker 개발 부분은 따로 글을 남길 예정)
약 오후 11시부터 배포를 시작했다. 이 쯤이면 모바일로 얼릉 pwa와 푸시알림을 테스트해야 했고,, (+시연영상까지) 소윤이도 배포 10분이면 금방 한다고.. (근데 진짜로 오류 없었으면 10분 컷 가능) 근데 망할 자꾸만 걱정레포트에서 꼭 필요한 라이브러리인 react-wordcloud 버전 오류가 나는 것이다. 우리는 당~연히 이것때문에 오류가 나겠구나 싶어가지고 리액트 다운그레이드 하고 별 난리를 3시간인가? 동안 떨었는데 (쉽게 해결할 수 있을 줄) 도저히 안되겠어서 새벽 2시인가 멘토분을 찾았다 (진작에 찾아뵐걸 진짜로)
그러고 약 1시간 결투 끝에 배포에 성공할 수 있었다. 거의 그냥 뭐 멘토분이 배포를 해주셨다고 해도 과언이 아닐만큼 다 해주셨다..
첫 배포라 .. build의 습관화 및 중요성 너무 잘 알았고요.. (너무 당연한 말을..) 일단 멘토님과 vscode에서 npm run build로 오류 다 잡고나서야 배포가 잘 됐어용.. 심지어 별 오류도 아니고.. react-wordcloud도 아무런 오류가 안났고용.. 진짜 여기 쓰기에도 창피 ㅎ; 뭐 이렇게 다들 배우면서 성장하는거지 모..
그리궁 대망의 pwa 적용과 fcm 푸시알림 !
이 두 개는 가기 전에 해야 할 것 같아서 전날 소윤이랑 하고 갔는데요 내꺼에선 푸시알림이 뜨고 소윤이꺼에서는 안떠서 -.- 배포하고나서 모바일에서 알림 안뜰까바 너무 걱정이였음. 그리고 이것도 전날 11시에 회의끝나서 새벽 3시넘어서 까지 함 ...
pwa는 우리 소윤이가 코드 추가해서 금방했는데 푸시알림이 .. 이해하기까지도 시간이 걸리고 파일 구조 방식도 어떻게 해야하는지 몰라 헤맸음.
⏰ 일단 푸시알림의 루트는 이렇습니다
- 서비스워커 등록하기
- 사용자에게 푸시알림 권한 허용받기
- 백엔드에게 사용자 기기 토큰 값 전달하기
- 백엔드에게 백그라운드로 메세지를 수신하면 사용자에게 푸시알림 띄우기
서비스워커는 백그라운드에서 실행되는 스크립트로, 우리 프로젝트는 걱정보관함이 열리고 닫히는 시간이 있어 이를 알려주기 위한 기능으로 백그라운드 알림이 꼭 필수였다.
서비스 워커가 구현 될 파일명은 꼭
firebase-messaging-sw.js로 해줘야 하며 public 폴더 내에 위치해야 한다고 한다! (이건 문제 없었음)
그런데 여기서 apiKey, authDomain, projectId, storageBucket 등등 환경변수process.env.NEXT_PUBLIC가 적용이 안되는 것을 나중에 알게 됐다. 아직까지 왜 안되는지는 모르겠지만 다른 블로그에서도 적용이 다 안된다고 하는거 보아 보안상의 크게 문제가 되지 안된다는 apiKey, projectId, messagingSenderId, appId 이 네가지만 올렸다!꼭 꼭 참고하시길 ..
그리고 푸시알림이 2번 울리는 현상이 있는데, 이 부분은 리팩토링 하면서 해결해야 할 것 같다. 일단 알림이 뜬다는 것만으로도 감사 또 감사였읍..
데모부스 및 발표에서 푸시알림 못보여줘서 너무 아수웠어 ㅠ_ㅠ 흑흑
나는 항상 반응형 웹만 개발했었는데, 웹앱 종류 중 하나인 pwa를 적용하고 모바일에서 홈화면에 추가하여 앱처럼 사용할 수 있따는게 너무 신기했고 ..귀한 경험이였다. 너무 편리한 기술이여서 기존 프로젝트에도 도입하고 싶음
파이어베이스의 백그라운드 메세지 수신 기능도 너무 신기했다
프론트가 데이터 요청 하지 않아도 어떻게 백엔드가 프론트 쪽으로 데이터를 전달해주지? 했는데 그것이 서비스워커였고 onBackgroundMessage 였다 ..! 지금 회고 작성하면서 문서 찾아보는데 너무 잘나와있네 왜 개발할 때는 몰랐을가요 다시한번 공식문서를 잘 찾아보자 ..
우리 팀 발표 시작! ☘️
심사위원 분께서 써보고 싶으시다며, 혹시 이런 기능도 있냐고 했는데 마침 우리가 구현한 기능이여서 바로 있다고 하였다 !!! 상은 못받아서 아쉬웠지만, 데모부스에서도 관심 많이 가져주시고, 아이디어가 좋다고 많이 칭찬해주셔서 뿌듯했다 :-)
(발표 때 푸쉬알림도 보여줬으면 좋았을텐데 발표 영상을 빨리 만드느라 보여주지 못한 것이 아쉽다..)
갑자기 마무리하는 것 같지만,, 어쨌거나 구름톤유니브를 통해 해커톤 경험뿐 아니라 너무나 좋은 팀원들을 만났다는 것이다 :) 정말 정말 많은 것을 배웠고, 경험했다.
해커톤을 조금 더 일찍, 많이 경험해볼걸 후회중이지만,, 이제 플젝 그만하고 취준하자 하림아..
(이건 발표 시간에 뻗은 우리 아기새들)
애들아.. 고생했어.. 이제 리팩하자..
