민ズl으l 개발일ブl

타입스크립트란🤔자바스크립트와 다르게 타입 시스템을 갖음=> 프로그램이 실행되기 전에 모든 변수와 표현식의 타입을 확인하고 고정하는 방식 JS vs TS특징JSTS타입 시스템동적 타입정적 타입컴파일필요 없음js로 컴파일 필요개발 경험유연하고 빠르게 시작 가능코드 완성, 타입 검사 등으로 향상된 개발 경험프로젝트 규모소규모대규모런타임 오류런타임에 타입 오류 발견 가능컴파일 타입 오류 발견 가능학습 곡선낮음높음도구 지원광범위한 도구와 라이브러리 지원JS생태계의 모든 도구와 라이브러리 지원브라우저 지원모든 브라우저에서 기본적으로 지원트랜스 파일 된 JS가 모든 브라우저에서 지원 타입선언불리언 : booleanlet isBoolean: boolean;let isDone: boolean = false;숫자 : n..

크롬의 확장자들과의 충돌...(예를들어  color zilla등...)💩그냥 무시하면 됨!신경쓰이면 시크릿모드로 고고👀👀👀

프레임워크란🤔개발자가 기능 구현에만 ‘딱’ 집중할 수 있도록 필요한 모든 프로그래밍적 재원을 지원하는 ‘기술의 조합’예시 : Vue.js, Angular.js, next.js등등 라이브러리란🤔공통 기능의 모듈화가 이루어진 프로그램의 집합예시 : react, redux등등=> 리액트가 상태관리(Redux), 라우팅(React-router-dom)이 지원이 됐다면 프레임워크였을수도,,,

낙관적업데이트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,..

프로젝트 개요🎬흑백요리사 맛집 리스트와 식당 위치 기반 지도, 리뷰를 지원하는 사이트기술 스택🧷프론트엔드 : react + redux + router + tanstack query + tailwind + zustand + sweetalert2 + kakao map api개발과정🎈아이디어 구상흑백요리사 + 지도 api를 생각하다가 흑백요리사에 나온 쉐프들 레스토랑의 위치와, 사용자들끼리 리뷰로 공유하는 사이트를 구상하게 되었다.구현✔️ 로그인 / 회원가입화면 (담당) 로그인, 회원가입화면은 router로 로그인사용자가 접근할 수 없게 경로 보호를 함로그인은 소셜 구글 로그인도 구현회원가입시 실시간 유효성 검사도 구현로그인시 zustand로 로컬스토리지에 저장하여 유저정보를 전역상태관리메인화면쉐프들 정..

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