공부 (106) 썸네일형 리스트형 Supabase에서 타입 설정하기 오늘은 Next.js에서 Supabase를 사용할 때 자동으로 타입을 생성하고 적용하는 방법에 대해 설명해보려고 합니다! Supabase 로그인 📖먼저 터미널에서 `npx supabase login`를 입력해 Supabase 로그인을 해줍니다.npx supabase login 그럼 아래 화면으로 이동하게 되는데 인증 번호를 복사하고 터미널에 붙여 넣기를 해줍니다. Supabase 프로젝트 초기화📖로그인을 했다면 `npx supabase init`를 입력해 Supabase와 관련된 기본 설정 파일들을 생성해 줍니다.(자동으로 생성)npx supabase init Supabase 타입 생성📖supabase 홈페이지에서 Project_id를 복사한 후 아래 명령어를 입력해 원하는 위치에 `databa.. [리팩토링] queries 폴더 구조 변경 및 메서드명 수정 기존 코드 📖useQuerys.ts기존 폴더 구조는 `queries > useQuerys.ts` 이렇게 구성되어 있었고 query 메서드 명도 직관적이지 않기 때문에 한눈에 들어오지 않았습니다. // 스탬프 active 리스트 가져오기const useGetStampActive = (userId: string) => { return useQuery({ queryKey: QUERY_KEY.STAMPLIST(userId), queryFn: () => fetchActiveStamp(userId), enabled: !!userId, // userId가 있을 때만 쿼리 실행 refetchOnWindowFocus: true });};// 사용자의 스템프 항목 중 현재위치 주소가 일치하는 데.. [리팩토링] Icon 컴포넌트 리팩토링 이번엔 프로젝트에서 많이 사용하는 Icon 컴포넌트를 리팩토링한 경험을 공유해 보려고 합니다.SVG 아이콘을 쉽게 사용할 수 있도록 배경색과 반경 조정, 동적 사이즈 스케일링을 추가했습니다! 기존 코드 문제 📖기존 Icon 컴포넌트는 각각 아이콘을 렌더링 하는 기능만 가지고 있었습니다. ❗문제점 1. 중복되는 코드가 너무 많았고 유지보수가 어려운 점2. 사용자가 `배경색`와 `반경 설정`을 하려면 새로운 컴포넌트를 생성해서 사용해야 한다는 점에서 일관적인 스타일링의 어려움3. SVG 사이즈 조정 시 배경만 커지는 문제 다양한 사이즈를 사용하는 UI에서 큰 문제였습니다. 리팩토링 📖기존 Icon 컴포넌트// AlbumIcon.tsxexport const AlbumIcon = () => { retu.. 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.. 이전 1 2 3 4 5 ··· 14 다음
