[React] 공공데이터 엑셀 파일 어떻게 읽을까?

넘나 많은 데이터...

공공데이터로 이 엑셀 데이터를 쓰고 싶은데 js 파일로 노다가를 할 수도 없고,

대체 어떻게 하면 모든 정보를 json으로 바꿔다 쓸 수 있을까?

 

 

 

나는 local_code와 work_code 엑셀파일의 수 천개의 데이터를 읽어올 것이다.

여기서는 work_code만 작성하겠다.

왜냐? 파일 이름만 다르게 쓰면 로직은 똑같기 때문이다 ^^

 

 

 

1. 엑셀 데이터 json 변환 코드

 

[readexcel.js]

const express = require('express');
const app = express();

const xlsx = require('xlsx');
const workbook = xlsx.readFile(__dirname + '/work_code.xls');

const json = {};
let i = workbook.SheetNames.length;

while (i--) {
    const sheetname = workbook.SheetNames[i];
    json[sheetname] = xlsx.utils.sheet_to_json(workbook.Sheets[sheetname]);
}

console.log(json);

// return json;

app.listen(9000, function(){
  console.log('listening on 9000')
})

app.get("/api/crwal/2", async(req, res)=>{
  // const result = await handleAsync();

  res.send([{
    json,
  }]);
});

저기 'work_code.xls'을 다른 파일명으로만 바꿔주면 데이터를 잘 가져온다.

 

 

 

 

2. 코드 설명

 

1) xlsx 모듈을 깔아준다.

npm install xlsx

 

 

 

2) readexcel.js 파일을 만든다.

 

[readexcel.js]

const xlsx = require('xlsx');
const workbook = xlsx.readFile(__dirname + '/work_code.xls');
console.log(workbook);

위에서 설치한 모듈을 require로 불러오는 것이다.

모듈을 불러왔다면 workbook 변수에 work_code 엑셀 파일 데이터를 모두 입력 할 것이다.

 

node로 저 코드를 실행해보면, workbook에 온갖 데이터가 저장된 것을 확인할 수 있다.

 

내 파일 기준

cd src

cd pages

cd work

node readexcel.js

 

이 데이터를 그대로 쓰기는 어려우니 json으로 변환해보자.

 

 

3) json 변환

 

[readexcel.js]

const xlsx = require('xlsx');
const workbook = xlsx.readFile(__dirname + '/work_code.xls');


const json = {};
let i = workbook.SheetNames.length;

아래 json을 변환할 수 있는 바구니를 만들어준다.

 

workbook.SheetNames는 엑셀 시트 대 제목을 나타낸다.

이 아래 직종코드 이다.

workbook.SheetNames.lengh는 1이다. 즉 1개의 워크시트만 보겠다는 뜻이다.

 

[readexcel.js]

const xlsx = require('xlsx');
const workbook = xlsx.readFile(__dirname + '/work_code.xls');


const json = {};
let i = workbook.SheetNames.length;

while (i--) {
    const sheetname = workbook.SheetNames[i]; //직종코드 
    json[sheetname] = xlsx.utils.sheet_to_json(workbook.Sheets[sheetname]);
    console.log(json[sheetname]);
}

 

그리하여 sheetname에는 직종코드가 담기고,

json[직종코드] = sheet에서 json으로 변환된 정보가 담긴다.

 

console 찍어보면 다음과 같다.

 

그런데 단순히 콘솔에 있는 데이터를 복붙하기에는 생략된 데이터들이 너무 많다.

무려 1197개나 되는 데이터가 더 있다...

이를 모두 불러오기 위해 9000번으로 서버를 만들어주겠다.

 

 

4) node 서버 구축

 

노드 서버 구축은 이전 포스팅에서 다룬 적이 있다.

https://tksgk2598.tistory.com/287

[node] 크롤링해서 React로 정보 전송하는 방법! express를 이용하자! 서버를 구축하자!

 

이 포스팅을 참고하여 진행하겠다.

 

npm install express

일단 express를 깔아준다.

 

 

[readexcel.js]

const express = require('express');
const app = express();

const xlsx = require('xlsx');
const workbook = xlsx.readFile(__dirname + '/work_code.xls');


const json = {};
let i = workbook.SheetNames.length;


while (i--) {
    const sheetname = workbook.SheetNames[i]; //직종코드 
    json[sheetname] = xlsx.utils.sheet_to_json(workbook.Sheets[sheetname]);
}

그리고 맨 위에 require로 불러준다.

 

 

 

[readexcel.js]

const express = require('express');
const app = express();

const xlsx = require('xlsx');
const workbook = xlsx.readFile(__dirname + '/work_code.xls');


const json = {};
let i = workbook.SheetNames.length;


while (i--) {
    const sheetname = workbook.SheetNames[i]; //직종코드 
    json[sheetname] = xlsx.utils.sheet_to_json(workbook.Sheets[sheetname]);
}


app.listen(9000, function(){
  console.log('listening on 9000')
})

app.get("/api/crwal/2", async(req, res)=>{

  res.send([{
    json,
  }]);
});

가장 밑에 app.listen을 통해 9000번 포트에서 클라이언트의 요청을 기다릴 것이다. 즉, 무한 대기 할 것이다.

get을 이용해 클라이언트가 http://localhost:9000/api/crwal/2 이 사이트로 접근할 수 있게 한다.

 

send로는 아까 json으로 바꿔준 결과를 클라이언트에게 보내주는 것이다.

 

 

이렇게 파일을 실행시켜주면 클라이언트 응답을 대기하고 있다.

 

 

위에서 우리가 정보를 넣어줬던 json 아래 sheetname(=직종코드)에 json으로 변환된 코드가 담긴 것을 확인할 수 있다.