DOCS/journey/troubleshooting/251223_blog_series_api_not_executing.md

블로그 시리즈 API 요청이 브라우저에서 실행되지 않는 문제

날짜: 2025-12-23 작성자: Claude (AI) 태그: frontend, backend, api, troubleshooting, wikidocs-blog 상태: 🔴 미해결

---

문제 상황

블로그 목록 페이지(/goosefarm/blog)에 시리즈(책) 섹션을 추가하려고 시도했으나, 시리즈 API 요청이 브라우저에서 실행되지 않는 문제 발생.

• 시리즈 API는 정상 작동 (curl 테스트 통과)
• 시리즈 섹션이 표시되지 않음
• 브라우저 네트워크 탭에 /goosefarm/api/books 요청이 나타나지 않음

---

확인된 사항

✅ 정상 작동하는 부분

1. 시리즈 API 정상 작동

   • curl https://ro-being.com/goosefarm/api/books → HTTP 200
   • 데이터 정상 반환: {"items": [{"id": "...", "title": "점프 투 파이썬", ...}], "total": 1}

2. 백엔드 라우터 등록 확인

   • book.router가 app.py에 포함됨
   • 라우터 경로: /api/books

3. 빌드된 파일에 코드 포함

   • /var/www/html/goosefarm/assets/*.js에 "api/books" 문자열 확인
   • 빌드 및 배포 완료

4. 프론트엔드 코드 수정 완료

   • BlogPage.tsx에 시리즈 fetch 로직 추가
   • 시리즈 섹션 렌더링 코드 포함

❌ 문제가 있는 부분

1. 브라우저에서 API 요청이 실행되지 않음

   • 네트워크 탭에 /goosefarm/api/books 요청 없음
   • 브라우저 콘솔에 디버깅 로그 없음

2. 시리즈 섹션이 표시되지 않음

   • books.length > 0 조건이 false
   • 시리즈 포스트들이 개별 포스트로 표시됨

---

시도한 해결 방법

1. 코드 단순화

   • async/await → Promise.then()으로 변경
   • 독립적인 fetch 함수를 직접 호출로 변경

2. 디버깅 로그 추가

   • console.log('Fetching books...') 추가
   • console.log('BlogPage useEffect 실행됨') 추가
   • 컴포넌트 렌더링 로그 추가

3. 로딩 상태 관리 개선

   • booksLoaded, blogsLoaded 플래그 추가
   • 두 요청 완료 후 로딩 해제

4. 빌드 및 배포

   • 여러 번 재빌드 및 배포 시도
   • 빌드된 파일 확인

5. 브라우저 새로고침

   • 일반 새로고침 (F5)
   • 강제 새로고침 (Ctrl+F5)

---

현재 상태

• 코드: 정상 (시리즈 fetch 로직 포함)
• API: 정상 작동
• 브라우저 실행: 시리즈 API 요청이 실행되지 않음
• 원인: 미확인 (브라우저 캐시/콘솔 필터/코드 실행 순서 문제 가능)

---

기술적 세부사항

API 엔드포인트

• 시리즈 목록: GET /goosefarm/api/books
• 시리즈 상세: GET /goosefarm/api/books/{id} (첫 번째 포스트 ID 조회용)

필터링 로직

• !post.book_id로 시리즈에 속하지 않은 포스트만 표시
• 시리즈 포스트는 시리즈 섹션에 표시

로딩 상태 관리

• booksLoaded, blogsLoaded 플래그로 두 요청 완료 후 로딩 해제
• isMounted 플래그로 컴포넌트 언마운트 후 상태 업데이트 방지

---

관련 파일

• 프론트엔드: /home/admin/goosefarminvesting/frontend/src/pages/BlogPage.tsx
• 백엔드 라우터: /home/admin/goosefarminvesting/backend/src/goosefarm/routers/book.py
• 백엔드 앱: /home/admin/goosefarminvesting/backend/src/goosefarm/app.py

---

다음 단계 제안

1. 브라우저 개발자 도구 확인

   • 콘솔 필터 설정 확인 (모든 로그 표시)
   • 네트워크 탭에서 /goosefarm/api/books 요청 존재 여부 확인

2. 브라우저 캐시 문제 해결

   • 강제 새로고침 (Ctrl+Shift+R 또는 Cmd+Shift+R)
   • 브라우저 캐시 삭제

3. 직접 테스트

   • 브라우저 콘솔에서 직접 fetch('/goosefarm/api/books') 실행 테스트
   • React DevTools로 컴포넌트 상태 확인

4. 코드 실행 순서 확인

   • useEffect가 실제로 실행되는지 확인
   • fetch 호출이 실행되는지 확인

---

참고

• 기존 트러블슈팅 문서: 251104_blog_system_implementation.md
• 위키독스 블로그 구현 계획: 250123_위키독스_블로그_구현계획.md