javascript

01. 변수 : 데이터 불러오기

let을 이용해 변수에 값를 저장하고 불러옵니다.

{
    let x = 100, y = 200, z = "javascript";
    console.log(x, y, z);
}

2줄 : 변수 x, y, z에 각각 100, 200, "javascript"을 넣어줍니다.
3줄 : console.log()를 이용해 변수 x, y, z를 한꺼번에 출력합니다.

02. 상수 : 데이터 불러오기

const를 이용해 상수에 값을 저장하고 불러옵니다.

{
    const x = 100, y = 200, z = "javascript";
    console.log(x, y, z);
}

2줄 : 상수 x, y, z에 각각 100, 200, "javascript"을 넣어줍니다.
3줄 : console.log()를 이용해 상수 x, y, z를 한꺼번에 출력합니다.

03. 배열 : 데이터 불러오기

상수 배열을 초기값넣어 선언한 후 배열 값을 불러옵니다.

{
    const arr = [100, 200, "javascript"];
    console.log(arr[0], arr[1], arr[2]);
}

2줄 : 상수 배열에 차례대로 100, 200, "javascript"을 넣어줍니다.
3줄 : console.log()를 이용해 arr[0], arr[1], arr[2]를 한꺼번에 출력합니다.

04. 배열 : 데이터 갯수 불러오기

배열에 저장되어있는 값의 갯수(길이)를 출력합니다.

{
    const arr = [100, 200, "javascript"];
    console.log(arr.length);
}

2줄 : 상수 배열에 차례대로 100, 200, "javascript"을 넣어줍니다.
3줄 : console.log()를 이용해 arr[0], arr[1], arr[2]를 한꺼번에 출력합니다.

05. 배열 : 데이터 불러오기 : for()

배열의 값을 설정하고 for()문을 이용해 데이터를 모두 출력합니다.

{
    const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];

    console.log(...arr);
    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
    console.log(arr[3]);
    console.log(arr[4]);
    console.log(arr[5]);
    console.log(arr[6]);
    console.log(arr[7]);
    console.log(arr[8]);

    for (let i = 0; i <= 8; i++) {
        console.log(arr[i]);
    };
}

2줄 : 상수 배열 arr에 100, 200, 300, 400, 500, 600, 700, 800, 900의 값을 차례대로 넣어줍니다.
4줄 : console.log()를 이용해 펼침연산자로 arr배열의 값들을 출력합니다.
5줄 : console.log()를 이용해 arr[0]의 값을 출력합니다.
6줄 : console.log()를 이용해 arr[1]의 값을 출력합니다.
7줄 : console.log()를 이용해 arr[2]의 값을 출력합니다.
8줄 : console.log()를 이용해 arr[3]의 값을 출력합니다.
9줄 : console.log()를 이용해 arr[4]의 값을 출력합니다.
10줄 : console.log()를 이용해 arr[5]의 값을 출력합니다.
11줄 : console.log()를 이용해 arr[6]의 값을 출력합니다.
12줄 : console.log()를 이용해 arr[7]의 값을 출력합니다.
13줄 : console.log()를 이용해 arr[8]의 값을 출력합니다.
15줄 : for()문을 이용해 변수 i의 초기값 0, 8보다 작거나 같을 때까지의 조건, 실행 후 i에 1추가하는 명령을 입력합니다.
16줄 : console.log()을 이용해 배열 arr의 모든 값을 출력합니다.

06. 배열 : 데이터 불러오기 : forEach()

JavaScript에서 배열(Array) 객체에서 사용할 수 있는 배열 메서드 중 하나입니다.
이 메서드는 배열의 각 요소에 대해 지정된 함수를 실행하며, 각 요소를 순서대로 처리합니다.

{
    const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];

    arr.forEach(function (el) { //callback함수 : 함수안에 함수
        console.log(el);
    });

    arr.forEach(function (el, index) {
        console.log(index);
    });

    arr.forEach(function (el, index, array) {
        console.log(array);
    });

    //약식 표현
    arr.forEach((el) => {
        console.log(el);
    });

    arr.forEach(el => {
        console.log(el);
    });

    arr.forEach(el => console.log(el));
}

