본문 바로가기

Programing/JavaScript64

구글 스프레드시트를 API 호출하여 실시간으로 fetch하고 JSON으로 파싱하기 상황구글 스프레드에 작성된 데이터를 배열 안에 여러 객체가 담기는 형태로 API를 요청하고 이를 JavaScript 코드로 JSON 파싱하여 실시간 데이터를 사용하고 싶다.Fetch API를 사용하여 비동기적으로 데이터를 요청하고 응답을 받을 것이다.방법구글 스프레드 시트에서 데이터를 작성한다.Apps Script 열기스프레드시트에서 확장 프로그램 > Apps Script 를 선택.편집기가 열리면 기존 코드를 지우고 아래 코드를 붙여 넣음.function doGet(e) { var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); var rows = sheet.getDataRange().getValues(); var data = [];.. Programing/JavaScript 2024. 5. 8.
이벤트 버블링 기법 : 리로드 되는 페이지에서 이벤트 리스너가 끊어지는 문제 해결 방법 상황HTML 페이지에 여러 개의 버튼을 달고 그 버튼에서 클릭 이벤트가 발생했을 때 이벤트 리스너를 동작시키기 위해 여러 개의 이벤트 리스너를 달았다.특정 버튼의 기능에서 페이지를 초기화 하는 함수가 있어 페이지가 전부 리로드 된다.페이지가 리로드 되면 각 버튼에 달려있던 이벤트 리스너의 연결이 끊어지면서 버튼을 클릭해도 반응이 없다.해결해당 버튼이 아닌 상위 요소에 이벤트리스너를 장착하여, 버튼이 리로드 되더라도 이벤트 리스너가 끊어지지 않도록 한다.// 기존 코드document.querySelector(".detail_heart_btn").addEventListener("click", clickHeart);기존 코드가 있던 HTML의 태그 구성 요소를 보면 아래와 같다. 문제는 위 기존코.. Programing/JavaScript 2024. 5. 8.
REST API 직접 JSON 파일로 만들기 들어가면서인덱스와 키:밸류를 쌍으로 갖는 배열 안에 객체가 있는 자료형으로 만들면 API를 만들 수 있다.방법구글 스프레드시트나 엑셀과 같은 스프레드시트 프로그램에서 가로 첫 행을 제목행으로 갖고 아래로 내용이 뻗어가는 형태의 데이터베이스를 만든다.아래 사이트에 내용을 붙여넣어 JSON 파일 형태로 변환한다. 한글도 지원한다.https://tableconvert.com/ko/excel-to-json (밑의 사진과 다른 사이트임. 문제가 있어서 이 사이트에서 해보니 잘 됨.)변환된 데이터베이스를 변수의 값으로 할당할 임의의 js 파일을 하나 만든다. 값이 길지 않다면 사용 중인 js 파일에서 해도 되지만 데이터의 양이 많을 수 있으니 별도로 만드는 방법으로 진행한다. (예: data.js)json 데이터를.. Programing/JavaScript 2024. 4. 29.
[모던JS] 022. [기본] 기본 문법 요약 원문이 문서에서는 앞에서 다뤘던 기본 문법 중 외우기 쉽지 않아 실수할 수 있는 부분을 중심으로 요약하여 다룬다.코드 구조 (세미코론, 자동 삽입)여러 개의 구문은 세미콜론이나 줄바꿈을 기준으로 구분한다.줄바꿈을 해도 세미콜론이 자동 삽입(qutomatic semicolon insertion)된다.console.log('hello'); console.log('world');console.log('hello')console.log('wworld')// 둘 다 정상 작동그런데 아래와 같이 세미콜론 자동 삽입이 이루어지지 않을 때가 있다.console.log('이 메시지가 출력된 후 에러가 발생한다.')[1, 2].forEach(alert)세미콜론 자동삽입이 이루어지는 경우일반적인 구문{} 중괄호로 끝나는 코.. Programing/JavaScript 2024. 3. 30.
[모던JS] 021. [기본] 화살표 함수 기본 원문화살표 함수(arrow function)란?화살표 함수는 익명 함수를 사용하여, 함수 표현식에서 함수를 => 기호를 활용하여 간단하게 만드는 방법이다.함수 선언문에서는 익명 함수를 사용할 수 없기 때문에 화살표 함수를 사용할 수 없다.화살표 함수 기본형let func = (arg1, arg2, ...) => expressionlet 변수명 = (매개변수) => 표현식// 원래 함수let func = function(arg1, arg2, ...) { return expression;};// 화살표 함수 적용let func = (arg1, arg2, ...) => { return expression;};인수가 하나밖에 없다면 소괄호를 생략해도 된다. 소괄호를 생략하면 코드의 길이가 더 짧아진다.. Programing/JavaScript 2024. 3. 30.

티스토리툴바