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_..

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

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

Next.js를 사용한 프로젝트에서 글 작성 페이지 구현하기 이번 포스트에서는 Next.js와 Zustand를 사용해 글 작성 페이지를 구현하는 방법을 기록하겠습니다물론 이 페이지의 경우 클라이언트 사이드 렌더링을 사용하기 때문에 리액트와 다를 건 없습니다...ㅎㅎ 참고로 글 작성 기능은 이미지 업로드, 상태 관리, 폼 데이터 처리 등의 요소를 포함하고 있습니다. 1. Zustand로 상태 관리하기 먼저, 작성 페이지에서는 사용자 정보와 날씨 정보를 포함한 상태를 Zustand를 통해 관리합니다여기서는 세 가지 상태를 사용해요useUserStore: 사용자 정보를 관리.useWeatherStore: 날씨 데이터를 관리.useWriteStore: 작성 폼에 필요한 데이터를 관리.const { user } ..

이미지 업로드  supabase를 사용하여 스토리지 기능으로 이미지를 업로드하는 방법 파일 업로드 창 안 보이게 하기우선 파일 업로드 창이 못 생겼으니 숨기고 나서 지정한 영역을 클릭하면 파일 업로더가 표시되도록 구현 파일 업로드 버튼을 테일윈드를 사용하여  hidden 속성으로 보이지 않게 하고,사용자가 이미지를 클릭하면 파일 선택 창이 열리도록 구현하였음이를 위해 useRef를 사용해서 클릭 이벤트로 파일 선택 창을 열 수 있게 함.const fileInputRef = useRef(null);// 미리보기 창 선택 시 이미지 업로더 선택const handlePreviewClick = () => { if (fileInputRef.current) { fileInputRef.current.click..

Metadata 설정 Metadata는 Next.js에서 페이지의 메타데이터를 설정하는 객체이며사용자 경험을 개선하는 데 중요하고  SEO와 각 페이지의 고유한 정보를 설정할 수 있음// 전체 layout.tsxexport const metadata: Metadata = { title: "LoL", description: "롤 정보 페이지", icons: { icon: "/images/fav2.png", },};title: 브라우저 탭에 표시되는 페이지 제목 description: 페이지 설명으로, 주로 검색 엔진에서 사용됨icons: 브라우저의 탭에 표시될 아이콘의 경로 설정 근데 이제 icons의 경우 public/images 폴더 안에 이미지를 넣어서 사용했는데 public/images..

4가지 렌더링  CSR(Client Side Rendering) 특징브라우저에서 JavaScript를 이용해 동적으로 페이지를 렌더링렌더링의 주체가 클라이언트임장점최초 로드를 완료한 뒤 상호작용이 빠르고 부드러움서버에게 추가적인 요청을 보낼 필요가 없기 때문에, 사용자 경험이 좋음.서버 부하가 적음단점첫 페이지 로딩 시간(Time To View)이 길 수 있음JavaScript가 로딩 되고 실행될 때까지 페이지가 비어있어 검색 엔진 최적화(SEO)에 불리함 "use client" // useEffect, useState와 같은 훅을 사용시 꼭 작성해줘야 함import ProductList from '@/components/ProductList';import { Product } from '@/types'..

Next.js에서 라우팅Next.js에서 페이지 이동을 하는 방법은 파일(폴더) 기반 라우팅임먼저 구조와 요소에 대해서 알아야 함구조와 요소Tree계층 구조를 시각적으로 보기 위한 규칙 (위 -> 아래)임DOM Tree도 같은 구조를 가짐, 큰 틀SubTreetree의 한 부분임. root부터 시작하고 leaf들에 이르기까지의 범위Roottree 또는 subtree의 첫 번째 부분임. root layout처럼 가장 첫 번째 노드, 요소Leafchildren이 없는 마지막 노드, 요소URL 관련 용어 정리URL은 크게 도메인과 Path 부분으로 나뉨URL Segment슬래시로 분류된 URL path의 한 부분임URL Path, Pathname앞에 있는 도메인을 제외한 뒷 부분에 있는 전체임File Syst..