[Node.js] Google Spread Sheet에 데이터 입력하기[Node.js] Google Spread Sheet에 데이터 입력하기

Posted at 2019. 6. 11. 17:51 | Posted in Node.js/Google Spread Sheet
반응형






※ 해당 포스팅 google-spreadsheet 2.0.7 버전을 기준으로 작성되었습니다.

    google-spreadsheet 3 버전 이후버전부터는 실행에 앞서 에러가 발생합니다.

    추후 수정 예정이오니 해당 포스팅을 참고하시는 분은 이점을 꼭 기억해 주시기 바랍니다.

    ( google-spreadsheet 2.0.7 버전의 경우 2020-05-15일 기준으로 사용에 문제는 없습니다. )





■ 구글 스프레드 시트에 데이터 입력하기





google-spreadsheet 모듈을 사용해 데이터를 입력할 경우에는 


단순히 마구잡이로 데이터를 넣는 것이 아니라.


양식에 맞게 설정을 잡아 주어야 데이터의 입력이 가능하다.


아래와 같이 스프레드 시트에 필터 or 키(Key)로 사용할 값을 1열에 작성하여 준다.




# 스프레드 시트






위와같이 스프레드 시트의 A1, B1열에 


필터로 쓰일 키값을 생성해 두었다.


필자는 코드에 주석을 제외하고는 한글을 사용하는것을 별로 좋아하지는 않지만.


실제적으로 실무등에서는 한글로 된 키값이 많을 것이라 판단되고.


다행 google-spreadsheet 모듈을 한글을 키값으로 사용하는것에 아무런 문제가 있지는 않았다.


그럼 이제 아래 코드와 같이 작성하여 데이터를 입력해 보자.



# 소스 코드

 

const googleSpreadsheet =require("google-spreadsheet");

const creds = require("./서비스 계정 키.json");

const doc = new googleSpreadsheet("구글 스프레드 시트 ID");


doc.useServiceAccountAuth(creds, function(err) {

let rowData = { 명칭 : "크루즈", 제조사 : "쉐보레" };

doc.addRow(

         1 // 첫번째 시트

, rowData // 입력할 데이터

, function(err) { // 콜백 데이터

console.log(err);

}

);

});




필터의 키 명에 대응되는 값을 입력해 주고


실행해 보면 아래와 같이 필터 바로 아래 열(Row)에


입력한 값이 들어가는 모습을 확인 할 수 있다.







위처럼 한 열(Row)에 데이터를 삽입하는 것을 해보았다.


그렇지만 실제로 사용하게 된다면


반복문을 통해 한번에 많은 데이터를 입력하게 될것이고.


아래 그 내용을 간단히 정리해 두었다.








■ 한번에 여러개의 데이터 입력하기




# 소스 코드

 

const googleSpreadsheet = require("google-spreadsheet");

const creds = require("./서비스 계정 키.json");

const doc = new googleSpreadsheet("구글 스프레드 시트 ID");


doc.useServiceAccountAuth(creds, function(err) {

let carDatas = new Array();

carDatas[0] = { 명칭 : "아반떼", 제조사 : "현대" }

carDatas[1] = { 명칭 : "K3", 제조사 : "기아" }

carDatas[2] = { 명칭 : "SM3", 제조사 : "르노삼성" }

carDatas[3] = { 명칭 : "골프", 제조사 : "폭스바겐" }

carDatas[4] = { 명칭 : "포커스", 제조사 : "포드" }

carDatas[5] = { 명칭 : "프리우스", 제조사 : "토요타" }

carDatas[6] = { 명칭 : "시빅", 제조사 : "혼다" }

for(let carType of carDatas) {


doc.addRow(

               1         // 첫번째 시트

, carType // 입력할 데이터

, function(err) { // 콜백 데이터

console.log(err);

}

);

}

});





# 출력 결과




※ 소스 코드 배열의 차종과, 스프레드 시트의 차종 정렬이 다르다.

   이 부분은 어떻게 해야 하는지 확인 후 해당 포스팅 수정 예정이다.






