HYEWON JUNG의 개발일지

목표 목록페이지 페이지네이션=> 무한스크롤 변경 새로 알게 된것/ 오늘의 코드 당연히 시작은 패키지 설치! yarn add react-query yarn add react-intersection-observer 무한스크롤 적용하기 UX적으로 무한스크롤이 좋을 것 같다는 판단을 내려서 기존에 구현했던 페이지네이션을 지우고 무한스크롤로 변경하기로 했다. 기존에 마이페이지에선 무한스크롤을 구현하고 있었기 때문에 react-intersection-observer와 useInfiniteQuery를 사용하여 구현하셨기 때문에 통일성을 위해 나도 그렇게 구현을 했다. 서버상태 관리를 위해 react-query로 서버로직을 관리했다. CommuQuery.ts export const fetchPosts = async (..

목표 대댓글 구현하여 소통창 넓히기 테이블 분리 새로 알게 된것/ 오늘의 코드 댓글을 원래는 대댓글이 없이 진행을 하려다가 커뮤니티에서 공구나 구인 등을 하게 되니까 비밀 댓글이나 댓글로 조금더 소통할 수 있게 하는 것이 좋을 것 같아서 디벨롭을 하기로 했다. 기존에 댓글 작성로직은 간단하게 커뮤니티 테이블에 Comment를 넣어서 객체 배열로 넣어주었는데 대댓글은 아무래도 테이블을 분리하는 것이 좋을 것 같아 아예 새로운 로직을 구성하기로 했다. 테이블 구성은 댓글의 고유 id 댓글이 그냥댓글인지 대댓글인지 판별할 용도인 parent id 해당 게시물의 id 댓글내용 작성시간 익명여부 비밀글 여부 이렇게 구성했다. 댓글 CRUD를 해야하는데 다른 것 보다 R이 조금 걱정이다.. UI는 어떻게 구성하는 ..

로직 수정중

내가 설정을 잘못한 것인지 react-quill에서 사진을 넣으면 사진 밑줄부터 커서가 계속 앞으로 이동하는 오류가 생겻다. 그래서 우선 커스텀 핸들러를 주석처리 했더니 말짱하게 나왔다. 하지만 절대로 그렇게 둘 수 없고 db가 터져버리니까 핸들러를 살리면서 어떻게 해야할지 계속 여러 테스트를 해봤다. 이미지 넣고 엔터 두번치기, 사진 두장 넣어보기 등등을 하다 이미지를 리사이징하지 않으면 오류가 발생하지 않는 것을 발견했다..! 그래서 이미지 핸들러를 그대로 두고 이미지 리사이징을 없애고 이미지 사이즈를 적당한 값으로 고정하는 법으로 진행을 했다. 추후 내용 추가하기 => 퀼을 변경할지도..

주말에.. 추가/ const [errors, setErrors] = useState({ title: '', category: '', content: '' }); const validateForm = () => { let isValid = true; const newErrors = { title: '', category: '', content: '' }; if (!formValues.title) { newErrors.title = '제목은 필수입니다'; isValid = false; } if (!formValues.category) { newErrors.category = '카테고리는 필수입니다'; isValid = false; } if (!formValues.content) { newErrors.cont..

아마. 주말에 추가 예정 const PAGE_POST_NUMBER = 12; export const fetchRangePosts = async (page: number) => { const startIndex = (page - 1) * PAGE_POST_NUMBER; const endIndex = startIndex + PAGE_POST_NUMBER - 1; // 수정된 부분 const { data, count, error } = await supabase .from('community') .select('*', { count: 'exact' }) //count는 총 갯수를 알려줌 .order('post_id', { ascending: false })//최신순으로 가져오기 .range(startIndex..