2줄 : 상수 배열 arr에 100, 200 ,300 ,400 ,500, 600, 700, 800, 900값을 차례대로 넣어줍니다.
4줄 : forEach()문을 이용해 함수안에 함수가 들어가는 콜백함수를 실현합니다. 매개변수로 el이 들어갑니다.
5줄 : console.log()를 이용해 arr에서 받은 매개변수 el의 값을 차례대로 출력합니다.
8줄 : forEach()문을 이용해 함수안에 함수가 들어가는 콜백함수를 실현합니다. 매개변수로 el과 index가 들어갑니다.
9줄 : console.lof()를 이용해 arr에서 받은 매개변수 index의 값을 차례대로 출력합니다.
12줄 : forEach()문을 이용해 함수안에 함수가 들어가는 콜백함수를 실현합니다. 매개변수로 el, index, array가 들어갑니다.
13줄 : console.lof()를 이용해 arr에서 받은 매개변수 array의 값을 차례대로 출력합니다.
주의) array의 모든 값이 array의 길이만큼 반복됩니다.
17줄 : forEach문의 콜백함수를 화살표함수로 약식표현합니다.
18줄 : console.log()를 이용해 arr에서 받은 매개변수 el의 값을 차례대로 출력합니다.
21줄 : forEach문의 콜백함수를 화살표함수로 약식표현했으며 매개변수의 괄호를 없앴습니다.
22줄 : console.log()를 이용해 arr에서 받은 매개변수 el의 값을 차례대로 출력합니다.
25줄 : forEach문의 콜백함수를 화살표함수로 약식표현했으며 매개변수의 괄호, 함수시작 중괄호를 모두 없애 한줄로 간단히 표현하였습니다.

07. 배열 : 데이터 불러오기 : for of

반복문 중 하나로, 주로 반복 가능한(iterable) 객체를 순회(iterate)할 때 사용됩니다.

{
    const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];

    for (const element of arr) {
        console.log(element);  //배열이 나온다
    };
}

2줄 : 상수 배열 arr에 100, 200 ,300 ,400 ,500, 600, 700, 800, 900 값을 차례대로 넣어줍니다.
4줄 : 상수 element을 하나 만들고 of 명령으로 상수 arr에 해당하는 값을 element에 차례대로 넣어줍니다.
5줄 : console.log()문으로 매개변수 element에 해당하는 값을 출력한다.

08. 배열 : 데이터 불러오기 : for in

객체의 속성을 열거할 때 주로 사용됩니다.

{
    const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];

    for (let element in arr) {
        console.log(element);  //index가 나온다
    };

    for (let element in arr) {
        console.log(arr[element]);  //배열이 나온다
    };
}

2줄 : 상수 배열 arr에 100, 200 ,300 ,400 ,500, 600, 700, 800, 900 값을 차례대로 넣어줍니다.
4줄 : 상수 element을 하나 만들고 in 명령으로 상수 arr에 해당하는 값을 element에 차례대로 넣어줍니다.
5줄 : console.log()문으로 element에 해당하는 값을 출력한다.
for in으로 가져온 데이터는 index 값이 반환되어 나온다.
8줄 : 상수 element을 하나 만들고 in 명령으로 상수 arr에 해당하는 값을 element에 차례대로 넣어줍니다.
9줄 : console.log()문으로 arr[element]에 해당하는 값을 출력한다.
arr에서 가져온 값 element은 인덱스이므로 arr의 배열값을 보고싶다면 arr[element]로 볼 수 있다

09. 배열 : 데이터 불러오기 : map()

map() 메서드는 기존 배열을 변경하지 않고 새로운 배열을 생성하며,
주로 배열의 각 요소에 대한 작업을 일괄적으로 수행하고 싶을 때 사용됩니다.

{
    const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];

    arr.map((el) => {
        console.log(el);
    });
}

2줄 : 상수 배열 arr을 선언하고 100, 200, 300, 400, 500, 600, 700, 800, 900의 값을 차례대로 넣어줍니다.
4줄 : arr배열을 첫번째 매개변수로 el변수를 받는 map()메서드를 선언합니다.
5줄 : console.log()를 이용해 매개변수의 값을 출력합니다.

10. 배열 : 데이터 불러오기 : filter()

filter() 함수는 배열의 요소를 조건에 따라 필터링하여 새로운 배열을 생성하는 메서드입니다.

{
    // filter() 메서드의 기본 구문
    // const newArray = array.filter(callback(element[, index[, array]])[, thisArg])

    const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
                                        
    arr.filter((el) =>{
        console.log(el);
    });
}