반응형
저작자표시

'Node.js > Google Spread Sheet' 카테고리의 다른 글

[Node.js] googleapis 사용한 Googel Spread Sheet 연동  (0) 2020.08.26
[Node.js] Google Spread Sheet 수정 및 삭제하기  (5) 2019.06.11
[Node.js] Google Spread Sheet의 데이터 가져오기  (0) 2019.06.10
[Node.js] Google Spread Sheet 연동하기  (2) 2019.06.10
//

[Node.js] Google Spread Sheet의 데이터 가져오기[Node.js] Google Spread Sheet의 데이터 가져오기

Posted at 2019. 6. 10. 18:07 | Posted in Node.js/Google Spread Sheet
반응형








※ 해당 포스팅 google-spreadsheet 2.0.7 버전을 기준으로 작성되었습니다.

    google-spreadsheet 3 버전 이후버전부터는 실행에 앞서 에러가 발생합니다.

    추후 수정 예정이오니 해당 포스팅을 참고하시는 분은 이점을 꼭 기억해 주시기 바랍니다.

    ( google-spreadsheet 2.0.7 버전의 경우 2020-05-15일 기준으로 사용에 문제는 없습니다. )





노드.js의 google-spreadsheet 모듈로 스프레드 시트의 데이터를 읽는 방법은.


크게 getRows( )와 getCells( ) 를 이용하는 방법이 존재한다.


개인적인 생각으로는 단순히 데이터를 읽어들이는것은 getRows( )가 편하지만


각 셀(Cell)을 수정하거나 삭제하는경우의 수는 getCells( )를 사용할 수 밖에 없기 때문에.


두 방법 모두 같이 사용하는 방법을 알아두는것이 좋다.









■ 열(Row)을 기준으로 구글 스프레드 시트의 데이터 읽어오기




# 스프레드 시트





# 소스 코드

 google_sheets_read_getrows.js

const googleSpreadsheet = require("google-spreadsheet");

const creds = require("./서비스 계정 키.json");

const doc = new googleSpreadsheet("구글 스프레드 시트 ID");


doc.useServiceAccountAuth(creds, function(err) {

doc.getRows(

  1 // 시작할 시트의 인덱스(인덱스는 1부터 시작함)

, {

  "offset" : 1    // 시작할 행의 갯수

, "limit" : 5    // 한번에 읽을 최대 행의 갯수 ( 최상위 1번 열은 포함하지 않는다. )

               , "orderby" : "나이"          // 정렬 기준 최상위 1번 열(row)의 제목(Key값)을 기준으로 한다.

               , "reverse" : true             // true : 내림차순, false : 오름차순(기본값)


                          // 연산자를 통해 검색 기준을 생성한다.

         // 예) 제목(Key값) > 조건 and 제목(Key값) < 조건

               , "query" : "나이 >= 20 and 나이 < 30"

}

, function(err, rows) {

// console.log(rows);

for(var num = 0; rows.length > num; num++) {


console.log( rows[num].활동명 + " / " + rows[num].별명 );

}

}

);

});





# 출력 결과

 node google_sheets_read_getrows.js





위와같이 getRows( )를 통해서 데이터를 읽어오는 것을 해 보았다.


query 속성을 통해 검색 값에 제한을 줄 수 있다는 것이 매우 장점이지만.


아쉽게도 getRows( )를 통해서 가져온 셀(Cell)의 데이터를 수정할 수는 없다.


getRows( )는 조회용으로만 사용하는것을 추천한다.









■ 셀(Cell)을 기준으로 구글 스프레드 시트의 데이터 읽어오기





# 스프레드 시트






# 소스 코드

 google_sheets_read.js

const googleSpreadsheet = require("google-spreadsheet");

const creds = require("./서비스 계정 키.json");

const doc = new googleSpreadsheet("구글 스프레드 시트 ID");


