이 글에서는 Kiloflow 프로젝트에서 사용자가 직접 음식을 등록하고, 이를 공공 API에서 가져온 데이터와 함께 리스트에서 검색하는 기능을 구현하는 방법을 설명합니다. 이를 통해 사용자는 자신의 음식을 등록하고 관리할 수 있습니다.데이터베이스 스키마 users 테이블model users { user_id Int @id @default(autoincrement()) email String @unique password String nickname String profile_image String @default("..

이 글에서는 Kiloflow 프로젝트에서 공공 API를 사용하여 음식 리스트를 검색하는 기능을 구현하는 방법을 설명합니다. 이 기능을 통해 사용자는 공공 API에서 제공하는 음식 데이터를 검색할 수 있습니다. 프론트엔드음식 리스트 컴포넌트  1. 상태값 정의 const FoodList: React.FC = () => { const [foodList, setFoodList] = useState([]); //음식 리스트 저장 const [searchList, setSearchList] = useState([]); //검색 결과 저장 const [keyWord, setKeyWord] = useState('');//검색 키워드 저장 const [currentUserID, setCurrentUserID] ..

1. 주간달력과 월간달력 구현을 위한 라이브러리 설정Kiloflow 프로젝트에서 주간달력과 월간달력을 구현하기 위해 react-calendar와 dayjs 라이브러리를 사용합니다.npm install react-calendar dayjs  2. 달력 컴포넌트 설정 및 기본 렌더링 2-1 상태값 정의 및 초기 설정 // 상태값 정의const [currentTab, setCurrentTab] = useState('week'); // 현재 활성화된 탭(주간 또는 월간)을 나타내는 상태값const [selectedDate, setSelectedDate] = useState(dayjs().toDate()); // 현재 선택된 날짜를 저장하는 상태값// 탭 변경 핸들러const handleTabChange = (t..

회원정보 수정 기능은 개인정보와 프로필 정보를 업데이트할 수 있도록 합니다. 프론트엔드 1. 사용자 정보 수정 페이지 컴포넌트 1-1 상태값 정의 const [activeTab, setActiveTab] = useState("personalInfo"); // 현재 활성화된 탭을 나타내는 상태값const [currentUserInfo, setCurrentUserInfo] = useState(null); // 현재 사용자의 기본 정보를 저장하는 상태값const [currentUserProfile, setCurrentUserProfile] = useState(null); // 현재 사용자의 프로필 정보를 저장하는 상태값const router = useRouter(); // Next.js의 useRouter 훅..

사용자는 로그인 후 키, 몸무게, 목표 몸무게, 감량 난이도를 설정하여 맞춤형 권장 섭취 칼로리를 계산받을 수 있습니다. 초기 설정이 완료된 후에는 더 이상 초기 설정 페이지가 뜨지 않으며, 회원가입 후 초기 설정은 한 번만 할 수 있습니다.데이터베이스 스키마 1. users 테이블model users { user_id Int @id @default(autoincrement()) email String @unique password String nickname String profile_image String @de..

로그인 기능은 사용자가 이메일과 비밀번호를 입력하면 서버에서 이를 확인하고, JWT(JSON Web Token)를 발급하여 인증을 수행합니다. JWT 토큰을 사용하여 현재 로그인된 유저 정보를 가져오는 방법도 함께 다룹니다.필요 개념 설명  JWT 토큰이란?JWT(JSON Web Token)는 JSON 객체를 사용하여 양쪽 간에 정보를 안전하게 전송하기 위한 컴팩트하고 자가 포함된 방식입니다. JWT는 주로 인증 및 정보 교환에 사용됩니다. 다음과 같은 세 가지 주요 부분으로 구성됩니다:Header : 토큰의 유형과 해싱 알고리즘을 정의합니다.Payload : 토큰의 주된 데이터가 포함됩니다.Signature : Header와 Payload의 무결성을 확인하기 위해 사용됩니다.프론트엔드 : 로그인 페이지..