스프레드시트 ⇆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의 전체 스택 라이브러리 학습에 충분하지 않음)