본문 바로가기

프로젝트 개발일지/플케어

[에러 해결] 데이터 업데이트 안 되는 문제 해결 useQuery 훅을 사용할 때는 쿼리 키를 의존성 배열로 설정해서, 특정 인자가 변경되는 경우도 고려해주어야 한다. 쿼리 키를 동일하게 부여하게 되면 추가적으로 데이터를 불러와야 하는 상황에 데이터를 불러오지 않는다. 예를 들어서, 프로젝트 아이디가 변경되었을 때 다른 데이터를 불러와야 한다면, 의존성 배열에 프로젝트 아이디를 추가해주어야 한다. 그래야, 프로젝트 아이디가 변경됐을 때 서버로부터 데이터를 제때 불러올 수 있는 것이다. 하지만, 모든 쿼리에 동일한 쿼리 키를 설정해 줘서 문제가 생긴 적이 있다. 그 상황에 대해서 조금 더 자세히 알아보자. 평가 탭에서는 프로젝트마다 중간/최종 평가를 보여주게 된다. 그래서, 평가 탭 링크를 눌러서 평가 페이지에 접속한 경우, 바로 서버에서 차트와 랭킹 데.. 더보기
[에러 해결] 프로젝트 삭제 후 뒤로 가기로 인한 에러 해결 아래 사진에서 볼 수 있다시피, 관리 탭에서는 프로젝트 삭제를 할 수 있다. 위 사진에서 프로젝트 삭제를 하게 되면, 맨 처음 프로젝트 관리 페이지로 리다이렉트시켰다. 하지만, 만약 뒤로 가기를 누른다면? 당연히 에러가 난다. 왜냐하면, 삭제한 프로젝트 페이지에 다시 접속 시도를 한 것이기 때문이다. 그래서 나는 프로젝트 삭제 후에는 뒤로 가기를 막으려고 한참을 코드를 작성했다. 내가 알고 있는 바로는 useNavigate 훅을 사용할 때 { replace: true } 값을 넣어주면 뒤록 가기를 막을 수 있다는 것이었다. 하지만, 왜인지 모르게 그 방법으로는 되지 않았다. 그래서 열심히 구글링을 해보았다. 알고 보니 react-router-dom v6에는 replace: true가 동작하지 않는다고 한.. 더보기
[리팩터링] 프로젝트 관리 메인 페이지 api 호출 개수 줄이기 아래 사진은 관리 메인 페이지, 즉, 사용자가 생성한 프로젝트 리스트를 보여주는 페이지이다. 여기서는 전체와 진행 중 버튼이 있는데, 전체 버튼을 누르면 완료된 프로젝트와 진행 중인 프로젝트를 모두 보여주고, 진행 중 버튼을 누르면 진행 중인 프로젝트만 보여준다. 이 기능을 구현하면서 나는 고민이 하나 있었다. 일단, 처음 사용자가 접속했을 때는 진행 중 버튼이 활성화되어 있어서 진행 중인 프로젝트 리스트는 쭉 불러와야 하는 상황이었다. 그런데, 전체 프로젝트 리스트 데이터는 언제 불러와야 하지?라는 의문이 있었다. 선택지는 세 개였다. - 전체 프로젝트 리스트를 prefetch 해놓을까? - 처음 접속했을 때 전체와 진행 중 모두를 불러와서 캐시에 저장해 놓을까? - 전체 버튼을 누른 경우 데이터를 불.. 더보기
[에러 해결] 평가 그래프 상 인원이 너무 많은 문제 해결 관리 페이지에서 평가 탭에서는 중간 / 최종 평가 그래프를 보여준다고 했다. 그래프를 보여주는 기능은 recharts 라이브러리를 사용해서 구현을 했다. 처음에 그래프를 보여주는 기능 자체에는 문제가 없었는데, 인원수가 너무 많아지니까 한 그래프로 전체 인원 평가 그래프를 보여주기에는 무리가 있었다. 그래서, 스크롤하면서 넘겨볼 수 있는 기능이 있으면 좋겠다고 생각해서, recharts 공식 문서도 찾아보고 구글링도 해봤지만, 해결 방법을 찾을 수 없었다. 아마 recharts 측에서 공식적으로 지원하지 않는 기능인 것 같았다. 그러다가, 팀원 중 한 분이 인원 수가 일정 기준을 넘어가면 카드 슬라이드처럼 넘기면서 볼 수 있도록 하는 것은 어떤 지 의견을 내주셨다. 물론, 한 그래프로 전체 인원의 차트 .. 더보기
[에러 해결] 로그인이 필요한 페이지 접근 시 로그인 모달창 띄우기 일단, 우리 사이트에서는 로그인 없이 접근할 수 있는 경우가 있고 로그인 없이 접근할 수 없는 경우가 있다. 그래서 이에 대한 추가적인 처리가 필요하다. 다음은 로그인 없이 접근할 수 있는 경우이다. - 메인 페이지 - 프로젝트 인원 모집 페이지 - 프로젝트 인원 모집 특정 글 먼저, 로그인을 해야 접근할 수 있는 경우를 알아보자. - 프로젝트 관리 페이지 - 프로젝트 인원 모집 글 작성 페이지 - 프로젝트 인원 모집 글에서 지원하기 버튼을 누르는 경우 - 프로젝트 인원 모집 글에서 좋아요 버튼을 누르는 경우 지금은 로그인 없이 모두 접근할 수 있도록 설정해 놨다. 하지만, 이제 로그인 여부에 따라 따로 처리해야 한다. 어떻게 처리해야 할지 먼저 생각해 봤다. 로그인을 해야 접근할 수 있는 경우가 한 가.. 더보기
[기능 구현] 프로젝트 관리 탭을 구현해보자. 아래 사진은 구현된 프로젝트 관리 탭 사진이다. 관리 탭의 경우, 리더에게만 보이게 해서 리더만 접근이 가능하도록 처리해 놨다. 일반 멤버에게는 관리 탭 자체가 보이지 않는다. 프로젝트 관리 탭에서의 기능은 딱 세 가지이다. - 프로젝트 완료 처리 - 프로젝트 삭제 - 프로젝트 정보 수정 이제부터 코드와 함께 조금 더 자세히 살펴보도록 하자. import { useState } from "react"; import { useLocation } from "react-router-dom"; import { getStringDate } from "../../utils/date"; import { getProjectId } from "../../utils/getProjectId"; import projectBu.. 더보기
[기능 구현] 프로젝트 목록 페이지를 개발해보자. 아래 사진은 구현된 프로젝트 목록 페이지 예시이다. 왼쪽 하단 꽃 모양은 리액트 쿼리 데브 툴이니까 신경 쓰지 말자. 세부적인 기능 설명에 앞서, 동작 방식부터 알아보자. 동작 방식 먼저, 사용자가 프로젝트 생성 버튼을 누르게 되면 아래와 같이 프로젝트 생성 모달창이 뜬다. 여기서 프로젝트 이름, 진행 기간, 설명, 이미지를 추가/제거할 수 있다. 작성 완료를 누르게 되면 프로젝트 목록에 추가된다. 그리고 특정 프로젝트를 클릭하게 되면 해당 프로젝트 관리 상세 페이지로 넘어가게 된다. 해당 페이지에는 오버뷰, 회의록, 일정, 평가, 팀, 관리 탭이 있다. 아래 사진이 특정 프로젝트의 관리 상세 페이지이다. 접속하게 되면 바로 전체 일정 오버뷰가 보이게 된다. 프로젝트 관리 메인 페이지를 보게 되면 전체,.. 더보기
axios 모듈화를 해보자! 이번에는 axios 모듈화에 대해서 알아볼 것이다. axios는 서버와 통신하기 위해서 사용하는 HTTP 비동기 통신 라이브러리이다. fetch api와는 달리 추가적으로 설치 후 사용할 수 있는 라이브러리이기 때문에 별도로 설치해주었다. 기본으로 axios를 사용해서 서버로부터 데이터를 받아오는 코드는 다음과 같다. const apiUrl = 'https://fullcare.store/api/auth/project?state=ongoing'; const response = await axios.get(apiUrl, { headers: { 'Authorization': `Bearer ${accessToken}`, 'Content-Type': 'application/json' }, }) 그런데, 이 코드는.. 더보기

티스토리툴바