React 슬롯 기반 레이아웃 렌더링 만들기
중급45분2026-06-15
챗봇 테스트 상태, 업데이트 점검, 응답 확인 정보를 React의 Slot/Outlet 패턴으로 화면에 느슨하게 연결하고, SSR에서는 head 정보를 HTML 문서에 주입하는 구조를 만듭니다. Vite 기반 React SPA 예제와 Express 형태의 SSR 예제, 그리고 Layout·HomePage·Page·renderPage 코드 파일을 생성합니다.
이 실습은 터미널에서 진행됩니다
오른쪽 패널에서 설치 명령어를 복사하세요이런 걸 배워요
- Slot과 Outlet으로 화면 콘텐츠 위치를 분리할 수 있습니다.
- 운영 상태 화면의 제목과 본문 배치를 재사용 가능한 구조로 정리할 수 있습니다.
- SSR 렌더링에서 head 슬롯을 HTML 문서에 주입하는 흐름을 이해할 수 있습니다.
- 요청마다 분리된 렌더링 클라이언트를 사용해야 하는 이유를 설명할 수 있습니다.
어떻게 진행해요
1. 실행 환경 확인
2. 예제 앱 뼈대 준비
3. 화면 슬롯 구조 작성
4. 여러 슬롯 출력 방식 조정
5. 문서 제목 주입 렌더러 작성
6. 빌드와 렌더링 확인
7. 운영 점검 내용 맞춤화
8. 인수인계 문서 정리
AI 튜터가 각 단계를 하나씩 안내해줄 거예요