doc.useServiceAccountAuth(creds, function(err) {

doc.getCells(

  1 // 시작할 시트의 인덱스(인덱스는 1부터 시작함)

, {

  // min-row와 min-col은 지정하지 않으면 기본값이 1로 지정되어

  // 첫번째(A1)셀부터 값을 읽어들인다. 

  "min-row" : 1 // Cell의 최소 가로 범위

, "min-col" : 1 // Cell의 최소 세로 범위

  // max-row와 max-col은 필수적으로 기입해 주는것이 좋다

  // return-empty 설정이 true인경우 무한루프에 빠질 수 있다.

, "max-row" : 3 // Cell의 최대 가로 범위(필수)

, "max-col" : 3      // Cell의 최대 세로 범위(필수)

  // return-empty이 false인 경우 빈 셀을 포함하지 않는다. 

  // true이면 빈 셀을 포함하기에 반드시 max-row, max-col을 설정해야 한다.

, "return-empty" : true

}

, function(err, cells) {


for(var num = 0; cells.length > num; num++) {


console.log( cells[num].value );

}

}

);

});





# 출력 결과

 node google_sheets_read.js




위와같이 getCells( )를 사용하는 방법을 알아보았다.


위에서 한번 설명했듯이 생성한 데이터의 수정을 위해서는 getCells( )를


사용할 수 밖에 없기 때문에, 사용방법을 꼭 숙지해 두는것이 좋다.





반응형
저작자표시

'Node.js > Google Spread Sheet' 카테고리의 다른 글

[Node.js] googleapis 사용한 Googel Spread Sheet 연동  (0) 2020.08.26
[Node.js] Google Spread Sheet 수정 및 삭제하기  (5) 2019.06.11
[Node.js] Google Spread Sheet에 데이터 입력하기  (0) 2019.06.11
[Node.js] Google Spread Sheet 연동하기  (2) 2019.06.10
//

[Node.js] Google Spread Sheet 연동하기[Node.js] Google Spread Sheet 연동하기

Posted at 2019. 6. 10. 17:05 | Posted in Node.js/Google Spread Sheet
반응형




참고 : https://www.npmjs.com/package/googl-spreadsheet

API : https://github.com/theoephraim/node-google-spreadsheet





※ 해당 포스팅 google-spreadsheet 2.0.7 버전을 기준으로 작성되었습니다.

    google-spreadsheet 3 버전 이후버전부터는 실행에 앞서 에러가 발생합니다.

    추후 수정 예정이오니 해당 포스팅을 참고하시는 분은 이점을 꼭 기억해 주시기 바랍니다.

    ( google-spreadsheet 2.0.7 버전의 경우 2020-05-15일 기준으로 사용에 문제는 없습니다. )





■ Node.js에서 google-spreadsheet 모듈 설치하기





제일 먼저 노드에서 구글 스프레드 시트를 제어할 수 있게 해주는


google-spreadsheet 모듈을 설치한다.


 $ npm install google-spreadsheet@2.0.7







■ Google Spread Sheet API 생성하기



01. 먼저 https://console.developers.google.com/에 접속 하여 상단 메뉴의 프로젝트 명을 클릭한다.

※ 필자는 기존에 생성해둔 프로젝트가 있기때문에 위와 같은 화면부터 시작되었다.





02. 팝업창이 뜨맨 새 프로젝트 버튼을 클릭하여 새로운 프로젝트를 생성한다.






03. 프로젝트의 이름을 생성해 준다.

 ① 먼저 프로젝트의 이름은 자동으로 생성된다, 그렇지만 직접 입력하여 수정이 가능하다.

 ② 만들기 버튼을 클릭하여 프로젝트를 생성한다.





04. 정상적으로 프로젝트가 생성되었다면 아래와 같은 프로젝트 선택 팝업창을 확인 할 수 있다.





05. 좌측의 라이브 러리를 클릭하여 구글 시트 라이브 러리를 생성해 보자.





