01. 변수 : 데이터 불러오기
변수의 데이터를 출력할 수 있습니다.
{
let x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}
변수를 할당 할 때 ,을 사용하면 이어서 변수를 할당 할 수 있습니다.
x에 100을 y에 200을 z에 "javascript"를 할당하여 console.log(x, y, z)를 사용하여 출력하였습니다.
결과 확인하기
02. 상수 : 데이터 불러오기
상수의 값을 출력할 수 있습니다.
{
const x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}
상수는 변수와 달리 한 번 할당된 값이 변경되지 않는 데이터를 나타냅니다. JavaScript에서 상수를 선언하려면 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])
}
배열은 여러 값을 하나의 변수에 저장하는 데이터 구조입니다. 배열에 저장된 각 요소는 순서(index)를 가지며, 이를 사용하여 특정 요소를 식별할 수 있습니다.
배열 내에서 0부터 시작하는 순서(index)를 가지며, arr[0]은 100을, arr[1]은 200을, arr[1]은 javascript을 출력합니다.
결과 확인하기
04. 배열 : 데이터 갯수 불러오기
배열 안에 있는 데이터의 갯수를 출력할 수 있습니다.
{
const arr = [100, 200, "javascript"];
console.log(arr.length);
}
베열이름.length는 배열의 길이를 나타냅니다.
결과 확인하기
05. 배열 : 데이터 불러오기 : for()
for문을 이용하여 데이터를 출력 할 수 있습니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
for(let i=0; i<9; i++){
console.log(arr[i]);
}
}
for문의 기본문법은 for(초기값; 조건식; 증감값) 입니다.
arr이라는 이름의 상수 배열을 생성하고 초기화합니다. 배열 내부에 1부터 10까지의 정수가 들어있습니다.
반복문이 시작을 정의하는 부분입니다. 변수 i를 0으로 초기화하고, i가 arr 배열의 길이보다 작을 동안에 반복을 실행하며 i를 1씩 증가시킵니다
arr 배열의 인덱스 i에 해당하는 원소를 출력합니다
결과 확인하기
200
300
400
500
600
700
800
900
06. 배열 : 데이터 불러오기 : forEach()
forEach문은 배열이나 리스트와 같은 반복 가능한(iterable) 객체의 각 항목에 대해 주어진 함수를 실행하는 루프 구문입니다. 자바스크립트와 같은 프로그래밍 언어에서 자주 사용되며, 배열의 각 항목을 반복하면서 특정 작업을 수행하고자 할 때 유용합니다
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
// 01. 배열의 각 요소 출력
arr.forEach(function(element){
console.log(element);
});
// 02. 요소의 번호(인덱스)를 출력
arr.forEach(function(element, index){
console.log(index);
});
// 03. 인덱스를 사용하여 배열의 요소 출력
arr.forEach(function(element, index){
console.log(arr[index]);
});
// 04. 배열을 전체 출력
arr.forEach(function(element, index, array){
console.log(array);
});
// 05. 약식 표현(화살표함수 사용)
arr.forEach((el) => {
console.log(el);
});
// 06. 매개변수 한개일때 괄호 생략
arr.forEach(el => {
console.log(el);
});
// 07. 리턴문 생략
arr.forEach(el => console.log(el));
}
forEach문의 기본 문법은 array.forEach(function(currentValue:현재반복되고 있는 항목의 값, index:현재 항목의 인덱스, array: forEach를 호출한 배열 자체) {}); 입니다.
forEach문은 콜백 함수와 같이 사용됩니다.
01. 배열의 각 요소를 반복하여 각 요소를 콘솔에 출력하는 코드입니다.
02. 배열의 각 요소와 해당 요소의 인덱스(번호)를 출력합니다.
03. 배열의 각 요소의 인덱스를 사용하여 해당 요소를 출력합니다. 배열의 크기가 클수록 성능 문제가 발행할 수 있으며 배열 요소를 직접 사용하려면 매개변수를 사용하는 것이 더 효율적입니다.
04. 배열 전체를 출력합니다. 매개변수를 사용하여 전체 배열을 참조할 수 있습니다.
05. 화살표 함수를 활용하여 약식으로 표현한 방법입니다.
06. 매개변수가 하나일때 괄호를 생략하고 사용하는 방법을 보여줍니다.
07. 리턴문을 생략하여 배열의 각 요소를 출력하는 방법입니다.
결과 확인하기
07. 배열 : 데이터 불러오기 : for of
for...of 루프는 자바스크립트에서 반복 가능한(iterable) 객체의 각 요소에 대해 루프를 실행하는 구문입니다. 이 구문은 주로 배열, 문자열, 맵(Map), 세트(Set) 등과 같은 컬렉션을 순회할 때 사용됩니다. for...of 루프는 forEach와 비슷한 역할을 하지만, 좀 더 간결하고 직관적인 문법을 제공합니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
for(let element of arr){
console.log(element);
}
}
for of문의 기본 문법은 for (const element:요소의 값 of iterable:반복 가능한 객체) {};입니다.
for...of 루프는 배열 arr의 요소를 순회하면서 각 요소를 element 변수에 할당하고 해당 요소의 값이 콘솔에 출력됩니다. 따라서 위의 코드는 배열 arr에 있는 각 정수 값을 순차적으로 출력하는 역할을 수행합니다.
결과 확인하기
08. 배열 : 데이터 불러오기 : for in
for...in 루프는 JavaScript에서 객체의 속성들을 열거할 때 사용하는 구문입니다. 이 루프는 객체의 프로퍼티 이름(키)을 순회하면서 해당 프로퍼티의 값을 다루는데 사용됩니다. 주로 객체의 속성을 반복하거나 열거할 때 활용됩니다.
{
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(arr[element]);
}
}
for in문의 기본 문법은 for (const key:키 in object:객체) {};입니다.
for in 문은 배열의 각 요소를 순회하며 요소의 인덱스를 출력합니다.
for...in 루프는 객체의 프로토타입 체인을 따라 상속된 속성도 열거합니다. 따라서 객체의 직접적인 프로퍼티뿐만 아니라 상속된 프로퍼티까지 열거될 수 있습니다.
for in 문을 통해 배열의 요소를 출력할 수 있지만 사용하지 않는 것이 좋습니다.
결과 확인하기
09. 배열 : 데이터 불러오기 :map()
map() 메서드는 배열의 각 요소에 대해 주어진 함수를 호출하고 그 결과를 새로운 배열로 반환합니다.
{
const arr = [100, 200, "javascript"];
arr.map(function(el, index, array){
console.log("09 : " + el + " : " + index + " : " + array);
});
const arrNum = arr.map((el) => {
return el;
});
console.log("09 : " + arrNum);
}
map() 메서드를 사용하면 주어진 함수를 배열의 모든 요소에 적용하고 그 결과를 모은 새 배열을 얻을 수 있습니다.
map() 메서드는 배열의 모든 요소를 반복하면서 주어진 함수를 호출하고 그 결과를 새 배열에 저장합니다
결과 확인하기
10. 배열 : 데이터 불러오기 : filter()
filter() 메서드는 주어진 함수의 조건을 만족하는 배열 요소만을 포함하는 새로운 배열을 생성합니다.
{
const arr = [100, 200, "javascript"];
arr.filter(function(el, index, array){
console.log("10 : " + el + " : " + index + " : " + array);
});
const arrNum = arr.filter((el) => {
return el > 150;
});
const arrNum2 = arr.filter(el => {
return el > 150;
});
const arrNum3 = arr.filter(el => el > 150);
console.log(arrNum3); //[200]
}filter() 메서드를 사용하면 주어진 조건을 만족하는 요소만을 포함하는 배열을 생성할 수 있습니다. 이를 활용하여 배열을 필터링하고 원하는 조건에 맞는 요소만을 선택할 수 있습니다.
결과 확인하기
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 메서드를 사용하여 배열의 일부를 선택하고, 선택한 부분을 펼침 연산자를 통해 출력할 수 있습니다.
slice (시작시점, 끝시점)입니다. 예를 console.log(...arr1.slice(1,2));는 200이 나옵니다.
addNum(...num); 펼침연산자로 값만 갖고 오기 때문에 값이 나오지만 addNum(num)를 사용 했을 경우 오류가 뜹니다.
위에 예시처럼 arr1+arr2인 경우에는 arr1의 값과 arr2의 값이 연결할 때 띄어쓰기를 하지 않고 출력합니다.
결과 확인하기
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
}
배열의 각 요소를 개별 변수로 추출하거나, 일부 요소를 건너뛰거나, 나머지 요소를 하나의 변수로 묶을 수 있습니다.
... 연산자를 사용하여 나머지 요소를 하나의 배열로 저장할 수 있습니다.
결과 확인하기
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"]);
}
객체는 key-value 쌍으로 데이터를 구성하며, 객체에서 데이터를 불러오려면 해당 key(키)를 사용합니다
[""]은 대괄호 표기법으로 객체의 속성을 대괄호([]) 안에 문자열 형태로 속성 이름을 넣어 접근하여 출력하는 방식이며 동적인 속성 이름을 사용해야 할 때 유용합니다.
결과 확인하기
14. 객체 : 데이터 불러오기 : Object.keys()
Object.keys()는 JavaScript에서 객체의 속성(key)들을 배열로 반환하는 메서드입니다. 객체의 속성을 순회하거나 속성 이름을 배열로 가져올 수 있습니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript"
};
console.log(Object.keys(obj)); // [a, b, c]
}
JavaScript에서 객체(Object)의 속성(프로퍼티) 중에서 키(key)들을 추출하고, 그것들을 배열 형태로 반환하는 방법을 보여주고 있습니다
Object.keys(obj)는 Object 내장 객체의 메서드로, 인자로 전달한 객체 obj의 속성 중에서 키들을 추출하여 배열 형태로 반환합니다.
결과 확인하기
15. 객체 : 데이터 불러오기 : Object.values()
Object.values()는 JavaScript에서 사용할 수 있는 내장 함수 중 하나로, 객체의 속성들 중에서 값(value)들만을 추출하여 배열로 반환하는 역할을 합니다. 이 함수를 사용하면 객체의 값들을 쉽게 가져와서 처리할 수 있습니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript"
};
console.log(Object.values(obj)); //[100, 200, javascipt]
}Object.values(obj)는 Object 내장 객체의 메서드로, 인자로 전달한 객체 obj의 속성 중에서 값(value)들만을 추출하여 배열 형태로 반환합니다.
결과 확인하기
16. 객체 : 데이터 불러오기 : Object.entries()
Object.entries()는 JavaScript에서 사용할 수 있는 내장 함수 중 하나로, 객체의 속성(key-value 쌍)들을 배열의 형태로 반환합니다. 이 함수는 객체를 이터러블(순회 가능한)한 배열로 변환하는 데 사용됩니다. 각 배열 요소는 [key, value] 형태의 배열로 구성되며, 이를 통해 객체의 키와 값을 함께 사용할 수 있습니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript"
};
console.log(Object.entries(obj));
}
Object.entries(객체이름)는 Object 내장 객체의 메서드로, 인자로 전달한 객체 obj의 속성(key-value 쌍)들을 배열의 형태로 반환합니다. 반환된 배열은 [key, value] 형태의 배열들로 이루어져 있습니다.
결과 확인하기
17. 객체 : 데이터 불러오기 : Object.assign()
Object.assign()은 JavaScript에서 사용할 수 있는 내장 함수 중 하나로, 여러 객체의 속성들을 결합하거나 복사할 때 사용됩니다. 이 함수는 하나 이상의 소스 객체(source objects)를 대상 객체(target object)에 병합(merge)하고, 대상 객체를 반환합니다.
{
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를 병합한 결과는 { a: 100, b: 200, c: 'javascript', d: 300, e: 400, f: 'jquery' }와 같이, obj1의 속성에 obj2의 속성이 추가되고 중복된 속성의 경우 덮어쓰기되어 새로운 객체가 생성됩니다.
결과 확인하기
18. 객체 : 데이터 불러오기 : hasOwnProperty()
hasOwnProperty()는 JavaScript 객체의 메서드 중 하나로, 객체가 특정 속성을 직접 소유하고 있는지 확인하는 데 사용됩니다. 이 메서드는 속성 이름을 인자로 받아 해당 속성이 객체의 고유 속성인지 여부를 불리언 값(true 또는 false)으로 반환합니다.
{
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
console.log(obj.hasOwnProperty("javascript")); // 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를 반환합니다.
이 메서드는 객체에서 속성의 존재 여부를 확인할 때 유용합니다. 객체에서 특정 속성이 정의되어 있는지 확인하고 해당 속성을 안전하게 접근할 때 사용됩니다.
hasOwnProperty() 메서드는 객체의 프로퍼티 이름을 문자열로 비교합니다. 따라서 속성 이름을 문자열로 정확하게 지정해야 합니다.
결과 확인하기
19. 객체 : 데이터 불러오기 : for in
for...in 루프는 JavaScript에서 객체의 속성을 열거하고 반복적으로 처리하는 데 사용되는 반복문입니다. 이 반복문은 객체의 모든 열거 가능한(enumerable) 속성에 대해 순회(iterate)하며, 주로 객체의 속성을 동적으로 접근하고 처리하는 데 유용합니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript"
};
for(let el in obj){
console.log(el + " : " + obj[el]);
};
}
기본문법은 for (const 속성 이름 in 속성값) {} 입니다.
for...in 루프를 사용하면 객체의 속성을 동적으로 처리하고, 객체의 속성을 반복적으로 다룰 때 유용합니다. 그러나 주의해야 할 점은 프로토타입 체인까지 열거하므로, hasOwnProperty 메서드를 사용하여 객체 자체의 속성만 열거하도록 필터링하는 것이 좋습니다.
결과 확인하기
20. 객체 : 데이터 불러오기 : 객체 펼침 연산자
객체 펼침 연산자(또는 스프레드 연산자)는 JavaScript에서 사용할 수 있는 기능 중 하나로, 객체의 속성을 복사하고 다른 객체에 펼치는 역할을 합니다. 이 연산자는 객체 리터럴 내에서 사용할 수 있으며, 객체의 속성을 복사하거나 새로운 객체를 생성할 때 유용합니다.
{
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(obj1);
console.log(obj2);
console.log(obj3);
console.log(obj4);
console.log(obj5);
}
객체 펼침 연산자(...)를 사용하여 여러 객체를 조합하고 복사하여 새로운 객체를 생성합니다.
위에 예제 중 obj4은 체 펼침 연산자를 사용하여 obj1의 속성을 포함하면서 d 속성을 덮어쓴(overwrite) 새로운 객체를 생성하는 구문입니다.
위에 예제 중 obj5는 객체 펼침 연산자를 사용하여 obj1의 속성을 포함하면서 b 속성을 덮어쓴 새로운 객체를 생성하는 구문입니다.
결과 확인하기
{d: 300, e: 400, f: jquery}
{a: 100, b: 200, c: javascript, d: 300, e: 400, f: jquery}
{a: 100, b: 200, c: javascript, d: jquery}
{a: 100, b: 300, c: javascript}
21. 객체 : 데이터 불러오기 : 객체 구조 분해 할당
객체 구조 분해 할당(Object Destructuring Assignment)은 JavaScript에서 객체에서 원하는 속성을 추출하여 변수로 할당하는 기능입니다. 이를 통해 객체의 속성을 간편하게 접근하고 활용할 수 있습니다. 객체 구조 분해 할당은 주로 함수의 매개변수나 객체에서 데이터를 추출할 때 사용됩니다.
{
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); //100
console.log(y); //200
console.log(z); //javascript
const obj2 = {
d: 100,
e: 200,
f: "javascript"
};
const {d, e, f, g = "jquery"} = obj2;
console.log(g); // jquery
console.log(obj2); // {d: 100, e: 200, f: javascript}
const obj3 = {
x1: 100,
y1: {a1: 100, b1: 200},
z1: "javascript"
}
const {x1, y1: {a1, b1}, z1} = obj3;
console.log(x1); //100
console.log(a1); //100
console.log(b1); //200
console.log(z1); //javascript
}객체 구조 분해 할당은 객체의 속성을 추출하여 각각 다른 변수에 할당하고 출력할 수 있으며 기본값을 설정하여 변수에 할당할 수 있습니다. 또한 객체 속에 객체에게 각각 변수를 할당하여 추출할 수 있습니다.
결과 확인하기
22. 파일 : 서버 데이터 불러오기 : XMLHttpRequest
XMLHttpRequest는 JavaScript에서 사용되는 객체로, 웹 페이지와 원격 서버 간에 데이터를 비동기적으로 전송하고 받을 수 있도록 해주는 기술입니다
{
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://l-jy16.github.io/webs2024/json/test.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();
}
var xhr = new XMLHttpRequest();: XMLHttpRequest 객체를 생성합니다. 이 객체를 사용하여 웹 페이지와 원격 서버 간에 데이터를 비동기적으로 주고받을 수 있습니다.
xhr.open("GET", "https://webstoryboy.github.io/webs2024/json/gineungsaJC2011_05.json", true);: XMLHttpRequest 객체를 초기화하고 요청을 설정합니다.
"GET"은 HTTP GET 요청을 나타냅니다.
두 번째 매개변수는 요청할 URL을 나타냅니다.
세 번째 매개변수 true는 요청을 비동기적으로 수행하도록 지정합니다. 즉, 코드의 실행이 다른 작업을 차단하지 않고 계속됩니다.
xhr.onreadystatechange: XMLHttpRequest 객체의 상태가 변경될 때 호출되는 이벤트 핸들러를 설정합니다. 상태 변경 이벤트는 다양한 단계에서 발생하며, 이 코드에서는 xhr.readyState의 값에 따라 처리를 분기합니다.
if (xhr.readyState === 4 && xhr.status === 200): XMLHttpRequest 객체의 상태가 4 (완료)이고 HTTP 상태 코드가 200 (성공)인 경우에만 실행됩니다. 이것은 요청이 성공적으로 완료되고 응답 데이터가 정상적으로 수신되었음을 의미합니다.
이 경우, 응답 데이터는 xhr.responseText로부터 읽어들여서 JSON.parse()를 사용하여 JSON 형식의 문자열을 JavaScript 객체로 변환한 후, 콘솔에 출력합니다.
else if (xhr.readyState === 4): XMLHttpRequest 객체의 상태가 4 (완료)인 경우, HTTP 상태 코드가 200이 아닌 경우에 실행됩니다. 이것은 요청이 완료되었지만 서버에서 오류 응답이 왔거나 요청이 실패했음을 나타냅니다.
xhr.send();: XMLHttpRequest 객체를 사용하여 서버에 요청을 보냅니다. 이것이 실제로 서버와의 통신을 시작하는 부분입니다.
결과 확인하기
1:{subject: '정보처리 기능사', question: '다음 중 시각 디자인의 4대 매체가 아닌 것은?', incorrect_answers: Array(3), correct_answer: '텍스타일 디자인', desc: '4대 매체 : 포스터 디자인, 신문광고, 잡지광고, TV 광고로 이루어져있다.'}
2:{subject: '정보처리 기능사', question: '다음과 가장 관계있는 디자인 원리는?', incorrect_answers: Array(3), correct_answer: '강조', desc: '정답은 4번입니다.'}
23. 파일 : 서버 데이터 불러오기 : fetch API
Fetch API는 JavaScript의 내장 API로, 네트워크를 통해 데이터를 가져오는 데 사용됩니다.
{
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 API를 사용하여 서버에서 json 데이터를 가져오는 예제입니다.
fetch("주소")는 fetch 함수를 사용하여 주소에서 데이터를 가져오기 위한 요청을 시작합니다.
.then(response => { ... }): 서버로부터의 응답이 성공적으로 받아지면, 이 then 메소드 블록이 실행됩니다. response는 서버 응답에 대한 객체입니다.
return response.json(): response.json() 메서드를 사용하여 응답 데이터를 JSON 형식으로 파싱합니다. 이 메서드를 사용하여 JSON 데이터를 파싱하고 Promise를 반환합니다.
.then(data => { ... }): JSON 데이터가 성공적으로 파싱되면, 이 then 메소드가 실행되며, data 변수에 파싱된 JSON 데이터가 저장됩니다.
console.log(data): data 변수에 저장된 JSON 데이터를 콘솔에 출력하여 데이터를 확인할 수 있습니다. 이 부분을 웹 페이지에서는 데이터를 활용하는 로직으로 대체할 수 있습니다.
catch(error => { ... }): 데이터를 가져오는 과정에서 어떤 이유로든 오류가 발생하면, catch 메소드가 실행되고 error 변수에 오류 메시지가 저장됩니다. 이를 통해 오류를 처리하거나 오류 메시지를 콘솔에 출력할 수 있습니다.
결과 확인하기
1:{subject: '정보처리 기능사', question: '다음 중 시각 디자인의 4대 매체가 아닌 것은?', incorrect_answers: Array(3), correct_answer: '텍스타일 디자인', desc: '4대 매체 : 포스터 디자인, 신문광고, 잡지광고, TV 광고로 이루어져있다.'}
2:{subject: '정보처리 기능사', question: '다음과 가장 관계있는 디자인 원리는?', incorrect_answers: Array(3), correct_answer: '강조', desc: '정답은 4번입니다.'}