React 부트캠프 TIL 21

정다롱·2024년 9월 5일

내일배움캠프 TIL

목록 보기

20/39

Yummy-Yummy!😋

👨‍🏫 프로젝트 소개

유저들이 공유한 요리 레시피 기록을 한 눈에 볼 수 있는 뉴스피드 사이트

🚩 프로젝트 개요

프로젝트명 : Yummy Yummy!
진행 기간 : 24.08.28 ~ 24.09.04

📋 Supabase ERD 설계도

YummyYummy

🗂️ 기능 설명

메인 페이지

등록된 게시물 불러오기(페이지 맨 밑으로 스크롤시 다음 게시물을 불러옴)
검색창에 키워드를 입력하면 게시물 제목에 그 키워드가 포함된 것만 화면에 불러옴
게시물을 최신 등록순과 예전 등록순으로 정렬
카테고리별로 게시물을 필터링

회원가입

이메일, 비밀번호, 비밀번호 확인, 닉네임 입력시 간편 회원가입이 가능

유효성 검사 처리

비밀번호가 일치하지 않을 시 에러 메세지 발생
이미 존재하는 아이디와 동일 아이디로 가입시도시 에러 메세지 발생

(로그인 시) 게시글 작성과, 로그아웃, 마이페이지 메뉴
(로그아웃 시) 로그인, 회원가입 메뉴

로그인 한 사용자와 하지 않은 사용자의 페이지 접근성 관리

(로그인 한 사용자) 모든 페이지 접근가능
(하지 않은 사용자) 마이페이지, 레시피 작성 페이지 접근 불가능 => 로그인 페이지로 이동

게시글 작성 페이지

사용자가 입력한 값 저장
supabase 테이블 3개 연결 (레시피 정보 테이블의 ID 값으로 연결함)
저장 버튼 누르면 차례대로 insert 하며 지정된 형태로 입력값을 DB에 저장

게시글 수정 페이지

params로 받은 id값과 일치하는 레시피 정보 select
해당 id값과 연결된 재료, 순서 select
value값과 연결하여 불러온 데이터를 입력창에 추가
작성 페이지와 사용자 입력값을 받는 부분은 동일하게 처리
저장 버튼 누르면 id와 연결된 재료, 순서 모두 삭제하고 입력값을 새로 insert

(사용자가 추가하거나 삭제한 행을 추척하기 어려움)

레시피 상세정보

카테고리
- 한식 , 양식 , 중식 , 일식 , 디저트 , 퓨전 확인 가능
음식 메인 사진
- 음식 사진을 확인 할 수 있음
간단한 레시피 소개
- 간단한 레시피 소개글 확인 가능
레시피 수정 버튼
- 해당 레시피를 작성한 작성자만 수정버튼이 활성화 되고 수정 버튼 클릭시 수정페이지로 이동
재료 정보 확인
- 재료 정보를 확인 할 수 있음
레시피 순서 확인
- 음식 만드는 레시피를 확인 할 수 있음
작성자 정보
- 작성자의 프로필 이미지 확인 가능
- 작성자 닉네임 확인 가능
- 작성자 소개글 확인 가능
댓글
- 최신순(작성일순) 으로 댓글 확인 가능
- 로그인시 댓글 작성 가능
- 작성한 댓글 수정 / 삭제 가능
- 댓글에 대댓글 가능
- 댓글 작성자만 수정/삭제 버튼 활성화
- 로그인한 사람만 대댓글 버튼 활성화

프로필 수정

프로필 정보 관리: 사용자가 프로필 이미지, 닉네임, 이메일, 소개글을 확인하고 수정할 수 있도록 구현했습니다.
이미지 미리보기: 프로필 이미지 업로드 시, 실시간 미리보기 기능을 통해 사용자 경험을 향상시켰습니다.
프로필 이미지 편집: Storage API를 활용하여 이미지 업로드 및 다운로드 URL을 처리하고, 이를 통해 프로필 이미지 수정 기능을 구현했습니다.

내가 작성한 게시글, 내가 작성한 댓글 페이지

사용자 콘텐츠 필터링: Authentication에서 제공되는 uid를 활용해 사용자가 작성한 게시글, 댓글 및 대댓글만을 필터링하여 최신순으로 제공하는 기능을 구현했습니다.
게시글로 이동: 클릭 시 해당 게시글 또는 댓글이 포함된 게시글로 즉시 이동할 수 있는 기능을 구현하여 편의성을 높였습니다.
무한 스크롤: react-intersection-observer를 사용해 무한 스크롤 기능을 구현하고, useCallback을 이용해 렌더링을 최적화하여 성능을 개선했습니다. 이를 통해 사용자에게 끊김 없는 탐색 경험을 제공합니다.

💥 Trouble Shooting

Supabase

문제발생 : 개별 작업 진행 중 supabase Table명칭과 Column명 통일성을 부여하기 위해 변경 => 지정해 둔 table에 연결이 끊김
해결방법 : Table명, Column명을 하나씩 변경해보며 명칭변경으로 인한 문제인 지 API키 문제인 지 파악 후 명칭변경으로 인한 문제인 점을 확인.
SQL 문을 입력해 연결이 되어있었던 Table명과 Column명을 변경

