[2023/04/23 개발 일지] 구글 스프레드 연동하기

 오늘은 백엔드 개발을 시작합니다.

 

오늘 할 일 : googleapis 모듈 활용해서 구글 스프레드랑 백엔드 연동하기

 

---

1.  <에러> NodeJS가 css 파일 못 찾음

예전에 개발 환경은 설정했었기때문에 구글 스프레드만 연동하면 될거라 생각했습니다... app.js를 실행하고보니 css 파일을 못찾아서 메인 화면이 깨져있었습니다. 

 express와 css를 연동하는 방법을 열심히 구글링 했습니다. 찾아보니 일반 html에 link를 사용하면 css가 안불러와진다는 사실을 알았습니다. 근데 왜 부트스트랩은 잘 됐을까요????? 이유는 이따가 찾기로 하고 일단 이 현상을 해결하겠습니다.

 

<해결>

1. public이라는 폴더를 만든다.
2. public 폴더 안에 css 폴더를 만들고 css 파일을 만든다.
3. server.js 파일에서 app.use(express.static('public'));를 작성해준다.
4. html에 <link rel="stylesheet" href="/css/style.css">로 작성해줍니다.

 이런 css 하나에 막히다니ㅜ 강의듣고 예제를 공부했던 것만으로는 부족했나봐요. 심지어 저는 public 폴더를 만들어놓은 상태였구요, app.use(express.static('public')); 코드도 작성했었어요. 그냥 정적 파일 요청이 오면 정적 html 파일을 바로 열어주는 코드로만 생각했었는데 css 를 추가한다는 기능은 처음 알았습니다. 

 

* 부트스트랩은 잘된 이유

부트스트랩을 사용할때 폴더나 파일로 부트스트랩을 다운받아서 사용하지 않고 url을 사용해서 잘됐습니다. 다른 사람들 후기 보니까 모듈 다운받고 파일 다운받고 코드 추가하고 막 그러더라구요..! 저는 모듈 다운로드 방법이 아니라서 잘된 것 같아요. 

 

css 를 추가했지만 놀랍지않게도 이미지는 처리가 안됐어요. 생각해보면 당연한 일인데 생각이 없었나봐요.

 

<해결>

1. 사진들이 들어있는 image폴더도 public에 넣으니까 잘됐습니다.

---

2. <개발> googleapis 연동하기

 원래 계획은 app.js에 바로 연동하기였습니다. 그렇지만 연동하는 과정을 구글링하고 마음을 접었어요. 일단은 다른 파일에서 구글 스프레드시트를 읽고 써본 후에 app.js에 필요한 기능을 우겨넣는 식으로 가보려구요. 안그러면 디버깅할때 너무 힘들 것 같아요.

 

1. googleapis.js 파일을 만들고 구글링한 코드를 바탕으로 코드를 짜봅니다.

2. googleapis에서 키 발급 받고 인증합니다.

 

 한번에 성공하길 바랬지만 그러지 못했습니다. 열심히 구글링해서 제가 마침 하고싶었던 작업을 블로그로 올려주신 분을 만났어요. 감사합니다!

https://ongamedev.tistory.com/429

NodeJS에서 Google SpreadSheet에 접속하기

 

이걸 보고 따라하고 있는데 다음과 같은 에러를 만났습니다.

---

3. <에러> You must call `doc.loadInfo()` before accessing this property

 올려주신 코드로 작성해봤는데 다음과 같은 에러가 발생했습니다. 속성에 접근하기 전에 doc.loadInfo()를 불러야한다고합니다. 여러가지 찾아보다가 readFirstSheetRow() 함수안에서 doc.loadInfo()를 불러줬더니 실행이 됐습니다. 

 

const {GoogleSpreadsheet} = require("google-spreadsheet");
const gs_creds = require("./practice-384605-b85d8d7f9282.json"); // 키 생성 후 다운된 json파일을 지정합니다.
const doc = new GoogleSpreadsheet("1TkELS-U9GuAAtjtwv4Bzlqv-GoDlMKih4BooG8Qp0NI");

async function authGoogleSheet(){
	try{

		await doc.useServiceAccountAuth(gs_creds);
		await doc.loadInfo();
	}catch(err){
		console.log( "AUTH ERROR ", err)
	}
}
authGoogleSheet(); // 처음 시작할 때 문서 접속에 대한 인증을 처리하고 해당 문서를 로드합니다.

async function readFirstSheetRow(){ 
    await doc.loadInfo();
	var sheet = doc.sheetsByIndex[0]; // 첫번째 시티를 가져옵니다.
    var rows = await sheet.getRows({offset:3, limit:100}); // 세 번째 row 부터 100개 row를 가져옵니다.
    rows.forEach((ele)=>{
    	console.log( ele._rawData[0] , ele._rawData[1] ) // 읽어온 rows 중 현재row에서 첫 번째 컬럼과 두 번째 컬럼을 출력합니다.
    });
}
readFirstSheetRow();

