오랜만에 다시 블로그를 쓰게되었습니다.
학교에서 주최하는 AI 여름 해커톤에 참가하게 되었고, 이틀간 리액트 수업을 듣고 이틀간 해커톤을 진행했다.
지루하고 따분한 수업
우리학교는 해커톤을 진행하기 전에 일주일전 따로 접수를 받은 스프링부트, 리액트, ROS, Unity 수업 중 하나를 선택하여 듣고 해커톤을 진행한다.
이번 수업은 리액트로 듣게 되었고, 강사님은 직방에서 근무하셨던 프론트엔드 개발자 외부 강사셨다. 수업 진행은 포켓몬 도감을 만들었고, 중간에 ChatGPT api를 사용하여 포케몬 관련 질문 챗봇을 만들고 수업이 끝났다.
리액트에 대해서 자세한 설명을 하면서 진행한것이 아닌 코드를 따라쓰고 css혹은 styled-components를 이용하여 꾸미는 것밖에 없었다...좀 지루하게 시간이 지나갔던거 같다. 다행히 마지막에 강사님께서 useMemo, debounce등 프론트엔드 개발을 하면서 도움이 될만한 요소들을 알려주셔서 다행이기도 했다.
팀빌딩
이번 해커톤은 4개의 수업을 들은 학생 각각 한명이 랜덤으로 팀이 되어 하나의 결과물을 만들어내야 했는데.. 팀은 하드웨어 쪽으로 잘하는 애들로 팀이 구성이 되었다.
해커톤 진행
아이디어 선정
이번 해커톤 주제는 'AI iot 자유주제'였다. 우리조는 AI가 추천해주는 무드등을 만들기로 했다. 근데 백엔드 스프링부트를 들은 학생이 스프링으로 개발을 진행하지 않고 파이어베이스로 대체하고 자신도 하드웨어 제작에 돕게다고 했다...소마고 2학년이 파이어베이스는 좀;;
개발
그래도 파이어베이스로라도 완성하면 좋겠다는 생각으로 진행을 했다.
나는 react를 사용해서 웹을 만들었다. 나머지 셋은 하드웨어와 파이어베이스 연동을 하고 무드등에 사용될 외관을 모델링을 진행했다. 디자인은 전날 되어 있어 그대로 바로 진행이 가능했다. 페이지는 3개로 메인페이지, 챗봇 페이지, 무드등 빛 세기 조절 페이지로 나누어져있었다. 챗봇은 gpt api를 가져와서 프롬프트를 작성하여 사용자가 상황을 말해주면 gpt가 그에 맞는 빛세기 추천, 노래 추천, 응원 문구가 나오게 되는 형식으로 만들었다. 빛 세기 조절 페이지에서는 빨간색, 파랑색, 노란색의 값을 0~255까지 받고 이를 통해 LED 빛을 조절하는 것이다. 근데 다 개발하고 나서 이제 파이어베이스로 유저가 입력한 값을 보내기만 하면 되는데 axios, firebase 라이브러리를 사용해도 값이 보내지지가 않았다. 그래서 전시하기 전까지 계속해서 코드를 수정했다..
전시회
전시회가 마지막날 이루어졌다. 이때 팀별로 점수를 매겨 상을 수여하게 되는데 우리 팀은 그렇게 좋은 펼가를 받지는 못했던거 같다. 가장 큰 문제는 빛세기 조절 값을 파이어 베이스로 보내지도 못하고 버튼 클릭시 이벤트도 추가하지 못했던게 컸던거 같다. 아쉽게도 우리팀은 상을 수상하지는 못했다.
아쉬운점
가장 아쉬웠던 점은 recoil을 사용하여 챗봇 대화 내용을 새로고침하지 않으면 사라지지 않도록 상태관리를 했으면 DB를 활용하지 않고도 전시회때는 사용자가 저장되어 편한것을 알수 있게 하지 않았나라는 후회가 있고, 아직도 파이어베이스로 값을 전송하는 방법을 찾지 못했던게 아쉬웠던것 같다.
