분류 전체보기 (60) 썸네일형 리스트형 [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년 전부터 서울로 상경해 개발자로서 직장 생활을 시작했다.당시에는 부족한 실력이나마 열심히 일하고 배우면 어엿한 개발자가 될 수 있을 거라 기대했다.대학생부터 이룬 결과들이 나의 자신감을 채웠고 하늘은 스스로 돕는 자를 돕는다 했으니 말이다.모든 순간에 맞이하는 사건들은 나에게 한 가지를 선택하길 바라왔고 최선을 다해 선택했다 자신한다.하지만 모든 선택이 올바랐다면 물경력이 되지 않았을 것이다. 되돌아보면 나는 준비되지 않은 채로 사회생활을 시작했다 생각한다.자신감에서 비롯된 시작은 요란한 소리를 만들어내기 바빴으니 그저 만용에 지나지 않았다.많은 선택의 기로에 서서 최선의 선택을 했.. [Identicon library] 랜덤 프로필 이미지 생성하기 개요#1. 기본 사용자 프로필 이미지 생성사용자 프로필을 구성할 때 이미지를 업로드 하기로 했다. 원하는 이미지를 프로필 사진으로 정하는 일반적인 방식인데만약 사용자가 이미지를 업로드 하지 않는다면 기본 이미지가 필요해진다. Github에서 사용하는 랜덤 프로필 이미지 생성기를 사용하면 좋겠다 생각해서 적용해봤다.라이브러리는 Identicon을 사용했다. GitHub · Change is constant. GitHub keeps you ahead.Join the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source communit.. [React Query] 응답 처리 ‐ API 함수 vs Callback(onSuccess onError) 역할 분리 개요#1. React Query Hook의 역할 정의 고민React Query를 사용하다 보면 아래와 같은 고민을 가지게 됐었다.응답(성공/실패) 처리 로직을 어디서 관리할 것인가? 프로젝트를 진행하면서 나는 queryFn/mutationFn와 같은 API 함수 내부에서 처리하도록 정의했다.export function useMyHook() { return useQuery({ queryKey: [...], queryFn: async () => { try { const response = await axios({ method: 'GET', url: '/v1/mypath' }); // == 성공 응답에 대한 별도 처리 .. 이전 1 2 3 4 ··· 8 다음