[ React ] 정적 파일을 public 폴더에 관리하기 vs src 폴더에 관리하기

react

🤔 왜 이런 고민을 하게 되었는가?

 현재 JSON 파일들을 public 폴더에 넣고 관리하고 있었다.

public path 를 짧게 단축시키기 위해 구글링을 하다가 asset 파일들을 public 폴더에 관리하는 것보다 src 폴더에 관리하는 것이 더 편리하다는 글을 종종 볼 수 있기 때문에 나도 이러한 고민을 하게 되었다.

 

(아무 생각 없이 asset 파일을 당연하듯 public 폴더에 관리하던 나 자신 반성해...😂)

 

📂 public 폴더 사용하기

public 폴더는 정적 파일을 보관하기에 좋은 장소이다. 이유는 아래와 같다.

• public 폴더에 위치한 정적 파일은 빌드 후에 build 폴더에 복사된다. 따라서 빌드 이후에도 파일이 유지되며, 캐싱 문제도 해결할 수 있다.
• public  폴더는 어디에서든 쉽게 접근할 수 있다. 따라서 서버에서 정적 파일을 제공할 필요 없이, 클라이언트 측에서 바로 접근할 수 있다.
• public 폴더에 위치한 정적 파일은 빌드 전에 이미 최적화되어 있기 때문에, 빌드 시간을 단축할 수 있다.

 

📂 src 폴더 사용하기

반면에 src 폴더에 위치한 정적 파일은 다음과 같은 경우에 적합하다.

• 정적 파일이 코드와 밀접하게 연관되어 있을 때. 예를 들어, 컴포넌트에서 사용하는 이미지 파일 등이 해당된다.
• 정적 파일이 빌드 과정에서 처리되어야 할 때. 예를 들어, 이미지 파일의 크기를 줄이거나, 파일 이름을 변경해야 할 때에 해당된다.

물론 이러한 경우에도 public 폴더를 사용할 수 있다. 하지만 src 폴더를 사용하면 코드와 관련된 정적 파일을 한 곳에 모을 수 있어서 코드 유지 보수를 더 쉽게 할 수 있다.

따라서, 일반적으로는 public 폴더를 사용하는 것이 좋으며, 코드와 밀접하게 관련된 정적 파일이 있을 경우에는 src 폴더를 사용하는 것이 적합하다.

 

🧐그렇다면 JSON 파일은 어디다 위치하는 것이 좋을까?

코드에서 사용하는 정적인 JSON 파일은 src 폴더에 저장하는 것이 좋다.

이유는 다음과 같다.

• src 폴더에 위치한 JSON 파일은 코드와 밀접하게 연관되어 있기 때문에, 코드와 함께 버전 관리를 할 수 있다.
• src 폴더에 위치한 JSON 파일은 빌드 시간에 함께 번들링 된다. 따라서 서버에서 JSON 파일을 따로 제공할 필요가 없다.
• public 폴더에 위치한 JSON 파일은 클라이언트 측에서 접근 가능하기 때문에, 보안상의 문제가 발생할 수 있다. 따라서 중요한 정보가 담긴 JSON 파일은 public 폴더에 위치시키면 안 된다.

 

반면에 public 폴더에 위치하는 JSON 파일은 다음과 같은 경우에 사용될 수 있다.

• 외부에서 접근 가능한 데이터를 제공할 때. 예를 들어, 서버에서 제공되는 공공 API의 데이터를 담은 JSON 파일 등이 해당 된다.
• 빌드 시간에 처리되지 않아야 할 데이터를 제공할 때. 예를 들어, 런타임에서 동적으로 생성되는 JSON 파일 등이 해당된다.

따라서 일반적으로는 코드와 함께 버전 관리되어야 하는 정적인 JSON 파일은 src 폴더에 위치하는 것이 좋다. 그러나 외부에서 접근 가능한 데이터를 제공하는 JSON 파일이나 런타임에서 동적으로 생성되는 JSON 파일은 public 폴더에 위치하는 것이 적절할 수 있다.

 

💡 결론 (나의 선택은?)

현재 JSON 으로 관리되고 있는 데이터들은 다음과 같다.

• 대한민국 도.시.군.구 
• 대한민국 전화번호, 휴대폰 번호 앞 자리
• E-mail Domain (이메일 뒷 자리)
• 카테고리 명 (큰 카테고리가 20개, 카테고리 당 작은 카테고리가 기본 1 ~ 4 개가 되기 때문에 JSON 배열로 관리를 하고 있음)
• 추천 매물 (추천 매물은 프론트 측에서 관리하기로 되어 있다.)

몇 가지 JSON 들은 외부에서 접근해도 괜찮지만, 추천 매물과 같은 JSON 파일들은 외부에서 접근하는 것을 막는 것이 좋고 코드에 따라 버전 관리가 필요하다고 생각이 들기 때문에 src 폴더가 적합하다고 판단했다.