본문 바로가기

javascript16

[JavaScript] 나만 쓰는 맛집 리스트 만들기 (카드 UI 구현) - 6. 리뷰 구현 드디어 마지막 단계, 리뷰 시스템을 도입해 본다.친구들끼리 맛집 다녀와서 별점 남기는것도 소소한 재미! 1-1.구글 시트 생성리뷰를 받아둘 구글 시트를 새로 생성한다.기존에 쓰던 문서에 reviews 시트를 새로 생성하고, 첫번째행(=컬럼명)은 다음과 같이 작성했다.id : 고유값restaurantId : restaurants시트의 식당 IDrating : 별점comment : 한줄평nickname : 닉네임password : 수정/삭제할때 쓰일 비밀번호createdAt : 리뷰 작성 날짜 맛집 한개에 리뷰 여러개 달리는 1:N 구조로 작성될것이다. 1-2. Apps Script 수정리뷰 데이터를 저장하기 위해 doPost함수 안에 리뷰를 받아오는 코드를 다음과 같이 추가한다.if (data.type .. 2026. 4. 22.
[JavaScript] 나만 쓰는 맛집 리스트 만들기 (카드 UI 구현) - 4. 구글 시트 UPDATE 지난포스팅에서 못했던 수정모드 추가! 맛집 리스트 카드에서 수정 버튼을 클릭하면, 신규등록창을 수정모드로 바꾸고 수정할수 있게 했다.1. Apps Script 에 수정모드 추가지난 포스팅에서 삭제모드 추가한것과 동일하게, Apps Script의 Code.gs를 수정한다.시트의 컬럼순서는 아래와 같다.1: id2: name3: category4: price5: comment6: createdAt7: createdBy doPost(e) 함수 내부의 기존 로직 아래에 update 분기를 추가한다. // 수정 if (data.action === "update") { const rows = sheet.getDataRange().getValues(); for (let i = 1; i 위의 코드를 추가로 작성해.. 2026. 4. 18.
[JavaScript] 나만 쓰는 맛집 리스트 만들기 (카드 UI 구현) - 3. 구글 시트로 CRUD 만들기 지난 포스팅에 이어서,구글 연동을 해두었으니 이제 사용자 페이지에서 직접 맛집을 추가하고 삭제해보자. 1. Apps Script 수정우선 지난 구글시트의 Apps Script 다시 가서 Code.gs에 아래 내용을 추가한다.function doPost(e) { const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("restaurants"); const data = JSON.parse(e.postData.contents); // 삭제 if (data.action === "delete") { const rows = sheet.getDataRange().getValues(); for (let i = 1; i "restaur.. 2026. 4. 17.
[JavaScript] 나만 쓰는 맛집 리스트 만들기 (카드 UI 구현) - 2. 구글 시트 연동하기 맛집은 점점 늘어나고,그때마다 내가 일일히 추가하긴 번거롭고,DB 연동을 하자니 일이 너무 커지는것같고.그래서 찾아낸 구글시트 연동 방법!좀 느릴때도 있지만 많지 않은 데이터 간단하게 연동하기 좋다!DB 없이 데이터 연동하기 😁 지난 포스팅에서는 데이터를 이렇게 넣어두었었다.const restaurants = [ { name: "김밥천국", category: "bunsik", desc: "빠르게 한 끼 해결" }, { name: "청년국밥", category: "korean", desc: "든든한 국밥 한 그릇" }, { name: "뚝배기집", category: "korean", desc: "집밥 느낌 나는 백반집" }, { name: "제육나라", category: "korean", desc.. 2026. 4. 16.
[JavaScript] 나만 쓰는 맛집 리스트 만들기 (카드 UI 구현) - 1. 기본 레이아웃 요즘 회사에서 점심시간마다 맛집 탐방하는데 푹 빠져서 이걸 나만 (내 친구들 하고만) 볼 수 있는 리스트를 만들어보면 어떨까? 하고 만들어본 간단한 javascript 페이지!재미로 만들어본 페이지가 점점 기능이 추가되어서블로그 포스팅을 해보기로 함ㅋㅋㅋ(포스팅에서 다루는 음식점 이름은 gpt가 뽑아준 가상의 식당들임) 우선 이번 포스팅에서는 기본 레이아웃만 다뤄본다. 메인 페이지 : index.htmlscript.jsstyle.css 기본 기능 : - 저장된 맛집 리스트 카드 형태로 구현- 랜덤 추천 버튼 index.html 🍽️ 우리 동네 맛집 리스트 🎲 랜덤 추천 script.jsconst restaurants = [ { name:.. 2026. 4. 15.
JavaScript 기초 : 객체 (Object) 객체 (Object)원시타입이 아닌 객체타입의 자료형현실 세계에 존재하는 어떤 사물이나 개념을 표현하기에 용이하다. 객체는 다음과 같이 두가지 방법으로 생성할 수 있다.let obj1 = new Object();// 또는let obj2 = {}; 객체 속성 (객체 프로퍼티)Key : Value 의 형식으로 작성하며 갯수나 자료형의 제한은 없다.Key값은 문자열이나 숫자형도 가능하나, 띄어쓰기가 포함된 문자열을 사용할 경우 따옴표로 묶어줘야한다.let introduce = { name : "홍길동", age : 30, hobby : "Tennis", job : "FE Developer", "favorite food" : "Pizza",}; 프로퍼티 접근 방법기본적으로 프로퍼티에 접근.. 2025. 8. 7.
JavaScript 기초 : 스코프 (Scope) 스코프 (Scope)변수나 함수에 접근하거나 호출할수 있는 범위를 말한다. - 전역 스코프 (Global Scope) : 전체 영역에서만 접근 가능 - 지역 스코프 (Local Scope) : 특정 영역에서만 접근 가능 let a = 1; // 전체에서 사용할수 있는 전역 스코프function funcA() { console.log(a); // 출력이 가능하다 let b = 2; // funcA함수 안에서만 쓸수 있는 지역 스코프 console.log(b); // 함수 안에서 b를 출력하므로 가능하다.}funcA(); // funcA가 실행되어 a와 b가 모두 잘 출력된다console.log(a); // 출력가능console.log(b); // [b is not defined] 오류 발.. 2025. 7. 30.
JavaScript 기초 : 콜백함수(CallBack Function) 콜백함수 (CallBack Function)자신이 아닌 다른 함수에 인수로써 전달된 함수.function main(value){ value();}function sub() { console.log("sub");}main(sub); // sub함수를 main함수의 인수로 보냈다 == 콜백함수// 함수 안에서 원하는 타이밍에 맞게 실행 시킬 수 있다.function main2(fnValue){ fnValue(); console.log("End");}function sub2(){ console.log("Start");}main2(sub2); // 콘솔창에 start end 순서로 찍힌다.// [추가] sub2를 따로 선언하지 않고 다음과 같이 함수표현식으로 사용할 수 있다.main2(() => { con.. 2025. 7. 29.
JavaScript 기초 : 함수 표현식 / 화살표 함수 함수 표현식 (Function Expression)함수 표현식은 함수를 변수에 할당하는 방식이다.함수 선언식과는 달리 호이스팅이 되지 않기 때문에 함수가 정의된 이후에만 호출할 수 있다. // 변수에 함수를 바로 담는다.let varA = function funcA() { console.log("function A");};varA(); // varA에 함수를 담았기 때문에 바로 변수로 바로 호출할 수 있다.// varA에 할당하며 생성된것이기 때문에 funcA를 바로 호출할 수는 없다.// 따라서 다음과 같이 익명함수로 생성할 수 있다let varB = function () { console.log("function B");};varB();// [주의] 함수표현식으로 만들어진 함수는 호이스팅되지 않는다... 2025. 7. 28.

티스토리툴바