06. 검색창에 Google Sheets API를 입력하면 구글 시트 라이브 러리를 찾아온다.

    구글 시트의 API를 선택한다.






07. 사용 설정을 누르면 구글 시트 API의 사용이 가능해 진다.





08. 이제 좌측 메뉴에서 사용자 인증 정보 를 클릭한다.





09. 해당 작업을 진행하기 위한 인증 KEY는 서비스 계정 키 이다.

 ① 사용자 인증 정보 만들기를 클릭한다.

 ② API 키, OAuth 클라이언트 ID, 서비스 계정 키의 3가지 항목 중에서 서비스 계정 키를 선택한다.





10. 이제 서비스 계정 키를 생성해야 한다.

 ① 서비스 계정의 이름과 아이디를 생성한다.

     서비스 계정 ID는 구글 시트와 노드.js와의 연동에 필요할 수 있으니 카피해 두자.

 ② 키 유형은 JSON 파일을 선택한다.

 ③ 생성버튼을 클릭한다.





11. 서비스 계정의 JSON 파일이 자동으로 생성된다.

     다운을 받아두도록 하자.





12. 그럼 아래와 같이 사용자 계정 키가 정상적으로 생성 되었다.















■ 구글 스프레드 시트 문 생성하고 읽기, 쓰기 권한 부여하





01. 자신의 구글 드라이브(https://drive.google.com/drive/my-drive) 페이지에 접속하여 새로운 스프레드 시트문서를 생성해 보자.





02. 문서가 생성되면 우측의 공유 버튼을 클릭한다.







03. 해당 구글 스프레드 시트를 외부에서 사용하기 위한 권한을 설정해야 한다.

① 링크 공유를 통해 모든 사용자 혹은 링크를 알고있는 사용자의 접속을 허용한다.

② 다른 방법으로는 위에서 생성한 서비스 키의 메일 주소에 읽기 및 쓰기 권한을 주는 것이다.

 








04. 설정이 완료되면 해당 스프레드 시트의 URL에서 ID에 해당하는 내용을 복사해 둔다.





그럼 이제 Node.js와 Google Sheets의 연동에 필요한 사전 준비는 마무리 되었다.


이제 정상적으로 작동하는지를 한번 확인해 보자.








■ Node.js와 Google Spreadsheet 연동하기




모든 밑작업이 완료 되었다면 이제 노드.js와 스프레드 시트를 연동해 보자.


위 작업들에서 따로 보관해 두어야 한다고 했던 서비스 계정 키.json 파일과


작업을 진행할 구글 스프레드 시트의 아이 값이 사용된다.



# 소스 코

 google_sheets.js

const googleSpreadsheet = require("google-spreadsheet");


// Google APIs 페이지에서 생성한 서비스 계정 키의 JSON 파일을 배치한다.

const creds = require("./서비스 계정 키.json");


// 작업을 수행할 Google Spreadsheet 문서의 ID값

const doc = new googleSpreadsheet("구글 스프레드 시트 ID");


doc.useServiceAccountAuth(creds, function(err) {

doc.getInfo(function(err, info) {

                // 해당 시트의 정보가 info에 담겨있다.

// console.log(info);

console.log("구글 시트의 제목  : " + info.title);

console.log("구글 시트의 URL  : " + info.id);

                console.log("마지막으로 업데이트된 날짜 및 시간  : " + info.updated);

console.log("스프레드시트의 생성자 아이디  : " + info.author.name);

console.log("스프레드시트의 생성자 메일주소  : " + info.author.email);

});

});




# 출력 결과




이로서 노드.js와 구글 스프레드 시트의 연동이 성공적으로 되는 모습을 확인 할 수 있다.










반응형
저작자표시

'Node.js > Google Spread Sheet' 카테고리의 다른 글

[Node.js] googleapis 사용한 Googel Spread Sheet 연동  (0) 2020.08.26
[Node.js] Google Spread Sheet 수정 및 삭제하기  (5) 2019.06.11
[Node.js] Google Spread Sheet에 데이터 입력하기  (0) 2019.06.11
[Node.js] Google Spread Sheet의 데이터 가져오기  (0) 2019.06.10
//

[jQuery] 팝업 창 외에 다른 항목 클릭 막기[jQuery] 팝업 창 외에 다른 항목 클릭 막기

Posted at 2019. 6. 4. 19:30 | Posted in JavaScript & jQuery/jQuery
반응형




참고 : 당신은 모를 수도 있는 CSS의 7가지 단위

이전글 : [jQuery] 움직이는 팝업 레이어 만들기






■ 팝업 창 외에 다른 항목 선택 불가 필름 만들기



# 소스 코드

<html>

<head>

<title>:: 제이쿼리 UI Draggable ::</title>

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>

<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<style type="text/css">

    #popWindow {

        position:absolute;

        display:none;

        background-color:#000000;

        left:10%;

        top:10%;

    }


    #closeBtn {

        position:absolute;

        width:24px;

        z-index:1;

        margin-left:-16px;

        margin-top:-8px;

    }


    #popBottom {

        height:28px;

        text-align:left;

        font-weight:bold;

        color:#FFFFFF;

        padding-left:10px;

        padding-right:10px;

    }

    

    /* vw(넓이)와 vh(높이)를 100으로 주면 자동으로 브라우저 전체 넓이, 높이를 지정할 수 있다. */

    #protectionFilm {

    display:none;

    position:absolute;

    background-color:rgba(0, 0, 0, 0.2);

    top:0px;

    left:0px;

    width:100vw;

    height:100vh;

    }

