072DATA

이전에는 데이터 분석 및 카카오맵을 불러오고데이터의 위치를 기반으로 마커와 인포윈도우를 생성했습니다.. 이번에는 데이터를 리스트 형식으로 렌더링하고 데이터를 검색할 때 디바운싱 기법을 적용하며카드를 클릭하거나 마커를 클릭했을 때 지도를 이동시키는 이벤트와 지도를 불러올 때 로딩처리까지 구현해볼 계획입니다 StoreList 컴포넌트 1. StoreList 컴포넌트 Propsconst StoreList = ({ stores, onClick, selectedStoreId }: StoreListProps) => {  StoreList에 전달되는 props 들은 상위 페이지에서 제공되는 상태와 클릭 함수입니다 상위 페이지 구조const Page = () => { const [selectedStoreId, set..

지난 시간에는 서울 맵의 친환경 스토어 데이터를 분석하고supabase에 저장하는 과정을 기록했는데욥 이번 글에서는 실제로 카카오맵을 불러오는 과정을 기록하겠습니다. 먼저 카카오맵 API 문서에 나와있는 시작하기를 따라하면서 개발자 등록 및 API 키를 발급받아야 합니다. 그리고 타입 지원이나 지도를 더 원할하게 사용하기 위해서 카카오맵 SDK 라이브러리를 사용합니다npm install react-kakao-maps-sdk혹은yarn add react-kakao-maps-sdk   카카오맵 API 가이드https://apis.map.kakao.com/web/guide/ 카카오맵 SDK 가이드https://react-kakao-maps-sdk.jaeseokim.dev/docs/intro Tutorial |..

시작하기 전.. 처음에는 프로젝트에서 서울맵의 지도 api를 활용하여 친환경 스토어를 보여주려고 했지만서울시 지도의 UI/UX가 너무 구리(너구리)길래 카카오맵에서 보여주면 좋겠다는 의견이 나왔고 서울시 제로웨이스트 스토어 데이터를 활용해서카카오 맵으로 커스텀해보기로 했슴다,.   데이터 분석 서울시 API에서 제공하는 데이터를 살펴보니 필요 이상으로 많은 필드가 있었습니다.아래와 같이 필요한 것만 추려냈습니다interface OgInfo { COT_CONTS_ID: string; COT_CONTS_NAME: string; COT_ADDR_FULL_NEW: string; COT_COORD_Y: number; COT_COORD_X: number; COT_VALUE_03: string; COT_..

목표useMemo와 useCallback의 동작 원리 이해두 Hook의 차이점과 각각의 사용 의도 파악 (!)실제 프로젝트에서의 적용 방법 습득성능 최적화 관점에서의 이해 React의 렌더링 특성React에서 컴포넌트는 다음과 같은 경우에 리렌더링됨state가 변경될 때props가 변경될 때부모 컴포넌트가 리렌더링될 때이러한 리렌더링은 때때로 불필요한 계산이나 렌더링을 발생시킬 수 있음 Memoization이란?이전에 계산한 값을 저장해두고 동일한 입력이 들어올 때 재사용하는 기법컴퓨터 프로그래밍에서 속도를 향상시키는 최적화 기술 중 하나 그럼 이제 useMemo와 useCallback 알아보겠음 useMemo 사실 useMemo 관련해서 포스팅을 한 적이 있긴한데 다 까먹고 제대로 정리된 것 같지도 않..

사용자가 여러 챌린지를 고르고 각 챌린지마다 최소 하나의세부 옵션을 골라야 하는 폼을 만들어야 했다예를 들어 '파일 정리'를 골랐으면"불필요한 파일 삭제", "폴더 정리" 중에 하나는 꼭 선택해야 했다.  해결 과정폼에서 다룰 데이터 타입을 먼저 정의했다interface ChallengeFormInputs { content: string; images?: FileList; selectedOptions: Record // 챌린지별로 선택된 옵션들} const { register, handleSubmit, formState: { errors }, setError, clearErrors} = useForm();react-hook-form을 설정하고, 폼을 제출할 때는 이렇게 유효성 검사를 했다..

🔍 1. Supabase API 구현 - 특정 기간 데이터 조회export const calendarApi = { getByDateRange: async (startDate: string, endDate: string, userId: string) => { try { // 지정된 시작 및 종료 날짜의 시간 범위를 설정 const startDateTime = `${startDate}T00:00:00.000Z`; // 시작 날짜의 00시 설정 const endDateTime = `${endDate}T23:59:59.999Z`; // 종료 날짜의 23시 59분 설정 const { data, error } = await supabase .from("cha..

오늘은 달력을 구현했는데  useCalendar라는 훅을 만들어서달력에 관련된 로직을 관리하여 꽤 깔끔하게 설계가 된듯하다아직까지는 이벤트 관련 로직이 없어서 UI 정도만 설계했다다음 업데이트 해야할 사항으로 각 날짜별로 통계를 내려주고 해당 월의 통합 데이터까지 출력해야 한다  🛠️ 전체 구조 및 기술 스택React와 TypeScript를 사용한 달력 구현dayjs 라이브러리로 날짜 처리Custom Hook을 통한 로직 관리Tailwind CSS로 스타일링   💡 주요 로직 분석1. Custom Hook (useCalendar)상태 관리const [currentMonth, setCurrentMonth] = useState(dayjs()); 현재 표시되는 월을 상태로 관리dayjs 인스턴스를 초기값으..

데이터 로딩할 때 Skeleton UI 적용하기 🦴오늘은 데이터를 불러오는 동안 사용자 경험을 개선하기 위해 Skeleton UI를 적용해봤슴다사실 전에는 그냥 "로딩중..." 이라고 표시하고 말았는데, 이번에는 좀 더 세련되게 만들어보고 싶었어요Skeleton UI란? 🤔Skeleton UI는 실제 컨텐츠가 로드되기 전에 보여주는 임시 화면입니다!!페이스북이나 유튜브 같은 서비스를 사용하다 보면 콘텐츠가로드되기 전에 회색 막대들이 깜빡이면서 로딩을 표시하는데 그것이 바로 Skeleton UI입니닷Skeleton UI를 사용하는 이유사용자가 어떤 내용이 로드될지 미리 예상할 수 있다갑자기 콘텐츠가 확 나타나는 것보다 자연스럽다로딩 중이라는 걸 직관적으로 보여준다만드는 방법! 💻Tailwind CSS..

최근 작업하는 프로젝트에서 레벨링 시스템을 구현했는데유저의 포인트를 기반으로 레벨을 계산하고 현재 레벨과 다음 레벨까지 남은 포인트를시각적으로 표현하여 경험치바도 만들어 보았다 1. 레벨과 경험치 설정 우선, 레벨과 필요한 경험치를 정의한 LEVEL_CONFIG 라는 상수를 만들었다각 레벨마다 이름, 최소/최대 포인트, 이미지 등을 포함해사용자가 어떤 레벨에 속하는지 쉽게 파악할 수 있게 했다.export const LEVEL_CONFIG = { 1: { name: "씨앗", min: 0, max: 1000, image: "/seed.png" }, 2: { name: "새싹", min: 1100, max: 5000, image: "/sesac.png" }, 3: { name: "트리", min: 5..

개발을 하다 보면 이미지 업로드 기능이 필요한 경우가 많은데,특히 여러 장의 이미지를 한 번에 처리해야 하는 경우가 있습니다.오늘은 제가 구현했던 다중 이미지 업로드 기능을 기록해보려고 합니다. 구현 목표최대 5장까지 이미지 업로드 가능이미지 형식 및 크기 제한 (JPG, PNG, GIF, WEBP / 5MB 이하)이미지 미리보기 기능개별 이미지 삭제 기능 1. 이미지 업로드 컴포넌트 만들기먼저 이미지 업로드를 위한 기본적인 UI를 구성했고이 코드에서 ImageUpload 컴포넌트는 다섯 개의 이미지 미리보기 자리를 제공하는 간단한 레이아웃을 만들어유const ImageUpload = () => { // 파일 input 참조를 위한 ref const fileInputRef = useRef(null);..