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)를 사용하여 출력합니다.
변수는 var, let, 또는 const 키워드를 사용하여 선언할 수 있으며, 선언된 변수는 값을 저장하고 나중에 사용할 수 있습니다.
결과 확인하기
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)를 사용하여 출력합니다.
변수 x, y, z에 할당된 값들이 공백으로 구분되어 순서대로 출력되는 것을 보여줍니다.
결과 확인하기
03. 배열 : 데이터 불러오기
배열의 데이터값을 불러와서 출력합니다.
{
const arr = [100, 200, "javascript"];
console.log(arr[0], arr[1], arr[2]);
}
배열(Array)을 사용하여 데이터를 불러오는 것은 주로 배열의 인덱스를 활용하는 방식으로 이루어집니다.
배열은 여러 개의 값을 순서대로 저장하는 자료구조이며, 각 값은 고유한 인덱스(첫번째 요소는 인덱스 0)를 가지고 있습니다.
arr[0]은 100 , arr[1]은 200, arr[2]는 javascript를 출력합니다.
결과 확인하기
04. 배열 : 데이터 갯수 불러오기
배열 안에 있는 데이터 갯수를 불러와서 출력합니다.
{
const arr = [100, 200, "javascript"];
console.log(arr.length);
}
console.log(arr.length);: 이 줄은 배열 arr의 length 속성을 사용하여 배열의 요소 개수를 확인하고 그 값을 콘솔에 출력합니다.
length 속성은 배열에 포함된 요소의 개수를 나타냅니다.
이 배열 arr에는 세 개의 요소가 있으므로 arr.length의 값은 3이 됩니다.
결과 확인하기
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]);
}
}
1줄: const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];: 이 줄에서 arr이라는 이름의 배열을 생성하고 9개의
숫자로 초기화합니다.
2줄: for(let i=0; i<9; i++) {: 이 줄은 for 반복문을 사용하여 배열의 요소를 반복적으로 접근합니다. i라는 변수를 선언하고 0으로 초기화하며,
i가 9보다 작은 동안 반복합니다.
let i = 0;: i라는 변수를 선언하고 0으로 초기화합니다. 이 변수는 반복문에서 현재 반복 인덱스를 나타냅니다.
i < 9;: 반복문이 실행될 조건을 설정합니다. i가 9보다 작을 때 반복문이 계속 실행됩니다.
i++: 각 반복이 끝날 때마다 i 값을 1씩 증가시킵니다. 이것은 배열의 다음 요소에 접근하기 위해 사용됩니다.
3줄: console.log(arr[i]);: 이 줄은 반복문 내에서 현재 인덱스 i에 해당하는 배열 arr의 요소를 콘솔에 출력합니다.
처음 반복에서 i는 0이므로 arr[0]의 값인 100이 출력됩니다.
다음 반복에서 i는 1이므로 arr[1]의 값인 200이 출력됩니다.
이런 식으로 i가 8까지 증가하면서 배열 arr의 모든 요소가 순서대로 출력됩니다.
반복문의 끝을 나타내며, i 값이 9보다 작을 때까지 반복합니다.
따라서 이 코드를 실행하면 배열 arr의 모든 요소인 100부터 900까지의 숫자가 순서대로 콘솔에 출력됩니다.
결과 확인하기
06. 배열 : 데이터 불러오기 : forEach()
forEach()문을 이용하여 데이터를 불러와서 출력합니다.
{
const arr = [100, 200, 300, 400, 500, 600,700, 800, 900];
arr.forEach(function(element){
console.log(element);
});
arr.forEach(function(element, index){
console.log(index);
});
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));
}
forEach 메서드는 배열의 각 요소에 대해 지정된 함수를 실행하는 데 사용됩니다.
1. arr.forEach(function(element){...});: 이 부분은 forEach 메서드를 사용하여 배열의 각 요소(element)를 반복하면서 각 요소를
콘솔에 출력합니다.
2. arr.forEach(function(element, index){...});: 이 부분은 forEach 메서드를 사용하여 배열의 각 요소와 해당 요소의
인덱스(index)를 반복하면서 인덱스를 콘솔에 출력합니다.
3. arr.forEach(function(element, index, array){...});: 이 부분은 forEach 메서드를 사용하여 배열의 각 요소와 해당 요소의
인덱스(index) 그리고 배열 자체(array)를 반복하면서 배열 전체를 콘솔에 출력합니다.
(약식 표현)
1. arr.forEach((el) => {...});: 화살표 함수(arrow function)를 사용하여 배열의 각 요소(el)를 반복하면서 각 요소를 콘솔에
출력합니다.
2. arr.forEach(el => {...});: 인자가 하나일 때 괄호를 생략하고 배열의 각 요소(el)를 반복하면서 각 요소를 콘솔에 출력합니다.
3. arr.forEach(el => console.log(el));: 인자가 하나일 때 괄호를 생략하고 배열의 각 요소(el)를 반복하면서 각 요소를 콘솔에
출력합니다.
결과 확인하기
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);
}
}
1줄:배열 arr은 다음과 같은 요소를 가지고 있습니다: [100, 200, 300, 400, 500, 600, 700, 800, 900].
2줄: for (let element of arr) {: 이 줄은 for...of 반복문을 시작합니다. 이 반복문은 배열 arr의 각 요소를 반복하면서 각 요소를
element 변수에 할당합니다.
let element: 현재 반복 중인 요소를 저장할 변수 element를 선언합니다.
3줄:console.log(element);: 이 줄은 현재 element 변수에 저장된 값을 콘솔에 출력합니다. element 변수는 반복 중인 배열의 요소를
나타냅니다.
배열 arr의 모든 요소를 반복하고 각 요소를 콘솔에 출력하는 반복 작업을 마칩니다.
이렇게 for...of 반복문을 사용하면 배열의 요소를 간단하게 순회하고 처리할 수 있습니다.
결과 확인하기
08. 배열 : 데이터 불러오기 : for in
for...in 반복문은 주로 객체의 속성(property)을 순회하고 접근할 때 사용됩니다. 이 반복문은 객체의 모든 속성을 열거하고 각 속성에 대한 작업을 수행할 때 유용합니다.
{
const arr = [100, 200, 300, 400, 500, 600,700, 800, 900];
for(let element in arr){
console.log(arr[element]);
}
}
for...in 반복문은 객체 속성에 대한 작업을 수행할 때 사용되며, 배열의 요소를 처리하기 위해 주로 for...of 반복문을 사용하는 것이 좋습니다.
결과 확인하기
09. 배열 : 데이터 불러오기 : map()
map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.
{
const arr = [100, 200,300,400,500,600,700,800,900];
arr.map((el) => {
document.write(el,", ");
});
document.write("<br>");
}
map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만듭니다.
callback 함수는 (undefined도 포함해서) 배열 값이 들어있는 인덱스에 대해서만 호출됩니다.
즉, 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않습니다.
결과 확인하기
10. 배열 : 데이터 불러오기 : filter()
filter() 메서드는 주어진 배열의 일부에 대한 얕은 복사본을 생성하고, 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소로만 필터링 합니다.
{
const arr = [100, 200,300,400,500,600,700,800,900];
arr.filter((el) => {
document.write(el,", ");
});
document.write("<br>");
}
filter() 메서드는 순회 메서드입니다.
이 메서드는 배열의 각 요소에 대해 제공된 callbackFn 함수를 한 번씩 호출하고, callbackFn이 참 값을 반환하는 모든 값으로 새 배열을 구성합니다.
callbackFn 테스트를 통과하지 못한 배열 요소는 새 배열에 포함되지 않습니다.
결과 확인하기
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() 메서드는 배열의 일부를 추출합니다.
함수 addNum을 호출할 때 배열 num의 요소를 펼쳐서 함수에 전달하는 예제입니다.
따라서 addNum(100, 200, 300)이 호출되고, 이 함수는 전달된 세 개의 숫자를 더하여 반환합니다.
결과 확인하기
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
}
1. 단일 배열에서 구조 분해 할당 (Basic Syntax): 배열 [100, 200, 300]의 요소가 a, b, c 변수에 차례로 할당됩니다
2.기존 배열에서 구조 분해 할당: 기존 배열 arr의 요소가 x, y, z 변수에 차례로 할당됩니다.
3.나머지 요소 추출 분해 할당: 배열 num의 첫 번째 요소는 num1, 두 번째 요소는 num2에 할당되고, 나머지 요소는 ...rest를 사용하여 배열로 추출됩니다.
나머지 요소는 배열 형태로 rest에 저장되며, ...rest를 사용하면 배열의 요소를 개별 변수로 추출할 수 있습니다.
결과 확인하기
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.propertyName)과 대괄호 표기법 (obj["propertyName"]) 두 가지가 있으며, 두 방법은 서로 대체
가능합니다.
대괄호 표기법은 변수를 사용하여 동적으로 속성에 접근할 때 유용하며, 점 표기법은 속성 이름이 고정된 경우에 주로 사용됩니다.
결과 확인하기
14. 객체 : 데이터 불러오기 : Object.keys()
Object.keys() 메서드는 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환합니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript",
}
console.log(Object.keys(obj));
}
Object.keys()는 object 에서 직접 찾은 열거 가능한 문자열 키 속성 이름에 해당하는 문자열을 요소로 하는 배열을 반환합니다.
속성 값이 필요한 경우 Object.values()를 대신 사용하시기 바랍니다. 속성 키와 값이 모두 필요한 경우 Object.entries()를 대신 사용하시기
바랍니다.
결과 확인하기
15. 객체 : 데이터 불러오기 : Object.values()
Object.values() 메소드는 전달된 파라미터 객체가 가지는 (열거 가능한) 속성의 값들로 이루어진 배열을 리턴합니다. 이 배열은 for...in 구문과 동일한 순서를 가집니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript",
}
console.log(Object.values(obj));
}
Object.values()를 활용하는 주요 사용 사례 중 하나는 객체의 값을 반복적으로 처리하거나 필요한 작업을 수행하는 것입니다
Object.values()는 객체의 속성 값만 추출하고, 속성 이름(프로퍼티 키)을 추출하지 않습니다.
만약 속성 이름과 값을 함께 얻고 싶다면 Object.entries() 메서드를 사용할 수 있습니다.
결과 확인하기
16. 객체 : 데이터 불러오기 : Object.entries()
Object.entries() 메서드는 for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환합니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript",
}
console.log(Object.entries(obj));
}
obj는 [key, value] 쌍을 추출하려는 객체입니다.
bject.entries()를 사용하면 객체의 속성과 값을 함께 얻을 수 있으므로, 이를 활용하여 객체를 순회하거나 필요한 작업을 수행할 수 있습니다.
결과 확인하기
17. 객체 : 데이터 불러오기 : object. assign()
Object.assign() 메서드는 출처 객체들의 모든 열거 가능한 자체 속성 (en-US)을 복사해 대상 객체에 붙여넣습니다. 그 후 대상 객체를 반환합니다.
{
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() 메서드는 출처 객체의 '열거 가능한 자체 속성'만 목표 객체로 복사합니다.
출처 객체에서 속성 값을 가져올 땐 [[Get]], 목표 객체에 속성 값을 지정할 땐 [[Set]]을 사용하므로 각각 접근자와 설정자를 호출합니다.
그러므로 Object.assign()은 속성을 단순히 복사하거나 새로 정의하는 것이 아니라, 할당(assign)하는 것입니다.
따라서 출처 객체가 접근자를 포함하는 경우, 프로토타입에 새로운 속성을 추가하는 용도로는 적합하지 않을 수도 있습니다.
결과 확인하기
18. 객체 : 데이터 불러오기 : hasOwnProperty()
hasOwnProperty()인스턴스 메서드는 이 Object개체가 지정된 속성을 자체 속성으로 갖고 있는지(상속하는 것이 아니라) 여부를 나타내는 부울 값을 반환합니다.
{
const obj = {
a: 100,
b: 200,
c: "javscript"
}
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()가 반환됩니다 .
속성이 상속되었거나 전혀 선언되지 않은 경우 메서드가 반환됩니다 .
연산자 와 달리 이 메서드는 객체의 프로토타입 체인에서 지정된 속성을 확인하지 않습니다.
결과 확인하기
19. 객체 : 데이터 불러오기 : for in()
for...in 문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다.
{
const obj = {
a: 100,
b: 200,
c: "javscript"
}
for(let el in obj){
console.log(el + " : " + obj[el]);
}
}
for...in 루프는 객체의 상속된 속성도 반복합니다. 따라서 hasOwnProperty 메서드를 사용하여 객체의 고유한 속성을 확인하는 것이 중요합니다.
순서가 보장되지 않습니다. 객체의 속성 순서는 일반적으로 보장되지 않으므로 순서가 중요한 경우 for...in 대신 다른 반복 메서드를 사용해야 할 수 있습니다.
배열의 경우에는 for...in 대신 for...of 루프를 사용하는 것이 더 적합합니다.
결과 확인하기
20. 객체 : 데이터 불러오기 : 객체 펼침 연산자
세 개의 점 ...으로 표시되며, 객체를 확장하거나 다른 객체와 병합하는 데 사용됩니다.
{
const obj1 = {
a: 100,
b: 200,
c: "javscript"
}
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);
}
1.const obj1과 const obj2는 두 개의 객체를 정의합니다. obj1은 속성 a, b, c를 가지고 있고, obj2는 속성 d, e, f를 가지고 있습니다.
2.const obj3 = {...obj1, ...obj2}는 두 객체 obj1과 obj2를 병합하여 새로운 객체 obj3를 생성합니다. 결과적으로 obj3는 obj1과
obj2의 모든 속성을 포함합니다.
3.const obj4 = {...obj1, d: "jquery"}는 객체 obj1을 복제하고 새로운 속성 d를 추가하여 새로운 객체 obj4를 생성합니다. 기존 속성 d는
obj1의 값을 덮어씁니다.
4.const obj5 = {...obj1, b: 300}는 객체 obj1을 복제하고 기존 속성 b의 값을 수정하여 새로운 객체 obj5를 생성합니다. 결과적으로
obj5에는 b 속성의 값이 300으로 변경된 객체가 저장됩니다.
5.obj3는 obj1과 obj2의 속성을 모두 포함한 병합된 객체입니다.
6.obj4는 obj1을 복제하고 속성 d를 "jquery"로 변경한 객체입니다.
7.obj5는 obj1을 복제하고 속성 b의 값을 300으로 변경한 객체입니다.
결과 확인하기
{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. 객체 : 데이터 불러오기 : 배열 구조 분해 할당
avaScript에서 배열에서 요소를 추출하고 개별 변수로 할당하는 방법을 제공합니다. 이것은 배열의 요소에 접근하고 다루는 데 매우 편리한 기능입니다.
{
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,
c : "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);
}
1. obj1 객체의 속성을 해당 변수 a, b, c에 각각 할당하고 출력합니다.
2.객체 obj1의 속성을 a, b, c 대신 x, y, z 변수에 할당합니다. 즉, 객체 속성을 새로운 변수 이름으로 분해합니다.
3.obj2 객체의 속성 중 d와 e는 변수 d와 e에 할당됩니다.
obj2에는 f라는 속성이 없으므로 f 변수는 undefined가 됩니다.
g 변수는 기본값으로 "jquery"가 할당됩니다. 이것은 객체 속성에 해당 속성이 없을 때 기본값을 설정하는 방법을 보여줍니다.
4.obj3 객체에서 x1, y1, z1 속성을 추출합니다.
y1 속성은 중첩 객체이므로 y1 객체 내부의 a1과 b1 속성도 추출합니다.
결과적으로 모든 변수에는 해당하는 값이 할당됩니다.
결과 확인하기
22. 파일 : 서버 데이터 불러오기 : XMLHttpRequest
XMLHttpRequest는 JavaScript에서 사용되는 객체로, 웹 페이지와 웹 서버 간에 데이터를 비동기적으로 전송하고 받을 수 있게 해주는 중요한 웹 기술입니다.
{
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();
}
1. XMLHttpRequest 객체 생성:XMLHttpRequest 객체를 생성합니다. 이 객체를 사용하여 웹 페이지와 웹 서버 간에 데이터를 비동기적으로 주고받을 수
있습니다.
2. 요청 설정: open() 메서드를 사용하여 GET 요청을 설정하고, 요청할 URL을 지정합니다. 두 번째 매개변수로는 요청 메서드를 지정하며, 세 번째 매개변수는
비동기 모드 여부를 나타냅니다. `true`로 설정하면 비동기 모드가 활성화됩니다.
3. 요청 상태 변경 이벤트 핸들러 설정:
onreadystatechange 이벤트 핸들러를 설정하여 XMLHttpRequest 객체의 상태 변화를 감지합니다.
readyState는 현재 요청 상태를 나타내며, status는 HTTP 응답 상태 코드를 나타냅니다.
readyState가 4이고 status가 200이면, 요청이 완료되고 서버에서 성공적인 응답을 받았을 때 실행할 코드를 작성합니다.
readyState가 4이지만 status가 200이 아닌 경우, 요청이 완료되었지만 서버에서 오류 응답을 받았을 때 실행할 코드를 작성합니다.
4. 요청 전송:send() 메서드를 사용하여 실제 HTTP 요청을 서버로 보냅니다.
5. 응답 처리:
요청이 완료되고 성공적인 응답을 받았을 때, responseText 속성을 사용하여 서버에서 받은 JSON 형식의 문자열 데이터를 가져옵니다.
JSON.parse() 함수를 사용하여 JSON 문자열을 JavaScript 객체로 파싱합니다.
파싱된 데이터인 jsonData를 콘솔에 출력합니다.
결과 확인하기
1: {subject: '정보처리 기능사', question: '명령어 형식(instruction format)에서 첫 번째 바이트에 기억되는 것은?', correct_answer: 'opcode', incorrect_answers: Array(3), desc: '명령어의 구성명령어 코드부 + 주소부 (한글),
OP-code + Operand (영문)'}
2: {subject: '정보처리 기능사', question: '반가산기(Half-Adder)의 논리회로도에서 자리올림이 발생하는 회로는?', correct_answer: 'AND', incorrect_answers: Array(3), desc: '반가산기 구성: S = A XOR B, C = A AND B,
S : SUM(합), C : Carry(자리올림)'}
23. 파일 : 서버 데이터 불러오기 : fetch API
Fetch API는 JavaScript에서 제공되는 모던한 웹 API 중 하나로, 웹 페이지와 웹 서버 간에 데이터를 비동기적으로 가져오고 전송하는 데 사용됩니다. Fetch API는 XMLHttpRequest보다 더 간결하고 강력한 인터페이스를 제공합니다.
{
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)
})
}
1. fetch() 함수 호출: fetch() 함수를 사용하여 지정된 URL에서 데이터를 가져옵니다. 이 경우, 외부 JSON 파일의 URL을 전달합니다.
2. fetch() 함수는 Promise 객체를 반환합니다. 따라서 .then() 및 .catch() 메서드를 사용하여 비동기적으로 처리할 작업을 정의할 수
있습니다.
2-1 .then() 블록: HTTP 응답 객체인 response를 인자로 받아서, response.json()을 호출하여 JSON 데이터를 파싱하고 반환합니다. 이렇게
파싱된 데이터는 다음 .then() 블록에서 사용할 수 있게 됩니다.
2-2 .then() 블록: 이전 .then() 블록에서 파싱된 JSON 데이터가 data 매개변수로 전달됩니다. 이 데이터를 원하는 방식으로 처리하거나 출력할 수
있습니다. 이 코드에서는 콘솔에 데이터를 출력합니다.
2-3 .catch() 블록: 요청이 실패하거나 오류가 발생한 경우, 해당 오류를 처리하기 위해 .catch() 블록을 사용합니다. 이 코드에서는 오류 메시지를 콘솔에
출력합니다.
이렇게 작성된 코드는 주어진 URL에서 JSON 데이터를 가져와서 이를 파싱한 다음, 파싱된 데이터를 콘솔에 출력합니다.
Fetch API를 사용하면 비동기적으로 데이터를 가져오고 다루는 작업을 간편하게 처리할 수 있으며, 코드가 간결해집니다.
결과 확인하기
1: {subject: '정보처리 기능사', question: '명령어 형식(instruction format)에서 첫 번째 바이트에 기억되는 것은?', correct_answer: 'opcode', incorrect_answers: Array(3), desc: '명령어의 구성명령어 코드부 + 주소부 (한글),
OP-code + Operand (영문)'}
2: {subject: '정보처리 기능사', question: '반가산기(Half-Adder)의 논리회로도에서 자리올림이 발생하는 회로는?', correct_answer: 'AND', incorrect_answers: Array(3), desc: '반가산기 구성: S = A XOR B, C = A AND B,
S : SUM(합), C : Carry(자리올림)'}