분류 전체보기 (62) 썸네일형 리스트형 [카카오 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.. [React] useRef()로 DOM 참조하기 개요얼마 전에 라이브 코딩테스트를 치는데 부끄럽게도 풀지 못한 문제가 있었다.심지어는 Next.js 책을 읽고 있는데 동일한 유형의 예제 코드가 보여서실수하지 않고자 배운 점을 글로 남긴다.내용#1. useRef()란Reference의 약자로 Ref이라는 단어를 포함하고 있는 React 제공 훅이다. 이름에서도 알 수 있듯이 어떤 대상을 참조하기 위한 객체를 생성하는 훅이며,대표적으로 HTML의 DOM Element를 참조할 때 사용한다. HTML과 JavaScript에 익숙하면 getByElementId() 메서드나querySelect(), querySelectAll() 메서드를 많이 사용해 봤을 것이다. 이러한 메서드들은 DOM Element의 참조를 가져와 JavaScript에서 직접 DOM 조작을.. 3년을 겪고 맞이하는 전환점 이직을 준비하면서 예상보다 좋지 못한 결과들을 마주하게 됐다.문제점을 찾아보고 스스로에게 내린 결론은 "물경력"이었다. 3년 전부터 서울로 상경해 개발자로서 직장 생활을 시작했다.당시에는 부족한 실력이나마 열심히 일하고 배우면 어엿한 개발자가 될 수 있을 거라 기대했다.대학생부터 이룬 결과들이 나의 자신감을 채웠고 하늘은 스스로 돕는 자를 돕는다 했으니 말이다.모든 순간에 맞이하는 사건들은 나에게 한 가지를 선택하길 바라왔고 최선을 다해 선택했다 자신한다.하지만 모든 선택이 올바랐다면 물경력이 되지 않았을 것이다. 되돌아보면 나는 준비되지 않은 채로 사회생활을 시작했다 생각한다.자신감에서 비롯된 시작은 요란한 소리를 만들어내기 바빴으니 그저 만용에 지나지 않았다.많은 선택의 기로에 서서 최선의 선택을 했.. 이전 1 2 3 4 ··· 8 다음