filter() 메서드는 배열에서 조건에 맞는 요소를 선택할 때 유용하며, 필터링된 결과로 새로운 배열을 생성합니다.

filter() 구문의 해석
1) array: 필터링할 배열입니다.
2) callback: 각 배열 요소를 평가할 콜백 함수로, 다음과 같은 매개변수를 가집니다:
element: 배열의 현재 요소.
index (선택 사항): 배열 내 현재 요소의 인덱스.
array (선택 사항): filter()를 호출한 배열.
thisArg (선택 사항): 콜백 함수 내에서 this로 사용될 값.

2줄 : 상수 배열 arr에 100, 200, 300, 400, 500, 600, 700, 800, 900 의 값을 차례대로 넣는다.
4줄 : arr배열값을 filter()메서드를 이용해 첫번째 매개변수로 el을 줍니다.
5줄 : console.log()를 이용해 arr의 값을 받아온 매개변수 el의 값을 출력합니다.

11. 배열 : 데이터 불러오기 : 배열 펼침 연산자

배열 펼침 연산자 (spread operator)는 배열 요소나 객체 속성을 쉽게 확장하거나 병합할 수 있는 유용한 기능입니다.

{
    const arr1 = [1, 2, 3];
    const arr2 = [4, 5, 6];
    const arr3 = [...arr1, ...arr2];

    console.log(...arr1);
    console.log(...arr2);
    console.log(arr3);
    console.log(...arr3);
}

2줄 : 상수배열 arr1에 값 1,2,3을 배열로 저장한다.
4줄 : 상수배열 arr2에 값 4,5,6을 배열로 저장한다.
5줄 : 상수배열 arr2에 값 4,5,6을 배열로 저장한다.
6줄 : console.log()를 이용해 arr1의 배열 펼침 연산자로 ...arr1의 값을 출력합니다.
7줄 : console.log()를 이용해 arr2의 배열 펼침 연산자로 ...arr2의 값을 출력합니다.
7줄 : console.log()를 이용해 arr3의 값을 출력합니다. 안의 내용은 arr1, arr2의 각 배열 펼침연산자가 들어갔지만 arr3은 펼침연산자의 결과가 아닌 배열결과가 나옵니다.
8줄 : console.log()를 이용해 arr3의 배열 펼침 연산자로 ...arr3의 값을 출력합니다.

12. 배열 : 데이터 불러오기 : 배열 구조 분해 할당

배열 구조 분해 할당을 통해 배열을 배열 방식이 아닌 값만 표시하는 예제입니다.

{
    const arr = [1, [2, 3], 4];

    const[a, [b, c], d] = arr;

    console.log(a);
    console.log(b);
    console.log(c);
    console.log(d);
}

2줄 : 상수 배열 arr에 1, [2,3], 4 구조를 가진 배열값을 입력한다.
4줄 : arr배열을 다시 구조 분해 할당하는데 이름을 각각 a, b, c, d로 할당한다.
6줄 : console.log()로 a값을 출력합니다.
7줄 : console.log()로 b값을 출력합니다.
8줄 : console.log()로 c값을 출력합니다.
9줄 : console.log()로 d값을 출력합니다.

13. 객체 : 데이터 불러오기

객체의 데이터를 불러오는 예제입니다.

{
    const Obj = {
        a: 100,
        b: 200,
        c: "javascript",
    }

    console.log(Obj.a);
    console.log(Obj.b);
    console.log(Obj.c);

    // 배열 리터럴을 이용해서도 출력가능
    console.log(Obj["a"]);
    console.log(Obj["b"]);
    console.log(Obj["c"]);
}

2줄 : 상수객체 Obj를 선언합니다.
3줄 : a키에 값 100을 넣습니다.
4줄 : b키에 값 200을 넣습니다.
5줄 : c키에 값 javascript를 넣습니다.
객체 리터럴 사용해 출력
8줄 : console.log()를 통해 Obj객체의 a키의 값을 출력합니다.
9줄 : console.log()를 통해 Obj객체의 b키의 값을 출력합니다.
10줄 : console.log()를 통해 Obj객체의 c키의 값을 출력합니다.
배열 리터럴 사용해 출력
13줄 : console.log()를 통해 Obj객에츼 a키의 값을 출력합니다.
14줄 : console.log()를 통해 Obj객체의 b키의 값을 출력합니다.
15줄 : console.log()를 통해 Obj객체의 c키의 값을 출력합니다.