</style>

<script type="text/javascript">

    function popWindowOpen() {


        // css의 vmax 속성으로 세로 길이를 전부 채울 수 있지만.

        // 실제 개발중에는 레이어의 여백 설정 문제로 어느정도 칸이 남는경우가 존재한다.

        // 만약 작업중 레이어 전체가 체워지지 않는경우

        // document.body.offsetWidth와 document.body.offsetHeight 를 사용하여

        // 전체크기의 값을 구하자

        // jQuery("#protectionFilm").css("width", document.body.offsetWidth);

        // jQuery("#protectionFilm").css("height", document.body.offsetHeight);


    jQuery("#protectionFilm").css("display", "block");

        jQuery("#popWindow").css("display", "block");


        // draggable 기능에 containment 조건으로 팝업창이 움직일 수 있는 영역에 제한을 건다.

        jQuery("#popWindow").draggable({ containment : jQuery("#protectionFilm") });

    }


    function popWindowClose() {

    jQuery("#protectionFilm").css("display", "none");

        jQuery("#popWindow").css("display", "none");

    }

</script>

</head>

<body>

<div id="protectionFilm"></div>

<div id="popWindow">

    <div style="text-align:right;">

        <a href="javascript:;" onClick="popWindowClose();">

            <img id="closeBtn" src="./images/close_box_red.png"/>

        </a>

    </div>

    <a href="javascript:;" onClick="">

        <img src="./images/choi_seul_gi.jpg" style="position:static;"/>

    </a>

    <div id="popBottom">

        <label>

            <input type="checkbox" onClick="popWindowClose();">&nbsp;

            오늘&nbsp;하루&nbsp;이&nbsp;창을&nbsp;열지&nbsp;않습니다.

        </label>

    </div>

</div>

<input type="button" onClick="popWindowOpen();" value="팝업창 오픈"/>

</body>

</html>  




# 출력 결과







반응형
저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] JCROP을 이용한 이미지 자르기 - Sample  (5) 2020.02.11
[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작  (0) 2019.06.18
[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기  (7) 2019.01.31
[jQuery] Mobile Web 사용시 KEYBOARD 이벤트 체크  (0) 2018.11.17
[jQuery] 원을 그리며 카운트 세는 타이머 애니메이션  (0) 2018.11.02
//

티스토리툴바