[Node.js/React] 로컬 static 파일 가져오기

※ 경험에 기반한 글입니다. 틀린 부분이 있을 수 있습니다.

 

생각보다 이미지 파일을 제외하면 로컬에 있는 static 파일을 불러올 상황이 없다 보니, 파일 종류에 따라 코드로 불러오는 방법이 상이하다는 걸 알지 못했었습니다.

 

React는 Node.js를 통해 웹 서버를 돌리고 그걸 기반으로 브라우저를 실행합니다.

 

보통 웹 서버에서 public 폴더는 정적 자원을 호스팅하는 데 사용됩니다.

그래서 React 프로젝트에서 사용할 static 파일도 public 폴더에다 넣어야 사용자의 접근이 가능합니다.

 

이 경우 /asset/aa/aa.gltf 라는 경로를 통해 gltf 파일(3D model 파일)을 불러올 수 있습니다.

 

React에서 로컬 파일 중 이미지 파일이 아닌 .txt나 .xlsx, .csv 같은 파일은 Node.js 보안 이슈 때문인지 직접 접근하는 건 불가능하고 fetch나 axios를 통해서만 파일을 읽을 수 있는 것으로 보입니다.

그런 경우 다음 코드를 사용합니다.

// /public/test.csv 가져오기

axios.get<Blob>("/test.csv", {responseType: "blob"}).then((response: any) => {
	// 파싱
    const fileReader = new FileReader();
    
    fileReader.onload = () => {
    	console.log(fileReader.result?.toString());
    }
}

 

예외적으로 png, svg 같은 몇몇 보편적(?)인 이미지 파일은 public 폴더에 없어도 접근이 가능합니다,