민ズl으l 개발일ブl

라이브러리 vs 프레임워크=> 핵심단어 : 제어역전(IOC)=> 라이브러리의 제어역전은 개발자, 프레임워크의 제어역전은 프레임워크 위에 origin부분이 밑에 app폴더위에 path부분이 밑에 Segmentorigin : App폴더path : Segment 동적라우팅 Link  컴포넌트 : client side navigation 방식 (vs server side navigation) Route Group폴더명을 소괄호로 씌우기??라우트 그룹 왜 씀?=> 코드정리=> 별도의 레이아웃을 갖고싶어서 layout 컴포넌트는 무조건 props를 받음 _privateFolder : url path에서 완전히 제외(위에 라우터그룹은 하위폴더는 라우터에 노출됨)위에 그림은 page.tsx에서 사용하는 컴포넌트구나하고..

제네릭 extends// 제네릭 T에 들어올 수 있는 타입에 제약 조건이 없을 때type UserData = { name: string; userKey: T;};// 제네릭 T 에는 문자열이나 숫자만 들어올 수 있다는 제약조건을 줬을 때type UserData = { name: string; userKey: T;} 래퍼객체 : 임시로 객체로 인식type HasLength = { length: number;}// 제네릭 T는 length: number를 속성으로 갖는 객체 타입만 들어올 수 있다는 제약조건 부여function logLength(item: T): void { console.log(item.length);} 그러면 래퍼객체를 포함하고 싶지 않으면🤔& object : ..

낙관적업데이트const { mutate: handleLike } = useMutation({ mutationFn: ({ id, currentLiked }) => // 인자는 한개, 여러개일땐 객체로! todoApi.patch(`/todos/${id}`, { liked: !currentLiked }), onMutate: async ({ id, currentLiked }) => { await queryClient.cancelQueries({ queryKey: ["todos"] }); // onMutate쓸때 제일 먼저 작성! const previousTodos = queryClient.getQueryData(["todos"]); // 백업느낌! queryClie..

optimistic updateonMutate : UI를 낙관적으로 업데이트하고 백업 데이터를 저장OnError : 요청이 실패하면 백업 데이터를 사용해 UI를 원래대로 돌림OnSettled : 요청이 끝난 후 데이터를 서버에서 다시 가져와 최신 상태를 보여줌// queryClient : 쿼리 데이터를 관리하는 중요한 객체const queryClient = useQueryClient() // 앞으로 쿼리 데이터(todos)를 읽거나 수정하는 데 사용// useMutation : 서버에 데이터를 보낼때 사용하는 함수 , 주로 새로운 데이터 생성, 수정, 삭제를 처리할 때 사용useMutation({ // mutation : 실제로 데이터를 서버에 보내는 함수 mutationFn: updateTodo,..

데이터를 뿌릴때ux을 높이기=> 다운로드 속도를 높이기 위해cost를 낮추기  페이지네이션의 주요 요소페이지당 항목 수총 데이터 개수전체 페이지 수ex ) 총 데이터 27개, 페이지당 항목수 5개, 전체 페이지수는 6개~! 상태를 가진다?useState, useSelector가 선언되었는가 Array(총갯수).fill(채울값) = ✔️[...Array(총갯수)] // 같음, 오른쪽 코드가 더 간결 더보기 구현 useInfiniteQuerypages와 pageParams는 항상 짝을 이룸pages : 데이터pageParams : 페이지숫자 select 옵션 : 데이터 가공, select 결과값이 useQuery 데이터 lastPage : 서버에서 불러온 마지막 페이지 다음 페이지의 존재 여부를 미리 알 수..

const fetchData = async () => { try { const response = await todoApi.get("/todos?_sort=-createdAt"); setData(response.data); } catch (err) { setError(err); } finally { setIsLoading(false); } };try vs finally중에 뭐가 먼저 실행될까?=> 둘다! tanstack queryisPendingisLoading -> inPending 으로 명칭 변경QueryClient에 아직 데이터가 없고 쿼리가 아직 실행 대기중인지 여부쿼리가 현재 실행중인지 여부 (초기로딩 및 refetching 을 모두 포..

클라이언트 상태 관리 예시- 폼 입력값- 인증상태 (로그인/로그아웃)- 프로필정보- 테마 모드- 언어 설정- 모달 열림 상태- 탭 및 사이드바 상태 서버 상태 관리- 항상 최신 상태로 DB와 동기화가 필요할때- 다른 사용자에게 영향을 줄 수 있는 데이터- 데이터를 가져오는 데 시간이 소요되고(로딩스피너 필요) 잦은 조회로 캐싱이 필요한 데이터 zustandimport {create} from 'zustand';const useCalculatorstore = create((set)) => ({ result : 0, incrementByAmount: (amount) => { set(({result}) => ({result : result + amount})); }, decrementB..

REST API : 클라이언트-서버 통신에서 HTTP 메서드와 URL을 통해 요청을 식별하고 자원을 주고받는 규칙*supabase는 REST API가 아님 CORS에러는 브라우저환경에서만! payload : 서버한테 보내는 데이터그룹content-type : payload 타입 axios 장점- json데이터형식을 알아서 변환해줌- custom intance와 interceptor를 이용한 코드 재사용- 크로스 브라우징에 유리 get 요청 : axios.get(url[, config]); post 요청 : axios.post(url[, data[, config]]);patch 요청 : axios.patch(url[, data[, config]]);delete 요청 : axios.delete(url,[, ..

setTimeout함수는 비동기,for루프는 동기적 처리fetch함수는 비동기적으로 처리 및 프로미스를 반환! Promise는 자바스크립트에서 비동기 작업의 완료 또는 실패를 처리하기 위해 사용되는 개념async/await는 항상 promise를 반환http 상태-100번대 : continue-200번대 : 성공-300번대 : 리다이렉션-400번대 : 클라이언트 오류-500번대 : 서버 오류

Route는 따로 Router.jsx등 따로 빼주기async => return값은 promise.resolve상태관리context는 최상단에파일명page붙이기throw newErrorapi는 따로 빼서 export하기