프론트엔드 품질과 배포
10주 기능·직접 URL·접근성·권한·빌드를 점검하고 선택적으로 Tailwind 적용하기
10주 결과물: 핵심 흐름을 끝까지 확인하기
React 5–9주의 컴포넌트·상태·라우팅·타입·데이터 연동을 실제 사용 흐름으로 묶습니다. 이번 문서의 중심은 품질과 배포 준비입니다. Tailwind는 선택 도구이며 이미 작성한 CSS를 모두 교체할 필요는 없습니다. Next.js로 전환하는 것도 기본 과정의 필수 조건이 아닙니다.
목록→검색→상세→자신의 데이터 변경→결과 확인 중 팀의 실제 서비스 흐름 하나를 정합니다. 서로 다른 주차의 독립 예제를 붙일 때 ID 타입, 데이터 필드, 인증 신원, URL 계약을 먼저 맞춥니다. 예를 들어 정수 ID 예제를 Supabase UUID 테이블에 연결한다면 Router의 ID 검증도 UUID 계약으로 바꿔야 합니다.
품질을 확인할 순서
| 검사 | 실제로 할 행동 | 통과 조건 |
|---|---|---|
| 기본 기능 | 검색·추가·수정·삭제 후 다시 조회 | 화면과 저장 데이터 일치 |
| 직접 URL | 상세 주소를 새 탭에서 열고 새로고침 | 의도한 상세 또는 404 |
| 빈 데이터 | 빈 목록·검색 결과 없음 | 이유와 다음 행동 안내 |
| 실패 | 네트워크 차단·잘못된 입력 | 오류 후 다시 시도 가능 |
| 권한 | A·B 계정으로 같은 ID 요청 | 타인 데이터 읽기·변경 차단 |
| 반응형 | 360px·1280px·200% 확대 | 내용 겹침·가로 넘침 없음 |
| 키보드 | Tab·Enter·Escape | 포커스 표시와 자연스러운 이동 |
타입 검사는 외부 JSON의 실제 값을 검증하지 않고 숨긴 버튼은 서버 권한을 보호하지 않습니다. 9주 RLS 검사를 최종 앱에서도 반복합니다. 화면에 드러나지 않는 데이터 요청도 Network에서 확인합니다.
Tailwind를 선택한 경우
아래는 Tailwind 4 계열의 Vite 플러그인 방식입니다. 기존 프로젝트가 다른 버전·PostCSS 구성을 쓰면 중복 설치하지 말고 현재 설정을 따릅니다.
npm install tailwindcss @tailwindcss/vitevite.config.js 또는 TypeScript 프로젝트의 vite.config.ts에서 기존 React 플러그인을 유지합니다.
import { defineConfig } from 'vite';import react from '@vitejs/plugin-react';import tailwindcss from '@tailwindcss/vite';
export default defineConfig({ plugins: [react(), tailwindcss()],});main에서 이미 불러오는 src/index.css의 맨 위에 @import "tailwindcss";를 추가합니다. Tailwind의 기본 스타일 적용으로 기존 화면이 달라질 수 있으므로 별도 브랜치에서 비교하고 필요한 경우 도입 범위를 조정합니다.
다음은 기존 React 컴포넌트 return 안에 사용할 수 있는 버튼 조각입니다. 독립된 전체 앱 예제가 아닙니다.
<button type="submit" className="rounded-md bg-blue-700 px-4 py-2 text-white hover:bg-blue-800 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-700 disabled:opacity-50"> 저장</button>클래스 문자열을 bg- + color + -700처럼 부분 조합하면 소스 탐색에서 필요한 클래스가 생성되지 않을 수 있습니다. 상태별 완전한 클래스 문자열을 매핑합니다. 유틸리티를 사용해도 의미 있는 HTML·색 대비·포커스·콘텐츠 규칙은 직접 검토해야 합니다.
성능은 사용자 흐름에서 측정하기
먼저 개발자 도구 Network에서 같은 요청 반복, 과도하게 큰 이미지, 초기 화면에 필요 없는 다운로드를 찾습니다. 느리다는 추측만으로 모든 함수에 memo를 추가하지 않습니다.
- 이미지에는 표시 크기를 정하고 필요한 해상도를 사용합니다.
- 파생 가능한 필터 결과를 별도 state와 Effect로 동기화하지 않습니다.
- 이벤트·타이머·요청을 만든 Effect에는 필요한 정리를 둡니다.
- 데이터 목록이 실제로 커졌을 때 페이지네이션·가상화를 검토합니다.
- 탭 이동·뒤로 가기·재시도에서 중복 요청과 오래된 응답을 확인합니다.
수정 전후 같은 환경과 입력으로 측정하고 관찰하지 않은 성능 향상 수치를 발표하지 않습니다.
빌드와 배포 확인
Vite 프로젝트에서 실행합니다.
npm run buildnpm run previewpreview는 로컬에서 빌드 결과를 확인하는 도구입니다. 운영 서버를 대신하지 않습니다. 배포 대상에는 프레임워크·빌드 명령·출력 디렉터리와 환경변수를 프로젝트에 맞게 설정합니다. 일반적인 Vite 출력은 dist이지만 실제 설정을 확인합니다.
BrowserRouter를 사용하면 호스팅에서 앱 경로를 index.html로 전달하는 SPA fallback이 필요할 수 있습니다. /members/실제ID 직접 새로고침을 배포 주소에서 반드시 확인합니다. 정적 에셋과 실제 API 경로까지 잘못 덮어쓰는 rewrite는 피합니다.
환경변수의 VITE 값은 클라이언트 번들에 포함될 수 있습니다. Supabase publishable key는 RLS와 함께 사용하고 secret·servicerole 키는 넣지 않습니다. 인증 리디렉션 URL과 허용 origin도 실제 배포 주소에 맞춰 확인합니다.
세션 진행과 완료 기준
권장 120분: 범위 확정 15분, 통합 35분, 실패·권한 검사 30분, 빌드·배포 확인 25분, 발표 15분입니다. 배포 계정 준비가 안 되어 있다면 로컬 빌드 검증과 남은 배포 조건을 구분해 기록합니다.
최종 제출물은 저장소·실행 방법·실제 검증 결과·접속 가능한 결과 링크 또는 로컬 시연·알려진 한계입니다. 완료 기준은 다른 팀원이 주요 흐름을 재현하고 직접 URL·오류·권한을 설명하는 것입니다. 다음 기술 학습은 이 결과를 기준점으로 시작합니다.
더 읽어보기
연결된 PBL 미션과 VOD
| 주차·미션 | 참고 VOD 범위 |
|---|---|
| 10주 · 최종 완성 | 리액트 실무 9장 |
7–9주의 VOD 표시는 외부 상호작용·서버 연동·앱 제작 범위를 함께 안내합니다. Router·TypeScript·Supabase의 세부 API는 각 공식 문서로 보완합니다.
강좌 안내: 참고 강좌 1 · 참고 강좌 2. 이 문서는 영상 전체를 옮긴 전사 자료가 아닙니다. 세부 내용은 위 공식 문서에서 확인합니다.