사용자가 특정 게시물에 좋아요를 눌렀는지 여부를 표시하고, 좋아요 버튼을 눌렀을 때 해당 상태를 토글하는 기능을 구현합니다. 이 기능은 프론트엔드와 백엔드, 데이터베이스 설계를 포함하여 전반적인 구조를 설명합니다. 데이터베이스  userNo와 postId의 조합으로 중복을 방지하고, 특정 사용자가 특정 게시물을 좋아요 했는지 여부를 확인합니다.FOREIGN KEY 제약조건 CONSTRAINT `FK__posts` FOREIGN KEY (`postId`) REFERENCES `posts` (`postId`) ON DELETE CASCADE,CONSTRAINT `FK__users` FOREIGN KEY (`userNo`) REFERENCES `users` (`userNo`) ON DELETE CASCADE ..

사용자가 작성한 피드를 수정하고 삭제할 수 있는 기능을 구현합니다. 이 글에서는 피드 수정 및 삭제를 위한 프론트엔드와 백엔드 로직을 상세히 설명합니다. 프론트엔드 1. 피드 수정 컴포넌트( FeedUpdateSection )  1-1 초기 상태 및 데이터 가져오기import React, { useState, useEffect } from "react";import { useNavigate, useParams } from "react-router-dom";import axios from "axios";import { useSelector } from "react-redux";const serverUrl = import.meta.env.VITE_API_URL;const FeedUpdateSection = ..

사용자가 피드를 필터링하여 조회할 수 있는 기능을 구현합니다. 이 글에서는 모든 피드와 사용자가 팔로우한 사용자의 피드만을 필터링하여 조회하는 방법과 필터링된 피드를 가져와 화면에 표시하는 과정을 다룹니다.프론트엔드 1. 피드 필터링: MainFeedCategorySection모든 피드(All)와 팔로잉한 사용자의 피드(Following)만 필터링하여 조회합니다.// 피드 필터링 컴포넌트const MainFeedCategorySection = ({ setFilter, filter }) => { const dispatch = useDispatch(); const currentUser = useSelector((state) => state.members.user); // 필터 버튼 클릭 핸들러 con..

데이터베이스 정규화의 목적 데이터 중복 최소화 : 동일한 데이터를 여러 번 저장하지 않음으로써 저장 공간을 절약하고 데이터 일관성을 유지합니다.데이터 무결성 유지 : 데이터베이스 내의 데이터가 정확하고 일관성 있게 유지되도록 합니다.데이터 이상 현상 제거 : 데이터 삽입, 갱신, 삭제 시 발생할 수 있는 문제를 방지합니다. 데이터베이스 정규화 적용 사례해시태그 데이터베이스에 저장 해시태그는 hashtags 테이블에 저장되고, 게시물과 해시태그 간의 관계는 post_hashtags 테이블에서 관리합니다. 이를 통해 데이터 중복을 방지하고 데이터 무결성을 유지할 수 있었습니다. 데이터베이스 정규화 적용 후기데이터베이스 설계의 중요성을 다시 한 번 깨달았으며, 이론으로 배웠던 정규화 개념이 실제 프로젝트에서..

이 글에서는 피드를 작성할 때 이미지와 해시태그를 제외한 나머지 정보를 데이터베이스에 저장하는 과정을 다룹니다. 여기에는 게시물의 생성 및 예약 시간, 위치, 날씨 정보 등을 포함합니다. 데이터베이스 scheduled_at : 예약 시간created_at : 생성 시간updated_at : 업데이트 시간(초기값은 생성 시간과 동일) 프론트 1. 데이터베이스에 저장하기 전 데이터 처리const createdAtValue = scheduled_at ? scheduled_at : new Date();const scheduledAtValue = scheduled_at ? scheduled_at : null;const Weather = weather.replace(/['"\\]+/g, "");createdAtVa..

사용자가 피드 작성 시 여러 이미지를 업로드하고 미리보기 할 수 있는 기능을 구현합니다. 이 글에서는 이미지 업로드 핸들러, 이미지 미리보기 UI, 서버 측 이미지 저장 로직, 그리고 데이터베이스 설계를 다룹니다. 데이터베이스 posts 테이블 - postId : 게시물 ID (Primary Key, Auto Increment)images 테이블 - imageId : 이미지 ID (Primary Key, Auto Increment)images 테이블 -  postId : 게시물 ID (Foreign Key)설계 이유게시물-이미지 관계 관리 - postId를 외래 키로 사용하여 각 이미지가 어떤 게시물에 속하는지 명확하게 관리할 수 있습니다.데이터 무결성- 외래 키 제약 조건 : 게시물이 삭제되면 관련된 ..