첫 해커톤 참여후기 [놀다가는 앞마당 해커톤]

 

8월 13일 8월 14일에 부산대학생을 위한 해커톤이 개최되어서 참여하게 되었습니다.

장소가 너무 멋졌는데 사진을 많이 못찍었다.. 안돼~

 

도착하다.

도착해서 한 15분 정도 기다렸다. 팀이 어떤분이 될까 궁금했다.

 

팀 매칭

팀발표가 딱 났는데 다른팀은 다 4명이였는데 저희팀만 유일하게 3명이었다. 안돼~

코로나때문에 불참하셨다고 하시더라구요.

 

아이스 브레이킹, 주제 선정

20분동안 아이스브레이킹과 함께 주제를 정했어야했다.

주제는 팀원의 공통 관심사로 어플리케이션을 만드는 것이었다.

저는 해커톤에 가기전에 주제를 다음 2가지 정도 생각을 해봤었다.

1. 모두 음악을 좋아하면 음악을 만들어보자. https://www.youtube.com/watch?v=UBXU2l_0eRw
2. 이모지 쓰는 걸 좋아하시나요? 이모지를 합성해서 이모지를 만드는 어플리케이션을 만들어봐요! https://www.youtube.com/watch?v=hJ7i8SJhihI

그러나 팀원분들의 반응이 시큰둥해서 '아 다른거해야겠다' 생각했다 ㅋㅋ

아이디어를 막 뱉었고 같은팀인 '현정'님께서 우리가 MBTI 가 'I' 인 사람이니까 처음볼때 아이스 브레이킹을 할 수 있는 주제 알려주는 건 어떤가요? 라고 말씀을 해주셨다.

오호 나는 상당히 괜찮다고 생각했다. 다른 한가지 아이디어가 더 있었는데 모두 웹툰보는 것을 좋아해서 해당요일의 웹툰을 추천해주는 어플리케이션이였다. 이 두가지중에 고민하다가, 처음볼때 아이스 브레이킹을 할 수 있는 주제를 알려주는 어플리케이션을 선택했다.

 

우선 남은시간이 22 시간 정도 였고, 프론트 개발자가 나 한명이였기때문에 너무 어려운것은 구현할 능력이 안되었을 뿐더러, 최대한 현재 내능력으로 구현할 수 있어야 한다는 생각을 많이했다.

 

기획 단계

주제가 정해지고 어떤 것을 더 구체화 해야할 지 정했다.

• tts 를 사용해서 음성으로 주제를 읽어주기
• 다음 놀 장소 추천해주기
• 대표자 뽑기
• 사람들이 좋다고 생각한 주제 순위 보여주기

크게 4가지 정도로 생각했다.

tts는 카카오 api 를 사용해서 백엔드 개발자분이 연결해주시면 내가 요청을 하는 방향으로 구현했다.

다음 놀 장소는 선택장애가 있는 사람들을 위해 운명에 맡기도록 추천해준다.

대표자 뽑기는 결국 누군가 총대를 메야할 상황에서 사용할 수 있다

사람들이 좋다고 생각한 주제 순위를 보여주는 것은 3개만 하기는 좀 그래서 어거지로 하나더 넣었다.

 

개발 시작

이제 개발을 시작했다.

중간 중간 블록체인이나, AI 세션이 있었다. 

블록체인 세션때는 api 연결이 너무 안돼서 집중을 하지 못해서 아쉬웠다.

AI 세션은 존경하는 선배님의 세션이라 집중해서 들었다. 

 

첫 난관 api 연동

api 연결을 하려니까 cors 에러가 났다. 

나는 proxy 로 프론트에서 처리를 하려고 했는데, 이게 작동을 안해서 당황했다.

결국 멘토님들께 도움을 요청했고, 백엔드에서 cors 처리를 해주었다. 

 

const cors = require("cors");
app.use(cors);

 

근데 정말적인게 저걸 넣어도 안되더라, 그래서 팀원분이 검색을 해서 알려주셨다.

다음처럼 origin 설정을 해서 겨우 해결했다.

백엔드에 대해서 잘 모르니까 이런일이 발생했다. 정말 백엔드 공부를 해야할 시기가 된 것같다.

최근 졸업과제에서도 내가 백을 잘 모르니까 프론트가 잘못인지, 백이 잘못인지 잘 모르는 상황이 많았는데 말이다.

const cors = require("cors");
app.use(cors({ origin: "http://localhost:3000" }));

 

두번째 난관 봉착

현재 tts 로직은 다음과 같았다.

1. 주제 텍스트 get 하기
2. get 요청으로 서버에 오디오 파일 생성
3. get 요청으로 오디오 파일 실행

이렇게 요청이 3가지가 요구 되었는데 이를 순차적으로 실행하기 위한 비동기 처리가 필요했다.

promise를 사용해서 then 안에서 처리를 해주려고 했는데 이게 계속 원하는 대로 동작하지 않았다. 정말 미칠 것 같았다.

원인은 서버에서 에러가 난 것으로 판단하였다. 그렇게 생각한 근거는 다음과 같다.

 

 

결국 뭔가 에러가 있어서 setTimeout을 사용해서 딜레이를 주는 방식으로 어찌저찌 해결했다. 

해커톤이니까 우선 되기만 하면 된다고 생각했다.

 

어찌저찌 만드니 날이 세어버렸고 10시 정도가 되자 잠이 너무 왔다. 턱을 괴고 있었는데 그대로 잠들어버렸다.

옆에서 현정님이 조금 주무시라는 소리에 잠시 깨었는데 그대로 30분 자버렸다.

끝까지 버텼어야했는데, 나란놈 참..

 

11시가 되었고 배포를 해야했다. 배포를 하면 가산점이 주어졌는데, 내가 헤로쿠로 밖에 배포를 안해봐서 배포 조건인 Gcp , 파이어베이스 배포는 만족할 수 없었다. 팀원 분들도 배포를 해보신 분이 안계셨다. 따라서 1시간이 남은 상태에서 할 수 없다고 판단했다.

남은 시간동안 만든 어플리케이션을 녹화하고 마무리를 했다.

 

 

참가특전

참가 특전으로 GDSC 상을 받을 수 있었다.

아마 우리팀이 유일하게 3명으로 구성된 팀이였고, 생각보다 완성을 하지 못한 팀이 꽤 돼서 받을 수 있었다고 생각했다.

 

보완해야할 점

이것을 위해서 이 글을 쓰는 것이다.

• 서버쪽에 대한 지식 쌓기 (spring 이 버겁다면 적어도 nodejs 서버는 알자)
• 카카오 map api 다뤄보기 (Junction 해커톤 대비)
• 반응형 레이아웃 잡기 (오픈소스를 너무 복붙해서 반응형으로 완전히 구현하지 못했다..)
• gcp , aws 로 배포해보기 (헤로쿠로 밖에 배포를 안해봤다는 변명에 불과하다.)

기념사진

처음와서 대기하다 찍은사진

 

발표 장소

 

새벽에 정신이 나가버린 나, 열심히 하시는 분들

 

해커톤 포스터

 

이벤트로 받은 여행 파우치

 

별개로 정혜님께서 주신 깃/깃허브 책, 정혜님 감사합니다!!

 

참가특전 GDSC 상으로 받은 구글 nest mini

 

5조

 

함께 고생한 팀원들