[해커톤] - 첫 부커톤 후기와 해커톤 꿀팁🐝

김서진·2021년 9월 26일
10

retrospect

목록 보기
1/1
post-thumbnail

글을 시작하며

안녕하세요🙋‍♀️
부스트캠프 웹모바일 6기에서 교육을 받고 있는 한 캠퍼입니다.
9월 23일부터 24일까지 이틀간 네이버 커넥트재단의 부스트캠프(이하 부캠)의 캠퍼들을 대상으로 진행된 해커톤에 참여했는데요,
부캠에서의 전투적인 코딩생활 중 소중한 이틀간의 연휴와 맞바꾼 게 후회되지 않을 정도로 값진 경험이었습니다.

해커톤을 유의미하게 진행하기 위해 팀원분들과 함께 노력한 과정과 방법들, 그리고 느낀점들을 이 글에 정리했습니다!
쓰다 보니 느낀 점 및 사실 나열이 주가 되어버렸지만,
술술 읽으시며 이런 식으로 해커톤이 진행되었구나, 이런 방법으로 협업을 진행했구나 등등을 얻어가시면 좋겠습니다!
특히 해커톤 혹은 단기간 토이 프로젝트를 준비하시는 분들께 이 글이 도움되었으면 좋겠습니다🙏

미리 보는 결과물

글을 시작하기에 앞서 결과물 먼저 보여드리겠습니다!
https://github.com/boostcampwm-2021/bookathon_B
깃허브 잔디 관리 모임을 위한 서비스인 '자라나라 잔디잔디'라는 서비스를 만들었습니다.

🤓 함께 공부할 사람들을 모아
🌱 다른 스터디원들의 잔디밭을 한 자리에서 구경하며 공부 자극을 얻고
📧 커밋을 하지 않은 날 11시에는 이메일로 공부하라는 알림을 받아 공부 동기를 얻는
자라나는 개발자분들께 유익한 서비스를 만들었습니다.

리드미에서 배포 링크를 확인하실 수 있으신데요,
친구들과 1일 1커밋 스터디를 결성하셔서 활동을 시작하신다면 아래와 같은 UI를 보실 수 있습니다!
더 많은 창들을 보고 싶으시다면 깃허브에서 확인해주세요!! (🌠스타🌠까지 눌러주신다면 정말 감사하겠습니다!)


백엔드 능력자분 덕분에 0커밋인 스터디원에게 메일 보내는 기능까지 성공적으로 만들었다는 사실!!

해커톤 과정

개발 전

아이디어 확정
부커톤을 신청할 때 제출했던 아이디어 중 하나를 골라 확정해야 했습니다.
팀원분들께서 제가 제안한 아이디어로 진행하자고 해주셔서 감사하게도 친숙한 아이디어로 진행할 수 있게 되었습니다.

기능 확정
현실적으로 이틀 안에 완성시킬 수 있도록 기능을 구성하는 일은 생각보다 어려웠습니다.
처음에는 스터디장만 가입하고 나머지 팀원들은 가입 없이 이메일만 받는 방식으로 진행하려다가
스터디장이 스터디 그룹을 생성하면 팀원들이 가입하는 방식으로 수정하는 등,
처음에 기획되었던 기능의 목적은 수정이 없었지만 기능이 작동되는 방법에 수정되고 추가된 부분이 많았습니다.

처음에 구상했던 기능은 스터디 생성 기능과 날짜별 커밋 수 조회 기능, 조건부 메일링 기능 정도였는데,
어느새 깃허브 OAuth 로그인, 스터디 생성 + 삭제 + 수정 + 조회(검색) + 가입 + 탈퇴, 월별 / 일별 커밋 수 조회 등등 .. 구현할 것들이 산더미처럼 불어났습니다..

아이디어 확정만 하고 바로 개발에 들어갔더라면 정말 큰 혼란 속에서 삽질을 했을 텐데.. 그런 위험에서 건져준 소중한 논의 시간이었습니다.

협업 방식, 깃허브 전략 논의
프론트엔드와 백엔드 서버를 분리하여 진행하는 방법을 사용했다가 CORS에게 당할 수 있다는 우려의 의견이 있었습니다. 따라서 프론트엔드 빌드 파일을 백엔드 측으로 옮겨서 / 라우터에서 리액트로 빌드한 index.html을 렌더링하는 방식을 사용했습니다.

부캠 원칙상 한 레포지토리에서 작업해야 했기 때문에 다음과 같이 한 레포지토리 내에서 frontendbackend로 디렉터리를 나누어 작업했습니다. 최종 폴더 구조는 다음과 같습니다. (몇몇 파일들은 생략했습니다.)

.
├── README.md
├── 📁 backend
│   ├── app.js
│   ├── 📁 bin
│   │   └── www
│   ├── package.json
│   └── 📁 src
│       ├── 📁 configs
│       ├── 📁 models
│       ├── 📁 routes
│       └── 📁 services
│           ├── 📁 mail
│           ├── 📁 team
└── 📁 frontend
    ├── package.json
    ├── 📁 public
    └── 📁 src
        ├── 📁 components
        └── 📁 pages

