jhphon0730

디시인사이드 같은 커뮤니티 사이트에 Next.js의 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)을 설계 1. 서버 사이드 렌더링(SSR) - 인기글/갤러리 메인 페이지서버 사이드 렌더링은 페이지를 서버에서 미리 렌더링해서 완성된 HTML을 보내주는 방식이에요.비유 대상: 디시인사이드의 인기글 목록, 갤러리 메인 페이지이유: 인기글은 많은 사람이 동시에 방문하는 페이지입니다. 빠르게 로딩되어야 하며 검색 엔진 최적화(SEO)도 중요SSR을 사용하면 서버가 데이터를 미리 가져와 렌더링해서, 페이지를 로드하는 즉시 내용이 보이는 장점이 있습니다.2. 클라이언트 사이드 렌더링(CSR) - 개별 게시글 상세 페이지클라이언트 사이드 렌더링은 페이지를 먼저 불러온 후, 클라이언트(브라우저)가 Ja..

기본 방식기본적으로 서버 사이드 방식과 클라이언트 사이드 방식을 모두 지원하는 하이브리드 프레임워크입니다. 즉, 어떤 방식으로 페이지를 렌더링할지는 개발자가 설정에 따라 선택할 수 있습니다. 기본적으로 Next.js는 SSG(Static Site Generation)와 SSR(Server-Side Rendering) 방식을 모두 제공하며, 클라이언트 사이드의 동적 기능도 지원요약기본적으로 서버 사이드 방식: Next.js는 서버 사이드에서의 페이지 렌더링을 기본적으로 제공하며, SSG와 SSR을 지원클라이언트 사이드 지원: Next.js는 또한 클라이언트 사이드 기능도 지원하며, 동적 임포트, 클라이언트 사이드 라우팅, API Routes 등 다양한 클라이언트 사이드 기술을 제공데이터 패칭 방식1. SS..

개발 버전 Docker Compose를 작성한 이유개발 환경에서 Docker Compose를 사용하면 소스 코드 변경 시 애플리케이션을 다시 빌드하거나 재실행할 필요가 없고, 그만큼 더 간편하고 효율적인 개발이 가능합니다. 개발 버전의 Docker Compose를 작성하는 이유는 바로 개발 중인 애플리케이션의 소스 코드 변경을 즉시 반영할 수 있기 때문입니다.1. 소스 코드 변경 시 재실행 불필요보통 개발 중에는 애플리케이션을 수정하고, 그 변경 사항을 반영하기 위해 매번 서버를 재시작하거나 빌드를 다시 해야 하는 번거로움이 있습니다. 그러나 Docker Compose를 활용한 개발 환경에서는 소스 코드와 컨테이너를 동기화해두기 때문에, 소스 코드만 수정하고 저장하면 자동으로 변경 사항이 컨테이너에 반영..

Docker Compose와 Dockerfile을 활용한 프론트엔드 & 백엔드 컨테이너 구성하기개발 환경을 구축하다 보면 프론트엔드와 백엔드가 서로 다른 환경에서 동작해야 할 때가 많습니다. 수동으로 설정을 반복하다 보면 시간 낭비는 물론 설정의 일관성도 무너질 수 있죠. 이를 해결하기 위해 Docker와 Docker Compose를 활용했습니다. 이번 포스팅에서는 React 기반의 프론트엔드와 Django 기반의 백엔드를 컨테이너화한 경험을 공유하겠습니다. 1. 개발 환경의 일관성 유지문제: 개발자마다 로컬 환경이 다를 경우, 환경 설정에 문제가 생기거나 의존성 오류가 발생할 수 있습니다.해결: Docker Compose는 프론트엔드(React), 백엔드(Django)를 각각 독립된 컨테이너로 실행하며..