14. 객체 : 데이터 불러오기 : Object.keys()

Object.keys()는 객체의 열거 가능한 프로퍼티(속성)들을 배열로 반환합니다.

{
    // Object.keys() 함수의 기본 구문
    // Object.keys(obj)

    const Obj = {
        a: 100,
        b: 200,
        c: "javascript",
    }
    // 키 a, b, c가 나옴
    console.log(Object.keys(Obj));
}

Object.keys()는 객체의 키(key)들을 배열 형태로 가져와야 할 때 유용하게 사용됩니다.

2줄 : 상수 객체 Obj를 선언합니다.
6줄 : a키에 값 100를 저장합니다.
7줄 : b키에 값 200를 저장합니다.
8줄 : c키에 값 javascript를 저장합니다.
11줄 : console.log()로 Object.keys()메소드를 이용해 Obj의 키들을 출력합니다.

15. 객체 : 데이터 불러오기 : Object.values()

Object.values()는 객체의 열거 가능한 값들을 배열로 반환합니다.

{
    // Object.values() 함수의 기본 구문
    // Object.values(obj)

    const Obj = {
        a: 100,
        b: 200,
        c: "javascript",
    }
    // 갑인 100, 200, javascript가 나옴
    console.log(Object.values(Obj));
}

객체의 값(value)들을 배열 형태로 가져와야 할 때 유용하게 사용됩니다.

5줄 : 상수 객체 Obj를 선언합니다.
6줄 : a키에 값 100을 넣습니다.
7줄 : b키에 값 200을 넣습니다.
8줄 : c키에 값 javascript을 넣습니다.
11줄 : console.log()로 Object.values()메소드를 이용해 Obj객체의 값들을 배열로 가져옵니다.

16. 객체 : 데이터 불러오기 : Object.entries()

Object.entries()는 JavaScript 객체의 열거 가능한 프로퍼티(key-value 쌍)를 배열의 배열로 반환하는 메서드입니다.

{
    // Object.entries() 메서드의 기본 구문
    // Object.entries(obj)

    const Obj = {
        a: 100,
        b: 200,
        c: "javascript",
    }
    // 키와 값을 둘다 배열로 처리
    console.log(Object.entries(Obj));
}

Object.entries()는 [key, value] 형태의 배열로 반환되며, 이러한 배열들이 모여 새로운 배열을 형성합니다.

5줄 : 상수 객체 Obj를 생성합니다.
6줄 : 객체 키 a에 값 100을 저장합니다.
7줄 : 객체 키 b에 값 200을 저장합니다.
8줄 : 객체 키 c에 값 "javascript"를 저장합니다.
11줄 : console.log()로 Object.entries()함수를 이용해 Obj객체의 키와 값을 배열로 출력합니다.

17. 객체 : 데이터 불러오기 : Object.assign()

Object.assign()은 객체 병합(merge) 및 복사(copy) 메서드 중 하나입니다.

{
    // Object.assign() 메서드의 기본 구문
    // Object.assign(target, ...sources)

    const Obj1 = { a: 100, b: 200, c: "javascript"}
    const Obj2 = { d: 300, e: 400, f: "jQuery"}
    const Obj3 = Object.assign(Obj1, Obj2);

    console.log(Obj3);
}

주의할 점으로 두 객체의 데이터를 합칠 때 같은 키값이 있어서는 안됩니다.★

결과 확인시 [object Object]의 안의 값을 보자면
Obj3 = {
a:100,
b:200,
c:"javascript",
d:300,
e:400,
f:"jQuery"
}
로 데이터가 합쳐져있다.

5줄 : 상수 객체 Obj1에 키 a의 값 100, 키 b의 값 200, 키 c의 값 "javascript"를 저장합니다.
6줄 : 상수 객체 Obj2에 키 d의 값 300, 키 e의 값 400, 키 f의 값 "jQuery"를 저장합니다.
7줄 : 상수 객체 Obj3에 Object.assign()메서드를 이용해 Obj1객체 데이터와 Obj2객체 데이터를 합칩니다.
9줄 : console.log()로 Obj3객체의 데이터의 키와 값을 출력합니다.

18. 객체 : 데이터 불러오기 : hasOwnProperty()

hasOwnProperty()는 해당 객체가 특정 속성(key)을 직접 소유하고 있는지 여부를 확인하는 데 사용됩니다.

