[후기] 스파르타 항해커톤 후기(feat. 대상🥇) - 2탄

저번 포스팅에서는 디자인까지의 과정을 회고해보았다. 2탄에서는 개발과정과 발표까지의 과정을 작성해보려고 한다! 

 

개발 시작~!

우선 호랑에듀에서 제시했던 타입스크립트와 리액트 버전을 맞추고, 상원님이 Next.js로 프로젝트를 진행하자고 제안하셔서 아직 공부하는 삐약이 상태이지만 해보기로 했다. 그리고 상태관리는 Recoil, 서버와의 통신은 Axios를 사용, 스타일은 SCSS로 사용하기로 하였다. 또 LMS이기 때문에 그래프도 굉장이 많이 들어가다보니 라이브러리를 사용하기로 했는데, 항해99 프로젝트때 사용했던 nivo Chart라이브러리가 커스터마이징하기도 편리하고 기본 디자인도 딱히 수정이 필요없을 만큼 깔끔해서 nivo로 선택했다. 

 

🚨 문제 발생

그런데 이 Nivo Chart가 Next.js와는 궁합이 아주 별로 였다. 처음 페이지가 렌더링 되면서 서버에서 데이터를 불러오기도 전에 Nivo chart가 그려지는데 데이터가 없다보니 에러가 발생했다. 

 

그래서 구글링을 해보니
https://learnjsx.com/category/4/posts/nextjs-nivo 

How to use nivo charts with Next.js

ssr을 false로 설정해서 lazy-loading을 사용해야한다고 나와있었다. 만약 ssr과 함께 사용하고 싶다면 nivo chart를 SVG 또는 HTML로만 구현할 수 있다고 되어있었다.

 

이렇게 수정하니 그래프는 그려지지만 그래프가 그려지는데 너무 버벅이고 속도가 느려서 Nivo를 사용할 수 없을 것 같았다. 그래서 더 찾아보니 next.config.js파일에서 약간의 설정을 해주면 좀 더 호환성을 높여준다고 해서 설정을 추가해보았다.

각각의 설정이 의미하는 것은 ⬇️

- transpilePackages: ["@nivo"] 설정은 Next.js에게 Babel 트랜스파일 대상에 @nivo 패키지를 포함시킬 것을 알려줍니다. 이 설정을 사용하면 프로젝트 내에서 @nivo 패키지를 사용할 때 해당 코드를 Babel이 트랜스파일하여 브라우저에서 사용 가능한 코드로 변환합니다.

- experimental: { esmExternals: "loose" } 설정은 Next.js의 실험적인 기능 중 하나인 ESM (ECMAScript Modules) Externals를 활성화합니다. ESM Externals는 외부 모듈을 ESM 형식으로 가져올 때의 동작을 설정하는데 사용됩니다. "loose" 모드로 설정하면 느슨한 ESM 외부 모듈 동작을 활성화하며, 이는 코드를 더 효율적으로 번들링하고 로딩 속도를 향상시킬 수 있도록 도와줍니다.

 

그렇다고 한다... React에서는 너무 간편하고 쉽게 사용했었는데 Next에서는 너무 말썽이 많았어서 내가 쓰자고 했는데 상원님이 너무 고생하셔서 죄송했다... 안 그래도 시간이 부족한 해커톤인데 여기서 시간을 많이 허비했던것 같다...🥲

 

😩 git 어렵다...

협업을 하면서 또 중요한 것이 git 브랜치 전략인데 사실 그동안은 그냥 main브랜치에서 pr올려서 합치고 충돌해결하고는 했다. 이번엔 git flow 전략을 경험해 보기 위해서 상원님과 develop 브랜치에서 페이지 별 브랜치를 나눠서 작업을 하고 다시 합치고 main에 다시 합치는 식의 방법을 사용하기로 결정. 그런데 ㅜㅠ 브랜치를 합치는 과정에서 분명 나는 pull을 땡기고 push를 하려는데 자꾸 pull을 먼저 하라는 에러가 났다. 그래서 작업 사항이 날아갈까봐 stash로 저장 해두고 병합 했다가 rebase로 다시 합쳤다가 여러 방법을 시도해봤지만 시간도 부족하고 작업한게 날아갈까봐 결국 상원님께 작업 파일을 보내드려서 수동으로 합쳤다... ㅜㅠ 

 

밤샘 데이

그리고 항해커톤의 특이한 점은 강제로 밤새기 데이였다 ㅋㅋㅋ 사실 6일 정도의 시간이 주어지다보니 만약 팀원 모두 일을 하고 있는 상태가 아니라면 시간을 잘 분배해서 작업하면 밤을 안 새도 가능하다고 생각했다. 우리 팀에도 연석님은 일도 하시구 야근하고 오셔서 또 해커톤도 해야되다 보니 오후 9시에 회의를 하고 작업을 하다보니 평일에는 진척이 많이 없었다. 디자인과 퍼블을 미리 해놓는 정도? 그래서 토욜에는 밤을 필수로 새고 일요일 아침 7시부터 발표를 시작하는 일정이었는데 진짜 빡세면서도 다같이 게임도 하면서 밤새니까 중딩때 수련회 온 기분이었다ㅎㅎ

 

발표

근데 밤을 새야되는데 오프라인이 아니다보니 팀원 중 한분이 갑자기 사라졌는데 깨울 수도 없고 진짜 난감했다. 기능 개발하느라 발표자료도 다 못 만들었는데 심지어 한 명이 사라져서 멘붕 ㅋㅋㅋㅋ 결국 진짜 괴발개발 피피티 만들어서 발표자는 사다리타기로 정했다

상원님이 발표 당첨! ㅎㅎㅎ 준비도 안 되어있었는데 발표도 정말 잘해주셔서 고마웠다.

 

결과

발표 준비도 미처 잘 하지 못했고 다른 팀 피피티 보고 너무 잘해서 우리는 상 못 받겠다... 라고 생각했는데 왠걸 두둥~

무려 대상의 상장(대상 처음 받아본다 헤헤)

대상을 받아부러~~~ 🎶

해커톤을 처음 해봤는데 상도 받고 근데 심지어 대상도 받으니까 자신감도 생기고 기분 전환도 되는 좋은 계기였다. 그리고 개발에 관심도 많고 열심히 하는 팀원들도 만나서 좋은 정보도 많이 얻게 되었고 많이 배워가는 시간이었다. (그리고 상금 500만원도 너무 됴아~~💰)