dev_in 개발 블로그

MenuMate 프로젝트의 레시피 페이지 UI를 어느 정도 구현하고 제대로 동작하는지 실험해보고 있었습니다.음식의 이미지, 이름, 재료 정보, 조리 순서가 제대로 불려와 렌더링 되고 있음을 확인했습니다. 혹시나 하여 다른 레시피의 경우도 살펴봤습니다. 몇 번은 문제가 없었으나 어느 순간 레시피 페이지가 렌더링 되지 않고 런타임 에러가 발생했습니다. 문제 상황 인식런타임 에러의 에러 메시지는 다음과 같았습니다.Invalid src prop (https://www.foodsafetykorea.go.kr/common/ecmFileView.do?ecm_file_no=...) on `next/image`, hostname "www.foodsafetykorea.go.kr" is not configured기존에는..

Streaming SSR Streaming SSR은 서버에서 렌더링된 HTML을 한 번에 완성해서 보내는 방식이 아니라, 준비된 부분부터 점진적으로 스트리밍해서 클라이언트에 전달하는 기술입니다. 이를 통해 사용자는 페이지의 중요한 콘텐츠를 더 빠르게 확인할 수 있습니다.기존 SSR은 서버에서 모든 데이터를 처리한 뒤 완전한 HTML을 전송하는 반면, Streaming SSR은 서버가 데이터를 준비하는 즉시 HTML 조각을 스트림 형태로 보내고, 클라이언트는 이를 실시간으로 렌더링합니다. React 18에서는 renderToPipeableStream API를 통해 구현할 수 있으며, 이 API는 서버에서 HTML을 조각 단위로 스트리밍할 수 있도록 지원합니다. 예를 들어, onShellReady 옵션을 사..

서버 컴포넌트는 리액트 18 버전에서 도입된 새로운 기능입니다. 기본적으로 클라이언트에서 실행되는 기존의 리액트 컴포넌트와 다르게 서버에서만 렌더링되는 컴포넌트를 말합니다. 서버에서만 실행되기 때문에 브라우저 쪽 번들 크기를 줄이고, 초기 로딩 속도를 개선하는 데 큰 장점이 있습니다.예를 들어, 서버 컴포넌트는 데이터베이스나 API에서 데이터를 가져오는 작업을 서버에서 처리하고, 그 결과를 클라이언트로 보낼 수 있어서 클라이언트와 서버 간의 데이터 통신을 줄일 수 있습니다. 그래서 클라이언트는 필요한 HTML과 JSON만 전달받아 렌더링하면 됩니다.또한, 서버 컴포넌트는 보안 측면에서도 강점이 있습니다. 데이터베이스 연결 정보나 API 키 같은 민감한 정보를 클라이언트로 보내지 않아도 되는 구조라 안전하..