React로 프로젝트를 진행할 때 가장 많이 헷갈리는 부분 중 하나가 바로 공용 파일을 처리하는 방법입니다. Public 폴더는 웹 애플리케이션에서 사용자와 상호작용이 없는, 하지만 필수적인 파일들을 보관하는데 필수적입니다. 여기서는 **React 프로젝트에서 Public 폴더를 어떻게 활용할 수 있는지** 자세히 알아보겠습니다.
Public 폴더란 무엇인가?
입니다. HTML, 이미지, 아이콘, 서드파티 라이브러리 등을 이곳에 저장해서 최종 빌드에 포함시킵니다. Public 폴더에 있는 파일들은 최종적으로 서버의 루트 디렉토리에 위치하게 됩니다. 즉, 웹사이트에서 사용자가 직접 접근할 수 있는 형태로 제공됩니다. 예를 들어, 파일이 Public에 ‘logo.png’ 이름으로 저장되어 있다면, ‘/logo.png’ 경로로 불러올 수 있습니다.
파일을 Public 폴더에 두는 이유
Public 폴더는 사용자가 직접 URL을 통해 접근해야 하는 파일이나, 빌드 중에 변형되지 않아야 하는 정적 파일들을 보관할 때 사용합니다. 입니다. 즉, Public 폴더에 있는 파일들은 매번 서버로부터 동일하게 제공되어 브라우저 캐싱을 통해 성능을 높일 수 있습니다.
Public 폴더에 파일을 추가하는 방법
Public 폴더에 파일을 추가하는 것은 아주 간단합니다. 프로젝트 디렉토리 안의 ‘public’ 폴더에 파일을 복사해 넣기만 하면 됩니다. 이때 중요한 점은 파일의 경로를 정확히 기억해야 합니다. 서버 루트를 기준으로 파일을 접근하게 되므로, 원활한 파일 로딩을 위해 올바른 경로 설정이 중요합니다.
Public 폴더 사양 및 접근법
React에서 Public 폴더 안의 자원들은 ‘PUBLIC_URL’을 통해 접근합니다. 특정 배포 환경에 따라 경로가 달라질 수 있기 때문에 상대 경로가 아닌 환경 변수를 사용하는 것이 좋은 방법입니다. HTML 파일에서 자바스크립트와 CSS 파일을 불러올 때도 ‘PUBLIC_URL’을 기준으로 설정하면, .
React에서 Public 폴더 활용 예제
Public 폴더에서 이미지 파일을 접근하는 일반적인 방법은 JSX에서 입니다. 예를 들어, Public 폴더에 ‘sample.jpg’ 파일이 있다면, “와 같이 작성할 수 있습니다.
| 페이지 요소 | 경로 예시 |
|---|---|
| HTML 파일 | /index.html |
| 이미지 | /images/sample.jpg |
Public 폴더에 대한 최적화 팁
Webpack을 사용하면 결국 Public 폴더에 의존하지 않고도 자원을 처리할 수 있지만, 불가피하게 Public 폴더를 사용하는 경우 **최적화 전략**을 고민해야 합니다. 예를 들어, 이미지 파일의 경우 사용하기 전에 압축을 해서 파일 크기를 줄일 수 있으며, 불필요하게 많은 파일을 두지 않고 필요한 파일만 저장함으로써 빌드 후 자원 관리의 어려움을 줄일 수 있습니다.