스프레드시트 ⇆html 양방향 값 전달 CRUD(추가 갱신·삭제) 처리(GAS, javascript, jquery만)

◆하고 싶은 일


  • 스프레드 시트 ⇆ HTML 값 전달
  • 양방향 바인드 같은 CRUD 처리

  • ◆완성형



    스푸시






    웹 페이지






    ※date형은,gas→html에 건네주려고 하면(자) 에러가 되어, 캐릭터 라인에 고쳐야 할 것 같습니다.

    ◆기사로 하는 이유



    일관된 기사가 보이지 않거나, 좋은 것도 vue라든지 넣어 어렵거나

    ◆대상


  • 웹 엔지니어를 목표로하는 사람, 뛰어 내리는 사람
  • html과 css와 javascript를 조금 공부하는 사람
  • jquery는 어떻게 쓰는지, 메소드 체인이 무엇인지 알고있는 정도 (넷에서 조금 검색한 정도라도 괜찮다고 생각합니다.

  • ◆목차



    ①【GAS→html값 전달】스프레드시트(서버)→html(클라이언트)에 값 전달(로드, 템플리 로드 시)
    ②스프레드시트→html에 건네준 값을 테이블 형식으로(jquery)
    ③【html→GAS 값 전달】web페이지에서 테이블의 행 삭제→동시에 스프레드시트도 같은 행 삭제
    ④【html→GAS 값 전달】web페이지에서 테이블의 행 추가→동시에 스프레드시트도 같은 행 추가, 데이터 삽입

    ◆GAS의 장점


  • 환경 구축 불필요
  • 스프레드 시트 = 서버이므로 데이터가 어떤 형태로 들어 있는지 알기 쉽습니다
  • 서버가 필요하지 않으므로 비즈니스에서 사용할 수 있습니다 (회사가 Google Workspace를 배포하는 경우 특히)
  • 자바 스크립트와 거의 동일하기 때문에 학습 비용이 낮습니다
  • vue.js 또는 js 라이브러리를 사용할 수 있습니다
  • 프런트 엔드 주위는 GAS만으로 상당히 배울 수 있습니다

  • 정리하면, 초학자 방향(프런트 엔드)・실무에서도 사용할 수 있다・****

    ◆GAS의 단점


  • 사용자가 적습니다 = 소스가 적습니다
  • 서버 주위의 학습은 별도 필요 (sql, 서버로 동작하는 다른 프로그래밍 언어)
  • 너무 재미 (환경 구축 주변, MVC의 전체 스택 라이브러리 학습에 충분하지 않음)
  • 좋은 웹페이지 즐겨찾기