Web (5) 썸네일형 리스트형 [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 조작을.. [CSS] 선택자 (Selector) 개요회사에서 SCSS를 통해서 웹 스타일을 관리하고 있다.프론트엔드에 익숙하지 않았기 때문에, 특수문자가 조합된 선택자나 연산자를 이해하기 어려웠고,겹쳐 있는 HTML 구조에서 hover 이벤트 하나 처리하는 데도 많은 시간이 걸렸다. 작업을 마치고 나서야, 몰랐던 부분이 CSS 선택자(Selector)라는 것을 알았고, 이번 기회에 정리해 두면 좋겠다고 생각했다.CSS 선택자는 HTML 요소를 선택해 스타일을 지정할 때 사용하는 기본 도구이다.이 글에서는 스스로가 중요하다고 생각하는 선택자들을 중심으로 간단하게 소개하고자 한다.내용#1 전체 선택자 (*)* { box-sizing: border-box; margin: 0; padding: 0;}모든 요소에 기본 스타일을 적용할 때 자주 사용한다.#.. 이전 1 다음