[React/Vite] 카카오맵 API 사용 설정하기

초기 설정1. 카카오 개발자사이트에 접속해 개발자 등록 및 앱 생성2. 앱 설정 - 플랫폼 - Web 플랫폼 등록으로 사이트 도메인 등록 (지도API를 사용할 도메인이 어디인지 등록! http://localhost:3000/ 으로 등록함3. 앱 설정 - 앱 키 - JavaScript 키 복사하여 .evn.local에 저장 -> 변수명 VITE_KAKAO_MAP_API_KEY (VITE_로 시작하면 상관없음!)  간단 테스트 - 지도 띄우기 (API 연결 확인)// index.htmlimport { useEffect } from "react";const { kakao } = window;const App = () => { useEffect(() => { const container = documen..

• format_list_bulleted React
• · 2024. 9. 13.
• textsms

[React/JS] 캐러셀 구현하기 (Tailwind)

캐러셀!! 계속 구현해보고싶었는데 시간에 밀려 시도를 못해보다가 이번 MBTI 테스트 프로젝트를 만들면서 드디어 적용해봤다 기존 코드는 데스크탑 기준으로 너비나 배치 등을 적용해둬서 모바일로 확인했을 때 왼쪽과 같이 조각조각 잘리고 가려지고 ㅋㅋㅋ 이상한 배치가 됐다 반응형 UI도 꼭 적용해보고싶었기 때문에 아예 width 1024 이하인 경우에는 테스트에대한 가이드를 캐러셀로 보여주기로 했다.  구현 방법1) 캐러셀로 보여줄 컨텐츠가 담긴 배열에서 인덱스를 증가/감소하며 해당하는 내용의 카드가 가운데에 오도록 한다2) 이전, 다음 버튼을 눌렀을 때 0번 인덱스에서 이전 버튼을 눌렀거나, 마지막 인덱스에서 다음 버튼을 누른 경우 각각 마지막, 첫 인덱스로 변경한다.3) 캐러셀이 보여지는 범위를 컨테이너로..

• format_list_bulleted React
• · 2024. 9. 12.
• textsms

[TanStack Query] Query Cancellation, Optimistic Updates

Query Cancellation불필요한 네트워크 요청을 제거하기 위해 사용대용량 fetching을 중간에 취소하거나, 사용하지 않는 컴포넌트에서 fetching이 진행중인 경우 자동으로 취소시켜 불필요한 네트워크 비용을 줄일 수 있음 QueryFunctionContext queryFn이 매개변수로 받는 객체export const getTodos = async (queryFnContext) => { const { queryKey, pageParam, signal, meta } = queryFnContext; // queryKey: 배열형태의 쿼리키 // pageParam: useInfiniteQuery 사용 시 getNextPageParam 실행 시 적용 // signal: AbortSignal 을 의..

• format_list_bulleted React
• · 2024. 9. 7.
• textsms

[TanStack Query] useQuery() 옵션 - enabled, select

enabled- 쿼리(queryFn) 실행 여부를 제어- enabled: true => 기본값, 컴포넌트 렌더링 시점에 쿼리를 자동 실행- enabled: false => 쿼리가 자동으로 실행되지 않음, 아래 사용예제 참고하기 1) 컴포넌트 렌더링 시점에 바로 서버 데이터를 불러오지 않고, 특정 이벤트가 발생했을 때 받아오고싶은 경우const { data, refetch } = useQuery({ queryKey: ["todos"], queryFn: getTodos, enabled: false});return ( refetch()}>데이터 불러오기 ); 2) 순차적으로 의존적인 두개의 쿼리를 실행해야할 때- 첫번째 쿼리(getUserByEmail)의 실행 결과가 두번째 쿼리(getProject..

• format_list_bulleted React
• · 2024. 9. 6.
• textsms

UX 향상 기법 - Throttling & Debouncing, lodash

짧은 시간 연속으로 이벤트가 발생했을 때 어떻게 처리할 것인가! Throttling짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그릅화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것, 주로 무한 스크롤에서 사용 Leading Edge- 이벤트가 처음 발생할 때 핸들러가 실행- 이후 주어진 시간 동안은 이벤트가 무시됨- 사용자가 스크롤을 시작하는 첫 시점에만 API 호출이 이루어지고, 일정 시간동안 추가 호출이 무시됨 Trailing Edge- 이벤트가 마지막으로 발생한 후 주어진 시간이 지나면 핸들러가 실행- 사용자 입력 필드에 타이핑을 멈춘 후 일정 시간이 지나야 서버에 검색 요청이 전송됨 Leading & Trailing Edge- 이벤트가 처음 발생할 때와 마..

• format_list_bulleted React
• · 2024. 9. 6.
• textsms

[React] Zustand

사용법설치yarn add zustand store 생성1) zustand 폴더 > bearsStore.js 생성 2) zustand의 create를 사용해 스토어 생성 (이 때 스토어는 관리할 상태에 따라 여러개가 될 수 있음)import { create } from 'zustand';const useBearStore = create((set) => { return { bears: 0, increase: function() { set(function(state) { return { bears: state.bears + 1 } }) }, // 초기화용 함수 init: function (){ set({ ..

• format_list_bulleted React
• · 2024. 9. 6.
• textsms