웹 애플리케이션을 개발하다 보면, 사용자의 로컬 파일을 읽어 처리해야 할 때가 있습니다. 이번 포스트에서는 자바스크립트를 사용하여 브라우저의 로컬 파일을 읽는 방법을 알아보겠습니다.

File API 사용하기

자바스크립트에서 로컬 파일을 읽기 위해선 File API를 사용해야 합니다. File API는 HTML5 표준에 포함되어 있어 대부분의 브라우저에서 지원됩니다. 아래는 File API를 사용하여 로컬 파일을 읽는 간단한 예제입니다.

<input type="file" id="myFileInput">

<script>
  const fileInput = document.getElementById('myFileInput');
  
  fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
    
    if (file) {
      const reader = new FileReader();
      
      reader.onload = (e) => {
        const contents = e.target.result;
        
        // 파일 내용을 처리하는 로직을 추가합니다.
        console.log(contents);
      };
      
      reader.readAsText(file);
    }
  });
</script>

위 예제에서는 input 요소를 통해 사용자에게 파일 선택 기능을 제공합니다. 사용자가 파일을 선택하면 change 이벤트가 발생하고, 선택한 파일은 event.target.files로 접근할 수 있습니다.

FileReader 객체를 사용하여 선택한 파일을 읽을 수 있습니다. readAsText 메소드를 호출하여 파일을 텍스트 형식으로 읽을 수 있습니다. onload 이벤트 핸들러를 등록하면 파일 읽기가 완료되었을 때 해당 콜백 함수가 실행됩니다. 파일의 내용은 e.target.result로 접근할 수 있습니다.

위 예제에서는 파일 내용을 콘솔에 출력하는 간단한 로직을 추가했습니다. 필요한 로직에 따라 파일 내용을 파싱하거나 다른 처리를 할 수 있습니다.

보안 고려 사항

브라우저의 로컬 파일을 읽는 기능은 사용자의 개인정보와 관련된 민감한 데이터에 접근할 수 있는 위험이 있습니다. 따라서, 인증된 사용자에게만 이 기능을 제공하거나, 업로드한 파일을 서버 측에서 검증하는 등의 보안 조치가 필요합니다.

마무리

이번 포스트에서는 자바스크립트를 사용하여 브라우저의 로컬 파일을 읽는 방법을 알아보았습니다. File API를 사용하면 사용자로부터 선택한 파일을 읽고 내용을 처리할 수 있습니다. 보안 고려 사항을 유념하여 파일 읽기 기능을 구현하시기 바랍니다.

더 자세한 정보를 원하신다면 여기를 참고해주세요.

#javascript #파일읽기