분류 전체보기 (64) 썸네일형 리스트형 [Caching] 캐싱과 TTL 적용으로 API 중복 호출 줄이기 들어가며지난 포스팅에서 Fuse.js를 활용해서 검색 기능을 개선할 수 있었다. [Fuse.js] 라이브러리 도입 후 겪은 검색 UX 이슈와 해결 과정들어가며기존에는 지역명과 위치 정보가 강하게 결합된 JSON 데이터에 의존하고 있었다.이후 Kakao Local API를 활용하면서, 지역명으로 위·경도를 조회할 수 있게 되었고검색용 데이터와 좌표 데이meal-coding.tistory.com 개선 목표를 4가지로 정의하고 이 중에서 3가지 목표를 달성했으며, 1가지가 남은 상황이다. [ ✅ ] 1️⃣ 일부 오타 허용[ ✅ ] 2️⃣ 연관성 높은 검색 결과 제공[ ✅ ] 3️⃣ 부분 검색 지원을 통한 하이라이트[ ] 4️⃣ 캐시와 TTL을 통해 Kakao Local API 중복 호출을 줄이고 .. [Fuse.js] 라이브러리 도입 후 겪은 검색 UX 이슈와 해결 과정 들어가며기존에는 지역명과 위치 정보가 강하게 결합된 JSON 데이터에 의존하고 있었다.이후 Kakao Local API를 활용하면서, 지역명으로 위·경도를 조회할 수 있게 되었고검색용 데이터와 좌표 데이터를 분리해서 다룰 수 있게 됐다. Kakao Local API를 사용해서 지역명으로 위/경도를 구해올 수 있었으니 더 이상 json에서지역 정보를 가지고 있을 필요가 없었기 때문이다. [카카오 API] 위치 기반 날씨 앱 구현기 — 좌표와 지역명 매핑 문제를 카카오 API로 해결하기들어가며수행 과제로 날씨 애플리케이션을 개발하게 되었고, 요구 기능 중 다음 두 가지를 해결해야 했다.1. 사용자의 현재 위치 정보(위/경도, 지역명)와 날씨 정보를 출력2. 지역명을 검색하여meal-coding.tistor.. [카카오 API] 좌표와 지역명 매핑 문제를 카카오 API로 해결하기 들어가며수행 과제로 날씨 애플리케이션을 개발하게 되었고, 요구 기능 중 다음 두 가지를 해결해야 했다.1. 사용자의 현재 위치 정보(위/경도, 지역명)와 날씨 정보를 출력2. 지역명을 검색하여 해당 지역의 날씨 정보를 출력 사용자의 현재 위치는 브라우저에서 기본 제공하는 Geolocation API를 사용하면 확인할 수 있다. Geolocation API 사용하기 - Web API | MDN developer.mozilla.org Geolocation API 예제navigator.geolocation.getCurrentPosition((position) => { doSomething(position.coords.latitude, position.coords.longitude);}); 위/경도는 확인했으.. [Tailwind] inline style처럼 보이는 Tailwind를 cn, cva로 구조화 하기 들어가며채용공고를 보면 기술스택에 공공연하게 Tailwind를 볼 수 있다.모르기가 힘들 정도로 프런트엔드에서는 대중화되어 있다는 상태라서 도저히 외면할 수가 없었다. 공식문서 랜딩 페이지에서 정의하는 Tailwind의 간단 소개를 보면 이렇게 이해할 수 있다. Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.tailwindcss.com유틸리티를 최우선으로 생각하는 클래스 기반의 CSS 프레임워크로, "flex", ".. [Next.js] 서버 액션(Server Action) 들어가며웹 서비스를 만들다 보면 아주 자연스러운 흐름을 기대하게 된다.사용자가 버튼을 클릭하면 데이터가 저장되고, 저장된 결과가 반영된 최신 목록이 바로 다시 보이기를 말이다. 즉, 우리가 원하는 흐름은 대부분 다음과 같다.버튼 클릭 → 서버로 데이터 전송 → 목록 갱신 기존 방식에서는 이 흐름을 구현하기 위해REST API 설계부터 요청/응답 처리, 상태 관리까지 여러 단계를 거쳐야 했다. 하지만 Next.js App Router에서는 서버 액션(Server Action)을 활용하면 이 과정을 훨씬 단순하게 구성할 수 있다. 이번 글에서는 서버 액션이 무엇인지, 그리고 왜 이렇게 간단하게 동작하는지 정리해 보려고 한다.내용#1. 서버 액션(Action)이란?서버 액션은 폼 제출이나 데이터 변경과 같은 .. [Next.js] 스트리밍(Streaming)과 스켈레톤(Skeleton) - loading.txs, Suspense 개요Next.js App Router를 사용하다 보면 로딩 UX를 어떻게 구성해야 할지 한 번쯤 고민하게 된다. 처음에는 loading.tsx만 사용해도 충분할 것처럼 보인다.하지만 실제로 적용해 보면 예상과 다른 동작들이 존재하고,특히 검색 페이지나 데이터 변경이 잦은 화면에서는 한계가 느껴진다. 이번 글에서는스트리밍(Streaming)이 왜 필요한지loading.tsx와 Suspense의 차이Skeleton UI는 언제 쓰는 게 좋은지공부하면서 느낀 관점으로 정리해 보려고 한다.내용#1. 스트리밍(Streaming)이 필요한 이유Next.js는 기본적으로 서버에서 모든 컴포넌트를 렌더링한 뒤 완성된 HTML을 브라우저로 전달한다. 이 구조 자체는 SEO나 초기 렌더링 측면에서는 장점이 있지만,문제는 .. [Next.js] App Router에서 error.tsx를 쓰다가 try/catch로 돌아온 이유 개요App Router에서는 'error.tsx'를 통해 공통 에러 처리를 쉽게 구성할 수 있다.'error.tsx'는 단순 에러 화면이 아니라 route segment 단위로 동작하는Error Boundary 역할을 수행하기 때문에 에러 처리 범위를 비교적 명확하게 나눌 수 있는 구조다. 처음에는 segment마다 'error.tsx'를 배치하면에러 처리 구조를 깔끔하게 설계할 수 있을 것이라 생각했다.(Next.js 공식 문서에서도 권장하는 방향) 하지만 실제로 적용해 보니 부분적인 에러 처리를 위해 route 구조를 계속 세분화하게 되었고,결국 관리 포인트가 늘어나는 상황도 경험하게 됐다. App Router에서 'error.tsx'를 어떻게 사용하는 게 적절한지 고민하면서실제로 느꼈던 몇 가지 상.. [Next.js] App Router 데이터 fetching 구조와 에러 핸들링 개요Next.js App Router를 사용하면서 기존 Page Router 방식과 데이터 fetching 구조가 크게 달라졌다. 이전에는 getServerSideProps, getStaticProps를 통해 서버 데이터를 가져왔다면App Router에서는 서버 컴포넌트가 직접 fetch를 수행한다. 이번 글에서는 다음 내용을 정리한다.Page Router와 App Router 데이터 페칭 차이서버 컴포넌트 에러 처리 방식error.tsx 동작 구조 (Error Boundary)실수하기 쉬운 error.tsx 배치 예시내용#1. Page Router에서의 데이터 fetching기존 Page Router에서는 서버 데이터 fetching을 위해 아래 함수를 사용했다. Page Router 데이터 fetch.. 이전 1 2 3 4 ··· 8 다음