[Tamwood_JS_Assignment] Fundamentals of Web Development 8.7 Objects

Collections:

• 배열(Array):배열은 동일한 또는 다른 타입의 여러 데이터를 순차적으로 저장하는 컬렉션
• 객체(Object): 객체는 키(key)와 값(value) 쌍으로 이루어진 데이터 구조.
• Set은 중복되지 않는 유일한 값들의 모음입니다. 배열과는 달리, 같은 값을 두 번 포함할 수 없음.
• Map은 키(key)와 값(value)의 쌍을 저장하는 컬렉션. 객체와 유사하지만, 키에 객체를 사용할 수 있고, 삽입된 순서대로 데이터를 반복(iterate)할 수 있음.
• 리스트(List): 순서가 있는 데이터들의 집합.
• 세트(Set): 중복되지 않는 유일한 값들의 집합.
• 맵(Map): 키-값 쌍을 저장하는 데이터 구조.
• 큐(Queue): 선입선출(FIFO) 구조의 컬렉션.
• 스택(Stack): 후입선출(LIFO) 구조의 컬렉션.

object는 파이썬의 딕셔너리와 비슷함.

Object Creation Using Object Literal Notation

const objName = { 
    name1: value1, 
    name2: value2, 
    // ...
    nameN: valueN 
};

//접근법
objName.name1 
objName["name1"]

8.7.2 Object Creation Using Object Constructor

• 리터럴 표기법은 객체를 간단하게 생성하고 관리할 수 있는 더 나은 방법으로, 대부분의 경우 생성자 함수보다 선호됩니다.
  • 생성자 표기법 : const objName = new Object();와 같이 Object 생성자를 사용해 빈 객체를 생성한 후, 객체에 속성을 추가하는 방식입니다.
  • 리터럴 표기법 : const obj2 = {};와 같이 리터럴 표기법으로 간단하게 빈 객체를 생성할 수 있습니다.
• 객체 안에 배열, 다른 객체를 포함하는 방식으로 복잡한 데이터를 표현할 수 있습니다.
  

8.7.3 Object Destructuring

: 객체의 속성들을 쉽게 추출하여 개별 변수에 할당할 수 있도록 하는 기능

const photo = {
    id: 1,
    title: "Central Library",
    location: {
        country: "Canada",
        city: "Calgary"
    }
};

// 기존 방식:
let id = photo.id;
let title = photo["title"];
let country = photo.location.country;
let city = photo.location["city"];

// 1. Object Destructuring 방식:
let { id, title } = photo;
let { country, city } = photo.location;

//2. 중첩된 객체 destructuring
let { id, title, location: { country, city } } = photo;

//3. 추출할 변수 이름 변경하는법
let { id: photoId, location: { city: photoCity } } = photo;

//4. Spread 문법(...)과 함께 사용하기
const foo = { name: "Bob", ...photo.location, iso: "CA" };

//5. Shallow Copy (얕은 복사)
const obj1 = { names: ["bob", "sue"], age: 23 };
const obj2 = { company: "IBM", year: 2020 };

const foo = { ...obj1, ...obj2 };  // 얕은 복사

obj1.names[1] = "randy";  // 원본 객체의 배열을 수정
console.log(foo.names[1]);  // "randy" (얕은 복사이므로 영향을 받음)

8.7.4 JSON

1. JSON의 정의

• JSON은 JavaScript Object Notation의 약자로, 언어 독립적인 데이터 교환 형식입니다. 웹 애플리케이션에서 서버와 클라이언트 간 데이터를 주고받을 때 자주 사용됩니다. XML과 유사한 역할을 하지만, 더 간결하고 가볍습니다.
• JSON은 문자열 형식으로 작성되며, 데이터를 쉽게 구조화할 수 있습니다. JavaScript 객체 표기법과 비슷하지만, 차이점은 속성 이름이 반드시 따옴표로 감싸져야 한다는 점입니다.

2. JSON 문자열과 객체의 차이

• JSON 형식은 문자열일 뿐이며, 이를 실제 자바스크립트 객체로 변환하려면 JSON.parse( 메서드를 사용해야 합니다.

const text = '{ "name1": "value1", "name2": "value2" }';
const anObj = JSON.parse(text);  // JSON 문자열을 객체로 변환
console.log(anObj.name1);  // "value1"

3. JSON을 사용하는 이유

• JSON은 웹 애플리케이션에서 서버와 데이터를 주고받을 때 매우 많이 사용됩니다. 웹 애플리케이션에서 API나 서버로부터 데이터를 받을 때, JSON 형식으로 데이터를 받게 됩니다. 이를 클라이언트 측에서 JSON.parse()로 파싱하여 객체로 변환한 뒤, 데이터를 사용합니다.

4. JSON 데이터 송수신 과정

• 웹 애플리케이션에서 클라이언트는 서버에 데이터 요청을 보내고, 서버는 JSON 형식으로 데이터를 응답합니다. 응답된 JSON 데이터를 클라이언트 측에서 파싱하여 사용하게 됩니다. 이 과정을 도식으로 표현하면 다음과 같습니다:
  1. 클라이언트가 서버에 로그인 요청을 보냄.
  2. 서버가 인증 토큰을 반환.
  3. 클라이언트가 데이터 요청을 보냄.
  4. 서버는 JSON 데이터를 응답.
  5. 클라이언트가 JSON 데이터를 파싱하여 화면에 표시.
     

5. 외부 JSON 파일 로드
   외부 JSON 파일을 웹 페이지에 포함시키고 싶다면 <script> 태그를 사용하여 데이터를 불러올 수 있습니다. 예를 들어, 다음과 같이 HTML 파일에서 외부 JSON 파일을 로드할 수 있습니다:

<script src="js/photos.json"></script>
<script src="js/ex14.js"></script>

그런 다음 자바스크립트에서 JSON.parse()로 데이터를 객체로 변환하여 사용할 수 있습니다

Test Your Knowledge #4