CREATE FUNCTION public.handle_new_user()
RETURNS trigger AS $$
BEGIN
    INSERT INTO public.user_info (id, email, nickname)
    VALUES (NEW.id, NEW.email, NEW.raw_user_meta_data->>'nickname');
    RETURN NEW;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;
-- 새 트리거 생성
CREATE TRIGGER on_auth_user_created
AFTER INSERT ON auth.users
FOR EACH ROW EXECUTE FUNCTION public.handle_new_user();

프로필 수정 시 비밀번호 확인 기능 삭제

문제 발생 : 마이페이지에서 프로필을 수정하기 전에 비밀번호를 확인하도록 설정했으나, 로그인된 상태에서만 마이페이지에 접근할 수 있도록 변경한 후, 비밀번호를 확인하는 과정에서 로그인되지 않은 사용자로 인식되어 로그아웃되는 문제가 발생함.
해결 방법 : 현재 Supabase 환경에서는 비밀번호 확인 기능을 구현하기 어렵다고 판단되어, 해당 기능을 삭제하기로 결정.

const { error } = await supabase.auth.signInWithPassword({
      email: user.email, // 현재 로그인된 사용자의 이메일을 사용
      password
    });

    if (error) {
      setPasswordErrorText("비밀번호가 일치하지 않습니다.");
      setIsPasswordConfirm(false);
    } else {
      setPasswordErrorText("");
      setIsPasswordConfirm(true);
    }
  };

sweetalert CSS 오류

문제 발생 : CSS reset, GlobalStyle 적용 후 sweetalert 팝업의 고유 스타일이 무시되고 크기, 아이콘 등이 이상하게 출력되는 현상이 발생함.
해결 방법 : sweetalert 옵션으로 팝업에 class 부여하고, 전역 스타일링에서 영향받고 있는 font-size를 기본값으로 설정. alert import 할 때 고유 css도 함께 import 하여 해결.

import "./reset.css";
import "sweetalert2/dist/sweetalert2.min.css";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";

📄 관련 문서 (클릭시 페이지 이동)

배포 vercel : https://yummy-yummy-pi.vercel.app/

배포 도메인적용 : https://www.yummy-yummy.shop/

프로젝트를 마치며...

시작할 때만 해도 조금 어렵긴 해도 기간 안에 완성도 하고 스타일도 수정하고 제출할 시연 영상 촬영도 문제없겠다 생각했는데 제출일 오전에 작성 페이지 이미지 업로드 부분에서 아주 큰 진짜 엄청 큰 이대로 제출했으면 큰일 났을 문제를 발견하는 바람에 9시 30분부터 11시 30분까지 두 시간 동안 무호흡 코딩으로 수정했다.

이미지 업로드하고 미리 보기로 사용했던 base64 링크를 바로 DB에 저장했던 게 원인이었는데, 한 줄당 크기가 1mb가 넘어가는 링크를 DB에 넣고 그걸 불러오다 보니까 카드들을 불러오는 메인 페이지 로딩이 10초가량 생기는 문제가 있었다. storage를 사용했어야 했는데 가이드 문서에서 그 부분을 깜빡한 게 이렇게까지 크게 굴러올 줄은 몰랐다.

시연 영상도 내가 촬영하기로 했었는데, storage 연결하는 것으로 수정한다고 미루고 미루다 11시 30분부터 영상 촬영을 시작했다. 팀원분이 일부 촬영해 주신 영상을 편집하고 이어붙이는 과정에서 시간을 또 잡아먹었고 제출 시간보다 3분 정도 늦게 제출하게 되었다. 스토리지 연결도 바로 됐으면 좋을텐데 이미지가 갑자기 엑박이 떠버리는 바람에 뭐가 문제인지 검색하고 파악하는 데에 시간이 더 들어서 그저 죄송한 마음 뿐이었다. (추후에 꼭 TIL 작성할 것)

결과적으로는 잘 수정했고 기능도 잘 동작했고 발표도 무사히 마쳤지만 내가 너무 안일했나 하는 생각이 사라지지는 않았다. 다음에는 배포 페이지를 미리 확인하고 이런 부분에서 더 꼼꼼하게 확인해야겠다고 수십 번 다짐하게 되는 계기였다.

추후 TIL로 작성할 거지만 작성 페이지 컴포넌트와 컨텍스트를 그대로 재사용 하면서 수정 페이지도 구현했는데 이 과정도 순탄하지 못했다. supabase를 처음 사용하다 보니 upsert, update 등에 대한 이해도가 부족해서 되지 않는 걸 계속 왜 안되지? 하며 잡고 있었던 게 몇 시간이었다. 어찌어찌 튜터님의 도움으로 5시간 동안 함께 코드를 수정하며 기능은 잘 완성할 수 있었다.

눈물의 와카타임... 다섯시간동안 수파베이스 지옥에서 도와주신 튜터님들께 또 감사를...

정다롱

이전 포스트

React 부트캠프 TIL 20

다음 포스트