기술 블로그

정적 파일 복사 문제 해결 방법 본문

프론트엔드

정적 파일 복사 문제 해결 방법

jaegwan 2024. 11. 29. 18:54
반응형

프로젝트에서 정적 파일을 빌드 디렉토리로 복사하는 과정에서 발생하는 문제는 의외로 자주 겪는 이슈이다. 특히 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. 코드 설명

  1. mkdir로 디렉토리 생성
    복사 대상 경로에 필요한 디렉토리가 존재하지 않을 수 있기 때문에 mkdir 메서드를 사용해 안전하게 생성했다. recursive: true 옵션을 추가하면 중첩된 디렉토리도 생성할 수 있다.

  2. copyFile로 파일 복사
    원본 파일에서 대상 파일로 데이터를 복사하기 위해 copyFile 메서드를 사용했다. 비동기 작업이기 때문에 await 키워드로 동작을 제어했다.

  3. 경로 처리
    path.join을 사용해 운영 체제에 관계없이 경로를 올바르게 처리했다.


3. 실행 방법

이 코드는 Node.js 환경에서 실행할 수 있다. 프로젝트의 루트 디렉토리에 이 스크립트를 저장하고 아래 명령어로 실행하면 된다.

node copyStaticFiles.mjs

해결 결과

위 방법을 통해 favicon.ico 파일을 성공적으로 dist 디렉토리로 복사할 수 있었다. 추가적으로 복사해야 할 정적 파일이 있다면, 같은 방식으로 파일을 확장하여 처리하면 된다.


결론

정적 파일 복사 문제는 간단한 작업처럼 보이지만, 빌드 도구에 따라 추가적인 설정이나 작업이 필요할 수 있다. 이번 사례를 통해 Node.js의 fs/promises 모듈을 활용하면 파일 시스템 작업을 쉽게 처리할 수 있다는 것을 다시금 확인할 수 있었다.

이 방법은 다른 프로젝트에서도 유용하게 사용할 수 있다. 앞으로도 유사한 문제가 발생하면, 이를 기반으로 확장해 해결해 나갈 것이다.

반응형
Comments