HYEWON JUNG의 개발일지

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

중간발표 중간발표 발표자를 팀원들 중에 그나마 여유가 있었기 때문에 내가 하겠다고 했다. 하지만 조금 후회가 된 것이 긴장을 많이 하는 편이라 연습을 많이 해갔음에도 긴장을 해서 양처럼 말하게 되었다. 임사방편으로 청심환이라도 먹을 것을..! 우선 중간발표 시연은 혹시모를 오류가 생길까 걱정이 되어서 영상으로 대체했다. 긴장해서 말도 빨라졌고, 더듬고 떨고 난리가 아닐 수 없는 발표였지만 그래도 경험을 해서 다행이라고 생각한다. 중간 발표 피드백 내 부분만 보면 로직중에서 로그인된 유저의 프로필을 가져오는 로직이 있는데 다른 데이터를 가져오는 법은 다 리액트 쿼리로 관리를 했는데 유저 프로필은 useEffect를 사용해서 통일성이 떨어진다는 피드백이 있었다. 나도 느끼고 있었던 부분이고 나중에 리팩토링 ..

게시글 작성, 수정 유저 프로필 가져와서 setProfile해주기 WritePost useEffect(() => { const fetchData = async () => { try { const { data: { user } } = await supabase.auth.getUser(); //auth에서 현재 로그인 중인 유저정보 가져오기 setUserId(user!.id); const { data: profiles, error } = await supabase .from('user') .select('*') .eq('id', user!.id); //유저의 id와 일치한 row가져와서 추가정보 가져오기 if (error) { console.log(error); } if (profiles != null) {..

목표 댓글 구현 새로 알게 된것/ 오늘의 코드 import React, { FormEvent, useEffect, useState } from 'react'; import { useMutation, useQuery, useQueryClient } from 'react-query'; import 'react-quill/dist/quill.snow.css'; import styled from 'styled-components'; import { supabase } from '../../api/supabase/supabaseClient'; import { fetchDetailPost, updateCommentMutation } from '../../pages/community/commuQuery'; impor..

목표 react-quill에 html넣기 글작성, 수정 페이지 컴포넌트 재활용 새로 알게 된것/ 오늘의 코드 게시물 수정을 구현 하던 중 quill에 value로 content를 넣어주고 initialstate를 게시물의 content로 했는데 구조가 망가지는 오류가 생겼다. 개발자 도구에서 요소를 확인 해보니 p태그안에 이미지 태그가 들어가는 식으로 오게 되는데 이게 글글글글글글 이런식으로 나와서 이렇게 넣은 것이 이렇게 한줄로 나오게 된다. 태그는 원래 안에 태그를 넣는 애들이 아니라서 그런지 오류가 나는 것 같았다. 그래서 p태그들을 div로 바꿔줘야했는데 여러방법을 생각했지만 하루를 종일 고민한 끝에 문자열이니 정규식으로 변환해버리자는 생각이 들었다. content.replace(/(.*?)/g,..

목표 이미지 리사이즈 새로 알게 된것/ 오늘의 코드 react-quill 이미지 리사이즈 라이브러리 비교 다운로드순으로는 quill-image-resize>quill-image-resize-module-react> quill-image-resize-module-react-ts > @xeger/quill-image-formats/actions 다. 하지만 각 라이브러리별 생성날짜와 업데이트날짜를 보면 @xeger/quill-image-formats/actions 가 가장 최근까지 업데이트 된 것을 확인할 수 있다. 하지만 직접 써봐야 알 수 있을 것 같아 다 사용해보려고 시도했다. quill-image-resize => import 오류 진행 불가 quill-image-resize-module-react ..