React + ts 정적 파일 저장 위치와 기준

React + ts 정적파일 저장위치와 기준

설명

react + ts 로 개발 중 공공 API 에 사용되는 도시 코드를 정적 파일로 저장해야 하는 상황에서 두 가지 고민이 생겼다.

1. 어디에 저장할 것인가? (public 디렉토리, src 디렉토리 )
2. 확장자(ts,js,json ...)는 어떤 것으로 할 것인가?

1. public 폴더와 소스코드 폴더에서의 정적 파일 처리의 차이점

react 로 개발하면서 정적파일을 저장하는 곳을 크게 public 폴더와 기타 src 같은 소스코드 폴더 (혹은 소스 코드 내?) 두 가지로 나누어 생각 할 수 있고 이 두 방식은 분명한 차이가 존재한다.

1.1 public 폴더

1. 저장한 파일은 빌드 후에도 애플리케이션의 루트 디렉토리에 그대로 유지된다
2. 이 폴더에 저장된 파일은 웹 애플리케이션을 실행 중에 언제든지 접근할 수 있으며, 서버에서 따로 가공하지 않고 사용하는 것이다.
3. 주로 정적 데이터 파일, 이미지, 외부 라이브러리 스크립트, 폰트 등을 저장하는 데 사용된다.

1.2 일반적인 소스코드 폴더

1. 빌드 프로세스를 통해 변환되고 최적화되어 빌드된 폴더에 저장된다.
2. 이 폴더의 파일은 서버에서 필요한 순간에만 가지고 사용하는 동적 자원으로, 서버에서 렌더링된 HTML에 삽입되거나 클라이언트 측에서 동적으로 로드된다.

1.3 정리

public 폴더에 정적 파일을 저장해 사용하는 경우

1. 자주 사용하는 공통의 정적 파일
2. 보안에 민감하지 않은 정적 파일

일반적인 소스코드 폴더에 저장해 사용하는 경우

1. 특정 컴포넌트에서만 사용되거나 코드와 밀접하게 연관되어있는 정적파일
2. 보안에 유의해야하는 정적 파일

2. 개인적인 정적 파일 저장 기준

2.1 이미지

public 폴더에서만 관리

공통적으로 사용될 여지가 있고 다른 소스코드 폴더에서도 따로 이미지를 사용하는 것은 그다지 개발하는 과정에서 좋은 경험이 될 것 같지 않다.

2.2 font / css

public 폴더에서만 관리

보안에 유의할 필요가 없고 공통적으로 적용되는 font / css 내용은 사용한다면 public 에 저장하는 것이 적절해 보인다

2.3 정적 데이터 파일 (js object, json ...)

src 하위에 assets 폴더에서 관리

보안에 유의해야 할 수 있고 코드와 밀접하게 연관되어 있어 특정 상황에서만 쓰인다면 public 폴더보다는 소스 코드 폴더 안에서 관리하는 것이 적절해 보인다.

※ 공통적으로 참고하거나 사용하는 js 파일을 생성해서 사용해본 경험이 없기 때문에 그런 상황이 온다면 상황에 따라 public 폴더에서 사용 할 수 있는지 여부를 따져 보겠으나 현재까지 경험으로 봤을 때 public 폴더에 저장해 처리하지는 않을 것으로 예상됨

3. ts 에서 정적 파일의 확장자

ts 적용한 상황이라면 정적 데이터 파일 (js object, json, csv) 에서 데이터를 가져오려 할 때type 이 명확하지 않아 type 오류가 발생할 수 있으므로 type 을 추가적으로 명시해야 한다.

그렇다면 데이터를 가져올 때마다 type 을 따로 명시해야 한다면 그다지 좋은 방법이 아닐 것 같다.

위 고민과 관련된 명확한 기준이나 방법론을 찾지 못해 개인적인 기준으로 정적 데이터 파일은 되도록 .ts 로 저장해 사용 하기로 했다.

그 이유는

1. type 이 명확하여 유지 보수 및 개발에 유리
2. json 파일의 경우 처럼 추가적인 데이터 처리 과정(ex: parse) 이 적을 것으로 예상됨
3. TypeScript 의 compile 과정을 거친 후에는 결국 js 파일이므로 빌드(주로 번들링) 과정에서 자연스럽게 처리될 것으로 예상됨 (개인적인 판단)

---

참고

https://programmerplum.tistory.com/202

https://create-react-app.dev/docs/using-the-public-folder