APEX에서 React와 통합 시 CSS 상대 경로 문제 해결 방법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- *대상**: Oracle APEX와 React 애플리케이션을 통합하는 개발자
- *난이도**: 중간 (APEX의 정적 파일 경로 처리 및 React 빌드 프로세스 이해 필요)
핵심 요약
- CSS 파일에서 상대 경로(
media/f61b9.woff
)를 절대 경로(#APP_FILES#media/f61b9.woff
)로 변경 - APEX에서 정적 파일을 참조할 때
#APP_FILES#
신택스 사용 - 브라우저 개발자 도구의 Network 탭을 통해 404 오류 확인 및 경로 검증
섹션별 세부 요약
- 문제 발생 원인
- React 빌드 시 생성된 CSS 파일의 상대 경로가 APEX의 정적 파일 구조와 호환되지 않음
- 예:
@font-face { src: url('media/f61b9.woff'); }
→ APEX에서 해당 파일을 찾지 못함
- 해결 방법
- CSS 파일에서 상대 경로를
#APP_FILES#
기반 절대 경로로 수정 - 예:
src: url('#APP_FILES#media/f61b9.woff');
- 모든 미디어 파일 참조 위치에 동일한 수정 적용
- APEX에서 CSS 파일 포함 방법
- 헤더에 포함:
- 인라인 CSS:
@import url('#APP_FILES#css/CSSFile.css');
- 경로 검증 절차
- 브라우저 개발자 도구(F12) → Network 탭에서 404 오류 확인
- 오류 발생 시 CSS 파일의 경로를 APEX의 정적 파일 구조(
#APP_FILES#
)에 맞게 재검토
- 추가 고려사항
- APEX와 미디어 파일을 제공하는 도메인이 다를 경우 CORS 정책 설정 필요
- 모든 리소스를 APEX 내 별도 디렉터리에 통합하여 경로 복잡성 줄임
- 빌드 프로세스 최적화
- React의 Webpack 설정을 통해 CSS 파일 생성 시 절대 경로 사용하도록 구성
- CDN을 사용하여 미디어 파일 제공 시 절대 경로 자동 생성 가능
결론
- *APEX 통합 시 CSS 파일의 상대 경로를 절대 경로(
#APP_FILES#
)로 변경하고, 브라우저 개발자 도구로 경로 오류를 검증**하는 것이 핵심입니다. 추가로 Webpack 설정을 통한 빌드 시 절대 경로 자동화와 CDN 활용을 권장합니다.