전체 글 (121) 썸네일형 리스트형 [리팩토링] Icon 컴포넌트 리팩토링 이번엔 프로젝트에서 많이 사용하는 Icon 컴포넌트를 리팩토링한 경험을 공유해 보려고 합니다.SVG 아이콘을 쉽게 사용할 수 있도록 배경색과 반경 조정, 동적 사이즈 스케일링을 추가했습니다! 기존 코드 문제 📖기존 Icon 컴포넌트는 각각 아이콘을 렌더링 하는 기능만 가지고 있었습니다. ❗문제점 1. 중복되는 코드가 너무 많았고 유지보수가 어려운 점2. 사용자가 `배경색`와 `반경 설정`을 하려면 새로운 컴포넌트를 생성해서 사용해야 한다는 점에서 일관적인 스타일링의 어려움3. SVG 사이즈 조정 시 배경만 커지는 문제 다양한 사이즈를 사용하는 UI에서 큰 문제였습니다. 리팩토링 📖기존 Icon 컴포넌트// AlbumIcon.tsxexport const AlbumIcon = () => { retu.. Next Loading UI 구현하기 svg 애니메이션과 사용자 경험을 끌어올릴 수 있는 로딩 애니메이션을 구현했습니다.LoadingBouce 컴포넌트 📖const LoadingBounce = () => ( 모아가 여행을 준비중이에요 );export default LoadingBounce; 아래 스타일을 사용해 고정 위치를 설정해 화면 가운데 UI가 보이게 했습니다.className="fixed inset-0 z-50" `animate-bounceLoading`클래스는 애니메이션 속성을 부여해 svg가 자연스럽게 반응하도록 했습니다.animate-bounceLoading LoadingBouce 컴포넌트 재사용 📖Loading UI는 다양한 페이지에서 재사용될 수 있도록 `Loading`컴포넌트를 .. Next 커스텀 훅을 사용한 모달창 기능 구현 모달창을 구현하는 과정에서 효율성을 높이고 재사용할 수 있게 커스텀 훅을 활용해 모달 기능을 구현했습니다. 왜 커스텀 훅으로 모달을 구현했는지? 📖모달창을 구현하다 보니 다양한 컴포넌트에서 동일한 모달 로직을 반복적으로 사용하는 문제가 있었습니다. 그래서 효율성과 재사용성을 높일 수 있게 커스텀 훅으로 분리했습니다! useModal 커스텀 훅 📖`useModal` 훅에서는 모달의 상태, 열기, 닫기, 포탈 렌더링 로직을 포함하고 있고 외부로 반환하고 있습니다.import { useCallback, useEffect, useState } from 'react';import { createPortal } from 'react-dom';const useModal = () => { const [isOpen.. [리팩토링] 데이터 로직 분리 및 서버 상태 관리 최적화 프로젝트를 진행하면서 리팩토링 한 내용에 대해 소개해보려고 합니다. 기존 코드 📖useEffect를 사용한 데이터 요청 처리`useEffect` 내부에서 `fetchUser` 메서드를 통해 사용자 ID를 가져오고 ID가 있는 경우 서버에 스탬프 데이터를 가져오도록 로직을 짰습니다.import { useEffect, useState } from 'react';import { useQuery } from '@tanstack/react-query';// 로그인 유저 ID 상태const [userId, setUserId] = useState(null);useEffect(() => { const checkUser = async () => { const user = await fetchUser(); .. Next 카카오맵을 활용한 시도별 가로 스크롤 버튼 이동 구현 사용자 경험을 고려해 카카오맵 기반 지역별 필터링과 버튼 스크롤 시 지도 이동 기능을 구현했습니다. 가로 스크롤 버튼 구현 📖시, 도별 버튼이 화면 하단에 가로로 스크롤되며 버튼을 클릭하면 선택한 시, 도의 폴리곤이 지도에 렌더링 됩니다. `Swiper`라이브러리를 사용해 구현했습니다. 전체 {siDoName.map((sido) => ( {sido.name} ))} 시, 도 선택에 따른 지도 이동 및 폴리곤 렌더링 📖 선택한 시, 도 폴리곤 필터링사용자가 시, 도를 클릭하면 해당 시, 도의 좌표 데이터를 바탕으로 폴리곤 path를 업데이트 하고 지도를 그립니다.const updatePolygonPath = (path: PathType, index: number) => { setSele.. [트러블 슈팅] Next Vercel 배포 환경 개선 - Dev 환경 최신화 문제 해결 dev 브랜치 최신화 이슈 📖발생한 오류 🔥Next.js 프로젝트를 배포하던 중 `dev`브랜치에서 배포 최신화 문제가 발생했습니다. `dev`브랜치에서 새로운 코드를 푸시해도 배포 환경에서 반영되지 않는 상황이 발생해서 팀 내 검토 과정에서 일관된 최신 버전을 확인하기 어려운 문제가 있었습니다. Vercel 배포 구조와 dev 환경의 충돌 📖문제 원인 🔎Vercel의 기본 배포 구조에서는 한 개의 URL을 기준으로 메인 브랜치만 관리하다 보니, `dev` 브랜치가 배포될 때 자동으로 최신화가 안 되는 문제가 있었습니다. 그래서 `dev` 환경과 `production`환경의 변경 사항을 독립적으로 관리할 필요가 있었습니다. 해결 방법 : dev 전용 Preview 배포 환경 추가 ✨Verce.. [리팩토링] Next 카카오 맵 폴리곤 렌더링 리팩토링 - 커스텀 훅, 유틸 함수 구조 개선 리팩토링 전 📖리팩토링 전 코드는 컴포넌트 내부에 복잡한 로직들이 섞여있어 가독성과 유지보수성이 떨어졌습니다. Next 카카오 맵 행정구역 나누기시도 별로 행정구역을 나누는 작업을 진행한 내용입니다. 행정구역 데이터 파일 📖SHP 파일시도, 시군구, 읍면동, 리 별로 데이터가 있어 원하는 파일을 다운 받으면 됩니다. 대한민국 최신mingos-habitat.tistory.com 특히 폴리곤을 그리는 `좌표 데이터 처리`와 `mouseover``mouseout` 이벤트 처리 로직이 분리되어 있지 않고 중복되어 있어서 재사용성이 부족했습니다. ✨그래서 리팩토링 하기로 결정을 했습니다! ✨ 리팩토링 후 📖"use client";const KakaoMapLoader = () => { useKakao.. Next 카카오 맵 행정구역 나누기 시도 별로 행정구역을 나누는 작업을 진행한 내용입니다. 행정구역 데이터 파일 📖SHP 파일시도, 시군구, 읍면동, 리 별로 데이터가 있어 원하는 파일을 다운 받으면 됩니다. 대한민국 최신 행정구역(SHP) 다운로드 – GIS Developer www.gisdeveloper.co.kr 저는 시도 정보가 필요했기 때문에 가장 최신 SHP 파일을 다운로드 했습니다. 파일을 다운로드하고 압축을 풀면 3개의 파일이 들어있습니다. 방위나 지도가 담긴 공간 데이터 파일을 JSON 파일로 사용하기 위해 `XrProjection` 으로 변환을 해야 합니다. [GIS] XrProjection v3.1 – GIS Developer다양한 좌표계 간의 변환 툴입니다. 특히 대한민국에서 사용하는 좌표계에 대해 손쉽게 .. 이전 1 2 3 4 5 6 ··· 16 다음
