7강. 배포 후 URL, 링크, 정적 에셋, 새로고침 오류 점검

?1. 이번 강의에서 해결할 문제

Actions가 초록색이어도 잘못된 baseUrl, 대소문자, SPA 경로 문제로 실제 사용자는 빈 화면이나 404를 볼 수 있습니다.

✓2. 학습 목표

✓이 강의를 마치면

• 실제 배포 URL의 상태와 핵심 콘텐츠를 확인합니다.
• CSS·JS·이미지 정적 요청 실패를 찾습니다.
• 깊은 강의 URL 직접 접근과 새로고침을 점검합니다.

◇3. 핵심 개념

CI 성공은 artifact 게시까지의 증거이고 사용자 경로 동작은 별도 검증 대상입니다. 프로젝트 경로가 포함된 절대 URL, Network의 404, Console 오류, 직접 새로고침을 확인해야 합니다. Docusaurus가 정적으로 생성한 문서는 각 경로에서 직접 열려야 합니다.

✎4. 단계별 실습

1. PowerShell

실행 위치: 로컬 터미널

실행 전 확인: example-learner를 실제 공개 주소로 바꾸되 토큰은 사용하지 않습니다.

대상: 가상 Pages URL의 홈과 대표 문서

PowerShell

$site = "https://example-learner.github.io/dev-foundations"
Invoke-WebRequest -Uri "$site/" -Method Head
Invoke-WebRequest -Uri "$site/docs/curriculum" -Method Head

예상 결과: 실제 주소로 바꿨을 때 200 계열 응답과 콘텐츠 형식이 확인됩니다.

2. 브라우저

실행 위치: 배포된 Pages 사이트

실행 전 확인: 캐시 비활성화 상태의 Network와 Console을 엽니다.

대상: 홈·강의·사이드바·에셋·404

브라우저

1. 홈에서 대표 강의로 이동
2. 깊은 강의 URL을 주소창에 직접 입력
3. 새로고침
4. 모바일 폭에서 사이드바 열기
5. CSS·JS·이미지 404 확인
6. 존재하지 않는 경로의 404 확인

예상 결과: 직접 접근과 새로고침이 유지되고 정적 에셋 실패·치명적 Console 오류가 없습니다.

→5. 배포·운영 흐름이 동작하는 이유

브라우저는 HTML이 참조한 baseUrl 기준 CSS·JS를 추가 요청합니다. HTML이 200이어도 에셋 URL이 틀리면 화면이 깨지므로 Network와 화면을 함께 봐야 합니다.

!6. 자주 하는 실수와 안전한 해결법

!자주 하는 실수

• 실수: 홈 한 페이지만 확인 안전한 해결: 대표 강의와 깊은 링크·직접 새로고침을 포함합니다.
• 실수: 강력 새로고침으로 모든 문제를 캐시 탓으로 돌림 안전한 해결: 먼저 현재 배포 커밋과 실패 요청 URL을 기록합니다.
• 실수: 404 주소에서 자동 홈 이동만 구현 안전한 해결: 잘못된 링크를 숨기지 말고 명확한 404와 복귀 경로를 제공합니다.

✎7. 직접 실습

✎직접 실습

1. 실제 배포 주소의 홈과 대표 문서 상태를 확인합니다.
2. Network에서 정적 에셋 실패를 필터링합니다.
3. 모바일 사이드바·직접 새로고침·404 결과를 기록합니다.

실습 기록에는 변경 SHA, 실행 위치, 확인 대상, 예상 결과와 실제 결과를 남기고 실제 토큰·비밀번호·SSH 개인 키·.env 내용은 포함하지 않습니다.

?8. 이해 점검 질문 3개

?이해 점검

1. Actions 성공 후 실제 URL 검증이 필요한 이유는 무엇인가요?
2. HTML 200인데 화면이 깨질 때 무엇을 확인하나요?
3. 깊은 URL 새로고침은 어떤 배포 문제를 찾나요?

■9. 핵심 요약

■핵심 요약

배포 완료는 사용자 경로에서 확인해야 합니다. 홈, 깊은 문서, 새로고침, 모바일, 에셋, Console과 404를 한 체크리스트로 검증합니다.