# TIL: 2025-05-12 어려워서 질리기 전에 썸네일이라도 바꾸자

1. 맛집 탐색 프로그램

SPA(Single Page Application) 방식과 Google Map API를 활용한 맛집 탐색 프로그램

맛집 탐색 프로그램

너무 길고 중요하고 어려워서 따로 빼서 정리함

• SPA 방식: 전체 페이지를 새로고침하지 않고도 화면 전환이 가능
  Single Page Application
  한 개의 페이지로 이루어진 애플리케이션

• Google Maps API: 지도 위에 맛집 위치 표시, 마커 클릭 시 상세 정보 제공

2. JS의 객체 정의법

DBA와 JAVA개발자가 함께 아프리카 여행을 떠났다.
그들은 Lion 객체를 보고 각각 뭐라고 생각할까?

※ 자바스크립트의 객체 리터럴과 RDB의 한 행(row)은
모두 키(key)-값(value) 형태라는 점이 유사함

1️⃣ 객체 리터럴 방식 (가장 간단하고 흔한 방식)

• 객체리터럴에 의한 객체정의는 자체가 객체
  let x = { key: value };
• 틀(클래스)이 없기 때문에 객체 10개 정의하려면 코드 10번 작성해야함
• 사용목적 : 데이터 담기

let person = {
    name: "홍길동",
    age: 30,
    sayHello: function() {
        console.log("안녕하세요!");
    }
};

• 이 방식은 즉시 객체 생성이 필요한 경우 유용
• 클래스 없이 1회성으로 사용하거나 간단한 데이터 저장에 적합

2️⃣ ES6 클래스 문법 (가장 최신/권장 방식)

• 클래스에 의한 객체정의는 자체가 사용할 수 있는 객체X,
• 틀이므로 사용하려면 반드시 인스턴스화 과정이 필요함
• 사용목적: 재정의(=대량생산)

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHello() {
        console.log("안녕하세요!");
    }
}

let person1 = new Person("홍길동", 30);

• 문법이 명확하고 Java 등의 클래스 기반 언어와 유사
• 상속, 캡슐화 등의 객체지향 개념도 구현 가능

3️⃣ 생성자 함수에 의한 객체 정의 (옛날 방식)

ES6(2015년) 이후 class 문법이 도입되면서 더 직관적이고 명확하게 객체와 생성자를 정의할 수 있게 되었기 때문에 잘 쓰지 않음

(참고만)

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log(`Hi, I'm ${this.name}`);
  };
}

const user1 = new Person('Alice', 30);
user1.sayHello(); // Hi, I'm Alice

클래스와 객체 리터럴 비교

클래스(재사용성 염두) vs 객체 리터럴 (자체가 인스턴스)