본문 바로가기
반응형

공부

 (106)
[트러블 슈팅] 카카오맵 API를 활용한 캠핑장 데이터 렌더링 최적화 카카오맵 API를 활용한 캠핑장 데이터를 처리하는 과정에서 발생했던 렌더링 이슈에 대해 작성해보려고 합니다. 발생한 오류 🔥캠핑장 공공데이터 활용한 지도 서비스를 개발 중, 데이터 필터링 및 마커 클러스터링 렌더링 과정에서 심각한 성능 이슈가 발생했습니다. 전체 캠핑장 데이터는 `4000개`가 넘었고, 데이터를 필터링해 마커로 지도에 표시하는 과정에서 지도를 드래그하거나 확대/축소할 때 프레임이 10~40FPS로 급격히 떨어지는 문제가 있었습니다. 특히 확대 시에는 정상적으로 동작하는 것처럼 보였지만, 축소 시 여전히 프레임 저하가 발생했습니다. 해결 과정 🔎성능 문제를 정확하게 파악하기 위해 먼저 데이터 필터링 과정의 속도를 측정했습니다. `console.time`을 사용해 데이터 필터링 과정이 느..
[리팩토링] 커스텀 훅을 활용한 날씨 데이터 관리 구조 개선 최근 프로젝트에서 날씨 정보를 사용자들에게 제공하기 위해 행정 구역 데이터와 오늘, 이번 주 날씨 데이터를 가져와 화면에 표시하는 기능을 구현했습니다. 이 과정에서 UI와 데이터 관련 로직을 효과적으로 분리하기 위해 커스텀 훅을 도입했습니다. 구조 변경 이유 ✨데이터 요청, 포맷팅, 상태 관리 등의 로직이 컴포넌트 내부에 존재해서 UI와 데이터 로직이 혼합되어 가독성이 떨어지고, 유지보수가 어려운 상황이 발생했습니다.분리했을 때 이점`가독성 향상` : 컴포넌트가 UI에만 집중할 수 있어 코드의 가독성이 높아졌습니다.`유지보수 용이` : 데이터 로직을 커스텀 훅으로 분리하여, 각 기능을 독립적으로 수정하거나 확장할 수 있습니다.`재사용성` : 커스텀 훅을 다른 컴포넌트에서도 재사용할 수 있어 코드 중복을 ..
[트러블 슈팅] SVG 컴포넌트 재사용 시 발생한 이미지 중복 문제 해결하기 발생한 오류 🔥날씨 API를 요청한 후 아이콘 URL을 가져와 `WeatherIcon`컴포넌트를 사용해 여러 개의 날씨 아이콘을 표시하려고 했습니다. 그러나 배열로 `WeatherIcon`을 렌더링 했을 때, 모든 아이콘이 동일한 이미지만 표시되는 현상이 발생했습니다. 해결 과정 🔎처음에는 각 아이콘의 URL을 제대로 전달하고 있다고 생각했지만, 여러 개의 `WeatherIcon`컴포넌트를 렌더링할 때 브라우저가 첫 번째 요소의 이미지만을 참조하는 것을 깨닫지 못했습니다. 기존 코드const WeatherIcon = ({ url, className }) => {  const URL = url  ? `https://openweathermap.org/img/wn/${url}@2x.png`  : "data..
[개인 프로젝트] MBTI 테스트 MBTI 테스트 📔본인의 MBTI를 테스트해 볼 수 있는 사이트입니다. 배포 링크 : https://mbti-test-app-six.vercel.app/깃허브 링크 : https://github.com/smu06030/mbti-test-app 파일 구조 🗂️📦src┣ 📂assets┣ 📂api┣ 📂components┃ ┣ 📂Header┃ ┣ 📂Layout┃ ┣ 📂Result┃ ┗ 📂Test┣ 📂constants┣ 📂mock┣ 📂pages┃ ┣ 📂private┃ ┗ 📂public┣ 📂queries┣ 📂routes┣ 📂store┣ 📂utils┣ 📜App.jsx┗ 📜main.jsx 주요 기능💡구현 사항✅ 회원가입, 로그인, 프로필 관리 기능 구현JWT 인증 서버를 사용하여..
[트러블 슈팅] MBTI 테스트 (Glitch에서 JSON-server의 응답 속도 차이) Glitch에서 JSON-server의 응답 속도 차이발생한 오류 🔥MBTI 테스트 앱을 개발하며 Glitch 플랫폼에서 JSON-server를 배포하여 사용했습니다. 하지만 로컬 환경에서의 실행 속도와 비교했을 때 상당한 지연이 발생하는 문제를 경험했습니다. 해결 과정 🔎로컬에서 `json-server --watch db.json --port 5000`으로 서버를 구동했을 때와`Glitch`에서 서버를 구동했을 때와 응답 시간이 거의 10배 이상 차이 나는 현상을 `console.time`을 통해 확인했습니다. 로컬서버 `네트워크 지연` : Glitch 서버가 해외에 위치하고 있기 때문에, 데이터 요청과 응답에 상당한 네트워크 지연이 발생했습니다.`리소스 제한` : Glitch는 무료 플랜에서 제한..
옵저버 패턴 알아보기 옵저버 패턴이란? 📖객체의 상태 변화를 관찰하는 옵저버(Observer)들이 있고, 관찰 대상이 되는 객체(Subject)가 상태 변화가 있을 때 옵저버들에게 알리는 디자인 패턴입니다. ❗간단하게 설명하면어떤 데이터나 상태의 변화가 일어났을 때, 실시간으로 구독자들에게 알려주는 방식 `Subject (주체)` : 상태를 보유하고 있고, 변화가 일어났을 때 옵저버들에게 알리는 역할`Observer (옵저버)` : 주체의 상태 변화를 감지하고 그에 따라 행동 옵저버 패턴 직접 만들어보기 📖subject.jsconst createSubject = () => { const observers = new Map(); const addObserver = (key, observer) => { if(!obs..
[개인 프로젝트] MBTI 테스트 - useQuery, useMutation 커스텀 훅 리팩토링 리팩토링 이유 📖Tanstack Query를 사용하면서 여러 컴포넌트에서 중복되는 로직이 발생해 유지보수가 어렵다는 생각이 들었습니다. 그래서 `useQuery`와`useMutation`을 커스텀 훅으로 리팩터링 하고 `queryKey`를 상수화 해 코드의 가독성과 재사용성을 높인 방법에 대해서 공유해보려고 합니다. 기존 코드 📖useQuery, useMutation기존에는 `useQuery`와 `useMutation`을 각 API 호출마다 직접 사용했는데, 여러 컴포넌트에서 중복되는 로직이 많아지고 가독성이 떨어 지는 문제가 있었습니다.const { data: results, isLoading } = useQuery({ queryKey: ["results"] queryFn: getTestResu..
Zustand 동작 원리 알아보기 오늘은 zustand가 내부적으로 어떻게 동작하는 알아보기 위해 zustand github를 확인해 봤습니다.  GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React🐻 Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub.github.com 파일이 타입스크립트로 작성되어 있는데 보기 편하기 위해 GPT의 힘을 빌려 자바스크립트로 변경했습니다.  react.ts 📖`react.ts`파일의 전체 코드이고, React와의 연동을 해줍니다.import ReactExp..

티스토리툴바