이번 포스팅에서는 AWS의 RDS, EC2, S3를 활용하여 서버를 설정하고, 무중단 배포를 위해 PM2를 사용하는 방법을 단계별로 설명합니다.1. AWS 계정 생성  2. EC2 인스턴스 생성 AWS Management Console에서 EC2 인스턴스를 생성합니다.인스턴스 생성 시 키 페어를 생성해야 합니다.※ 키페어- 인스턴스에 접근하기 위한 중요한 보안 정보- 한 번만 발급되며, 이후에는 다시 다운로드 할 수 없기 때문에 안전한 곳에 잘 보관해야 합니다!!( 저도 배포 다 하고 키 페어를 잃어버려 인스턴스를 새로 생성하여 다시 배포했습니다ㅠㅠ )인스턴스를 생성한 후, 탄력적 IP 주소를 할당하고 인스턴스에 연결합니다.네트워크 보안 -> 탄력적 IP -> 탄력적 IP 주소 할당 -> 기본 선택사항 ..

1. ERD 2. 데이터 CRUD 회원관리회원가입const registerMember = (newMember) => { kuwazawa_memberDB.push(newMember);};회원 정보수정const updateMemberInfo = (userKey, userInfo) => { kuwazawa_memberDB.child(userKey).update(userInfo);};회원 탈퇴const deleteMember = (userKey) => { kuwazawa_memberDB.child(userKey).remove();};로그인const loginMember = () => { kuwazawa_memberDB.on("value", (snapshot) => { const membersObj ..

검색 기능은 사용자가 ID로 회원을 검색하거나, 해시태그, 날씨 및 장소 정보로 피드를 검색할 수 있도록 도와줍니다. 이를 위해 Redux 설정, 검색 컴포넌트 작성, 그리고 필요한 유틸리티 함수들을 작성합니다.1. Redux 설정 1-1 모든 회원 목록 fetch - Redux Slice: 회원 상태 관리import { createSlice } from "@reduxjs/toolkit";import axios from "axios";const serverUrl = import.meta.env.VITE_API_URL;const memberSlice = createSlice({ name: "member", initialState: { user: null, // 현재 로그인한 사용자 정보 us..

특정 피드를 좋아하는 유저 목록과 내가 좋아하는 피드 목록을 보여주는 기능을 구현합니다.프론트엔드 1. 좋아요 유저 목록 모달 (LikedUsersModal)// LikedUsersModal 컴포넌트const LikedUsersModal = ({ likedUsers, onClose }) => { return ( e.stopPropagation()}> 좋아요 누른 사용자 {likedUsers.map((user) => ( {user.userNickname} ))} 닫기 );};export def..

사용자가 특정 게시물에 좋아요를 눌렀는지 여부를 표시하고, 좋아요 버튼을 눌렀을 때 해당 상태를 토글하는 기능을 구현합니다. 이 기능은 프론트엔드와 백엔드, 데이터베이스 설계를 포함하여 전반적인 구조를 설명합니다. 데이터베이스  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 = ..