01. 변수 : 데이터 불러오기
변수를 사용하여 데이터를 저장하고 출력합니다
{
let x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}
let x = 100, y = 200, z = "javascript";은 변수를 정의하고 값을 할당하는 부분입니다.
console.log(x, y, z);는 변수에 할당된 값을 콘솔에 출력하는 부분입니다.
결과 확인하기
02. 상수 : 데이터 불러오기
상수를 사용하여 데이터를 저장하고 출력하는 자바스크립트 예제입니다.
{
const x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}
const x = 100, y = 200, z = "javascript";는 상수를 정의하고 값을 할당하는 부분입니다.
console.log(x, y, z); 코드는 상수에 할당된 값을 콘솔에 출력하는 부분입니다.
결과 확인하기
03. 배열 : 데이터 불러오기
배열을 사용하여 데이터를 저장하고 각 요소에 접근하여 값을 출력하는 자바스크립트 예제입니다.
{
const arr = [100, 200, "javascript"];
console.log(arr[0], arr[1], arr[2])
}
const arr = [100, 200, "javascript"];는 배열을 정의하고 데이터를 할당하는 부분입니다.
console.log(arr[0], arr[1], arr[2]) 코드는 배열 요소에 접근하여 값을 콘솔에 출력하는 부분입니다.
결과 확인하기
04. 배열 : 데이터 갯수 불러오기
배열에서의 length: 배열의 경우, length 속성은 배열에 포함된 요소의 개수를 나타냅니다.
{
const arr = [100,200,"javascript"]
console.log(arr.length)
}
const arr = [100, 200, "javascript"];는 배열을 정의하고 데이터를 할당하는 부분입니다.
console.log(arr.length) 코드는 배열 arr의 요소 개수를 확인하여 값을 콘솔에 출력하는 부분입니다.
결과 확인하기
05. 배열 : 데이터 불러오기 : for ()
배열을 사용하여 데이터를 저장하고 각 요소에 접근하여 값을 출력하는 자바스크립트 예제입니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
for(let i=0; i<9; i++){
console.log(arr[i]);
}
}
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];는 배열을 정의하고 데이터를 할당하는 부분입니다.
let i=0에서 반복을 위한 변수 i를 초기화합니다
i<9는 반복 조건으로 i가 9보다 작을 때까지 반복합니다.
i++는 각 반복마다 i값을 1씩 증가시킵니다.
결과 확인하기
200
300
400
500
600
700
800
900
06. 배열 : 데이터 불러오기 : forEach()
forEach()는 자바스크립트에서 배열의 각 요소에 대해 지정된 함수를 실행하며, 배열을 반복하고 처리할 때 자주 사용되는 메서드 중 하나입니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
1.배열의 요소 출력
arr.forEach(function(element){
console.log(element);
});
2. 배열의 인덱스를 출력
arr.forEach(function(element, index){
console.log(index);
});
3.전체 배열을 출력
arr.forEach(function(element, index, array){
console.log(array);
});
// 약식 표현
arr.forEach((el) => {
console.log(el);
});
arr.forEach(el => {
console.log(el);
});
arr.forEach(el => console.log(el));
}
1.forEach() 메서드를 사용하여 배열 arr의 각 요소를 반복하고, 각 요소를 element라는 매개변수로 받아서 콘솔에 출력합니다.
2.forEach() 메서드를 사용하여 배열 arr의 각 요소를 반복하고, element와 index라는 매개변수를 받아서 각 요소의 인덱스를 콘솔에 출력합니다.
3.forEach() 메서드를 사용하여 배열 arr의 각 요소를 반복하고, element, index, array라는 매개변수를 받아서 전체 배열 arr을 콘솔에 출력합니다.
결과 확인하기
200
300
400
500
600
700
800
900
0
1
2
3
4
5
6
7
8
9
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
100
200
300
400
500
600
700
800
900
100
200
300
400
500
600
700
800
900
100
200
300
400
500
600
700
800
900
07. 배열 : 데이터 불러오기 : for of
for...of는 배열과 같은 iterable 객체의 요소를 반복하는 데 사용되는 자바스크립트의 반복문입니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
for(let element of arr){
console.log(element);
}
}
for...of 루프를 사용하여 배열 arr의 각 요소를 반복하고, 각 요소를 element라는 변수에 할당하여 콘솔에 출력하는 부분입니다.
for...of 루프를 사용하여 배열 arr의 각 요소를 반복합니다.
element 변수에는 현재 반복 중인 요소가 할당됩니다.
console.log(element);는 각 요소를 콘솔에 출력합니다.
결과 확인하기
200
300
400
500
600
700
800
900
08. 배열 : 데이터 불러오기 : for in
for...in은 자바스크립트에서 객체의 열거 가능한 속성을 반복하기 위한 루프입니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
for(let element in arr){
console.log(element);
}
}
for(let element in arr){ console.log(element); } 코드는 for...in 루프를 사용하여 배열 arr의 각 요소를 반복하고, 각 요소의 인덱스(키)를 element라는 변수에 할당하여 콘솔에 출력하는 부분입니다.
for...in 루프를 사용하여 배열 arr의 각 요소의 인덱스(키)를 반복합니다.
element 변수에는 현재 반복 중인 요소의 인덱스(키)가 할당됩니다.
console.log(element);는 각 인덱스(키)를 콘솔에 출력합니다.
결과 확인하기
1
2
3
4
5
6
7
8
9
09. 배열 : 데이터 불러오기 : map()
fmap() 함수는 반복문을 대체하여 배열을 순회하고 각 요소에 원하는 작업을 수행하는 데 유용합니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
arr.map(function(element){
console.log(element);
});
arr.map(function(element, index){
console.log(index);
});
arr.map(function(element, index, array){
console.log(array);
});
}
map() 함수를 호출하면 배열 arr의 각 요소에 대해 콜백 함수가 실행됩니다.
첫 번째 예제는 각 요소(element)를 출력하고, 두 번째 예제는 각 요소의 인덱스(index)를 출력하며, 세 번째 예제는 전체 배열(array)을 출력합니다.
결과 확인하기
200
300
400
500
600
700
800
900
0
1
2
3
4
5
6
7
8
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
10. 배열 : 데이터 불러오기 : filter()
filter() 함수는 주어진 함수를 사용하여 배열에서 특정 조건을 만족하는 요소만을 추출하여 새로운 배열을 반환합니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
arr.filter(function(element){
console.log(element);
});
arr.filter(function(element, index){
console.log(index);
});
arr.filter(function(element, index, array){
console.log(array);
});
}
arr.filter(function(element){ console.log(element); });
배열 arr의 각 요소를 순회하며 console.log(element);를 통해 각 요소를 출력합니다.
arr.filter(function(element, index, array){ console.log(array); });
배열 arr의 각 요소와 함께 배열 자체를 출력합니다.
결과 확인하기
200
300
400
500
600
700
800
900
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
11. 배열 : 데이터 불러오기 : 배열 펼침 연산자
배열 내의 요소를 하나의 새로운 배열로 펼칩니다.
{
// 배열 펼침 연산
const arr1 = [100, 200, 300];
const arr2 = [400, 500, 600];
console.log(arr1); // 100,200,300
console.log(...arr1); // 100 200 300
console.log(arr1 + arr2); // 100,200,300400,500,600
console.log(...arr1, ...arr2); // 100 200 300 400 500 600 ----;<concat()
console.log(...arr1, 400); //100 200 300 400 ---;< push()
console.log(...arr1.slice(0,2)); //100 200 ---;< slice()
// 함수 호출시 인수 전달
function addNum(a, b, c){
return a + b + c
};
const num = [100, 200, 300];
const sum = addNum(...num);
console.log(sum)
}
배열을 복사하거나 새로운 배열을 만들 때 사용되며, 함수의 인수로 배열을 전달할 때도 유용하게 활용됩니다.
slice 메서드를 사용하여 배열의 일부를 선택하고, 선택한 부분을 펼침 연산자를 통해 출력할 수 있습니다.
결과 확인하기
12. 배열 : 데이터 불러오기 : 배열 구조 분해 할당
배열의 요소를 추출하고 변수에 할당하는 간편한 방법입니다.
{
//단일 배열에서 구조 분해 할당
const [a, b, c] = [100, 200, 300]; // 기본문법
console.log(a);
console.log(b);
console.log(c);
// 기존 배열에서 구조 분해 할당
const arr = [100, 200, 300];
const [x, y, z] = arr
console.log(x);
console.log(y);
console.log(z);
// 나머지 요소 추출 분해 할당
const num = [100, 200, 300, 400, 500];
const [num1, num2, ...rest] = num;
console.log(num1); //100
console.log(num2); //200
console.log(rest); //300, 400, 500
console.log(...rest); //300 400 500
}
배열의 각 요소를 개별 변수로 추출하거나, 일부 요소를 건너뛰거나, 나머지 요소를 하나의 변수로 묶을 수 있습니다.
... 연산자를 사용하여 나머지 요소를 하나의 배열로 저장할 수 있습니다.
결과 확인하기
"); document.write(b); document.write("
"); document.write(c); document.write("
"); // 기존 배열에서 구조 분해 할당 const arr = [100, 200, 300]; const [x, y, z] = arr document.write(x); document.write("
"); document.write(y); document.write("
"); document.write(z); document.write("
"); // 나머지 요소 추출 분해 할당 const num = [100, 200, 300, 400, 500]; const [num1, num2, ...rest] = num; document.write(num1); //100 document.write("
"); document.write(num2); //200 document.write("
"); document.write(rest); //300, 400, 500 document.write("
"); document.write(...rest); //300 400 500 document.write("
"); }
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"]);
}
}
obj.a, obj.b, obj.c를 통해 각 속성의 값을 출력합니다. 이것은 객체의 속성에 직접 접근하는 방법입니다.
또한 대괄호([])를 사용하여 속성에 접근하는 방법도 있습니다.대괄호 안에 속성 이름을 문자열로 넣어 해당 속성에 접근할 수 있습니다.
이 방법은 속성 이름이 변수로 주어지거나, 속성 이름에 공백이나 특수 문자가 포함되어 있는 경우 유용합니다.
결과 확인하기
200
javascript
100
200
javascript
14. 객체 : 데이터 불러오기 : Object.keys()
JavaScript에서 객체의 속성들의 키(key)를 배열로 반환하는 Object.keys() 메서드를 사용하는 예제입니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript",
}
console.log(Object.keys(obj));
}
Object.keys(obj)는 객체 obj의 속성 키들을 배열로 반환합니다.
따라서 위의 코드에서는 obj의 속성인 'a', 'b', 'c'를 포함하는 배열이 출력됩니다.
이 배열은 객체의 속성 키들을 순서대로 담고 있으며, 순서는 속성이 정의된 순서를 따릅니다.
결과 확인하기
15. 객체 : 데이터 불러오기 : Object.values()
이 코드는 JavaScript에서 객체의 속성들의 값을 배열로 반환하는 Object.values() 메서드를 사용하는 예제입니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript",
}
console.log(Object.values(obj));
}
Object.values(obj)는 객체 obj의 속성 값들을 배열로 반환합니다.
따라서 위의 코드에서는 obj의 속성 값인 100, 200, 그리고 "javascript"을 포함하는 배열이 출력됩니다.
이 배열은 객체의 속성 값들을 순서대로 담고 있으며, 순서는 속성이 정의된 순서를 따릅니다.
결과 확인하기
16. 객체 : 데이터 불러오기 : Object.entries()
이 코드는 JavaScript에서 객체의 속성과 그에 해당하는 값을 배열의 형태로 반환하는 Object.entries() 메서드를 사용하는 예제입니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript",
}
console.log(Object.entries(obj));
}
Object.entries(obj)는 객체 obj의 각 속성과 그 값을 [키, 값] 형태의 배열로 반환합니다.
따라서 위의 코드에서는 obj의 속성과 값들을 담고 있는 배열이 출력됩니다.
각 배열 요소는 [키, 값] 형태로 표현되며, 순서는 속성이 정의된 순서를 따릅니다.
결과 확인하기
17. 객체 : 데이터 불러오기 : Object.assign()
이 코드는 JavaScript에서 Object.assign() 메서드를 사용하여 두 개의 객체(obj1과 obj2)를 병합하고, 그 결과를 새로운 객체(obj3)에 할당하는 예제입니다.
{
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.assign() 메서드를 사용하여 obj1과 obj2 객체를 병합하고, 그 결과를 새로운 객체인 obj3에 할당합니다.
Object.assign()은 첫 번째 인수로 전달된 객체(obj1)에 다른 객체(obj2)의 속성과 값을 병합합니다.
그리고 병합된 결과는 obj1에 반영되며, obj3는 obj1을 참조합니다.
결과 확인하기
18. 객체 : 데이터 불러오기 : hasOwnProperty()
이 코드는 JavaScript에서 객체의 속성 존재를 확인하는 두 가지 방법인 hasOwnProperty() 메서드와 in 연산자를 사용하여 객체 obj의 속성을 확인하는 예제입니다.
{
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
// in 연산자
console.log("a" in obj);
console.log("b" in obj);
console.log("c" in obj);
console.log("d" in obj);
}
hasOwnProperty() 메서드를 사용한 속성 존재 확인:
위 코드는 hasOwnProperty() 메서드를 사용하여 객체 obj의 각 속성이 존재하는지 확인합니다.
hasOwnProperty() 메서드는 주어진 키가 객체의 직접적인 속성인 경우 true를 반환하고, 속성이 없는 경우 false를 반환합니다.
따라서 "a", "b", "c"는 모두 객체 obj의 속성이므로 true가 출력되고, "d"는 객체에 존재하지 않으므로 false가 출력됩니다.
in 연산자를 사용한 속성 존재 확인:
위 코드는 in 연산자를 사용하여 객체 obj의 각 속성이 존재하는지 확인합니다.
in 연산자는 주어진 키가 객체의 속성 또는 프로토타입 체인 상에 존재하는 경우 true를 반환하고, 존재하지 않는 경우 false를 반환합니다.
따라서 "a", "b", "c"는 모두 객체 obj의 속성이므로 true가 출력되고, "d"는 객체에 존재하지 않으므로 false가 출력됩니다.
결과 확인하기
19. 객체 : 데이터 불러오기 : for in()
이 코드는 JavaScript 객체를 순회하고 객체 내의 각 속성과 해당 값을 출력하는 예제입니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript",
}
for(let el in obj ){
console.log(el + " : " + obj[el]);
}
}
객체 obj를 정의하고 세 개의 속성(a, b, c)을 포함합니다.
a 속성에는 숫자 100을 할당.
b 속성에는 숫자 200을 할당.
c 속성에는 문자열 "javascript"를 할당.
for...in 루프를 사용하여 객체 내의 속성을 순회합니다.
루프 변수 el은 각 반복마다 현재 속성 이름을 나타냅니다.
console.log를 사용하여 현재 속성 이름(el)과 해당 속성의 값(obj[el])을 출력합니다.
이를 통해 객체 내의 모든 속성과 해당 값이 출력됩니다.
결과 확인하기
b : 200
c : javascript
20. 객체 : 데이터 불러오기 : 객체 펼침 연산자
이 코드는 JavaScript에서 객체를 병합하고 수정하는 다양한 방법을 보여줍니다.
{
const obj1 = {
a: 100,
b: 200,
c: "javascript",
}
const obj2 = {
d: 100,
e: 200,
f: "jquery",
}
const obj3 = {...obj1, ...obj2}
const obj4 = {...obj1, d: "jquery"}
const obj5 = {...obj1, b: 300}
console.log(obj1);
console.log(obj2);
console.log(obj3);
console.log(obj4);
console.log(obj5);
}
obj1과 obj2 객체 정의:
obj1은 {a: 100, b: 200, c: "javascript"} 객체를 정의합니다.
obj2는 {d: 100, e: 200, f: "jquery"} 객체를 정의합니다.
obj3 객체 생성:
obj3은 obj1과 obj2의 속성을 병합한 새로운 객체입니다.
{...obj1, ...obj2}를 사용하여 두 객체를 병합하였습니다.
obj4 객체 생성:
obj4은 obj1을 복사하고, d 속성의 값을 "jquery"로 수정한 객체입니다.
obj5 객체 생성:
obj5는 obj1을 복사하고, b 속성의 값을 300으로 수정한 객체입니다.
결과 확인하기
obj2: {d: 100, e: 200, f: "jquery"}
obj3: {a: 100, b: 200, c: "javascript", d: 100, e: 200, f: "jquery"}
obj4: {a: 100, b: 200, c: "javascript", d: "jquery"}
obj5: {a: 100, b: 300, c: "javascript"}
21. 객체 : 데이터 불러오기 : 객체 펼침 연산자
이 코드는 JavaScript에서 객체 해체(Destructuring)를 사용하여 객체의 속성을 추출하고, 그 값을 변수에 할당하는 예제를 보여줍니다.
{
const obj1 = {
a: 100,
b: 200,
c: "javascript",
}
const {a, b, c} = obj1;
console.log(a);
console.log(b);
console.log(c);
const { a: x, b: y, c: z} = obj1 //많이씀
console.log(x);
console.log(y);
console.log(z);
const obj2 = {
d: 100,
e: 200,
f: "javascript",
}
const { d, e, f, g = "jquery"} = obj2;
console.log(g);
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);
}
obj1 객체 정의 및 해체:
obj1은 {a: 100, b: 200, c: "javascript"} 객체를 정의합니다.
객체 해체를 사용하여 객체의 속성 a, b, c 값을 각각 변수 a, b, c에 할당하고 출력합니다.
객체 속성을 다른 변수에 할당:
객체 해체를 사용하여 obj1의 속성 a, b, c를 각각 변수 x, y, z에 할당하고 출력합니다.
기본값 설정:
obj4 객체 생성:
obj2는 {d: 100, e: 200, f: "javascript"} 객체를 정의합니다.
객체 해체를 사용하여 obj2의 속성 d, e, f를 추출하고, 속성 g에 기본값 "jquery"를 설정하고 출력합니다.
obj3는 {x1: 100, y1: {a1: 100, b1: 200}, z1: "javascript"} 객체를 정의합니다.
객체 해체를 사용하여 obj3의 속성 x1, y1의 속성 a1, b1, 그리고 속성 z1을 추출하고 출력합니다.
결과 확인하기
200
"javascript"
100
200
"javascript"
"jquery"
100
100
200
"javascript"
22. 객체 : 데이터 불러오기 : 객체 펼침 연산자
이 코드는 JavaScript에서 객체 해체(Destructuring)를 사용하여 객체의 속성을 추출하고, 그 값을 변수에 할당하는 예제를 보여줍니다.
{
// 22
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();
}
obj1 객체 정의 및 해체:
obj1은 {a: 100, b: 200, c: "javascript"} 객체를 정의합니다.
객체 해체를 사용하여 객체의 속성 a, b, c 값을 각각 변수 a, b, c에 할당하고 출력합니다.
객체 속성을 다른 변수에 할당:
객체 해체를 사용하여 obj1의 속성 a, b, c를 각각 변수 x, y, z에 할당하고 출력합니다.
기본값 설정:
obj4 객체 생성:
obj2는 {d: 100, e: 200, f: "javascript"} 객체를 정의합니다.
객체 해체를 사용하여 obj2의 속성 d, e, f를 추출하고, 속성 g에 기본값 "jquery"를 설정하고 출력합니다.
obj3는 {x1: 100, y1: {a1: 100, b1: 200}, z1: "javascript"} 객체를 정의합니다.
객체 해체를 사용하여 obj3의 속성 x1, y1의 속성 a1, b1, 그리고 속성 z1을 추출하고 출력합니다.
결과 확인하기
200
"javascript"
100
200
"javascript"
"jquery"
100
100
200
"javascript"
23. 파일 : 서버 데이터 불러오기 : fetch API
"서버 데이터 불러오기: Fetch API"는 웹 애플리케이션에서 서버에서 데이터를 가져오는 방법을 다루는 주제입니다. Fetch API는 네트워크 요청을 생성하고 응답을 처리하는 데 사용되는 JavaScript API입니다.
{
// 23
fetch("https://webstoryboy.github.io/webs2024/json/gineungsaJC2011_05.json")
.then(response => {
return reponse.json();
})
.then(data => {
console.log(data)
})
.catch(error => {
console.log(error)
})
}
1.fetch 함수를 사용하여 지정된 URL("https://webstoryboy.github.io/webs2024/json/gineungsaJC2011_05.json")에서 데이터를 가져오려고 합니다.
2.then() 메소드를 사용하여 첫 번째 콜백 함수를 정의합니다. 이 콜백 함수는 네트워크 요청의 응답(response)을 받아오고, 이 응답을 JSON 형식으로 파싱하기 위한 코드를 포함하고 있어야 합니다. 그러나 코드에 오타가 있어 return reponse.json();가 아니라 return response.json();로 수정해야 합니다.
3.다음 .then() 메소드에서는 JSON 데이터가 파싱된 데이터를 받아와서 이를 콘솔에 출력합니다.
4.catch() 메소드를 사용하여 어떠한 오류가 발생한 경우에도 오류 메시지를 콘솔에 출력하도록 핸들링합니다.
5.코드의 목적은 주어진 URL에서 JSON 데이터를 가져와서 해당 데이터를 처리하고 콘솔에 출력하는 것입니다. 단, 오타를 수정하여 정상적으로 작동하도록 해야 합니다.
결과 확인하기
실제 결과는 JSON 데이터에 따라 다를 것이며, 네트워크 상태에 따라 오류 메시지가 출력될 수도 있습니다.