useEffect의 dependency array에서 무한루프

* 콜백함수 + role & setRole 과 같이 set로 들어가있는지 확인 필요 문제 : useEffect의 dependency array에서 무한루프 => 글쓰기에서 입력할때마다 해당 콘솔이 계속 찍힘 해결 : useEffect의 dependency array의 값을 확인해야함

• format_list_bulleted TIL :: Today I Learned
• · 2024. 2. 6.
• textsms

데이터 수정/삭제시 쿼리키 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 적용하기

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