JavaScript Academy · 강의

FileReader로 파일 읽기

선택한 파일을 텍스트 또는 데이터 URL로 읽습니다.

FileReader로 파일 읽기은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

FileReader란 무엇인가요

FileReader는 File 및 Blob 객체의 콘텐츠를 비동기적으로 읽는 브라우저 API입니다. <input type="file">에서 파일을 가져와 텍스트, 데이터 URL 또는 이진 데이터로 읽을 수 있습니다.

입력에서 파일 가져오기

파일 입력은 files 목록을 제공합니다. 처음 선택한 파일은 인덱스 0에 있으며, name, size, type과 같은 유용한 속성을 사용할 수 있습니다.

const input = document.querySelector('#picker');
const file = input.files[0];

console.log(file.name);
console.log(file.size);
console.log(file.type);

읽기는 비동기적으로 진행됩니다

FileReader는 데이터를 직접 반환하지 않습니다. onload 핸들러를 연결한 다음 읽기 메서드를 호출합니다. 결과는 나중에 reader.result에 도착합니다.

const reader = new FileReader();
reader.onload = function () {
  console.log('done reading');
  console.log(reader.result);
};
reader.readAsText(file);

readAsText

readAsText는 파일을 텍스트 문자열로 디코딩하므로 .txt, .csv 또는 JSON 파일에 적합합니다.

const reader = new FileReader();
reader.onload = () => {
  console.log('contents:', reader.result);
};
reader.readAsText(textFile);

readAsDataURL

readAsDataURL은 base64 data: URL을 생성합니다. 이미지의 img.src에 할당해 미리 보기를 표시할 때 적합합니다.

const reader = new FileReader();
reader.onload = () => {
  const img = document.querySelector('#preview');
  img.src = reader.result;
  console.log(reader.result.slice(0, 30));
};
reader.readAsDataURL(imageFile);

readAsArrayBuffer

readAsArrayBuffer는 원시 이진 데이터를 ArrayBuffer로 제공하므로 파일 형식을 바이트 단위로 분석할 때 유용합니다.

const reader = new FileReader();
reader.onload = () => {
  const bytes = new Uint8Array(reader.result);
  console.log('byte count:', bytes.length);
  console.log('first byte:', bytes[0]);
};
reader.readAsArrayBuffer(binaryFile);

오류 처리

읽기 실패를 처리하려면 onerror 핸들러를 연결합니다. 예를 들어 파일을 읽을 수 없는 경우에 사용할 수 있습니다.

const reader = new FileReader();
reader.onerror = () => {
  console.log('read failed:', reader.error.name);
};
reader.onload = () => console.log('ok');
reader.readAsText(file);

진행률 추적

큰 파일의 경우 onprogress 이벤트가 지금까지 로드된 바이트 수를 알려 주므로 진행률 표시줄에 유용합니다.

const reader = new FileReader();
reader.onprogress = (event) => {
  if (event.lengthComputable) {
    const percent = (event.loaded / event.total) * 100;
    console.log('loaded ' + percent.toFixed(0) + '%');
  }
};
reader.readAsArrayBuffer(bigFile);

프라미스로 감싸기

이벤트 기반 API는 다소 번거롭습니다. 더 깔끔한 코드를 작성할 수 있도록 프라미스로 감싸 await를 사용하세요.

function readText(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsText(file);
  });
}

readText(file).then(text => console.log(text));

현대적인 대안: file.text()

최신 브라우저에서는 file.text(), file.arrayBuffer() 또는 file.stream()을 직접 호출할 수 있으며, 프라미스를 반환합니다. 여러 경우에 FileReader보다 간단합니다.

async function show(file) {
  const text = await file.text();
  console.log(text);
}

show(file);

FileReader가 중요한 이유

FileReader를 사용하면 사용자가 선택한 파일을 브라우저에서 전부 처리할 수 있습니다. 이미지를 미리 보고, CSV를 분석하거나, 전송하기 전에 업로드의 유효성을 검사할 수 있습니다. 필요한 데이터에 따라 텍스트, 데이터 URL 또는 이진 데이터 중 읽기 방법을 선택하세요. 다음에는 블롭과 객체 URL을 살펴봅니다.

const reader = new FileReader();
reader.onload = () => console.log('ready to upload');
reader.readAsDataURL(file);

간단히 확인하기

이미지 미리 보기에 적합한 base64 문자열을 제공하는 FileReader 메서드는 무엇인가요? src

복습: 파일 읽기

파일 콘텐츠를 읽는 방법을 배웠습니다.

input.files에서 파일을 가져오며, 읽기는 onload를 통해 비동기적으로 진행됩니다.
readAsText, readAsDataURL, readAsArrayBuffer는 서로 다른 형식으로 반환합니다.
안정적인 처리를 위해 onerror와 onprogress를 처리합니다.
최신 file.text()와 file.arrayBuffer()는 프라미스 기반 대안입니다.

자주 묻는 질문

“FileReader로 파일 읽기” 강의는 무료인가요?

네 — “FileReader로 파일 읽기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“FileReader로 파일 읽기”에서 뭘 배우나요?

선택한 파일을 텍스트 또는 데이터 URL로 읽습니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“FileReader로 파일 읽기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기