예외 처리

(이 글은 Next.js App Router 15.2.4 버전을 기준으로 작성되었으며 제가 직접 진행한 실험을 토대로 개인적인 추측과 가설이 포함되어 있습니다. 상황의 이해를 위해 아래 링크된 이전 글을 읽고 오시길 권해드립니다.) 재발한 이슈이번에 포트폴리오의 내비게이션 바를 구현하면서 발생한 이슈입니다. 다른 페이지(/project/1)에서 메인 페이지(/)로 router.push의 방식으로 이동하면 다시 인터섹션 옵저버가 id를 감시하지 못합니다. 어? 이건 지난 글에서 나온 현상과 동일한데요? 새로고침 후에 옵저버가 감시할 id를 찾지 못해서 스크롤 이동을 감지하지 못하는 현상 말입니다. 그래서 그 당시 id도 비동기 서버 컴포넌트 밖으로 빼는 것으로 해결했었죠. [Next.js] App ..

+) 이 글은 JavaScript 카테고리에 속해있지만 사실 Web API는 자바스크립트라는 언어에 국한되는 기능은 아닙니다. (ex) Web Assembly) 이 이슈도 지난 글에 언급했지만 분량이 길어질 것 같아서 분리했습니다. [React] Intersection Observer의 Stale Closure(오래된 클로저) 이슈 useRef로 해결하기(이 글은 Next.js App Router 15 버전 프로젝트를 기준으로 작성되었습니다.) 내비게이션 바제 포트폴리오에서 구현한 내비게이션 바입니다. 여기서는 2가지의 스크롤 이벤트가 발생합니다. (아래 Aboutunhandled.tistory.com 이번 글은 매우 간단합니다. 제가 Intersection Observer의 threshold 옵션을 ..

(이 글은 Next.js App Router 15 버전을 기준으로 작성되었으며 직접 진행한 실험을 토대로 제 개인적인 추측이 포함되어 있습니다. 그러므로 정확하지 않은 가설이 포함되어 있을 수 있습니다.) 지난 글을 읽고 오셨을까요? [React] Intersection Observer의 Stale Closure(오래된 클로저) 이슈 useRef로 해결하기(이 글은 Next.js App Router 15 버전 프로젝트를 기준으로 작성되었습니다.) 내비게이션 바제 포트폴리오에서 구현한 내비게이션 바입니다. 여기서는 2가지의 스크롤 이벤트가 발생합니다. (아래 Aboutunhandled.tistory.com 혼란스러운 테스트 결과아래 내용은 이전 포스팅에서 작성했던 글입니다. (본문에는 포함되지 않았죠.)..

(이 글은 Next.js App Router 15 버전 프로젝트를 기준으로 작성되었습니다.) 내비게이션 바제 포트폴리오에서 구현한 내비게이션 바입니다. 여기서는 2가지의 스크롤 이벤트가 발생합니다. (아래 About Me 버튼의 상태가 포커스 된 상태입니다.) 1. 내비게이션 바 섹션 버튼 클릭 시 클릭한 버튼 포커스하고 해당 섹션으로 스크롤 이동 2. 스크롤 이동시 스크롤 위치를 감지해서 내비게이션 바 포커스 상태 변경 (화면 캡처 프로그램이 한 템포 느려서 버벅거리는 것처럼 녹화되었으나 실제로는 그렇지 않습니다.) 내비게이션 바 디버깅 위 두 개의 기능 중에 1번 기능에서 버그가 발생했습니다. 1. 내비게이션 바 섹션 버튼 클릭 시 클릭한 버튼 포커스하고 해당 섹션으로 스크롤 이동2. 스크롤 이동시..

(이 포스팅은 Next.js App Router 15 버전을 기준으로 작성되었습니다. 라우터 캐시의 경우 15 버전을 기준으로 이전 버전과 동작 양상이 다릅니다. 이전 버전을 사용하시는 분들은 참고해 주세요.) (클라이언트) 라우터 캐시 이 부분에 대해 피그마로 번역버전을 만들어봤습니다. 캐시 레이어 다이어그램 아래는 정적 렌더링 기준으로 캐시가 어떻게 상호작용하고 동작하는지를 보여주는 다이어그램입니다. 제가 체크한 부분이 바로 (클라이언트) 라우터 캐시입니다. App Router의 독자적인 캐시들 중 라우터 캐시가 다른 캐시들과 다른 점은 유일하게 클라이언트 사이드에서 동작한다는 것입니다. (Request Memoization은 App Router의 독자적인 기능이 아니라 리액트 차원에서 제공하..

(이 글은 Next.js App Router 15 버전을 기준으로 작성되었으며 현 시점 실험적 기능인 ppr(Partial Prerendering)을 사용하지 않았습니다.) 데이터 페칭시 cache 옵션 부여지난 포스팅에서 "데이터 fetch시 cache: no-store 옵션을 추가했는데도 html파일이 생성된다." "이상하다. 제 예상과 다르다"라고 언급한 적이 있습니다. [Next.js] App Router의 클라이언트 컴포넌트의 자바스크립트는 서버에서 실행될 수도 있다사실 제목 자체는 관심을 끌기 위한 문장입니다. 세부사실을 명시하지 않았죠. 결론부터 말하자면 클라이언트 컴포넌트의 “일부 자바스크립트”는 서버에서 실행될 수도 있고 실행되지 않을unhandled.tistory.com 아래는 위 ..

(이 포스팅은 Next.js App Router 15 버전을 기준으로 작성되었으며, 제 주관적인 추측과 확실하지 않은 가설에 관한 내용이 대부분입니다. 그러므로 명백하고 정확한 정보를 원하신다면 적합한 글이 아닐 가능성이 높습니다.) 이 탐구는 며칠 전 같은 페이지라도 주소창 접근 시와 클라이언트 사이드 내비게이션으로 접근 시 반환하는 데이터가 다르다는 (공식문서에 대놓고 적혀있는) 놀라운 사실을 알게 된 후 즉흥적으로 해본 실험에서 시작되었습니다. 페이지가 정적 렌더링 된다면한 페이지가 정적 렌더링(빌드타임 렌더링)되면 그 경로에 대응되는 파일이 빌드 폴더에 생성됩니다. 예를 들어 app/list/page.tsx가 존재하고 이 페이지가 정적 렌더링 된다면 .next/server/app/list.htm..

(이 글은 Next.js App Router 15 버전을 기준으로 한 포스팅입니다.) 평소처럼 테스트를 하다가 이상한 현상을 마주했습니다. DB 업데이트Supabase에서 데이터베이스를 업데이트했습니다. 프로젝트 데이터가 몇 개 더 추가되었죠. 이 페이지는 정적 렌더링(빌드타임 렌더링)되므로 데이터베이스를 업데이트해도 새로 빌드하기 전에는 이전 stale 한 목록을 보여줄 것입니다. 프로덕션 환경에서 새로운 데이터를 보고 싶다면 빌드를 해야 합니다. npm run buildnpm start 빌드 후 프로덕션 환경하지만 이상했습니다. 여전히 같은 목록을 보여주고 있군요. 로컬 개발 환경에서는 정적 렌더링 페이지도 동적 렌더링 방식과 유사하게 동작해서 그런 것 같습니다. 해결법빌드 폴더를 삭제하고 다시 빌..

(Next.js App Router 15 버전을 기준으로 작성한 포스팅입니다.) window is not defined (윈도우 객체가 정의되지 않았습니다.) ⨯ ReferenceError: window is not defined Next.js App Router를 사용해 본 적 있는 개발자라면 무조건 한 번은 마주쳤을 에러라고 생각합니다. 저도 여러 번 마주했지만 그때마다 이 에러의 정확한 발생 원인은 모르고 "window가 undefined이면.." 이런 조건문을 넣어서 해결했던 것으로 기억합니다. 이 에러가 왜 발생하는지 찾아보면 "SSR이 발생하기 때문이다." "리액트 컴포넌트가 마운트 되기 전에 윈도우 객체를 찾으려고 해서 그렇다."라는 이유가 주로 보입니다. 물론 이도 맞는 말이지만 좀 더 ..

사실 제목 자체는 관심을 끌기 위한 문장입니다. 세부사실을 명시하지 않았죠. 결론부터 말하자면 클라이언트 컴포넌트의 “일부 자바스크립트”는 서버에서 실행될 수도 있고 실행되지 않을 수도 있다. 가 맞습니다. 무슨 소리냐고요? 같이 보시죠. (매우 깁니다!) 클라이언트 컴포넌트의 렌더링 방식저는 원래 클라이언트 컴포넌트는 서버에서 HTML+CSS를 기반으로 화면을 그리고(프리렌더링) 해당 컴포넌트의 자바스크립트 코드는 JS번들의 형태로 프리렌더링 결과물과 같이 RSC Payload의 형태로 변환된 후 클라이언트에 전송된다고 생각하고 있었습니다. 저는 클라이언트 컴포넌트의 자바스크립트 코드는 "서버"에서 전혀 실행되지 않는다고 생각했었습니다. 서버에서의 프리렌더링 과정에 자바스크립트의 실행은 절대적으로 배..