React에서 Public URL 설정 및 활용 방법 완벽 가이드

웹 개발을 하다 보면 때때로 브라우저에서 자산 경로나 API 엔드포인트 등을 설정할 필요가 생기게 됩니다. 특히, React 프로젝트에서는 이러한 경로 설정이 중요한 역할을 합니다. 이 글에서는 에 대해 알아보겠습니다.

Public URL은 웹 애플리케이션이 배포된 후 외부에서 자산들에 접근할 수 있는 경로를 말합니다. 흔히 이미지, 스타일시트 그리고 자바스크립트 파일들이 이에 해당합니다. 하게 됩니다. 이 디렉토리 내의 파일들은 최종 빌드 과정에서 그대로 복사되며, 상대 경로 대신 절대 경로를 통해 접근할 수 있습니다.

React 애플리케이션을 생성하면 기본적으로 됩니다. 이를 변경하려면 파일에서 속성을 설정하면 됩니다. 예를 들어, GitHub Pages에 배포할 경우, 다음과 같이 설정할 수 있습니다:

‘public’ 디렉토리에 배치된 자산들은 빌드 후 직관적으로 접근할 수 있습니다. 예를 들어, ‘public/images/logo.png’라는 이미지 파일이 있을 때, React 컴포넌트 내에서 있습니다:

이 방식으로 설정하면 배포하는 환경에 따라 다른 을 참조할 수 있어 유용합니다.

. React에서 환경 변수 파일(.env)을 사용하여 다양한 설정을 제어할 수 있는데, 도 이 중 하나입니다. 다음과 같이 사용할 수 있습니다:

이 경우, 애플리케이션은 설정된 을 기준으로 자산에 접근합니다.

Public URL은 이기도 합니다. CDN(Content Delivery Network)을 사용할 때, 나 설정을 통해 원활한 자산 로딩을 지원할 수 있습니다. 이는 사용자 경험을 대폭 향상시킬 수 있는 방법 중 하나입니다.

이제까지 알아본 내용을 바탕으로, 을 소개합니다. 첫째, 모든 자산을 ‘public’ 디렉토리에 두는 것이 아니라 필요에 따라 ‘src’ 디렉토리 내에서 관리하는 것이 더 바람직할 수 있습니다. 둘째, 외부 자산이나 라이브러리를 사용할 때는 CDN을 적극 활용하면 페이지 로딩 시간을 줄일 수 있습니다.