CRUD

[댓글 CRUD]

• supabase api를 사용하여 댓글 crud를 구현함. usestate를 사용하여 관리 addMutation - addComment 함수를 사용하여 새 댓글을 작성하고 성공 시 쿼리를 재 조회하여 업데이트 handleCommentSubmit : 사용자가 로그인되어 있지 않은 경우 댓글 작성을 제한하고, 댓글 내용이 없는 경우에도 제한 그렇지 않으면 새 댓글을 작성하고 상태를 초기화함 deleteMutation - deleteComment 함수를 사용하여 댓글을 삭제하고, 성공 시 쿼리를 재 조회하여 업데이트 editMutation- updateComment 함수를 사용하여 댓글을 수정하고, 성공 시 쿼리를 재 조회하여 업데이트 (editingCommentId와 commentid를 비교하여 수정 중인 댓글이면 수정된 내용을 저장하고 종료, 수정 중이 아닌 댓글이라면 수정 입력 필드에 이전 댓글을 채워 넣음) handleCommentEdit : 댓글을 수정할 때 수정 모드를 토글 하거나 수정된 내용을 저장 useQuery를 사용하여 댓글 목록을 가져옴 , fetchComments 함수를 사용하여 Supabase에서 댓글 데이터를 가져옴 pagenation을 사용하여 댓글이 4개씩 보이게 함 댓글을 작성하면 userid를 가져와서 댓글에 보이게 했고, 내가 쓴 댓글만 수정과 삭제를 할 수 있게 했음. 유효성 검사를 통해 댓글을 작성하지 않거나 로그인하지 않고 쓰는 경우 작성을 못하게 함. API는 따로 파일을 만들어서 관리 리액트 쿼리를 사용하여 로딩 중, 에러 처리

[게시글 CRUD]

리덕스 툴킷을 사용하여 전역으로 관리되고 있는 유저정보 중 유저의 아이디와 닉네임을 게시글 데이터에 저장 어떤 유저가 작성한 글인지 확인 가능 게시글은 작성자만이 수정과 삭제가 가능 (작성자 본인이 아닐 경우 수정과 삭제 버튼이 보이지 않음) 게시글 데이터에는 게시글 아이디, 유저 아이디, 유저 닉네임, 카테고리, 제목, 내용, 해시태그 저장 게시글 작성 시 유효성 검사를 통해 빈 데이터는 저장 불가능 supabase를 사용한 게시글 데이터 관리 API는 따로 관리 상세 게시글 조회의 경우 게시글의 아이디를 가지고 하나의 필요한 게시글 하나만 조회 리액트 쿼리를 사용하여 데이터를 조회할 때 로딩중/에러 처리 게시글을 작성/삭제/수정할 경우 invaildate를 통해 이전 데이터 무효화

[해시태그 기능 구현]

KeyboardEvent를 이용 입력값을 받는 state와 해시태그를 담아줄 배열 state 두가지 이용 엔터를 치면 해시태그를 담아줄 배열 state에 해시태그가 담기고 입력값은 초기화 백스페이스를 누르면 slice를 이용해 배열에 가장 마지막 해시태그가 배열에서 삭제 됨 KeyboardEvent 중 엔터와 백스페이스가 아닌 이벤트 발생시 return

무한 스크롤

로그인/회원가입

유효성 검사

마이페이지

닉네임 변경

비밀번호 변경 : 유효성 검사

게시글 페이지 네이지네이션

1. 챗봇 기능 (1) openai API : openai API를 사용하여 사용자 입력 prompt를 전달하여 답변을 얻을 수 있음 (2) 채팅 UI : 사용자의 프롬프트와 openai 답변을 redux toolkit store에 배열로 저장하고, useSelector로 배열의 요소(채팅 로그)들을 가져와서 순서대로 렌더링되게 하여 채팅 UI 기능 구현
   1. private route 기능 (1) store에서 user state가 object인지, null인지 상태를 가져와서 user 객체가 존재할 때(=로그인 유저가 있을 때)만 글 작성 페이지와 마이 페이지인 '/write', '/mypage' url에 접근할 수 있도록 기능 구현 (2) store의 user가 null인 상태에서 '/write' 또는 '/mypage'로 접근할 시 main 페이지('/')로 리다이렉트 되도록 하였음
   2. 마이페이지 (1) 현재 유저의 상태 관리 : 유저 auth 상태를 최상단 컴포넌트인 App.tsx에서 supabase api로 불러온 뒤, 로그인 한 유저가 있으면 유저의 uid, email, 닉네임을 store에 user state로 관리하여 각 컴포넌트에서 전역적으로 사용할 수 있도록 관리 (2) 닉네임 수정 : 이 때, supabase Auth에는 닉네임 요소가 없어서 db에서 따로 user 정보를 관리하여 닉네임은 db에서 관리하였으며, 닉네임 수정 요청 시 현재 사용자의 uid와 supabase user db에 저장되어있는 uid를 비교하여 닉네임 데이터를 전송/수정하였고, 변경사항이 바로 렌더링될 수 있도록 store의 user - name에도 dispatch로 전달하여 변경된 닉네임이 화면에 바로 반영될 수 있도록 함 (3) 비밀번호 변경 : react-hook-form 라이브러리를 사용하여 메시지, 유효성 검사(비밀번호 최소 길이 및 비밀번호 확인 입력), 에러 메시지 핸들링 기능을 구현하였고, 유효성 검사를 통과하면 supabase Auth에 사용자가 입력한 변경 비밀번호를 전송하여 비밀번호를 변경할 수 있도록 하였음 (4) 내가 쓴 글 기능 : uid를 활용하여 supabase 게시글 db에 담겨있는 게시글 작성자 uid를 비교해서, 현재 유저의 게시글만 필터링하여 useQuery로 가져와서 마이페이지에서 모아서 확인할 수 있도록 구현 (5) 페이지네이션 : 사용자가 작성한 글 데이터뿐만 아니라 글 개수를 api로 따로 가져옴. useState로 currentPage를 관리하였음. 작성 글 데이터를 한번에 가져오지 않고 현재 페이지에 따라 다음 1페이지만 prefetch하였음. 앞에서 불러온 전체 데이터 개수, 한 페이지당 게시글(5개 상수로 설정), currentPage와 함께 react-js-pagination 라이브러리를 사용하여 페이지네이션 기능 및 UI 구현

chatbot

댓글

작성

수정

삭제