데이터 수정/삭제시 쿼리키 invalidateQueries

데이터 수정/삭제시 invalidateQueries로 데이터 업데이트 함 queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.POSTS] }); 쿼리키 구조가 다른, 카데고리들 export type Category = 'knowHow' | 'recommendation' | 'sharing' | 'habit' | 'noCategory' | 'total'; 데이터 수정/삭제시 해당 쿼리키를 어떻게 invalidateQueries로 데이터 업데이트 할지 방법. 1. 카테고리를 [QUERY_KEYS.POSTS] 처럼 6가지를 구현함 2. 쿼리키 배열로 여러개의 쿼리키를 사용한다. 가능한 기존 코드를 변경하지 않고 + invalidateQueries 하는 방법은 무엇인..

  • format_list_bulleted TIL :: Today I Learned
  • · 2024. 1. 31.
  • textsms
모달창 오픈시 이외에 부분 작동 안 하게 처리 (리코일 사용)

모달창 오픈시 이외에 부분 작동 안 하게 처리 (리코일 사용)

1. 개선 전 ▶ 로그인 모달이 뜨고 나서 다른 페이지에 가더라도 모달이 사라지지 않음 2. 개선 후 ▶ 모달 On인 경우 background 포함 모든 공간 disabled 시키기 3. 포인트 ▶ 컴포넌트 1개에서 8가지의 공용모달 팝업을 사용함 => 리코일로 상태 관리 + 8개의 default 객체로 여러개의 모달 열려있는지 여부 확인 🖥️ 코드 //modal.ts import { atom } from 'recoil'; import { MODAL_STATE } from './keys'; const modalState = atom({ key: MODAL_STATE.IS_MODAL_OPEN, default: { isModalOpen01: false, isModalOpen02: false, isModalO..

  • format_list_bulleted TIL :: Today I Learned
  • · 2024. 1. 30.
  • textsms
리액트 + 파이어베이스 + 알고리아 = 검색 기능 구현

리액트 + 파이어베이스 + 알고리아 = 검색 기능 구현

▼ 알고리아 ▼ React InstantSearch Reference | Algolia Explore the React InstantSearch API. www.algolia.com 설정하다가 못 하였음... 다시 해봐야겠음 Do you want to use ESLint to catch probable bugs and enforce style? Yes Do you want to install dependencies with npm now? n ▶ 해당 설정을 해주 ▶ function 폴더가 생김 ▶ 노드 버전에서 에러 발생으로 .. 오류 발생 다른 우선순위 작업이 끝난 다음에 다시 연결해봐야겠음!

  • format_list_bulleted TIL :: Today I Learned
  • · 2024. 1. 29.
  • textsms

1차 유저 피드백

(밑줄 친 것은 금일 반영 완료) 회원가입 UI P1 회원가입 하기 버튼이 바로 아래 있거나, 밑줄을 쳐서 조금 더 직관적으로 보였으면 좋겠어요. ~~’아직 회원이 아니신가요?' 지우기~~ P1 회원가입시 1@1 만 입력해도 통과됨 P1 처음과 끝에 공백을 섞어서 등록하면 그대로 등록됨 중복확인 P3 회원가입시에 중복확인을 누르면, 항목전부다 체킹을 해서 옳바른 비밀번호, 닉네임을 입력하세요 라고 나오는데, 중복확인 누른칸만 체킹을 했으면 좋겠다는 생가깅 들었어유 P3 비밀번호 일치하지 않는다는 문구 및 기타 오류가 이메일 중복확인을 누르면 바로 떠요. 로그인 구글로그인 진행안됨 P0로그인 클릭시 비밀번호나 이메일이 틀렸다는 유효성 검사가 안됨 비밀번호 요건을 충족하기 전에는 에러가 안뜸 P4 로그인 및..

  • format_list_bulleted TIL :: Today I Learned
  • · 2024. 1. 29.
  • textsms
리액트 prefetch 테스트 : prefetchInfiniteQuery 적용하기

리액트 prefetch 테스트 : prefetchInfiniteQuery 적용하기

Prefetching & Router Integration | TanStack Query Docs When you know or suspect that a certain piece of data will be needed, you can use prefetching to populate the cache with that data ahead of time, leading to a faster experience. There are a few different prefetching patterns: In event handlers In component tanstack.com 🎃 개선 사항 : 게시물 보기 > 관리자 게시물, 유저 카테고리별 데이터 가져오기 => 깜빡거림 + 페이지 로드시 느림 1) 해당 ..

  • format_list_bulleted TIL :: Today I Learned
  • · 2024. 1. 25.
  • textsms
리액트 + 타입스크립트 : 카카오톡 공유 기능 추가 + 링크복사 구현

리액트 + 타입스크립트 : 카카오톡 공유 기능 추가 + 링크복사 구현

1. 카카오 디벨롭스 : 앱등록 + 플랫폼 도메인 등록 Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com (1) navbar 내 애플리케이션 > 애플리케이션 추가하기 (2) Mango 클릭 > JavaScript 키 확인 ( ⭐ .env 파일에 저장해서 사용하기) (3) 플랫폼 > 웹 : 사이트 도메인: localhost:3000 등록 (테스트할때도 3000으로 해야함) 2. index.html에 카카오 SDK 스크립트 + API key 추가 ( ⭐ .env 파일 사용하기) //index.html ⭐integrity & API key = .env파..

  • format_list_bulleted TIL :: Today I Learned
  • · 2024. 1. 24.
  • textsms