[회고록] 농림축산식품부 공공데이터 활용 창업경진대회 후기

 

농림축산식품부 공공데이터 활용 창업경진대회에 참가하게 되었다.

회사와 병행하여 진행했기 때문에 힘들었지만, 그만큼 얻어간 것도 많아서 회고록을 남기려 한다.

---

 

- 농림축산식품부 공공데이터 활용 창업경진대회

 

농림축산식품부 공공데이터 활용 창업경진대회는 말 그대로 농림축산식품에 관한 아이디어나 제품 및 서비스 개발에 대한 공모전이다. 

아이디어 기획, 제품 및 서비스 개발 두 가지 분야로 나눠져 있다. 

 

 

- 준비 과정

위팜 웹 디자인

 

해당 공모전에 참여하게 된 이유는 우연이였다. 

팀원 중 한 명이 공모전을 찾아보다가 해당 공모전을 보게 되었고, 참가해 보는 게 어떻겠냐는 제안을 해왔다.

 

팀원 모두 동의해서 공모전 참여가 결정되었고, 5월 초에 아이디에 회의에 들어갔다.

다양한 의견이 나왔었는데, 이 중 선정된 것은 농장 혹은 목장 체험을 소비자와 직접적으로 연결시켜 주는 웹 사이트였다.

공공데이터를 활용하기에도 알맞고, 찾아봤을때 관련된 웹 사이트는 없었기 때문이었다. 

 

아이디어가 결정된 당일날 어떤 기능을 사용할지, 어떤 페이지를 넣을지 대충 정하고

어떤 데이터를 활용할지도 어느정도 정한 뒤 헤어졌다.

 

그런데 우리가 참여하기로 했던 공모전이 해당 공모전만 있던 게 아니어서 생각보다 시간이 촉박했다.

기획과 디자인이 한 달도 채 남지 않은 6월에 나왔고, 디자인과 기능은 중간중간 변경되기도 했다. 

 

여기서 나는 프론트엔드로 참여했는데, next.js와 tailwind를 제대로 써보고 싶다는 욕심에 개발시간이 더 지체되기도 했다. 

더군다나 4월부터 계속해서 야근을 하던 중이었고, 이에 따라 개발 시간이 촉박했다.. 

 

 

- 결과

결과적으로 농림축산식품부 공공데이터 활용 공모전에서는 탈락하게 되었다.

개발 당시 모바일 버전 디자인이 뒤 늦게 추가되어 이 부분을 제대로 개발하지 못한 게 아쉬웠지만, 얻어간 것도 많아서 슬프지만은 않았다.

 

사실 업데이트 된 next.js와 tailwind를 제대로 써 본것이 처음이라 헷갈리는 부분이 많았다. 

 

폴더 구조를 정하는 방법이나 타입을 정하는 방법,

tailwind는 공통 스타일링을 하지 못한다고 해서 아쉬웠었는데, 알고 보니 tailwind-styled-compoent라는 라이브러리가 있었다던지..

이런 것들이 생각보다 많았다.

 

노션 정리

 

혹여 나중에 까먹을까 봐 노션에 적으면서 프로젝트를 진행했다.

사실 프로젝트 마감시간이 너무 촉박해서 개념을 공부하면서 진행한 것은 아니지만

이렇게 적어놓으면서 어떤 부분이 헷갈렸는지 제대로 파악할 수 있었다.

 

이제 프로젝트가 끝났으니 차차 공부하면서 블로그에 정리해 나갈 생각이다. 

 

 

- 어려웠던 부분 

위에서도 언급했지만 next.js, tailwind를 사용해서 프로젝트를 진행하는 게 사실상 처음이었다.

그래서 폴더 구조를 잡는 것부터 굉장히 헷갈렸다.

 

뿐만 아니라 이전 버전과 달라진 부분들이 많아서 당황하기도 했다.

그중 가장 어려웠던 부분은 로그인 인증처리였다..

 

강의를 들으면서 next auth를 사용해 보긴 했지만, 백엔드 api랑 연결하는 것은 처음이었다.

이미 써봤기 때문에 쉬울 거라 생각했는데 전혀 아니었다. 😂🙃

 

특히 토큰 설정과 설정한 토큰을 받아오는 부분에서 진짜 애먹었다.

솔직히 욕 나올뻔했다..

 

백엔드 api를 연결해서 토큰을 받아오는 것부터 문제였는데  토큰 저장하는 건 더 큰 문제였다.

next.js에서는 서버 컴포넌트와 클라이언트 컴포넌트가 나눠져 있는데,

해당 컴포넌트마다 토큰 설정하는 방법이 달랐고 해당 토큰을 받아오는 방법도 달랐다.

이걸 모르고 있다가 폭풍구글 검색을 통해서 겨우 알게 되었다..

 

next-auth 다음으로 힘들었던 건 바로 에러 처리였다.

이것도 할 말이 많지만 블로그에서 차차.. 

 

프로젝트를 진행하면서 느꼈던 가장 큰 문제는 내가 next.js를 제대로 이해하지 못한 채로 사용했다는 점이었다.

대충 알고 있는 정도로만 진행하려니까 여기저기서 에러가 튀어나왔다.

 

미들웨어 사용 방법도, 서버 컴포넌트와 클라이언트 컴포넌트에서 데이터를 처리하는 방식도

어렴풋 알고 있었지 정확히 어떻게 사용해야 하는지, 왜 이런 식으로 해야 하는지를 알지 못하고 있었다.

 

이제 공모전도 끝났으니 next.js를 제대로 이해하는 것부터 다시 시작하려 한다.

공모전 때 유독 헷갈렸던 부분들은 블로그에 작성하면서 이해했는지 점검도 해야겠다.