choijming21 님의 블로그

1. 문제 발생❓댓글 수정 기능 구현 중 UI 반응성 문제 발생수정 버튼 클릭 후 프로세스(문제 과정 설명)수정 후 완료 버튼 누르기수정 모드 종료기존 값 유지몇초 후 수정된 값으로 변경됨    2. 원인 추론 🔎서버 응답을 기다린 후 UI 업데이트React Query의 기본 동작을 그대로 사용원래 코드(주요 부분)const { mutate: edit } = useMutation({ mutationFn: ({ id, text }) => updateComment({ id, text }), onSuccess: () => { queryClient.invalidateQueries(["comments"]); alert("댓글이 수정되었습니다!"); }});const handleEditSubmit..

오늘은 뉴스피드 팀프로젝트의 발표날이다!따라서 어제는 트러블 슈팅을 진행하였다. 3가지 오류를 발견하였는데 그 부분에 대해서 블로그에 담아보겠다! 1. 배포 시, SVG 이미지 파일이 깨지는 문제2. 수정 완료 후 마이페이지 네비게이션 문제3. 로그인 페이지에서 뒤로가기 버튼의 위치 문제  ...  1. 배포 시, SVG 이미지 파일이 깨지는 문제 문제 설명: React 프로젝트를 Vercel로 배포할 때, SVG 이미지 파일이 제대로 렌더링되지 않고 깨지는 현상이 발생했다. 이는 주로 상대경로로 설정해서 문제이거나 스타일드 컴포넌트 사용시 동적 이미지 스타일링을 해서 문제점이 발생할 수 있다. 해결 방법: Lucide 아이콘 라이브러리 사용  이 문제를 해결하기 위해 Lucide 아이콘 라이브러리를 사..

작성 폼 페이지 기능 구현을 거의 다 완성하였지만 문제점이 생겼다.... 오늘은 그것에 대해서 어떻게 해결했는지 블로그에 담아보겠다!!     React에서 게시글 수정 시 이미지 파일 처리 문제와 해결 방안  1. 문제 상황게시글 작성과 수정시 모든 필드(이미지 포함)에 대한 빈칸 유효성 검사를 구현했다.수정 시 기존 이미지 파일을 Supabase에서 불러오는데 어려움이 있었다.이로 인해 사용자가 이미지를 변경하지 않더라도 새 이미지를 업로드 해야만 유효성 검사를 통과할 수 있는 문제가 발생했다. 2. 원인 분석Supabase에서 이미지 파일 자체를 불러오는 것이 기술적으로 복잡했다.파일 시스템이나 스토리지 서비스에서 직접 파일을 가져오는 것은 보안 및 성능 이슈를 이야기 할 수 있다. 3. 임시 해결..

내가 맡은 부분은 작성폼 페이지이다! 오늘은 작성폼 페이지 기능구현에 대해서 블로그를 써보겠다.          1. 상태 관리일단 상태관리는 useState 훅을 사용하여 폼데이터를 관리한다. 각 입력 필드에 대한 상태를 하나의 객체로 관리하고 있다.const [formData, setFormData] = useState({ storeName: '', image: null, address: '', region: '', rating: '', review: ''});     2. Context 사용PostContext를 통해 전역 상태를 관리하고 있다. 이를 통해 게시물 목록을 업데이트할 수 있다.const { posts, setPosts } = useContext(PostContext);   ..

뉴스피드란?뉴스피드(Newsfeed)는 소셜 미디어나 콘텐츠 폴렛폼에서 사용자에게 최신 정보나 업데이트를 실시간으로 보여주는 기능을 말한다. 페이스북이나 인스타그램의 홈 화면을 떠올리면 된다.     오늘은 리액트 첫 팀프로젝트이다. 바로 뉴스피드를 만드는 것이다. 내가 팀장이라서 떨린다.......>_  뉴스피드 기능을 사용해 우리 8조는 맛있는 경험을 다른 사람들과 공유하고, 새로운 맛집을 발견할 수 있는 플랫폼을 만들 것이다. 사용자들이 올린 최신 맛집 리뷰, 추천, 사진 등이 실시간으로 업데이트되어 피드 형태로 보여지게 된다. 이를 통해 사용자들은 다른 사람들의 맛집 경험을 쉽게 확인하고, 새로운 맛집 정보를 빠르게 얻을 수 있게 된다!     기획안1. 와이어 프레임피그마를 사용하여 대략적인 와..

스파르타 내일배움캠프 6기 5조 “너는 이미 코딩하고 있다” 팀원 소개 김도현이준엄지훈조현준최지민 프로젝트 소개이번 프로젝트는 영화 목록 API를 활용하여 넷플릭스나 왓챠와 같은 영화 추천 및 검색 웹사이트를 구현하는 것을 목표로 합니다. 이를 통해 저희 팀원들은 웹 기술을 익히고, 실무에서의 협업 경험을 쌓을 수 있는 소중한 기회를 갖게 될 것입니다. 구현 기능TMDB API 영화 정보 불러오기반응형 웹영화 리뷰 작성, 수정 및 삭제 (Firebase 사용, Firestore)영화 이름으로 검색, 이벤트 처리캐러셀반응형 웹, 모바일, 데스크톱 팀 규칙스크럼, 출석 잘 하기!TIL 잘 제출하기 깃 코드 컨벤션변수const MAX_SIZE = 10; // 상수 일때만 변수명 대문자로let $num = 5;..

내가 일주일 동안 맡았던 업무는프로젝트 소개 작성카드 불러오기 중복 오류 해결영화 검색 기능 고도화로컬스토리지 사용하여 영화 검색 시 영화제목 및 작성시간 저장 기능 구현최고평점 API 불러와서 카드 붙이기최고평점, 너이영추천 카드 캐러셀로 만들어서 메인화면에 나타내기네비게이션바 클릭시 캐러셀은 숨기고 해당 카드만 보여주기16:9 반응형 CSS 이렇게 총 8가지 정도 작업을 했다. 팀프로젝트를 하면서 어떤 어려움이나 오류가 있었고 그에 대한 해결방법을 블로그에 정리해보려고 한다.   ★ api로 카드를 불러올때 카드가 무한으로 화면에 출력되는 문제점 : 중첩된 반복문으로 인한 오류중첩된 forEach문을 먼저 제거했다. 이전 코드에서 movies.forEach 안에 또 다른 movies.forEach가 ..

내가 맡은 부분상세페이지(subPage)개인소개부분 레이아웃 및 수정개인소개부분 화살표 그림 클릭시 페이지 연결디자인 래퍼런스 참고하여 전체적인 방명록 CSS   # 개인소개부분  레이아웃 및 수정 (문제점과 해결방안)창 크기를 조절하면 개인소개부분의 위치가 바뀌는 문제점display: flex;            ->   부모 안에 있는 자식요소들의 정렬을 위해 사용Flex-direction: row;                ->  자식요소 수평정렬Justify-content: center;         -> 주축에서 가운데 정렬Align-items: center;                -> 교차점에서 가운데 정렬 이 네가지 코드를 사용하였더니 창크기가 달라져도 개인소개부분 위치가 정가운데..