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..

커뮤니티에는 어쩌면 당연하게 추천기능이 있어야하는데 간단하게 로직을 생각해봤을 때 1. 추천 버튼을 누르면 추천버튼에 색이 들어가고 게시글에 좋아요가 1 늘어나고 좋아요한 유저 기록하기 2. 추천 버튼을 다시한번 누르면 추천버튼에 색이 사라지고, 좋아요가 1줄어들고 좋아요한 유저에서 지우기 이렇게 인데 그러면 state가 하나 있어야겟네? liked라는 state를 만들어줬다. liked인 이유는 원래는 좋아요가 위치했었기때문.. 리네임 해야겠다 . const [liked, setLiked] = useState(false); 그러면 우선 liked 여부에 따라 아이콘을 바꿔주는 로직이 있어야겠지? {liked ? : } 이제 본격적으로 로직을 짜보자! 우선 상세페이지에 들어갈 때 유저가 좋아요를 눌렀는지..