{
    // hasOwnProperty() 메서드의 기본 구문
    // object.hasOwnProperty(property)

    const obj = {
        a: 100,
        b: 200,
        c: "javascript",
    }

    // 키의 값이 있는지 확인, 밑에 있는 자식만 찾아냄
    console.log(obj.hasOwnProperty("a"));   // true
    console.log(obj.hasOwnProperty("b"));   // true
    console.log(obj.hasOwnProperty("c"));   // true
    console.log(obj.hasOwnProperty("d"));   // false
    console.log(obj.hasOwnProperty("100")); // false

    // in 연산자, 밑에 있는 객체까지도 찾아냄
    console.log("a" in obj);    // true
    console.log("b" in obj);    // true
    console.log("c" in obj);    // true
    console.log("d" in obj);    // false
}

hasOwnProperty() 메서드는 객체의 속성을 확인하고, 해당 속성이 객체 자체에 직접 소유되었으면 true를 반환하고, 상위 프로토타입 체인에서 상속된 속성이면 false를 반환합니다.
쉽게 말하자면 찾고자하는 키값이 객체안에 바로 밑 자식으로 들어가있으면 true, 키값이 없거나 자식이 아닌 자식의 자식의 키값으로 있더라도 false입니다.

5줄 : 상수 객체 obj를 선언합니다.
6줄 : a키의 값으로 100을 저장합니다.
7줄 : b키의 값으로 100을 저장합니다.
8줄 : c키의 값으로 javascript를 저장합니다.
12줄 : console.log()로 hasOwnProperty()메소드를 이용해 obj객체에 a키를 가진 값이 있는지 출력합니다.
13줄 : console.log()로 hasOwnProperty()메소드를 이용해 obj객체에 b키를 가진 값이 있는지 출력합니다.
14줄 : console.log()로 hasOwnProperty()메소드를 이용해 obj객체에 c키를 가진 값이 있는지 출력합니다.
15줄 : console.log()로 hasOwnProperty()메소드를 이용해 obj객체에 d키를 가진 값이 있는지 출력합니다.
16줄 : console.log()로 hasOwnProperty()메소드를 이용해 obj객체에 100키를 가진 값이 있는지 출력합니다.
19줄 : console.log()로 in메소드를 이용해 obj객체에 a의 키값이 있는지 출력합니다.
19줄 : console.log()로 in메소드를 이용해 obj객체에 b의 키값이 있는지 출력합니다.
19줄 : console.log()로 in메소드를 이용해 obj객체에 c의 키값이 있는지 출력합니다.
19줄 : console.log()로 in메소드를 이용해 obj객체에 d의 키값이 있는지 출력합니다.

19. 객체 : 데이터 불러오기 : for in

객체의 열거 가능한 속성(enumerable properties)을 순회하기 위해 사용되는 반복문입니다.

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript",
    }

    for(let el in obj){
        console.log(el + " : " + obj[el]);
    };
}

for (const key in object) {}
for을 이용해 객체의 각각의 키를 가져오고 키를 이용해 값을 출력하며 불러옵니다.

2줄 : 상수 객체 obj를 선언합니다.
3줄 : 키 a의 값 100를 저장합니다.
4줄 : 키 b의 값 200를 저장합니다.
5줄 : 키 c의 값 "javascript"를 저장합니다.
8줄 : for in문으로 obj의 키값을 매개변수 el로 불러옵니다.
9줄 : console.log()를 이용해 매개변수el인 키값과 키값 el을 index값을 이용해 데이터를 출력합니다.

20. 객체 : 데이터 불러오기 : 객체 펼침 연산자

객체 펼침 연산자(Object Spread Operator)는 새로운 객체를 생성하고 기존 객체의 속성들을 복사하거나 병합할 때 사용되는 문법입니다.

{
    // 객체 펼침 연산자의 기본 구문
    // const newObject = { ...oldObject };

    const obj1 = {
        a: 100,
        b: 200,
        c: "javascript",
    }
    const obj2 = {
        d: 300,
        e: 400,
        f: "jQuery",
    }
    const obj3 = {...obj1, ...obj2};
    const obj4 = {...obj1, d: "jQuery"};
    const obj5 = {...obj1, b: 300}; // 원래 값이 바뀔 수도 있음
    console.log(obj3);
    console.log(obj4);
    console.log(obj5);
}

