기술 블로그
정적 파일 복사 문제 해결 방법 본문
프로젝트에서 정적 파일을 빌드 디렉토리로 복사하는 과정에서 발생하는 문제는 의외로 자주 겪는 이슈이다. 특히 esbuild
처럼 최소한의 설정을 제공하는 도구를 사용할 경우, 정적 파일 복사 기능이 기본적으로 포함되어 있지 않기 때문에 직접 해결 방법을 구현해야 한다.
나는 이 문제를 해결하기 위해 Node.js의 fs/promises
모듈을 활용한 간단한 스크립트를 작성했다. 이 글에서는 그 과정을 단계별로 설명한다.
문제 상황
esbuild
를 사용하여 프로젝트를 빌드할 때, favicon.ico
와 같은 정적 파일을 dist
폴더로 복사해야 했다. 그러나 esbuild
자체에는 public
폴더와 같은 정적 파일을 처리하는 기능이 없었다. 따라서 파일 복사를 수동으로 처리해야 했다.
해결 방법
1. Node.js의 fs/promises
모듈 활용
Node.js의 최신 파일 시스템 API인 fs/promises
를 사용하면 비동기 방식으로 파일 복사를 쉽게 구현할 수 있다. 아래는 내가 작성한 코드이다.
import { mkdir, copyFile } from "node:fs/promises";
import path from "node:path";
async function copyStaticFiles() {
const sourceFile = path.join("src/images", "favicon.ico"); // 원본 파일 경로
const destinationFile = path.join("dist", "favicon.ico"); // 복사 대상 경로
try {
// 타겟 디렉토리 생성
await mkdir(path.dirname(destinationFile), { recursive: true });
console.log(`디렉토리 생성 완료: ${path.dirname(destinationFile)}`);
// 파일 복사
await copyFile(sourceFile, destinationFile);
console.log(`파일 복사 완료: ${sourceFile} -> ${destinationFile}`);
} catch (error) {
console.error("파일 복사 중 에러 발생:", error);
}
}
copyStaticFiles();
2. 코드 설명
mkdir
로 디렉토리 생성
복사 대상 경로에 필요한 디렉토리가 존재하지 않을 수 있기 때문에mkdir
메서드를 사용해 안전하게 생성했다.recursive: true
옵션을 추가하면 중첩된 디렉토리도 생성할 수 있다.copyFile
로 파일 복사
원본 파일에서 대상 파일로 데이터를 복사하기 위해copyFile
메서드를 사용했다. 비동기 작업이기 때문에await
키워드로 동작을 제어했다.경로 처리
path.join
을 사용해 운영 체제에 관계없이 경로를 올바르게 처리했다.
3. 실행 방법
이 코드는 Node.js 환경에서 실행할 수 있다. 프로젝트의 루트 디렉토리에 이 스크립트를 저장하고 아래 명령어로 실행하면 된다.
node copyStaticFiles.mjs
해결 결과
위 방법을 통해 favicon.ico
파일을 성공적으로 dist
디렉토리로 복사할 수 있었다. 추가적으로 복사해야 할 정적 파일이 있다면, 같은 방식으로 파일을 확장하여 처리하면 된다.
결론
정적 파일 복사 문제는 간단한 작업처럼 보이지만, 빌드 도구에 따라 추가적인 설정이나 작업이 필요할 수 있다. 이번 사례를 통해 Node.js의 fs/promises
모듈을 활용하면 파일 시스템 작업을 쉽게 처리할 수 있다는 것을 다시금 확인할 수 있었다.
이 방법은 다른 프로젝트에서도 유용하게 사용할 수 있다. 앞으로도 유사한 문제가 발생하면, 이를 기반으로 확장해 해결해 나갈 것이다.
'프론트엔드' 카테고리의 다른 글
React SPA에서 404 오류 해결하기: `serve`를 활용한 정적 서버 설정 (1) | 2024.11.18 |
---|---|
esbuild와 svgr 설정으로 SVG 파일 번들 최적화하기 (1) | 2024.11.11 |
폰트 경량화를 통한 빌드 파일 경량화 (0) | 2024.11.06 |
프론트엔드에서의 경로 유지 멀티파일 전송과 성능 비교에 관하여 (0) | 2024.08.26 |
react-native android 14 정확한 알람 대응 (0) | 2024.01.13 |