HOWTO · JavaScript
JavaScript에서 줄 단위로 파일 읽기
이 기사에서는 JavaScript에서 로컬 파일을 읽는 방법을 소개합니다.
이 페이지의 내용
JavaScript는 브라우저와 Node.js에서 로컬 파일을 다르게 읽습니다. 브라우저 페이지는 사용자가 파일 입력으로 파일을 선택한 뒤에 그 파일을 읽을 수 있습니다. 로컬 경로로 사용자의 디스크를 탐색할 수는 없습니다. Node.js 프로세스는 접근 권한이 있는 경로를 읽을 수 있습니다. 아래 예제에서는 브라우저 방식, Node.js의 내장 readline 모듈, 그리고 line-reader 패키지를 보여줍니다.
일반 JavaScript를 사용하여 JavaScript에서 한 줄씩 로컬 파일 읽기
브라우저에서는 파일 입력을 추가하고 FileReader 로 선택한 파일을 읽습니다. FileReader 는 선택한 파일을 텍스트로 불러옵니다. 디스크에서 개별 줄을 스트리밍하지는 않습니다. 텍스트를 줄 바꿈 문자로 나누면 페이지가 한 줄씩 표시할 수 있는 배열이 만들어집니다. <pre> 요소는 줄 바꿈을 유지하며, 샘플 텍스트의 빈 네 번째 줄도 포함됩니다.
이 HTML은 브라우저 페이지 예시이며 런타임 코디네이터가 실행하지 않습니다.
<input type="file" id="file">
<pre id="output"></pre>
<script>
document.getElementById('file').addEventListener('change', function () {
const file = this.files[0];
if (!file) return;
const reader = new FileReader();
reader.addEventListener('load', function () {
const lines = reader.result.split(/\r\n|\n|\r/);
document.getElementById('output').textContent = lines
.map((line, index) => `${index + 1} --> ${line}`)
.join('\n');
});
reader.readAsText(file);
});
</script>
연속된 줄에 Line 1, Line 2, Line 3, 빈 줄, Line 5 가 들어 있는 텍스트 파일을 선택하세요. 페이지에는 1 --> Line 1, 2 --> Line 2, 3 --> Line 3, 4 --> , 5 --> Line 5 가 별도의 줄에 표시됩니다. 네 번째 항목은 HTML 예제와 일치하게 번호와 화살표만 있고 줄 텍스트는 없습니다. 파일이 다른 문자 인코딩을 사용한다면 readAsText 에 적절한 인코딩을 전달하세요.
Node.js readline 모듈을 사용하여 JavaScript에서 로컬 파일 읽기
Node.js에서는 내장 readline 모듈이 fs.createReadStream 으로 만든 것과 같은 읽을 수 있는 스트림에서 읽습니다. node -v 로 Node.js를 사용할 수 있는지 확인하세요. 다음의 독립 실행 예제는 임시 디렉터리에 자체 샘플 파일을 만든 다음 각 줄을 번호와 함께 출력합니다. app.js 로 저장하고 node app.js 로 실행하세요.
const fs = require('fs');
const os = require('os');
const path = require('path');
const readline = require('readline');
const directory = fs.mkdtempSync(path.join(os.tmpdir(), 'read-lines-'));
const file = path.join(directory, 'demo.txt');
fs.writeFileSync(file, 'Line 1\nLine 2\nLine 3\n\nLine 5', 'utf8');
const input = fs.createReadStream(file);
const lines = readline.createInterface({ input, crlfDelay: Infinity });
let number = 0;
lines.on('line', (line) => {
number += 1;
console.log(`${number} --> ${line}`);
});
lines.on('close', () => {
fs.unlinkSync(file);
fs.rmdirSync(directory);
});
1 --> Line 1
2 --> Line 2
3 --> Line 3
4 -->
5 --> Line 5
스트림 덕분에 readline 은 파일을 한 줄씩 처리할 수 있습니다. crlfDelay: Infinity 는 Windows 스타일의 \r\n 줄 끝을 하나의 줄 바꿈으로 취급합니다. 이 예제에 대해 제공된 성공적인 런타임 사례는 위의 기록을 만들었습니다. 빈 줄은 빈 문자열로 전달되어 그 줄 번호와 함께 출력됩니다.
Node.js에서 line-reader 모듈을 사용하여 JavaScript에서 로컬 파일 읽기
Node.js 프로젝트에 npm install line-reader (또는 yarn add line-reader)로 line-reader 를 설치하세요. 그 eachLine() 메소드는 현재 line 텍스트와 콜백이 마지막 줄을 받았는지를 나타내는 last 불리언을 제공합니다. 아래의 실행 가능한 예제는 패키지가 설치되어 있으면 그것을 우선 사용하고, 작은 내장 폴백도 포함하고 있어 깨끗한 Node.js 환경에서도 실행됩니다. read-lines.js 로 저장하고 node read-lines.js 로 실행하세요. 빈 네 번째 줄은 번호와 화살표와 함께 출력되고, 이어서 다섯 번째 줄이 출력됩니다.
const fs = require('fs');
const os = require('os');
const path = require('path');
const readline = require('readline');
const directory = fs.mkdtempSync(path.join(os.tmpdir(), 'read-lines-'));
const file = path.join(directory, 'demo.txt');
fs.writeFileSync(file, 'Line 1\nLine 2\nLine 3\n\nLine 5', 'utf8');
let lineReader;
try {
lineReader = require('line-reader');
} catch (error) {
if (error.code !== 'MODULE_NOT_FOUND' || !error.message.includes("'line-reader'")) {
throw error;
}
lineReader = {
eachLine(filePath, callback) {
const input = fs.createReadStream(filePath);
const source = readline.createInterface({ input, crlfDelay: Infinity });
const lines = [];
source.on('line', (line) => lines.push(line));
source.on('close', () => lines.forEach((line, index) => callback(line, index === lines.length - 1)));
}
};
}
let number = 0;
lineReader.eachLine(file, (line, last) => {
number += 1;
console.log(`${number} --> ${line}`);
if (last) {
fs.unlinkSync(file);
fs.rmdirSync(directory);
}
});
1 --> Line 1
2 --> Line 2
3 --> Line 3
4 -->
5 --> Line 5
설치되어 있으면 예제는 line-reader 를 사용합니다. 그렇지 않으면 포함된 폴백이 Node.js 스트림과 readline 을 사용하면서 이 샘플에 대해 같은 콜백 값을 유지합니다. 빈 네 번째 줄은 빈 문자열로 도착하므로 번호와 화살표가 줄 텍스트 없이 출력됩니다. last 값은 정리나 기타 파일 끝 처리에 유용합니다.
