예외 처리

(이 글은 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의 형태로 변환된 후 클라이언트에 전송된다고 생각하고 있었습니다. 저는 클라이언트 컴포넌트의 자바스크립트 코드는 "서버"에서 전혀 실행되지 않는다고 생각했었습니다. 서버에서의 프리렌더링 과정에 자바스크립트의 실행은 절대적으로 배..

MPA(Multi Page Application)SPA 등장 이전의 방식(JSP, vanilla JS(+jquery)) 은 MPA(Multi Page Application)이었습니다. 이 방식은 페이지 이동 시 서버에서 새로운 HTML을 직접 그려서 클라이언트로 보내줍니다.(이것이 전통적인 SSR입니다.) 페이지 전체를 새로 로드하니 필연적으로 시각적인 깜빡임이 있을 수밖에 없었습니다. SPA(Single Page Application)리액트, 뷰, 앵귤러 등 SPA 라이브러리(또는 프레임워크)의 등장은 극적인 패러다임의 변화를 가져왔습니다. SPA의 등장은 사용자 경험의 향상과 개발 편의성을 크게 안겨주었고, 이 시기부터 프론트엔드 분야는 정말 독자적인 전문성을 본격적으로 가질 수 있게 되었습니다. ..

이전의 EC2로 Next.js 배포하기 포스팅 [AWS EC2] Next.js 프로젝트 배포하기 (ubuntu + nginx + pm2) [AWS EC2] Next.js 프로젝트 배포하기 (ubuntu + nginx + pm2)들어가기 전에 다음 과정은 매우 간단한 Next.js App Router 프로젝트를 배포하는 과정입니다. AWS 가입 과정, 탄력적 IP연결, HTTPS설정, 도메인 등록, Docker 사용, 환경 변수 관리 등의 내용은 이 글에 포unhandled.tistory.com 위 포스팅은 AWS EC2에서 Next.js를 배포하는 과정을 담은 글입니다. 글에는 EC2 인스턴스 가상 서버 위에 nvm(Node.js)를 설치하는 과정이 있습니다. (nvm은 여러 버전의 노드를 쉽게 swit..