본문 바로가기

전체 글43

iOS Safari에서 100vh(h-screen) 스크롤 문제 해결 ➜ 현재 상태 ✅ 전체 구조 : 스크롤 없이 화면 꽉 채움 [Next.js + Tailwind css]✅ 모바일 브라우저 사파리에서 테스트 시 100vh 적용 X + 스크롤 발생 문제 ➜ 원인사파리에서는 주소창, 탭바 등의 UI 요소까지 포함한 높이로 계산돼서실제 보이는 화면보다 더 크게 잡히기 때문➜ 해결 방법dvh 사용h-screen(= height : 100vh) 대신 h-[100dvh]를 사용하면, 실제로 사용자가 보고 있는 뷰포트 높이만을 기준으로 계산하기 때문에 Safari의 UI 변화(주소창 나타났다 사라짐 등)에 대응이 가능하다. svh (Short Viewport Height) 사용자 화면 기준 가장 짧은 뷰포트 높이 lvh (Large Viewport Height) 사용자 화면.. 2025. 6. 26.
[프로그래머스/JavaScript] Lv3. 길 찾기 게임 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr  function solution(nodeinfo) { const nodes = nodeinfo.map((node, idx) => ( { id: idx + 1, x: node[0], y: node[1], left: null, right: null }) ); // y값 내림차순, 같은 y일 경우 x값 오름차순으로 정렬 nodes.sort((a, b) => b.y - a.y || a.x - b.x); // 트리 구성 const root = nodes[0]; for (let i = 1; i   id 값 주고 루트.. 2025. 3. 24.
[프로그래머스/JavaScript] Lv2. 게임 맵 최단거리 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr  const BFS = (start, arr, target) => { let move = 1; const dx = [-1, 1, 0, 0]; const dy = [0, 0, -1, 1]; const n = arr.length; const m = arr[0].length; const visited = Array.from({ length: n }, () => Array(m).fill(false)); // 방문 체크 visited[start[0]][start[1]] = true; // 시작 지점 방문 처리 .. 2025. 3. 4.
[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.

티스토리툴바