React 썸네일형 리스트형 [React] AI 건강 상담 페이지 코드 리뷰 안녕하세요! 오늘은 NutriGuide의 AI 건강 상담 페이지의 코드를 리뷰해보려고 합니다. AI 건강 상담 페이지는 Open AI에서는 16개 이상의 LLM (Large Language Model)을 API 형태로 제공하는데 이 API를 활용해서 질문에 대한 답을 받을 수 있는 페이지 입니다. GPT-4o mini Model은 큰 규모의 파라미터와 저렴한 비용으로 본 AI 건강 상담에 활용하기 적합했습니다. 가이드라인 보기 버튼을 누르면 효율적인 답변을 얻을 수 있는 가이드라인이 표시됩니다. 인풋창에 질문을 입력하고 질문하기 버튼을 누르면 ChatGPT 모델이 답변을 제공합니다. 다음은 서버의 API 코드입니다. @app.route('/ask', methods=['POST'])def ask_.. 더보기 [React] Nutriguide Landing Page 코드 리뷰 안녕하세요! 오늘 부터는 완성된 Nutriguide의 페이지 코드를 하루에 하나씩 리뷰해보려고 합니다. 그럼 시작하겠습니다 : ) NutriGuide는 3일치의 식단을 입력받고 사용자에게 부족한 영양소 정보를 추출해서 영양제를 추천해주는 사이트입니다. LandingPage에는 간단히 각 페이지의 정보를 보여줍니다. AI 건강 상담 버튼을 누르면 AI 건강 상담 페이지로, AI 영양제 추천 버튼을 누르면 식단 인풋 페이지로 이동합니다. import React from 'react';import { Link, useNavigate } from 'react-router-dom';import { Button } from 'antd';import myImage from '../img/logo.png'; i.. 더보기 [React] 이가 없으면 잇몸으로 안녕하세요! 날씨가 엄청 덥고 습하네요. 캡스톤은 지금 마무리 단계에 들어가고 있는데 한 번에 모든 코드를 리뷰하기는 힘들 것 같아서 하루에 한 단계 씩 리뷰해보려고 합니다. 최근에는 서버 구체화 단계를 하면서 큰 위기에 봉착했는데요. 데이터 파일들을 보시면 영양제 데이터와 식단 데이터가 있습니다. 1. 영양제의 영양성분을 인덱스 별로 표시해 놓은 영양 성분 데이터 셋이 있고 2. 각 인덱스별 영양제의 정보를 모아 놓은 영양제 정보 데이터셋이 있습니다. 영양소 함량 데이터셋에는 총 26개의 영양 성분이 있습니다. 하지만 찾아 놓은 식단 데이터에는 영양소 성분 데이터가 부족했습니다. 급하게 최대한 비슷한 영양소 정보를 포함한 데이터셋을 찾아 봤지만 모든 데이터를 전처리하고 추천 로직.. 더보기 [React] 캡스톤 디자인 진행과정 안녕하세요 오랜만에 돌아왔네요. 1학기 동안 캡스톤 디자인을 진행했습니다. 저는 인공지능 서버와 프론트엔드 페이지 설계를 도맡아 진행했습니다. 서버는 Flask라는 파이썬을 이용했고, 프론트엔드는 리액트와 AntiDesign 툴을 주로 활용했습니다. 오늘은 페이지의 UI를 보여드리고 개발이 완료되면 코드 리뷰를 하도록 하겠습니다. 먼저 메인페이지입니다. 페이지에 대해 간단히 설명하고 영양성분 설명 버튼을 누르면 성분 설명 페이지로 이동합니다. 성분 설명 페이지입니다. 네모 박스를 누르면 해당 영양소에 대한 설명을 보여줍니다. 다음은 AI 질문 페이지입니다. 질문을 하면 ChatGPT API를 기반으로 답변을 생성해 줍니다. Navbar에서 추천 받기 버튼을 누르면 위 페이지로 이동하고 추천.. 더보기 [React] Nutriguide 프로젝트 코드 리뷰 이어서 InputMenuPage입니다. 식단 입력 페이지인데 이 부분은 어느정도 chatGPT의 도움을 받았기 때문에 리뷰를 해보려고 합니다. U.I는 antd라는 프레임워크를 사용했습니다. import React, { useState } from 'react';import { Typography, Input, Form, Button, Select, message, Modal } from 'antd';import styles from '../css/Button.css';import '../css/InputPage.css';function InputMenuPage({ }) { const { Option } = Select; // 각 요일에 해당하는 식단과 선택된 요일을 관리하는 state const.. 더보기 [React] 영양제 추천 사이트 - 졸업 작품 예행 연습(1) 안녕하세요 오랜만에 돌아왔네요. 개강 후 수강신청하고 졸업작품 준비하느라 시간에 허덕이고 있습니다. 다행히 지금은 방향이 정해져서 프론트엔드 쪽으로 일단 진행하고 백엔드 부분을 도와주는 식으로 나아갈 것 같습니다. 아직 파트 분배를 하지 않았지만 미리 사이트를 만들고 있습니다. 저희 조는 영양제를 추천해주는 웹사이트를 만들기로 했습니다. 사용자의 건강 정보와 식단을 입력받으면 사용자의 영양소 섭취량과 권장 섭취량을 비교해서 나온 수치로 부족한 영양소 성분을 보충해주는 영양제 사이트 입니다. 먼저 디자인의 방향성을 잡기 위해 로고를 만들었습니다. 로고 1도 괜찮았지만 좀 더 범용성이 넓을 것 같은 로고 2를 채택했습니다. 사이트 이름은 로고처럼 NUTRIGUIDE가 될 것 같습니다. 먼저 랜딩페이지를 만들.. 더보기 [React] 로그인 여부 확인 - Auth [Node.js] Auth 기능 만들기 (tistory.com) [Node.js] Auth 기능 만들기 https://youtu.be/OGVsnbEbSLM?si=Wvx3Btu8ptwH0WYH 본 포스팅은 John Ahn님의 유튜브 강의를 참고하였습니다. 웹 서비스에서는 로그인 여부에 따라 접속할 수 있는 페이지가 있고, 회원만 사용할 수 있는 페이지 pufrontend.tistory.com 서버에서 만든 Auth 기능을 만들었었습니다. 클라이언트에도 적용시킬 차례입니다. hoc 폴더를 만들고 Auth.js 파일을 만들어 줍니다. import React, { useEffect } from 'react'; import Axios from 'axios'; import { useDispatch } from 'r.. 더보기 [React] 로그아웃 기능 중요한 로그아웃 기능을 빼먹었네요. app.get('/api/users/logout', auth, async (req, res) => { try { await User.findOneAndUpdate({ _id: req.user._id }, { token: "" }); return res.status(200).send({ success: true }); } catch (error) { return res.json({ success: false, error }); } }); 서버에서 로그아웃을 구현했었는데 id에 해당하는 user의 id가 존재한다면 토큰을 지워버리는 메커니즘입니다. 성공한다면 success: true를 반환할 것입니다. 그럼 먼저 로그아웃 버튼을 만들어 주겠습니다. 로그아웃 랜딩페이지에서 .. 더보기 이전 1 2 3 4 다음
