사용자가 피드 작성 시 현재 위치나 입력한 장소의 날씨 정보를 가져오고, 이를 바탕으로 해시태그를 추천하는 기능을 구현합니다. 이 글에서는 날씨 API를 사용하여 위치와 날씨 정보를 가져오고, 이를 활용해 피드에 정보를 입력하는 과정을 다룹니다. 데이터베이스locationName : 위치 이름weatherInfo : 날씨 정보 (JSON)weathericon : 날씨 아이콘프론트엔드 1. 장소 및 날씨 입력 기능 1-1 날씨 API를 사용하여 위치에 따른 날씨 정보를 가져오는 함수 const getWeatherByCoords = async (lat, lon) => { const response = await axios.get( `https://api.openweathermap.org/data/2...

사용자는 입력 필드에서 해시태그를 입력할 수 있으며, 이를 추가하거나 삭제할 수 있습니다. 해시태그는 서버로 전송되어 데이터베이스에 저장됩니다.데이터베이스 posts 테이블 : 사용자의 게시물 정보를 저장합니다.hashtags 테이블 : 해시태그 정보를 저장합니다.post_hashtags 테이블 : 게시물과 해시태그 간의 다대다 관계를 관리합니다.설계 이유효율적인 검색- 해시태그를 통한 검색 : 해시태그를 인덱싱함으로써 빠른 검색이 가능해집니다.다대다 관계 관리(정규화)- 게시물과 해시태그의 다대다 관계 : 한 게시물에 여러 해시태그가 붙을 수 있고, 한 해시태그가 여러 게시물에 사용될 수 있습니다. 이를 관리하기 위해 post_hashtags 테이블을 사용하여 다대다 관계를 구현합니다.  데이터 무결성..

사용자가 자신의 팔로워와 팔로잉 리스트를 확인할 수 있는 기능을 구현합니다. 이 기능은 팔로워 리스트와 팔로잉 리스트를 각각 별도의 컴포넌트로 분리하여 제공합니다. 프론트엔드 1. 팔로워 리스트 컴포넌트FollowerListSection.jsx 1-1 팔로워 리스트 컴포넌트> 상태 및 기본 설정 const FollowerListSection = () => { const navigate = useNavigate(); const location = useLocation(); const { followers } = location.state || { followers: [] }; console.log("팔로워페이지의 팔로잉", followers); // 뒤로 가기 버튼을 눌렀을 때 이전 페이지로 이동..

사용자가 다른 사용자를 팔로우하거나 언팔로우할 수 있는 기능을 구현합니다. 이 기능은 팔로우 버튼을 통해 사용자 목록 페이지와 개인 피드 페이지에서 제공되며, 프론트엔드와 백엔드가 상호작용하여 팔로우/언팔로우 상태를 업데이트합니다. 데이터베이스에 팔로우 관계를 저장하고 삭제하는 과정을 포함합니다. 데이터베이스 구조 설정 followerId : users 테이블의 userNo가 팔로우하는 유저followeeId : users 테이블의 userNo 에게 팔로우된 유저프론트엔드 1. 팔로우 버튼 컴포넌트 (FollowButton.jsx) 1-1 팔로우 버튼 컴포넌트 > 상태 및 기본 설정const FollowButton = ({ userNo }) => { const dispatch = useDispatch(..

사용자가 회원 정보를 수정할 수 있는 기능을 구현합니다. 사용자는 닉네임, 비밀번호, 프로필 사진을 변경할 수 있으며, 이를 위해 프론트엔드와 백엔드가 상호작용합니다. 데이터베이스에 저장된 정보를 업데이트하고, 중복된 닉네임을 체크하며, 새로운 프로필 사진을 업로드하는 과정을 포함합니다. 프론트엔드 1. 회원 정보 수정 페이지 (ProfileModify.jsx) 1-1 초기 상태 및 사용자 정보 로드import React, { useRef, useState, useEffect } from "react";import { useNavigate } from "react-router-dom";import { useSelector, useDispatch } from "react-redux";import style..

사용자가 이메일과 비밀번호를 입력하여 로그인할 수 있는 기능을 구현합니다. 이 과정에서 프론트엔드와 백엔드가 상호작용하며, 입력된 정보를 바탕으로 데이터베이스에서 사용자를 인증합니다.프론트엔드 1. 로그인 요청 핸들러handleLogin 함수const handleLogin = async (e) => { e.preventDefault(); // 폼 제출 시 페이지 새로고침 방지 setError(""); // 기존 오류 메시지 초기화 // 이메일 검증 if (!email) { alert("이메일을 입력하세요."); // 이메일이 비어 있으면 경고 메시지 표시 emailRef.current.focus(); // 이메일 입력 필드에 포커스 return; } // 비밀번호 검증 if ..