APEX에서 React와 통합 시 CSS 상대 경로 문제 해결 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

  • *대상**: Oracle APEX와 React 애플리케이션을 통합하는 개발자
  • *난이도**: 중간 (APEX의 정적 파일 경로 처리 및 React 빌드 프로세스 이해 필요)

핵심 요약

  • CSS 파일에서 상대 경로(media/f61b9.woff)를 절대 경로(#APP_FILES#media/f61b9.woff)로 변경
  • APEX에서 정적 파일을 참조할 때 #APP_FILES# 신택스 사용
  • 브라우저 개발자 도구의 Network 탭을 통해 404 오류 확인 및 경로 검증

섹션별 세부 요약

  1. 문제 발생 원인
  • React 빌드 시 생성된 CSS 파일의 상대 경로가 APEX의 정적 파일 구조와 호환되지 않음
  • 예: @font-face { src: url('media/f61b9.woff'); } → APEX에서 해당 파일을 찾지 못함
  1. 해결 방법
  • CSS 파일에서 상대 경로를 #APP_FILES# 기반 절대 경로로 수정
  • 예: src: url('#APP_FILES#media/f61b9.woff');
  • 모든 미디어 파일 참조 위치에 동일한 수정 적용
  1. APEX에서 CSS 파일 포함 방법
  • 헤더에 포함:
  • 인라인 CSS: @import url('#APP_FILES#css/CSSFile.css');
  1. 경로 검증 절차
  • 브라우저 개발자 도구(F12) → Network 탭에서 404 오류 확인
  • 오류 발생 시 CSS 파일의 경로를 APEX의 정적 파일 구조(#APP_FILES#)에 맞게 재검토
  1. 추가 고려사항
  • APEX와 미디어 파일을 제공하는 도메인이 다를 경우 CORS 정책 설정 필요
  • 모든 리소스를 APEX 내 별도 디렉터리에 통합하여 경로 복잡성 줄임
  1. 빌드 프로세스 최적화
  • React의 Webpack 설정을 통해 CSS 파일 생성 시 절대 경로 사용하도록 구성
  • CDN을 사용하여 미디어 파일 제공 시 절대 경로 자동 생성 가능

결론

  • *APEX 통합 시 CSS 파일의 상대 경로를 절대 경로(#APP_FILES#)로 변경하고, 브라우저 개발자 도구로 경로 오류를 검증**하는 것이 핵심입니다. 추가로 Webpack 설정을 통한 빌드 시 절대 경로 자동화와 CDN 활용을 권장합니다.