전체 글 (106) 썸네일형 리스트형 TIL -커뮤니티 게시판 로딩 최적화 트러블 슈팅 문제 상황TanStack Query로 커뮤니티 게시판 카테고리별 로딩 시 초기 데이터 매번 로딩 화면 표시사용자 경험 저하 우려의사 결정 과정 및 해결 방안문제 인식: 반복되는 로딩 화면이 사용자 경험에 부정적 영향해결 방안 검토:SSR로 초기 데이터를 props로 전달하이드레이션을 통한 로딩카테고리별 프리페칭최종 결정: 카테고리별 1 페이지 단위 클라이언트 사이드에서 프리페칭 구현이유: 초기 로딩 후 추가 로딩 최소화로 사용자 경험 개선const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, error, prefetchAllCategories } = useGetCommunityPosts(selectedCategory, categ.. TIL - 까다로운 공공 데이터 API 데이터 페칭 트러블 슈팅 서론오늘은 예전 팀 프로젝트에서 함께 일했던 가현님이 공공 데이터 API와 관련된 문제로 도움을 요청하셨습니다. API 변경으로 인해 데이터 구조가 크게 바뀌었고, 이에 따라 데이터를 효과적으로 페칭하는 데 어려움을 겪고 있었던 상황이었습니다.문제 상황이미지 데이터 부재: 공공 데이터 API에서 이미지가 제거되어, 주제와 관련된 이미지를 가져오는 데 큰 어려움이 있었습니다. 이로 인해 네이버 검색 API를 이용해 이미지를 찾아야 했고, 전체 1300개 데이터 항목에서 이미지를 4개씩 찾아야 하다 보니 5200개의 이미지를 받아오는 작업이 필요했습니다. 네이버 API는 초당 10건 제한이 있어 전체 데이터를 받아오는 데 이론상 8~10분이 소요될 것으로 예상했고, 실제로는 10분 이상 걸렸습니다.API 엔.. TIL - 수평 스크롤 문제 해결 문제수평 스크롤을 휠로 처리하려는 시도에서 스크롤이 끊기는 문제가 발생함.터치 스크롤에 대한 지원이 부족함.시도한 해결 방안커스텀 훅 사용구현: useHorizontalScroll 커스텀 훅을 사용하여 휠 스크롤 이벤트를 수평 스크롤로 변환.문제점: 이벤트 요청이 많아서 스크롤이 끊기는 문제가 발생. 디바운싱을 적용했으나 여전히 불완전함.Swiper 라이브러리 사용구현: Swiper 라이브러리를 사용하여 슬라이드와 수평 스크롤을 구현.해결:Swiper의 mousewheel 모듈을 사용하여 휠 스크롤을 자연스럽게 처리.freeMode 옵션을 통해 자유로운 스크롤과 슬라이드 이동을 구현.터치와 마우스 휠 모두 안정적으로 처리됨.import { Swiper, SwiperSlide } from 'swiper/r.. TIL - React와 Zustand를 사용한 상태 관리 초기화 오늘의 주요 학습 및 작업 내용:버그 수정: 전반적인 애플리케이션 버그 탐색 및 수정UI 개선: 공통 헤더 적용으로 일관된 사용자 경험 제공캘린더 컴포넌트 수정: 날짜 선택 기능 개선Zustand 상태 관리 최적화:문제: 컴포넌트 간 이동 시 상태 초기화 미흡해결: useEffect를 활용한 컴포넌트 생명주기 관리useEffect(() => { setRecord(exerciseInitialState); return () => { setRecord(exerciseInitialState); };}, []); 컴포넌트 마운트 시 초기화, 언마운트 시 초기화결과불필요한 재렌더링 방지, 컴포넌트별 독립적 상태 관리 TIL - 리팩토링 Zustand를 이용한 상태 관리 통합 문제 상황운동 기록 페이지에서 상태 관리의 복잡성이 문제가 되었음. 페이지 컴포넌트는 전역 상태를 관리하고, 폼 아이템 레벨에서는 지역 상태를 관리하는 방식으로 구현되어 있었음. 이로 인해 상태 동기화와 데이터 흐름에 어려움이 발생했음. 상황 요약:전역 상태: 세트당 거리, 시간 또는 무게 횟수와 같은 폼 데이터를 포함하여 여러 컴포넌트에서 참조됨.지역 상태: 페이지 컴포넌트에서 관리되는 운동 기록 상태는 하위 컴포넌트로 props로 내려줌.문제점: 상태의 동기화 및 관리가 복잡해짐. 전역 상태와 지역 상태 간의 불일치가 발생함. 리팩토링 내용상태 관리 구분:전역 상태: Zustand 스토어에 통합하여 여러 컴포넌트에서 공유하는 상태 관리 (record, isBookMark, cardioInputs, w.. TIL - 회원가입 이메일 중복 확인 로직 개선 - 실시간 검사 디바운싱 적용 (트러블 슈팅) 배경기존: 중복 확인 버튼을 통한 이메일 중복 확인변경 필요성: UI/UX 개선을 위해 버튼이 제거되고 실시간 중복 확인 필요 문제 해결 과정1. 초기 접근: 실시간 중복 확인 구현구현: 입력 값 변경 시마다 서버에 중복 확인 요청문제점: 매 입력마다 서버 요청 발생, 성능 저하 우려2. 디바운싱 적용 시도목적: 불필요한 서버 요청 감소구현: lodash의 debounce 함수 사용const debouncedCheckEmail = debounce((value) => { // 이메일 중복 확인 로직}, 1000);결과: 매 입력마다 서버 요청 발생 3. 메모이제이션 시도 (useCallback, useMemo)목적: 불필요한 함수 재생성 방지, (리렌더링마다 디바운싱 함수가 생성되는 것을 원인으로 생각.. TIL - 공통 컴포넌트 input에 커스텀 date 넣기 학습 내용1. 커스텀 캘린더 구현dayjs 라이브러리를 활용한 날짜 조작 및 비교Swiper 라이브러리로 월 간 슬라이딩 기능 구현현재 월 중심으로 전후 6개월씩, 총 13개월 데이터 생성2. Input 컴포넌트 확장기존 Input 컴포넌트에 'date' 타입 추가선택된 날짜 표시 및 캘린더 팝업 기능 구현3. 스타일링Tailwind CSS를 사용한 반응형 디자인오늘 날짜, 선택된 날짜 등 특정 조건에 따른 스타일 적용주요 코드 구현MonthCalendar 컴포넌트const MonthCalender = ({ selectedDate, onSelectDate, onChangeMonth }: MonthCalendarProps) => { const [months, setMonths] = useState([]).. TIL - input 공용 컴포넌트 이벤트 처리 기능 추가 오늘 Input 컴포넌트에 드롭다운 기능과 텍스트 정렬 기능을 추가했습니다. 이를 통해 컴포넌트의 유연성과 재사용성을 크게 향상시켰습니다.Input 컴포넌트 드롭다운 이벤트 처리 기능 추가드롭다운 옵션에 개별적인 아이콘과 클릭 이벤트를 추가할 수 있도록 구현했습니다.} isDropdown dropdownOptions={[ { value: '테스트 1', icon: , onClick: () => console.log('테스트 1 clicked'), }, { value: '테스트 2', icon: , onClick: () => console.log('테스트 2 clicked'), }, ]}/>;주요 개선사항:각 드롭다운 옵션에 .. 이전 1 2 3 4 5 ··· 14 다음
