12월 27일 부터 학교에서 예비취업맞춤반을 한다고 해서 신청해서 들어갔다.
나는 프론트에 대해서 자세하게 알려주는 수업인 줄 알았으나... 프로젝트를 만들면서 배우는 그런것이였다.

뭔가 재미도 있을것같고 해서 시작을 하게 되었다.
일단 처음은 프로젝트 주제를 선택을 하였다.

주제 선정

학교에서 구글폼을 사용하여서 급식 선호도 조사를 하는것이 생각이 났다.

그럼 급식 선호도 조사? 라는 생각을 하였고 그대로 급식 선호도 조사로 정하였다.

주제 : 급식 선호도 조사

그럼 주제를 선정을 하였으니 이제 이름과 필요 기능을 생각을 할 차례였다.

기능 및 프로젝트 이름 선정

기능 상세

1. 매일 제공되는 급식 메뉴 확인

   • 학생: 해당 날짜의 급식 메뉴를 간단히 확인.
   • 관리자(영양사): 급식 메뉴를 등록 및 수정 가능.

2. 좋아요/싫어요 투표

   • 아침, 점심, 적녁에서 모든 메뉴중 하고 그 안에서 어떤 메뉴가 좋았는지 각각 3가지를 선택하고 다음으로 어떤것이 제일 불호였는지 각각 3가지를 선택후 제출.
   • 투표 수는 실시간으로 업데이트.

3. 급식 만족도 분석

   • 날짜별 좋아요/싫어요 비율 차트 제공.
   • 가장 인기 있거나 불호가 많은 메뉴 통계.

4. 영양사 메뉴

   • 접속후 영양사 글자를 클릭하여서 관리자 페이지에 들어가면 학생이 투표한 싫어하는 메뉴와 좋아하는 메뉴를 1위 부터 3위까지 db에 저장을 한다.
   • openai API를 이용하여서 gpt에게 프롬프트를 입력하여서 결과를 받아서 db에 저장을 한다.
     각각 저장을 한다.

   가장 중요하게 생각하는 사항

• UI/UX: 학생들이 사용하기 쉽게 직관적인 디자인 적용.
• 데이터 시각화: 급식 만족도를 효과적으로 보여주는 통계 그래프.

많이 생각을 해본 결과 이렇게 하면 될거 같다고 생각을 하여서 이대로 진행을 하였다.

이렇게 다 선정을 하였는데 급식 데이터는 어디서 가져올것인지를 찾아보았다.
찾아보니 교육정보 개방 포털 사이트를 알게되었다.
일단 그럼 openai API와 교육정보 개방 포털 사이트를 이용하여서 만들고 디자인은 어떻게 할지 한번 구성을 해보았다.
이런 느낌으로 구성을 할려고 하였다.

더 자세히 보고 싶은분들을 위해서 링크를 남겨드리겠습니다.
Figma 디자인 보러 가기

이후 프론트엔드와 백엔드에서 어떤것을 사용을 할지 생각여서 작성을 하였다.

front-end

• 사용 기술
  • axios
  • react-router-dom
  • react-device-detect
  • mui
  • recharts
  • @mui/material
  • @emotion/react
  • @emotion/styled

back-end

• 사용 기술
  • openai
  • bcrypt
  • prisma
  • jsonwebtoken
  • dotenv
  • cors
  • express

일단 지금 프로젝트에서 사용할만한 라이브러리들을 선택하여서 정리를 하였다.
프론트에서 react-device-detect를 이용하여서 모바일과 데스크탑을 구분하여서 react-router-dom으로 페이지 라우팅을 해주었다.
3일동안은 프론트의 기본틀을 잡고 그리고 퍼블리싱을 잠을 줄이면서 하였다..
근데 생각해보니 캡스톤이 있어서 캡스톤도 한다고 하루에 3일동안 잠을 하루에 4시간 ~ 3시간 사이로 잤다..

원래 나는 잠이 많은 사람인데... 잠 자고 싶다...
.
.
.
그렇게 프론트엔드의 퍼블리싱이 어느정도 끝나고 이제 백엔드도 만들어야겠다는 생각이 들어서 백엔드도 만들기 시작을 하였다...
근데 더 충격... 캡스톤의 백엔드에서 ai 불러오는것이 있는데 여기서 요청을 보내면 500 에러가 뜬다...

음... 어떻하지... 지금 새벽 2시인데... 친구를 깨워야하나 생각이 들었다...
결국에는 깨워서 백엔드에 문제 있는것 같다고 말을 하였다...

친구가 잠이 덜깨었는지 뭐라고 말했는데 못들었는데 친구가 다시 잠을 잤다...
낼 해결 해주겠지... 하면서 그냥 나와서 최대한 할 수 있는것들을 하였다...
그러고 캡스톤 발표날전에 캡스톤 프로젝트와 급식 선호도 조사 프로젝트를 함께하면서 그날 새벽 4시에 잠을 자고 5시에 일어나 학교로 출발을 하였다...(피곤해 죽는줄)

그리고 학교가서 발표를 하고 마치고 이제 다시 올라서 급식 선호도 조사 백엔드를 계속해서 짜면서 프론트에서 axios를 연결하고 오류 해결하고 이걸 2일 동안 28시간 반복하여서 완성을 하였고 여기서 배포를 해보자 하여서 도커로 배포를 할려고 하였는데..

헉!

무슨 도커 파일로 올리니까 localhost:3306 mysql를 못 찾겠다는 것이다...
아니 docker에 mysql 올라가있는데 이게 무슨 일이지??? 해서 찾아보다가 localhost대신해서 docker 컨테이너의 ip를 가져와서 넣어보라는 글을 봤다.
그래서 해보니까 4시간동안 개고생한게 해결이 되었다...

진짜 모니터 부실뻔 했다...

이대로 백엔드를 배포를 할려고 지금 docker하고 aws에 대해서 공부하는 중이다...
나중에 배포가 완료되면 더 자세하게 프로젝트에 대해서 설명을 하고 완성 화면을 보여드릴게요..
지금 너무 피곤하네요..
이제 저 9시간 잘 수 있어요... 잘자요 여러분~