커밋 컨벤션에는 팀원분의 제안 덕에 gitmoji를 사용했습니다. 깃모지에 대한 자세한 설명은 깃모지를 제안해주신 캠퍼분의 블로그 링크 첨부로 대신하겠습니다.
덕분에 커밋할 때마다 맑고 예쁜 마음이 생길 수 있었습니다.

파트별로 frontend-dev 브랜치와 backend-dev 브랜치에서 각각 작업하고 두 브랜치를 main에 합치는 과정은 두 번 정도 줌을 키고 진행했습니다. 다른 디렉터리에서 작업해서 당연히 컨플릭트가 없었지만, 덜덜 떨며 머지 과정을 지켜보던게 아직 생생합니다.

feature 브랜치는 이슈 번호를 따 만들고, (ex. feature/#12) 피쳐가 완성되면 각각 파트별 브랜치에 Rebase Merge하는 방식을 사용했습니다.

파트별 논의
이제 파트별 줌 소회의실로 의논하여 본격적으로 개발 준비를 시작했습니다.
백엔드 분들의 경우 몽고디비 모델 구성, API 명세, 폴더 구조 등에 대해 이야기하셨던 것 같습니다.
저희 프론트엔드의 경우 figma를 통해 화면을 구성하고 이슈와 마일스톤을 찍어내는 시간을 가졌습니다.

react-router-dom을 사용하여 개발할 예정이었기에 어떤 path에 어떤 화면을 넣을지도 함께 적어두었습니다. 화면 흐름도 대강 잡아두었습니다.

개발 ing

이제 줌을 종료하고 각자 개발하는 시간을 가졌습니다. 사용한 라이브러리나 세부 구현 내용은 깃허브 레포지토리에서 확인하실 수 있으니 여기엔 개발 중 지켰던 규칙을 간단하게나마 정리해보려 합니다.

개발 중 지켰던 규칙
1. PRMerge는 꼭 알려주기
2. 가급적 작업하는 폴더가 겹치지 않도록 하기
3. package.json에 변경사항이 생길 때 알려주기

또한 주기적으로 중간점검 시간을 가졌고, 제 코드에 대한 조언을 구하고 팀원분의 코드를 볼 수 있는 시간으로 삼았습니다.

개발 후

모든 기능을 시간 내에 완성하지는 못했지만(API를 시간 내에 붙이지 못한 저의 죄가 큽니다..) 결과 발표를 할 수 있는 모습은 갖출 수 있었습니다.
부캠 게더타운에서 발표 시간을 가졌는데 부커톤 참여자 캠퍼분들과 이전 기수 수료생 분들, 마스터님들, 운영진 분들께서 구경와주셨습니다. 신기해하시며 들어주시니 정말 뿌듯했습니다.

행사 후 팀원분들과 모여 회고를 진행했습니다. 앞으로 어떻게 홍보할지, 향후 개선 의향이 있는지에 대한 이야기를 나누었고 다양한 이야기를 나누었습니다.

글을 마무리하며

부스트캠프 운영진분들께

부캠에서 최초로 시도한 해커톤 행사였는데도 일정이나 진행이 엄청 깔끔하게 기획되어 즐거운 경험을 쌓을 수 있었습니다.
게더타운도 예쁘고 재밌게 꾸며주셔서 부커톤이 지루하거나 딱딱하게 느껴지지 않았던 점도 좋았습니다.
노는 시간을 따로 주고 요가 시간이나 운영진분들과의 토킹 타임을 주어 개발자들이 너무 지치지 않도록 배려해준 마음씨에도 큰 감동을 받았습니다! 감사합니다!

함께 일해주신 팀원분들께

팀빌딩 때 우리 팀은 꼭 잠 많이 자자고 약속했지만 결국 새벽 3시까지 빌드 오류 해결하던 우리 팀..
작업하는 이슈가 달라도, 작업하는 파트가 달라도 함께 고민해주신 팀원분들께 정말 감사드립니다.
제가 좀 더 서둘러서 API를 반영했다면 더 좋은 결과로 발표할 수 있었을 텐데, 제 탓을 하지 않으시고 배려해주신 점도 정말 감사합니다.
덕분에 좋은 프로젝트도 생겼지만 이틀간 만든 좋은 추억들도 오래 기억할 것 같습니다. 감사합니다!!

이 글을 읽어주신 여러분들께

어떤 경로로 이 글에 접속하셨을지 모르겠습니다.
혹시 '나같은 감자가 무슨 해커톤이야!'라며 해커톤 참여를 망설이고 계신 상황이라면, 무조건 참여해보시는게 좋을 것 같습니다.
물론 참여하실 때는 얻고 싶은 목표를 뚜렷하게 정하셨으면 좋겠습니다. 상을 타고 싶다, 실력을 쌓고 싶다, 협업 경험을 쌓고 친구를 사귀고 싶다 등등 여러분만의 목적을 갖고 임하시면 지치지 않고 임하실 수 있을 것 같습니다.

profile
뭐라도 더 하자~

2개의 댓글

comment-user-thumbnail
2021년 9월 27일

너무 멋있어요~~~ 서비스도 넘 유용하고 예뻐용^^&

답글 달기
comment-user-thumbnail
2021년 9월 27일

깃모지 커밋 방식 넘 좋네요 :) 잘배워가겠습니다!

답글 달기