공부/Next (19) 썸네일형 리스트형 Next 카카오 맵 행정구역 나누기 시도 별로 행정구역을 나누는 작업을 진행한 내용입니다. 행정구역 데이터 파일 📖SHP 파일시도, 시군구, 읍면동, 리 별로 데이터가 있어 원하는 파일을 다운 받으면 됩니다. 대한민국 최신 행정구역(SHP) 다운로드 – GIS Developer www.gisdeveloper.co.kr 저는 시도 정보가 필요했기 때문에 가장 최신 SHP 파일을 다운로드 했습니다. 파일을 다운로드하고 압축을 풀면 3개의 파일이 들어있습니다. 방위나 지도가 담긴 공간 데이터 파일을 JSON 파일로 사용하기 위해 `XrProjection` 으로 변환을 해야 합니다. [GIS] XrProjection v3.1 – GIS Developer다양한 좌표계 간의 변환 툴입니다. 특히 대한민국에서 사용하는 좌표계에 대해 손쉽게 .. Next 카카오 맵 구현 카카오맵 구현 📖먼저 `react-kakao-maps-sdk`를 설치해 줍니다.npm i react-kakao-maps-sdk useKakaoLoader이후 `useKakaoLoader`를 작성해주고 export 해줍니다.// useKakaoLoader.tsimport { useKakaoLoader as useKakaoLoaderOrigin } from "react-kakao-maps-sdk";const KAKAO_API_KEY = process.env.NEXT_PUBLIC_KAKAO_API_KEY;export default function useKakaoLoader() { useKakaoLoaderOrigin({ appkey: `${KAKAO_API_KEY}`, libraries: ["c.. [Next, Supabase Auth] 이메일, 소셜 로그인 기능 구현 및 트리거 설정 Supabase Auth 선택 이유 ✨Supabase는 PostgreSQL을 사용해 데이터 정규화, 복잡한 쿼리 작업 등 SQL의 모든 기능을 사용할 수 있습니다. 그리고 요즘 떠오르는 기술이며 공식 문서 또한 너무 잘 되어 있기 때문에 적용하기 쉽다고 판단해서 선택하게 되었습니다. 사용 방법 📖Authentication > ProvidersProviders 탭으로 이동하면 다양한 로그인을 선택할 수 있습니다.이메일을 이용해 간단한 로그인 구현과 OAuth를 이용한 소셜 로그인도 구현할 수 있습니다. ✨ Provider를 등록하는 방법은 공식 문서에 너무 잘 나와 있으니 생략하도록 하겠습니다. Google Login with Google | Supabase DocsUse Sign in with Goo.. Next.js 알아보기 8 (Caching - 어려움 주의) Next.js의 Caching 📖 ❗기억해야 할 핵심 `Next.js는 대부분 영역에서 fetch 함수를 기반으로 캐싱한다`입니다. next.js의 fetch API는 브라우저의 fetch API를 기반으로 next.js에서 확장한 새로운 `fetch API`입니다.그중에서도 build(Full Route Cache)와 웹 서버에 요청(Data Cache)할 때 캐싱을 진행합니다. Full Route CacheNext.js는 빌드 시점에 페이지를 렌더링 하고 그 결과를 캐싱하는 `Full Route Cache` 기능을 제공합니다. 빌드할 때 Full Route Cache에 캐싱된 값이 없기 때문에 `Data Source`에서 값을 가지고 Full Route Cache에 값을 캐싱하고 이후 유저가 웹 서.. Next.js 알아보기 7 (Route Handler & Server Action) Route Handler 📖webRequest와 Response APIs를 쓸 수 있는 핸들러를 만들 수 있게 끔 허용해 restful 한 api를 만들 수 있게 해 줍니다. 서버, 클라이언트 컴포넌트 개념을 포함하는 React 컴포넌트 개념을 벗어나 `route.ts`파일을 다루게 됩니다. 사용 방법api > apiTest 폴더를 만든 후, 하위에 route.ts 파일을 생성해 주고 아래 코드를 적습니다.export async function GET(request: Request) { console.log("GET /api/test");}export async function POST(request: Request) { console.log("POST /api/test");}export async.. Next.js 알아보기 6 (Asset 최적화) 이미지 최적화 📖next.js는 자동으로 이미지 크기를 최적화해주는 이미지 컴포넌트 `Image` 컴포넌트를 제공해 줍니다. `크기 최적화`: 각 기기에 맞는 크기의 이미지를 자동으로 제공하고, Webp 및 AVIF와 같은 최신 이미지 형식을 사용합니다.`시각적 안정성`: 이미지가 로딩될 때 레이아웃 이동을 자동으로 방지합니다.`빠른 페이지 로드`: 네이티브 브라우저 지연 로딩을 사용해 이미지가 뷰포트에 들어올 때만 로드됩니다.`자산 유연성`: 원격 서버에 저장된 이미지도 포함해 필요에 따라 이미지 크기 조정. 사용 방법로컬 이미지 사용하기import Image from 'next/image'import profilePic from './me.png'export default function Page(.. Next.js 알아보기 5 (Suspense, Loading, Error, Streaming SSR) Loading UI 📖✨ Next.js 14의 App router에서 비동기 컴포넌트가 로드되는 동안 사용자에게 로딩 상태를 표시하는 기능입니다. 왜 중요할까?`사용자 경험 개선`: 로딩 중인 상태를 명확히 표시해 사용자의 불안감을 줄이고, 시스템이 응답하고 있음을 알립니다.`사용자의 불필요한 행동 문제 해결`: 현재 상태를 제공해 불필요한 클릭이나 페이지 이탈을 방지할 수 있습니다.`향상된 SEO 및 접근성`: 로딩 UI는 페이지의 일부분이 빠르게 렌더링 되어 SEO 성능을 향상하고, 사용자가 페이지를 더 빠르게 접근할 수 있도록 합니다. 사용방법로딩 컴포넌트 작성// app > loading.tsxexport default function Loading() { return Loading...;} .. Next.js 알아보기 4 (주요 렌더링 기법) CSR(Client Side Rendering) 📖 특징 ✨ 순수 리액트 사용했을 때 100%브라우저에서 js를 이용해 동적으로 페이지를 렌더링렌더링의 주체 : 클라이언트장단점 ✅(최초 로드 후) 사용자와의 상호작용이 빠르고 부드럽습니다.서버 부하가 적고, 서버에 추가적인 요청을 보낼 필요가 없기 때문에 사용자 경험이 좋습니다.첫 페이지 로딩 시간(Time To View)이 길 수 있습니다.js가 로딩되고 실행될 때까지 페이지가 비어있어 SEO에 불리합니다. 직접 구현하기 아래 코드처럼 `"use client"`옵션을 추가하 사용할 수 있습니다."use client";import Image from "next/image";import React, { useEffect, useState } from "r.. 이전 1 2 3 다음
