최근 축제 정보를 제공하는 웹 서비스에서 무한 스크롤을 구현하던 중, 중복 데이터 렌더링 문제와 옵저버 재생성으로 인한 성능 저하, TypeScript의 타입 오류 등 다양한 문제를 경험했습니다. 이번 글에서는 실제 프로젝트에서 겪은 문제 상황과 그에 대한 해결 과정을 개발 회고 형식으로 정리해보려 합니다.🧩 문제 상황 요약초기에는 다음과 같은 형태로 데이터를 페이징하여 불러왔습니다:const loadFestivals = useCallback(async () => { const today = formatDate(new Date()); const response = await axiosInstance.get('/api/event', { params: { startDate: today, endDa..

🔍 1. any vs AxiosError 비교✅ any를 쓸 경우catch (err: any) { console.log(err.response.status); // ❌ 타입 보장이 안 됨, 자동완성 없음, 실수 가능성 큼}TypeScript의 타입 검사 우회를 허용하므로 IDE의 자동완성, 경고, 정적 분석 기능이 무력화됨에러 구조가 예상과 다르면 런타임 오류 발생 가능✅ AxiosError를 쓸 경우import { AxiosError } from 'axios';catch (err: unknown) { const error = err as AxiosError; if (error.response?.status === 400) { // 명확하고 안전하게 상태코드 접근 가능 }}error.res..

✅ 1. useQueries를 활용한 병렬 요청 처리✨ 적용 코드const [recommendQuery, popularQuery] = useQueries({ queries: [ ... ]}) as [UseQueryResult, UseQueryResult];🔍 목적서로 의존성이 없는 API 호출(추천 이벤트, 인기 이벤트)을 동시에(fetch in parallel) 실행함으로써 전체 대기 시간을 줄임.🧠 일반적인 비효율 예시const recommend = await fetchRecommend();const popular = await fetchPopular();→ 순차적으로 실행되므로 총 응답시간 = A + B✅ 효과전체 렌더링 시간이 절반 가까이 단축됨.사용자 입장에서 체감 속도 개선.서버에서 응답..

✅ 전체 흐름 요약[1단계] 이미지 선택 ↓[2단계] presigned URL 요청 (GET) ↓[3단계] 받은 URL로 S3에 PUT 업로드 (binary) ↓[4단계] s3Key를 포함해 리뷰 등록 API 요청 (POST)✅ 각 단계 상세 설명📸 1단계. 사용자 이미지 파일 선택상태에 저장: setImage(file)파일 객체는 File 타입🌐 2단계. presigned URL 요청 (GET)const response = await axiosInstance.get("/api/auth/user/post/presigned", { params: { originalFileName: image.name, contentType: image.type, },});✅ 서버 응답 예시{ ..

🗺️  기능 요약주차장 정보가 담겨 있음주소를 기반으로 카카오 지도 좌표(위경도) 를 얻어서 마커로 표시마커 클릭 시 모달이 아래에서 위로 올라와서 주차장 상세 정보 표시카카오 맵 타입정의 !🔧 2. 핵심 구성요소 설명✅ Coords 타입 정의interface Coords { lat: number; lng: number; label: string; // 주차장 이름 address: string; // 주소 info: { ... } // 상세 정보 (운영시간, 요금 등)}마커에 필요한 위경도(lat, lng) + 표시할 텍스트(label) + 추가 정보(info)를 묶은 구조야.✅ Kakao Maps 타입 정의 (타입스크립트 정교화)interface KakaoMaps { maps: { ..

📌 먼저, '동적 로딩'이란?스크립트가 HTML에 이건 정적 HTML에 직접 삽입한 외부 스크립트즉,브라우저는 React 앱보다 먼저 태그를 해석하고해당 JS 파일을 받아오고로딩이 끝난 후에야 window.kakao 객체가 만들어짐하지만 이 시점은 React의 App.tsx 코드보다 늦을 수도 있어요!그래서 React 컴포넌트 안에서 window.kakao를 바로 사용하면…console.log(window.kakao) // ❌ undefined (초기 로딩 중일 경우)✅ 그래서 useEffect에서 체크하는 로직이 필요한 것useEffect(() => { if (window.kakao && window.kakao.maps) { setIsLoaded(true); } else { const..