현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

1. 객체 리터럴(Object Literal)

• {} 중괄호를 사용하여 객체를 직접 정의하는 방식.

• 키(key)와 값(value) 쌍으로 이루어짐.

• 속성(Property)과 메소드(Method)를 포함할 수 있음.

1) 객체 리터럴 생성 방법

const person = {
    name: "상희",
    age: 25,
    greet: function() {
        console.log("안녕하세요!");
    }
};

console.log(person.name); // "상희"
person.greet(); // "안녕하세요!"

2) 객체 리터럴의 주요 특징

a. 점 표기법(.)과 대괄호 표기법([])

console.log(person.name);   // "상희"
console.log(person["age"]); // 25

✔️ 대괄호 표기법은 동적 키 접근이 가능함.

const key = "name";
console.log(person[key]); // "상희"

b. 속성 추가 및 수정

person.job = "개발자"; // 속성 추가
person.age = 25;       // 속성 수정
console.log(person);

c. 속성 삭제

delete person.age;
console.log(person);

3) 객체 리터럴과 this

• 메소드 내부에서 this를 사용하면 해당 객체를 참조할 수 있음.

const user = {
    name: "영희",
    sayHello: function() {
        console.log(`안녕, 나는 ${this.name}야.`);
    }
};

user.sayHello(); // "안녕, 나는 영희야."

4) 객체 리터럴 단축 문법

a. 속성 단축 표기

const name = "상희";
const age = 25;

const person = { name, age };
console.log(person); // { name: "상희", age: 25 }

b. 메소드 단축 표기

const user = {
    sayHi() {
        console.log("안녕하세요!");
    }
};

user.sayHi(); // "안녕하세요!"

5) 객체 리터럴의 한계

동일한 구조의 객체를 여러 개 생성할 때 비효율적임.
👉 생성자 함수 또는 클래스를 사용하면 해결 가능.

2. JSON

자바스크립트 객체 표기법을 뜻하며, 이는 자스 객체를 문자열로 표현하는 데이터 포맷이다.
자바스크립트 객체 리터럴 표기법에 기반을 두고 있고, 객체 키와 문자열은 따옴표로 묶어야 하나, 나머지는 그대로 표기할 수 있다.

1) JSON 형식

자바스크립트 객체 리터럴을 문자열 형식으로 변환한 것

2) JSON 특징

• 텍스트 기반이며 키-값 쌍으로 구성됨
• 자바스크립트 객체와 유사하지만 문자열 형식
• 대부분의 프로그래밍 언어에서 지원

3) JSON 예시

{
    "name": "철수",
    "age": 25,
    "job": "개발자",
    "skills": ["JavaScript", "HTML", "CSS"]
}

✔️ 키는 반드시 문자열("")이어야 함.
✔️ 값은 숫자, 문자열, 배열, 객체, 불리언, null 가능.

4) JSON과 JavaScript 객체 차이

✅ JSON (문자열 형식)

{
    "name": "철수",
    "age": 25
}

✅ JavaScript 객체

const person = {
    name: "철수",
    age: 25
};

✔️ JSON에서는 문자열("") 사용 필수.
✔️ JavaScript 객체에서는 문자열 없이 변수처럼 사용 가능.

5) JSON 변환 (JavaScript ↔ JSON)

✅ 객체 → JSON (JSON.stringify())

const obj = { name: "상희", age: 25 };
const json = JSON.stringify(obj);
console.log(json); // '{"name":"상희","age":25}' (문자열)

✅ JSON → 객체 (JSON.parse())

const jsonData = '{"name":"철수","age":25}';
const obj = JSON.parse(jsonData);
console.log(obj.name); // "철수"

3. 로컬스토리지(localStorage)

브라우저에 데이터를 영구 저장하는 웹 스토리지 API, 페이지를 닫거나 새로고침해도 데이터 유지됨.

1) 특징

• 문자열(String) 형태로만 저장 가능

• 5MB 제한 (브라우저마다 차이 있음)

• 동일 도메인에서만 접근 가능

2) 주요 기능

a. 데이터 저장 (setItem)

localStorage.setItem("name", "상희");

b. 데이터 가져오기 (getItem)

const name = localStorage.getItem("name");
console.log(name); // "상희"

c. 데이터 삭제 (removeItem)

localStorage.removeItem("name");

d. 전체 삭제 (clear)

localStorage.clear();

3) JSON 데이터 저장 및 불러오기

✅ 객체 저장 (JSON.stringify())

const user = { name: "상희", age: 25 };
localStorage.setItem("user", JSON.stringify(user));

✅ 객체 불러오기 (JSON.parse())

const userData = JSON.parse(localStorage.getItem("user"));
console.log(userData.name); // "상희"

👉 로컬 스토리지는 문자열 형태로 데이터를 저장하며, 브라우저를 닫아도 유지됨.

끝맺음.

뭔가 심오하다.............곧 리엑트 들어가는데...어쩌지....