참고) 11. 배열 : 데이터 불러오기 : 배열 펼침 연산자와 같은 기능입니다.

2줄 : 상수 객체 obj1을 선언합니다.
3줄 : a키의 값으로 100을 저장합니다.
4줄 : b키의 값으로 100을 저장합니다.
5줄 : c키의 값으로 "javascript" 저장합니다.
7줄 : 상수 객체 obj2을 선언합니다.
8줄 : d키의 값으로 300을 저장합니다.
9줄 : e키의 값으로 400을 저장합니다.
10줄 : f키의 값으로 "jQuery" 저장합니다.
12줄 : 상수 객체 obj3에 obj1과 obj2값을 펼침 연산자로 저장합니다.
13줄 : 상수 객체 obj4에 obj1에 d키 값과 "jQuery
14줄 : 상수 객체 obj5에 obj1과 obj2값을 펼침 연산자로 저장합니다.

주의) 펼침 연산자로 데이터를 넣었지만 출력할 때는 배열로 인식됩니다.★
15줄 : console.log()로 obj3객체의 데이터를 출력합니다.
16줄 : console.log()로 obj4객체의 데이터를 출력합니다.
17줄 : console.log()로 obj5객체의 데이터를 출력합니다.

21. 객체 : 데이터 불러오기 : 객체 구조 분해 할당

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript",
    }

    const {a, b, c} = obj;

    console.log(a);
    console.log(b);
    console.log(c);

    const { a:x, b:y, c:z} = obj;

    console.log(x);
    console.log(y);
    console.log(z);

    const {e, f, g, h = "jQuery"} = obj;

    console.log(h);

    const obj3 = {
        x1: 100,
        y1: {a1: 100, b1: 200},
        z1: "javascript",
    }

    const { x1, y1:{a1, b1}, z1} = obj3;

    console.log(x1);
    console.log(a1);
    console.log(b1);
    console.log(z1);
}

2줄 : 상수 obj를 선언
3줄 : obj에 객체 키a, 값 100을 넣음
4줄 : obj에 객체 키b, 값 200을 넣음
5줄 : obj에 객체 키c, 값 javascript을 넣음
8줄 : {a, b, c}구조로 obj를 분해 할당함

10줄 : console.log를 이용해 a키의 값 출력
11줄 : console.log를 이용해 b키의 값 출력
12줄 : console.log를 이용해 c키의 값 출력
14줄 : obj의 객체 값을 {a:x, b:y, c:z}로 분해할당
16줄 : console.log를 이용해 x키의 값 출력
17줄 : console.log를 이용해 y키의 값 출력
18줄 : console.log를 이용해 z키의 값 출력

20줄 : obj의 객체 값을 {e,f,g}로 분해할당하며 추가로 h키의 값으로 jQuery를 넣음
22줄 : console.log를 이용해 h키의 값 출력

24줄 : 상수 obj3을 선언
25줄 : x1키의 값으로 100을 넣음
26줄 : y1키의 값으로 a1키 값 100, b1키 값 200을 넣음
27줄 : z1키의 값으로 javascript을 넣음

30줄 : obj3의 객체 값을 {x1, y1:{a1, b1},z1}으로 분해할당
32줄 : console.log를 이용해 x1키의 값 출력
33줄 : console.log를 이용해 a1키의 값 출력
34줄 : console.log를 이용해 b1키의 값 출력
35줄 : console.log를 이용해 z1키의 값 출력

22. 파일 : 서버 데이터 불러오기 : XMLHttpRequest

JSON파일 데이터를 XMLHttpRequest으로 불러옵니다.

{
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://webstoryboy.github.io/webs2024/json/gineungsaJC2011_05.json", true);

xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
                var responseData = xhr.responseText;
                var jsonData = JSON.parse(responseData);
                console.log(jsonData);

        } else if (xhr.readyState === 4) {
                console.error("데이터 불러오기 오류: " + xhr.status);
        }
};

xhr.send();
}

XMLHttpRequest : JavaScript에서 사용되는 웹 요청을 생성하고 처리하는 객체입니다.
이를 사용하면 서버와 비동기 통신(Asynchronous Communication)을 수행하여 웹 페이지에서 데이터를 동적으로 로드하거나 업데이트할 수 있습니다.

