Je개발 일지

렌더링은 작성한 코드를 사용자 인터페이스로 바꾸는 과정이다. React 와 Next.js 를 사용하면 서버 혹은 클라이언트에서 렌더링 할 수 있는 하이브리드 웹 어플리케이션을 만들 수 있다. 이번 섹션에서는 렌더링 환경, 전략, 런타임의 차이점을 이해하는데 도움을 준다. 1. 기본 시작하기에 앞서 세 가지 기본 웹 컨셉을 이해하는 것이 좋다. 환경 : 애플리케이션 코드가 실행될 수 있는 환경. 서버와 클라이언트 요청-응답의 라이프사이클 : 사용자가 애플리케이션을 방문하거나 상호 작용할 때 실행 네트워크 바운더리(경계): 서버 코드와 클라이언트 코드를 구분하는 경계 1-1) 렌더링 환경 웹 애플리케이션은 서버, 클라이언트 두 환경에서 렌더링 될 수 있다. 클라이언트라 함은 사용자 디바이스에 있는 브라우저다..

미들웨어는 요청이 완료되기 전에 코드를 실행한다. 그 다음 들어오는 요청을 기반으로 응답을 수정하거나, 다시 쓰거나, 리다이렉션하거나 request 혹은 response 의 헤더를 수정하거나 직접 응답할 수 있다. 미들웨어는 캐시된 내용과 경로가 일치하기 전에 실행된다. 1. 사용 사례 미들웨어를 어플리케이션에 통합하면 성능, 보안, 사용자 경험을 향상시킬 수 있다. 미들웨어가 특히 효과적인 시나리오는 다음과 같다. 인증 및 권한 부여 : 특정 페이지 혹은 API 경로에 액세스하기 전, 사용자를 식별하거 세션 쿠키를 체크한다 서버 사이드 리다이렉션 : 서버 수준에서 특정 조건에 따라 사용자를 리다이렉션 한다 경로 바꾸기 : 요청 속성에 따라서 API 경로 혹은 페이지에 대한 경로를 동적으로 다시 쓰도록 ..

인터셉트 라우트(Intercept Route) 는 현재 레이아웃 내에서 애플리케이션의 다른 부분에서 경로를 보여줄 수 있게 만든다. 이 패러다임은 사용자가 다른 컨텍스트를 전환하지 않고도 경로의 내용을 표시하고 싶을 때 유용하다. 예를 들어, 피드에서 사진을 클릭할 때 사진을 모달로 표시해 피드 위에 겹쳐서 보이게 할 수 있다. 이 경우, Next.js 는 `/photo/123` 의 경로를 가로채서 URL 을 가리고 /feed 위에 덮어 올린다. 하지만, 공유 가능한 URL 을 클릭하거나 페이지를 새로 고쳐서 사진으로 이동할 때는 모달 대신 전체 사진 페이지가 렌더링돼야 한다.(* /photo/123 으로 이동) 이런 경우에는 경로 가로채기가 일어나선 안 된다. 1. 규칙 경로를 가로채는 것은 (..) ..

병렬 라우트(Parallel Routes) 는 동일한 레이아웃 안에서 동시에 혹은 조건부로 하나 이상의 페이지를 렌더링할 수 잇다. 이 방법은 대시보드, 소셜 사이트 피드와 같이 동적인 앱에서 활용도가 매우 높다. 1. Slots 병렬 라우트는 이름이 있는 slot에서 생성된다. slots 은 @ 기호를 사용해서 만든다. 예를 들어, 아래의 파일 구조는 두 개의 슬롯, @analytics 와 @team 으로 구성된 구조다. 슬롯은 부모 레이아웃에 props 로 전달된다. 위의 예시에서, `app/layout.js` 컴포넌트는 이제 @analytics 및 @team 슬롯을 props 로 넘겨 받아 자식 props 와 함께 병렬로 렌더링할 수 있다. // TypeScript export default fun..