[TIL] Next.js 이미지 업로드 - createObjectURL, arrayBuffer, CloudFlare Images

오늘 공부한것 & 기억하고 싶은 내용

createObjectURL

• URL.createObjectURL은 브라우저에서 로컬 파일을 로드하여 미리보기를 제공하는 간단한 방법이다.
  

export default function AddProduct() {
  const [preview, setPreview] = useState(""); // 이미지 미리보기 URL 저장
  const onImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const {
      target: { files },
    } = event;
    if (!files) return; // 파일이 없으면 종료

    const file = files[0];
    const url = URL.createObjectURL(file); // 파일 객체로 URL 생성
    setPreview(url); // URL 상태 업데이트
  };

  return (
    <div>
      <input type="file" onChange={onImageChange} />
      {preview && <img src={preview} alt="Preview" />}
    </div>
  );
}

• 브라우저에서 로컬 파일을 간단히 로드 가능
• 이미지 파일을 업로드하기 전에 사용자에게 미리보기를 제공함
• 메모리 누수를 방지하려면 사용 후 URL을 해제해야함. (URL.revokeObjectURL(url);)

arrayBuffer

• arrayBuffer는 파일 데이터를 버퍼로 변환하여 서버에 저장하는 방법이다.
• 파일 데이터를 직접 변환하고 저장할 수 있음
• 주로 테스트나 임시 파일 작업에 사용(이미지 업로드한척 해야할때 사용)
• 보안 문제: 클라이언트가 악의적인 파일 이름이나 데이터를 보낼 경우 서버가 위험에 노출될 수 있기에 실제 이미지 업로드로는 권장하지 않음

if (data.photo instanceof File) {
  const photoData = await data.photo.arrayBuffer(); // 파일 데이터를 ArrayBuffer로 변환
  await fs.appendFile(`./public/${data.photo.name}`, Buffer.from(photoData)); // 서버에 파일 저장
  data.photo = `/${data.photo.name}`; // 저장된 경로를 photo에 할당
}

CloudFlare Images (사용 추천)

• Cloudflare Images는 이미지 업로드와 관리를 위한 유료 서비스
• 월 $5로 간단한 이미지 처리와 저장 가능.
• API를 사용하여 이미지를 업로드하고 URL로 접근 가능

Cloudflare Images 설정 과정

1. Cloudflare 계정 생성 및 로그인

• Cloudflare에서 계정 생성 후 로그인.

2. Images 서비스 활성화

• Images → Overview로 이동.
• 결제 설정 후 서비스 활성화.

3. API 토큰 생성

• Images → API → Create API Token으로 이동.
• "Read and write to Cloudflare Stream and Images" 템플릿 사용. (Use template 버튼)
• Analytics 권한 삭제.
• Create Token을 클릭하고 생성된 토큰을 복사.

4. .env 파일에 설정 추가

• Images - Overview > 생성된 API 토큰, Account ID, Account Hash를 .env 파일에 저장

//env
CLOUDFLARE_API_TOKEN=your_api_token
CLOUDFLARE_ACCOUNT_ID=your_account_id
CLOUDFLARE_ACCOUNT_HASH=your_account_hash

배운점 & 느낀점

아직 유료서비스를 결제할 단계는 아닌거 같아서 간단하게 arrayBuffer나 createObjectURL를 사용해서 이미지 업로드를 해보았다. 보안 이슈로 인해 권장하지는 않지만 어떤식으로 동작하는지에 대해 자세히 알게 되는 시간이었고, 나중에 포트폴리오나 다른 작업을 하게 된다면 유료 서비스도 한번 사용해보고 싶다.