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

주제 선정

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

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

주제 : 급식 선호도 조사

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

기능 및 프로젝트 이름 선정

기능 상세

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시간 잘 수 있어요... 잘자요 여러분~

<Routes>
    <Route path = "/" element={<MainPage/>}/>
    <Route path = "contents" element={<contents/>}
    <Route path = "/login" element{<Login/>} />
</Routes>

근데 우리가 로그인 페이지에서는 헤더 부분을 안보여 주고 싶고 메인 페이지에서는 헤더 부분을 보여 주고 싶을때는 어떻게 해야할까?

일단 우리는 헤더 컴포넌트를 만들고 시작을 해보자

현재 우리가 App.jsx라는 파일 안에서 만들고 있다고 하자

function Header() {
    return (
        <div>
            <div>
                <Link to="/">홈</Link>
                <Link to="/contents">컨텐츠</Link>
            </div>
            <div>
                <Link to="/login">로그인</Link>
            </div>
        <div/>
    )
}

컴포넌트를 만들때는 무조건 대문자로 시작해야 한다.

일단 대충 헤더 컴포넌트를 만들었다. 그럼 우리는 이것을 사용해볼 것이다.

헤더를 표시를 해줄려면 이렇게 해주면 된다.

function App() {
    return(
        <div>
            <Header />
            <Routes>
                <Route path = "/" element={<MainPage/>}/>
                <Route path = "/contents" element={<contents/>}
                <Route path = "/login" element={<Login/>} />
            </Routes>
        </div>
    )
}

근데 이렇게하면 우리는 로그인 페이지에 접속을 해도 똑같이 헤더가 표시가 되는 것을 볼 수 있다. 이런것도 분리를 해주고 싶으면 우리는 이런 방법을 쓰면 된다.

Route 안에 있는 element에는 여러 컴포넌트를 넣을 수 있다. 또한 라우터도 여러 주소로 사용을 할 수 있는데 예시를 보여주겠다.

<Routes>
    <Route path = "/" element={<MainPage/>}
    <Route path = "/contents" element={<contents/>}>
        <Route path = "components" element={<components/>}
    </Route>
    <Route path = "/login" element{<Login/>} />
</Routes>

이런 방식으로 쓰면 주소를 /contents로 이동을 했을때는 contents의 내용을 보여주고 /contents/components로 이동을 하면 components의 내용을 보여준다.

그리고 헤더 부분을 나눠서 사용을 하고 싶을때

<Route 
path ="/" 
element={
    <div>
        <Header />
        <MainPage />
    </div>
} />
<Route 
path = "/login"
element = {
    <Login/>
}

그냥 진짜로 간단하게 해결 할 수 있다... 이런걸로 포스트 올리는게 맞나 싶지만 복습할겸 올립니다.

리액트 생성하는 방법은 VSCode에서 터미널을 열어서 다음과 같이 입력해준다. * npx creat-react-app <자신이 원하는 파일명>

그러면 설치가 된것을 볼 수 있다.

다음은 우리가 라우터를 사용하기 위해서는 설치가 필요한데

그전에 리액트 파일로 이동해야한다.

터미널에 다음과 같이 입력을 해주어야 한다.

* cd <자신이 만든 파일명>

다음에는 터미널에 다음과 같이 입력을 해준다. * npm react-router-dom

다음과 같이 입력하면 설치가 완료될것이다. 그러면 우리는 라우터 사용할 준비가 완료되었다 🥳

그럼 우리는 코드를 짜볼것이다. 간단하게 우리는 src 폴더에 MainPage.jsx와 LoginPage.jsx를 만들것이다. App.js에 다음과 같은 코드를 짜준다.

import { Routes,Route } from 'react-router-dom'
import MainPage from './MainPage';
import LoginPage from './LoginPage';

function App() {
  return (
    <Routes>
      <Route path='/' element={<MainPage/>} />
      <Route path='/login' element={<LoginPage/>} />
    </Routes>
  );
}

export default App;

다음과 같이 짜면 작동이 안될것이다. 이유는 인덱스에 코드를 라우터 지정을 안해줬기 때문이다. index.js에 다음과 같이 코드를 짜준다.

  <React.StrictMode>
    <App />
  </React.StrictMode>

이 부분을 이렇게 바꿔준다.

  <BrowserRouter>
    <App />
  </BrowserRouter>

그러면 라우터가 정상 작동 할것이다.

서버를 실행하는 법은 터미널에 다음과 같이 입력하면 된다.

* npm start 또는 npm run start를 입력하면 된다.

그러면 우리는 이제 Link라는 태그를 사용해서 페이지 이동을 해볼것이다.

import { Link } from "react-router-dom"

function MainPage(){
    return(
        <div>
            메인페이지 입니다.
            <br />
            <Link to="/login">로그인 페이지</Link>
        </div>
    )
}

export default MainPage

다음과 같은 코드를 짜면 화면에 다음과 같이 나올것이다.

저기에 있는 로그인 페이지를 누르면 주소창이 "localhost:3000/login"으로 바뀐것을 볼 수 있다.

그럼 우리는 라우터 사용하는 법을 배운것이다.