Project Diary/React + MariaDB (PicShare WebApp)(17)
-
피드관리 - Part 2 피드조회
사용자가 피드를 필터링하여 조회할 수 있는 기능을 구현합니다. 이 글에서는 모든 피드와 사용자가 팔로우한 사용자의 피드만을 필터링하여 조회하는 방법과 필터링된 피드를 가져와 화면에 표시하는 과정을 다룹니다.프론트엔드 1. 피드 필터링: MainFeedCategorySection모든 피드(All)와 팔로잉한 사용자의 피드(Following)만 필터링하여 조회합니다.// 피드 필터링 컴포넌트const MainFeedCategorySection = ({ setFilter, filter }) => { const dispatch = useDispatch(); const currentUser = useSelector((state) => state.members.user); // 필터 버튼 클릭 핸들러 con..
-
피드관리 - Part 1 피드작성 (5) 데이터베이스 정규화 적용 후기
데이터베이스 정규화의 목적 데이터 중복 최소화 : 동일한 데이터를 여러 번 저장하지 않음으로써 저장 공간을 절약하고 데이터 일관성을 유지합니다.데이터 무결성 유지 : 데이터베이스 내의 데이터가 정확하고 일관성 있게 유지되도록 합니다.데이터 이상 현상 제거 : 데이터 삽입, 갱신, 삭제 시 발생할 수 있는 문제를 방지합니다. 데이터베이스 정규화 적용 사례해시태그 데이터베이스에 저장 해시태그는 hashtags 테이블에 저장되고, 게시물과 해시태그 간의 관계는 post_hashtags 테이블에서 관리합니다. 이를 통해 데이터 중복을 방지하고 데이터 무결성을 유지할 수 있었습니다. 데이터베이스 정규화 적용 후기데이터베이스 설계의 중요성을 다시 한 번 깨달았으며, 이론으로 배웠던 정규화 개념이 실제 프로젝트에서..
-
피드관리 - Part 1 피드작성 (4) 이미지와 해시태그를 제외한 정보 입력
이 글에서는 피드를 작성할 때 이미지와 해시태그를 제외한 나머지 정보를 데이터베이스에 저장하는 과정을 다룹니다. 여기에는 게시물의 생성 및 예약 시간, 위치, 날씨 정보 등을 포함합니다. 데이터베이스 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..
-
피드관리 - Part 1 피드작성 (3) 여러 장의 이미지 입력
사용자가 피드 작성 시 여러 이미지를 업로드하고 미리보기 할 수 있는 기능을 구현합니다. 이 글에서는 이미지 업로드 핸들러, 이미지 미리보기 UI, 서버 측 이미지 저장 로직, 그리고 데이터베이스 설계를 다룹니다. 데이터베이스 posts 테이블 - postId : 게시물 ID (Primary Key, Auto Increment)images 테이블 - imageId : 이미지 ID (Primary Key, Auto Increment)images 테이블 - postId : 게시물 ID (Foreign Key)설계 이유게시물-이미지 관계 관리 - postId를 외래 키로 사용하여 각 이미지가 어떤 게시물에 속하는지 명확하게 관리할 수 있습니다.데이터 무결성- 외래 키 제약 조건 : 게시물이 삭제되면 관련된 ..
-
피드관리 - Part 1 피드작성 (2) 장소 및 날씨 입력
사용자가 피드 작성 시 현재 위치나 입력한 장소의 날씨 정보를 가져오고, 이를 바탕으로 해시태그를 추천하는 기능을 구현합니다. 이 글에서는 날씨 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...
-
피드관리 - Part 1 피드작성 (1) 해시태그 입력
사용자는 입력 필드에서 해시태그를 입력할 수 있으며, 이를 추가하거나 삭제할 수 있습니다. 해시태그는 서버로 전송되어 데이터베이스에 저장됩니다.데이터베이스 posts 테이블 : 사용자의 게시물 정보를 저장합니다.hashtags 테이블 : 해시태그 정보를 저장합니다.post_hashtags 테이블 : 게시물과 해시태그 간의 다대다 관계를 관리합니다.설계 이유효율적인 검색- 해시태그를 통한 검색 : 해시태그를 인덱싱함으로써 빠른 검색이 가능해집니다.다대다 관계 관리(정규화)- 게시물과 해시태그의 다대다 관계 : 한 게시물에 여러 해시태그가 붙을 수 있고, 한 해시태그가 여러 게시물에 사용될 수 있습니다. 이를 관리하기 위해 post_hashtags 테이블을 사용하여 다대다 관계를 구현합니다. 데이터 무결성..