---

4.<에러> 데이터가 undefined로 나옴

 

구글 스프레드 시트는 왼쪽처럼 구성되어있습니다. 그런데 위의 코드로 작성하면 No만 출력됐습니다.

 

<시도>

1. No 부분 데이터 바꿔보기

: 혹시 이상한 데이터를 불러오는건가싶어서 No 부분이 원래 1 2 3이었는데 1 3 1로 바꿔봤더니 다행히도 No은 잘 나오는 것을 확인했습니다.

 

 

2. 데이터 영어로 바꿔보기

: 이번에는 한글이라서 못 받아오나 싶어서 영어로 데이터를 바꿔본 후 실행해보겠습니다. 그랬더니 영어도 출력하지 않았습니다. 

 

3. 데이터 숫자로 바꿔보기

: 영어도 못받아오는 것을 확인하고 숫자만 되는건가 싶어서 숫자로 바꿔보았습니다. 그런데 숫자도 안나왔습니다. 그래서 아예 두번째 열을 가리키지 않는다는 것을 알았습니다. 

 

4. 출력하는 부분 코드 확인하기

 바로 밑에 있는 부분이 출력하는 코드입니다. 확인해보면 sheet.getRows()라는 프로미스를 await했습니다. 그리고 그 결과는 rows에 들어가있습니다. 그래서 rows를 출력해봤습니다.

 그랬더니 객체형태로 되어있는 데이터를 확인했습니다. 그랬더니!!! 객체 안의 rawData에 첫번째 열만 들어가있는 것을 확인했습니다. 

 

var sheet = doc.sheetsByIndex[1]; // 첫번째 시티를 가져옵니다.
var rows = await sheet.getRows({offset:3, limit:100}); // 세 번째 row 부터 100개 row를 가져옵니다.
    rows.forEach((ele)=>{
    	console.log( ele._rawData[0] , ele._rawData[1] ) // 읽어온 rows 중 현재row에서 첫 번째 컬럼과 두 번째 컬럼을 출력합니다.
    });

rows 출력

5. 코드에서 옵션 바꿔보기

 첫번째 열만 가져오라고 옵션을 지정했기때문에 발생한 일이라고 판단했습니다. 그래서 sheetsByIndex[1]; 을 2로 바꿔보았더니 두번째 시트를 가져왔습니다. 당연하긴해요. 이름부터가 sheets로 되어있습니다. 그래서 이 부분에는 문제가 없다고 생각하고 getRows에서 다른 옵션이 있을 것 같아서 API 문서를 확인했습니다.

https://theoephraim.github.io/node-google-spreadsheet/#/

 

 

 문서를 확인해보니 row랑 cell을 활용해서 데이터를 가져올 수 있다는 사실을 확인했습니다. 저는 row를 이용해서 데이터를 가져오고 있었는데 cell이 데이터 처리하기에 더 편할 것 같아서 cell로 데이터를 처리하겠습니다.

 

6. cell로 데이터처리해보기

//cells로 하는 방법
    await sheet.loadCells('A1:D5');
    const cellA1 = sheet.getCell(0, 0);
    const cellC3 = sheet.getCellByA1('C3');

 이 코드로 다시 해봤는데 이 코드에서 데이터는 구글 스프레드 시트에 있는 데이터와 똑같이 나왔습니다. 

• sheet.getCell : 인덱싱으로 하는 방법 (row,column)
• sheet.getCellByA1 : 셀 이름으로 하는 방법 

이제 데이터를 제가 원하는대로 읽을 수 있습니다!!!!!! 휴,,, 어쩌다보니 연동하고 데이터를 읽는 것까지 했네요. 이제 써보겠습니다!

---

5. NodeJS에서 구글 스프레드에 써보기

 읽는 것이 성공했고 관련 문서도 알아서 쓰는건 금방 성공할 것 같습니다!

//cells로 쓰는 방법
    cellA1.note = 'This is cell A1';
    cellA1.value = 123.45;
    cellA1.textFormat = { bold: true };
    cellC3.formula = '=A1';

    await sheet.saveUpdatedCells(); // saves both cells in one API call

 문서에 나와있는 코드 그대로 실행시켰더니 다행히도!!! 구글 스프레드 시트에서 값이 잘 바뀌었습니다~!~!~!~!!! 

 

---

후후후 다행히도 빠르게 끝냈어요! 계획대로 개발이 진행되니 기쁩니다. 아 그리고 전 노션을 통해서 계획을 짜고있습니다. 내일은 구글 스프레드 시트 데이터를 제 프로그램에 맞게 처리하는 과정입니다. 읽어주셔서 감사합니당~