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

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

query-string : URL 쿼리 파라미터로 카테고리와 정렬 처리

🎃쿼리스트링이란? 1. url 경로 (pathname) 다음에 나오는 ? 기호로 시작하는 문자열 2. key=value형태로 여러 개는 & 기호로 매개변수 명시 가능 ⭐쿼리 스트링 사용 목적 1) 조건에 맞게 정렬된 형태로 정보 주고 받기 가능 2) 해당 Url로 공유 가능 ⭐ URLSearchParams 객체 사용 이유 1. 쿼리 문자열 파싱 : 현재 페이지 URL의 쿼리 문자열 파싱에 사용 가능 2. 쿼리 문자열 생성 및 수정 : 카테고리 + 정렬 2가지를 사용하기 위해 새로운 문자열 생성 가능 3. 해당 객체는 'toString()'메소드를 통해 쉽게 문자열로 변환 가능 🚫구현하는데 시간이 오래 걸린 포인트 쿼리 스트링을 통해 라우팅이 된다는 점에 "Router.tsx'파일을 수정해야한다는 생각에 ..

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

파이어베이스 오류 : The query requires an index

// 사용자 (카테고리별) export const getCategoryPosts = (category: Category) => async ({ pageParam }: QueryFunctionContext) => { let q: Query = query(collection(db, 'posts'), where('role', '==', 'user')); if (category !== 'total') { q = query(q, where('category', '==', category)); } if (pageParam) { q = query(q, orderBy('createdAt', 'desc'), startAfter(pageParam), limit(4)); } else { q = query(q, orderBy..

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

타입스크립트 + useInfiniteQuery : 좋아요 기능 구현 (Optimistic Update)

⭐ 개발환경 * React (CRA) * TypeScript * TanStack Query v5 * Firebase / FireStore * Devtools ⭐ Optimistic Update + useInfiniteQuery 사용 이유 * 사용자 경험을 향상시키기 위함 * 비동기 작업과 관련된 복잡성을 쉽게 해결 가능 * 데이터 패칭/ 데이터 캐싱/ 오류시 상태관리 가능 => 요청된 데이터 캐시하고, 해당 데이터 변경시 자동으로 업데이트 해줌. => 프리패칭으로 미리 가져와서 처리하기 가능 (리팩토링시 적용 예정) 1) Optimistic Update : 사용자가 좋아요 버튼을 눌렀을때, 즉시 UI 업데이트를 하기 가능, 후에 데이터처리 2) useInfiniteQuery : 한번에 모든 데이터가 아닌..

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

타입스크립트 + useInfiniteQuery : 더보기 기능 마지막 데이터 확인

https://tanstack.com/query/latest/docs/react/guides/infinite-queries Infinite Queries | TanStack Query Docs Rendering lists that can additively "load more" data onto an existing set of data or "infinite scroll" is also a very common UI pattern. TanStack Query supports a useful version of useQuery called useInfiniteQuery for querying these types of lists. When us tanstack.com ▼ 예전에 구현한 더보기 기능 (us..

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

타입스크립트 + Context : 모달 팝업 구현

1. index.tsx import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import ReactDOM from 'react-dom/client'; import { RecoilRoot } from 'recoil'; import App from './App'; import './index.css'; import GlobalStyle from './styles/GlobalStyles'; import AuthContextProvider from './context/AuthContext'; import { ModalProvider } from './hooks/useModal'; const queryClient = new QueryC..

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