본문 바로가기

Next.js7

[Next.js + Supabase] API Routes 사용하기ㅣ폴더 구조, 삽질 모음 ➜ Next.js + Supabase, 앱 라우터에서 API Routes 사용, API 만들기, 폴더 구조 Next.js의 API Routes는 Next.js 내에서 서버 측 API 엔드포인트를 생성해별도의 백엔드 서버 없이도 풀스택 애플리케이션을 구축할 수 있게 한다. 지금 진행하고 있는 토이 프로젝트는 규모가 작고, 복잡한 백엔드 로직이 크게 없을 거 같아서Next.js로 풀스택 개발을 하기로 결정했다. app/api - route.ts import { createClient } from '@/utils/supabase/server';import { NextResponse } from 'next/server';export async function GET(request: Request) { cons.. 2025. 2. 28.
[Next.js + Naver Map API] 보이는 지도 영역의 마커만 표시하기 (Typescript) ➜ 표시되지 않는 부분의 마커는 지도에서 제거하여 최적화하기 마커 표시/숨김 함수 // 마커 표시 함수const showMarker = (map: naver.maps.Map, marker: naver.maps.Marker) => { marker.setMap(map);};// 마커 숨김 함수const hideMarker = (marker: naver.maps.Marker) => { marker.setMap(null);}; ➭ setMap()으로 마커가 지도 위에 있으면 마커를 표시하고, 없다면 숨기는 함수 작성 마커 업데이트 유무 체크 함수 // 마커 업데이트 유무 체크 const updateMarkers = (map: NaverMap, markers: naver.maps.Marker[]) => { .. 2025. 2. 24.
[Next.js] Supabase PostGIS로 거리순 데이터 정렬하기 ➜  [Next.js + 네이버 지도 api ] Supabase의 PostGIS로 가까운 순으로 데이터 가져오기 supabase에서 제공하는 PostGIS를 사용하면 위치 기반 거리를 계산할 수 있다.✔ PostGISGeo 데이터와 상호 작용할 수 있는 Postgres extension으로지리적 위치에 따라 데이터를 정렬하고, 특정 지리적 경계 내에서 데이터를 가져올 수 있다.  Supabase에서 postgis 활성화  Supabase - Database Extensions 에서 postgis를 활성화해준다. 테이블 생성 ⇣ 공식 문서 예시create table if not exists public.restaurants ( id int generated by default as identity prim.. 2025. 2. 24.
[Next.js + Naver Map API] 네이버 지도 api 사용하기ㅣ현재 위치, 주소 가져오기, 마커 표시하기 ➜  Next.js 에서 네이버 지도 api 사용해서 지도 그리기 - 현재 위치 좌표 가져오기, 좌표로 주소 데이터 가져오기, 특정 좌표에 마커 표시하기 지도 그리기 const mapRef = useRef(null);useEffect(() => { // 지도 그리기 if (!mapRef.current) { mapRef.current = new naver.maps.Map(mapId, { center: new naver.maps.LatLng(loc[0], loc[1]), zoom: initMapLevel, minZoom: 7, }); } }, []); return ( ); 1. useRef로 NaverMa.. 2025. 2. 17.
[Next.js] Supabase 타입 Type 설정과 적용 ➜ Supabase를 사용할 때 자동으로 타입 생성하는 방법 최소 필수 버전 v1.8.1. npm i supabase@">=1.8.1" --save-dev supabase 로그인 npx supabase login 로그인하면 아래와 같이 인증 번호 페이지로 이동하고, 이 번호를 복붙 해준다. supabase 초기화 npx supabase init 원하는 경로에 database.type.ts 파일 생성 npx supabase gen types typescript --project-id "$PROJECT_REF" --schema public > src/types/supabase/database.types.ts Project ID는 supabase 페이지 내 해당 프로젝트의 Project Settings - G.. 2025. 2. 14.
[Next.js] Supabase 연동ㅣ데이터 가져오기 supabase 연동을 위한 기본적인 준비 설치 npm install @supabase/supabase-js npm install @supabase/ssr supabase 클라이언트 라이브러리와 Next.js를 위한 패키지를 설치한다. .env.local 설정 // .env.localNEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URLNEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY .env.local 파일에 SUPABASE_URL, SUPABASE_ANON_KEY 환경변수를 저장한다. 이 키들은 vercel 내 프로젝트 - Project Settings - Environment Variables 에서 볼 수 있다. utils/supab.. 2025. 2. 13.

티스토리툴바