Node.js와 React를 이용한 .docx 파일 분석

안녕하세요.

오늘은 React와 Node.js를 이용하여 .docx 파일을 업로드하고 분석하는 방법에 대해 알아보겠습니다.

 

먼저, React에서 파일을 업로드하는 방법을 알아보았습니다. 이를 위해 FileReader 객체를 사용하였습니다. 이후, Node.js 서버를 구축하였고, 파일 업로드를 처리하기 위해 multer 미들웨어를 사용하였습니다. 서버와 클라이언트 간의 통신을 위해 cors 미들웨어를 사용하였습니다.

// React 코드
const [selectedFile, setSelectedFile] = useState(null);
const handleFileUpload = () => {
  if (!selectedFile) {
    alert('Please select a file to upload.');
    return;
  }
  const formData = new FormData();
  formData.append('file', selectedFile);
  fetch('http://localhost:4000/upload', {
    method: 'POST',
    body: formData,
  })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
};
<input type="file" onChange={event => setSelectedFile(event.target.files[0])} />
<button onClick={handleFileUpload}>Upload</button>

 

그 다음으로, 업로드된 .docx 파일을 분석하는 방법을 알아보았습니다. 이를 위해 mammoth.js 라이브러리를 사용하려고 하였으나, 이 라이브러리는 Node.js 환경에서만 사용할 수 있었습니다. 이에 대한 자세한 정보는 mammoth.js 공식 문서를 참조하시기 바랍니다.

 

대신에, PizZip과 docxtemplater 라이브러리를 사용하여 .docx 파일을 분석하였습니다. PizZip은 .docx 파일을 압축 해제하는 데 사용되며, docxtemplater은 압축 해제된 파일에서 텍스트를 추출하는 데 사용됩니다.

// Node.js 코드
const express = require('express');
const multer = require('multer');
const cors = require('cors');
const PizZip = require('pizzip');
const Docxtemplater = require('docxtemplater');
const fs = require('fs');
const upload = multer({ dest: 'uploads/' });
const app = express();
app.use(cors());

app.post('/upload', upload.single('file'), (req, res) => {
  const content = fs.readFileSync(req.file.path, 'binary');
  const zip = new PizZip(content);
  const doc = new Docxtemplater().loadZip(zip);
  const text = doc.getFullText();
  res.json({ message: 'File uploaded and processed successfully', text: text });
});

app.listen(4000, () => console.log('Server listening at http://localhost:4000'));

 

나머지는 각자의 입맛대로 text를 핸들링하면 됩니다.

이상으로 오늘의 포스팅을 마치겠습니다. 파일 업로드와 분석에 대한 자세한 내용은 각 라이브러리의 공식 문서를 참조하시기 바랍니다. 다음에 또 다른 유익한 정보로 찾아뵙겠습니다. 감사합니다.