XMLHttpRequest 객체 생성
xhr = new XMLHttpRequest();
xhr.open() : AJAX 요청을 초기화하고 서버로 보낼 요청을 설정하는 역할을 합니다.
xhr.open(method, url, async);
- method : 요청을 보낼 HTTP 메서드를 나타내는 문자열로 GET, POST방식을 결정합니다.
- url : 요청을 보낼 URL주소를 나타냅니다.
- async : 비동기 요청 여부를 나타내며, true는 비동기 요청 사용, false은 동기 요청 사용

xhr.send() : 서버로 요청하기 메서드
xhr.send();

onreadystatechange 이벤트 핸들러는 JavaScript에서 XMLHttpRequest 객체나 Fetch API 등을 사용하여 서버와 통신할 때, 비동기 요청의 상태 변화를 감지하고 처리하기 위해 사용됩니다.
이벤트 핸들러는 요청의 상태가 변경될 때마다 호출되며, 이를 통해 요청이 성공적으로 완료되었는지, 실패했는지 등의 정보를 확인하고 응답 데이터를 처리할 수 있습니다 xhr.onreadystatechange = function()

XMLHttpRequest를 사용해 JSON파일 불러오는 방법
var xhr = new XMLHttpRequest();
xhr.open("GET", "파일경로.json", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var jsonData = JSON.parse(xhr.responseText);
console.log(jsonData);
}
};
xhr.send();

2줄 : XMLHttpRequest()로 웹요청하는 객체를 변수에 저장합니다.
3줄 : xhr변수에 open함수를 사용해 해당 URL과 데이터 및 스크립트를 공유 합니다.
5줄 : xhr변수에 onreadystatechange이벤트를 설정하여 readyState값이 변경될 때 호출하도록 합니다.
6줄 : if문을 이용해 readyState와 status 상태를 확인 합니다.
readyState값이 4이면서 status값이 200이라면
*readyState값이 4이면 요청이 완료된 상태를 뜻하며, status값이 200은 상태코드 200으로 OK를 가리킵니다.
7줄 : 변수 responseData에 xhr.responseText를 사용해 해당데이터(JSON파일)를 가져옵니다.
8줄 : 변수 jsonData에 JSON.parse를 사용해 responseData변수에 저장한 데이터(JSON파일)를 객체로 가져옵니다.
9줄 : console.log를 이용해 jsonData의 데이터를 출력합니다.
11줄 : 그게 아니라 readyState 값이 4라면, (요청은 완료되었지만 데이터를 불러오지 못함)
12줄 : console.error라는 오류메시지를 출력하며 status값을 출력해 오류가 된 문제를 알려줍니다.
16줄 : send메서드를 이용해 서버로 요청을 보냅니다.

23. 파일 : 서버 데이터 불러오기 : fetch API

JSON파일을 fetch() 함수를 이용해 불러옵니다.

{
    fetch('https://webstoryboy.github.io/webs2024/json/gineungsaJC2011_05.json')
        .then(response => {
            return response.json();
        })
        .then(data =>{
            console.log(data);
        })
        .catch(error =>{
            console.log(error);
        });
}

fetch : JavaScript에서 네트워크 요청을 보내는 기능을 제공하는 API입니다.
주로 웹 애플리케이션에서 데이터를 가져오거나 서버에 데이터를 보내는 데 사용됩니다.

특징 :
1. 비동기 동작
2. Promise 기반
3. JSON파싱
4. HTTP 상태 코드 처리
5. 오류 처리(.catch())

.json() : JSON형식의 문자열을 javascript객체로 변환합니다.

Fetch API를 사용하여 JSON파일 불러오는 방법
fetch("파일경로.json")
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error("데이터를 불러오는 중 오류 발생: " + error);
});

2줄: fetch API를 이용해 해당 url의 json파일을 가져옵니다.
3줄 : .then메서드를 이용해 json파일 값을 response 매개변수로 가져옵니다.
*then은 작업을 완료한 후 실행됩니다.*
4줄 : return문을 사용해 response매개변수로 가져온 데이터를 javascript 데이터로 변경합니다.
6줄 : .then메서드를 이용해 위에서 javascript 데이터로 변경된 데이터를 매개변수로 가져옵니다.
7줄 : console.log()를 이용해 가져온 데이터를 출력합니다.
9줄 : .catch문을 이용해 오류처리를 하며 에러가 날 때,
10줄 : console.log()를 이용해 에러를 출력합니다.