01. 변수 : 데이터 불러오기
변수의 데이터 불러오기는 이미 선언된 변수의 값을 사용하는 과정을 의미합니다. 변수는 프로그램 내에서 값을 저장하고 나중에 사용하기 위해 사용됩니다. 데이터를 불러오려면 변수의 이름을 사용하여 해당 변수에 저장된 값을 참조하면 됩니다.
{
let x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}
변수(Variable) : 변수는 프로그래밍에서 데이터를 저장하고 나중에 사용하기 위한 기본적인 개념입니다. 변수는 값을 저장하는 컨테이너로, 이를 통해 데이터를 관리하고 조작할 수 있습니다. 변수에는 다양한 종류의 데이터를 저장할 수 있으며, 프로그램의 실행 중에 데이터의 변경이 가능합니다.
결과 확인하기
02. 상수 : 데이터 불러오기
상수의 데이터 불러오기란 이미 정의된 상수의 값을 사용하는 과정을 의미합니다. 상수는 한 번 정의되면 그 값을 변경할 수 없으므로, 프로그램 내에서 필요한 값을 안전하게 저장하고 참조하는 데 사용됩니다.
{
const x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}
상수(Constant) : 상수는 프로그래밍에서 값을 한 번 할당하면 그 값이 변경되지 않는 변수를 나타냅니다. 상수는 변수와 유사하지만, 한 번 값을 할당하면 이후에는 그 값을 변경할 수 없습니다.
결과 확인하기
03. 배열 : 데이터 불러오기
배열의 데이터 불러오기는 배열 변수 arr 안에 저장된 값들을 인덱스를 사용하여 참조하고 출력하는 것을 의미합니다.
{
const arr = [100, 200, "javascript"]; // 배열 arr을 선언하고 초기값으로 [100, 200, "javascript"]을 할당
console.log(arr[0], arr[1], arr[2]);
}
[0] : 배열 'arr'의 첫 번째 요소. arr[0]은 100을 가리킨다.
결과 확인하기
04. 배열 : 데이터 불러오기 + 갯수
자바스크립트(JavaScript)의 배열은 .length 속성을 가지고 있으며, 이 속성은 배열 내 요소의 개수를 나타냅니다.
{
const arr = [100, 200, "javascript"];
console.log(arr.length);
}
.length : 배열 객체의 속성(property) 중 하나로, 해당 배열에 포함된 요소의 개수(길이)를 나타내는 정수 값을 가지고 있습니다. 이 속성을 사용하면 배열 내에 몇 개의 요소가 있는지 쉽게 파악할 수 있습니다.
이것은 배열의 크기를 계산할 때 유용하며, 반복문과 함께 사용하여 배열의 모든 요소를 순회하거나 조건을 확인하는 데 많이 활용됩니다.
결과 확인하기
05. 배열 : 데이터 불러오기 : for()
일반적인 for()는 초기화, 조건 검사 및 반복 후 실행할 코드를 정의하는 루프 구문입니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
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<10; i++){
console.log(arr[i]);
}
}
for() : for 루프를 사용하면 반복문을 통해 배열의 요소를 순회하면서 출력합니다.
결과 확인하기
200
300
400
500
600
700
800
900
100
200
300
400
500
600
700
800
900
06. 배열 : 데이터 불러오기 : forEach()
forEach() 메서드는 배열의 각 요소에 대해 지정된 함수를 실행하는 배열 메서드입니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
arr.forEach(function(el){
console.log(el)
});
arr.forEach((el) => { // 화살표 함수로 변경
console.log(el)
});
arr.forEach(el => { // ()생략
console.log(el)
});
arr.forEach(el => console.log(el)); // {}생략
arr.forEach(function(el, index){ // 긱 요소의 인덱스 뽑기
console.log(index)});
arr.forEach(function(el, index, array){ //요소 수만큼 배열을 뽑기
console.log(array);
})
}
forEach : forEach는 배열 메서드로, 배열 객체에 내장되어 있습니다. 배열 객체의 메서드로 제공되므로 배열을 호출한 다음 해당 메서드를 사용하여 작업을 수행합니다.
function(el) : 콜백 함수의 매개변수를 정의하는 부분입니다. function 키워드를 사용하여 함수를 정의하고, 이 함수가 forEach 메서드에 의해 호출됩니다. 여기서는 forEach 메서드가 배열의 각 요소에 대해 순회할 때마다 호출됩니다.(총 9번)
el : 매개변수의 이름입니다.배열 arr의 각 요소를 나타냅니다
매개변수(Parameter) : 함수 내에서 값을 전달받기 위한 이름이나 변수입니다. 함수를 정의할 때 함수의 매개변수를 선언하면, 함수가 호출될 때 전달된 값을 함수 내에서 사용할 수 있습니다.
* 이 코드 블록들은 모두 forEach 메서드를 사용하여 배열을 반복하고, 화살표 함수 또는 일반 함수를 사용하여 각 요소를 콘솔에 출력하는 것으로 동일한 결과를 얻을 수 있습니다.
다만, 세 번째, 네 번째 코드 블록은 화살표 함수의 간결한 형식을 사용하였기 때문에 코드가 더 간결하게 표현되었습니다.
** ()생략 : 매개변수(여기서는 el)가 하나일 경우에만 적용
{}생략 : 함수 몸체가 단일 표현식일 때만 적용
결과 확인하기
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
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]
07. 배열 : 데이터 불러오기 : for of
for...of 루프는 배열의 각 요소를 반복하는 데 사용됩니다. 배열 요소에 직접 접근할 수 있습니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
for(const element of arr){ // let도 가능
console.log(element);
}
}
for of : for...of는 일반적인 반복문 구문입니다. 배열의 요소를 순회하면서 사용자가 지정한 작업을 수행할 수 있습니다.
일반적으로 요소를 반복하고 각 요소에 대한 작업을 수행하는 간단한 반복 작업에는 forEach가 편리하고 가독성이 좋습니다. 하지만 반복 중에 중단해야 하는 경우나 다른 루프 제어 구문(예: break 또는 return)을 사용해야 하는 경우에는 for...of 루프가 더 적합할 수 있습니다.
결과 확인하기
200
300
400
500
600
700
800
900
08. 배열 : 데이터 불러오기 : for in
for in 루프는 객체(인덱스)의 열거 가능한 속성을 반복하는 데 사용됩니다. 배열의 요소를 다루는 경우에는 for of루프가 더 명확하고 안전하지만, 인덱스를 다룰 때는 for in이 더 적합할 수 있습니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
for(let element in arr){ // index로 나옴
console.log(element);
};
for(let element in arr){ // 배열 요소로 나옴
console.log(arr[element]);
};
}
for in : for...in 루프는 주로 객체의 속성을 열거하는 데 사용되므로, 배열의 경우 인덱스가 열거됩니다.
결과 확인하기
1
2
3
4
5
6
7
8
100
200
300
400
500
600
700
800
900
09. 배열 : 데이터 불러오기 : map()
map() 메서드는 각 요소를 변환하고 그 결과를 새로운 배열로 모으는 것이 주요 목적입니다. 예시는 각 요소를 반환하거나 다른 배열로 매핑하지 않고 각 요소를 단순히 출력하고 있습니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
arr.map((el) => {
console.log(el)
})
}
arr.map()을 사용하여 배열의 각 요소를 반복하고 console.log(el)을 호출하고있습니다. map()은 각 요소를 변환하고 그 결과를 새로운 배열로 모으는 것이 주요 목적입니다. 따라서 map() 메서드를 사용할 때 함수 내부에서 return 문을 사용하여 각 요소를 변환한 값을 반환하는 것이 일반적입니다.
결과 확인하기
200
300
400
500
600
700
800
900
10. 배열 : 데이터 불러오기 : filter()
배열을 사용하여 filter 메소드를 활용하여 각 요소를 순회하고 요소 값을 콘솔에 출력하는 예제입니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
arr.filter((el) => {
console.log(el)
})
}
filter() : 배열에서 사용되는 메서드 중 하나로, 배열 내의 각 요소를 조건에 따라 필터링하여 새로운 배열을 생성합니다. filter 메서드는 원본 배열을 변경하지 않고 새로운 배열을 반환하므로 원본 배열은 그대로 유지됩니다. 이 메서드는 함수형 프로그래밍 패러다임과 잘 어울리며 배열 조작에 많이 사용됩니다.
결과 확인하기
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,300 400,500,600
console.log(...arr1, ...arr2); // 100 200 300 400 500 600
console.log(...arr1, 400); // 100 200 300 400
console.log(...arr1.slice(0,2)); // 시작 자릿수, 끝나는 자릿수 200
}
배열 펼침 연산자 (Spread Operator)는 JavaScript에서 ... 기호를 사용하여 배열을 펼쳐서 각 요소를 개별적으로 추출하거나 다른 배열에 합칠 때 사용하는 문법입니다.
+ : 배열과 문자열 간에 덧셈 연산자(+)를 사용하면 배열이 문자열로 자동 변환되고, 그 결과는 두 배열을 이어붙인 문자열이 됩니다.
slice(a,b) : a (시작 인덱스): 추출을 시작할 첫 번째 요소의 인덱스를 나타냅니다. 이 요소도 추출 범위에 포함됩니다.
b (종료 인덱스): 추출을 종료할 마지막 요소의 다음 인덱스를 나타냅니다. 이 요소는 추출 범위에 포함되지 않습니다. 배열에서 이 메서드를 사용하여 특정 범위의 요소를 추출하고, 그 요소들을 펼쳐서 콘솔에 출력하는 코드입니다.
결과 확인하기
100 200 300
100,200,300 400,500,600
100 200 300 400 500 600
100 200 300 400
100 200
12. 배열 : 데이터 불러오기 : 배열 구조 분해 할당
배열 구조 분해 할당(Array Destructuring Assignment)은 배열에서 데이터를 추출하여 변수에 할당하는 방법 중 하나입니다.
{
const [a, b, c] = [100, 200, 300];
console.log(a);
console.log(b);
console.log(c);
}
배열 구조 분해 할당 : 배열 구조 분해 할당을 사용하면 배열의 각 요소를 개별 변수에 할당할 수 있습니다. 이것은 배열의 순서대로 요소를 추출하고 변수에 저장합니다. 배열 구조 분해 할당을 사용하면 배열에서 필요한 데이터만 추출하여 변수에 할당하거나, 변수의 이름을 더 직관적으로 지정하여 코드를 더 읽기 쉽게 만들 수 있습니다.
결과 확인하기
200
300
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"])
}
점 표기법 (Dot Notation) : (obj.a)로 읽어올 수 있으며, 객체의 속성 이름을 직접 사용하여 값을 읽어옵니다.
대괄호 표기법 (Bracket Notation) : (obj["a"])로 읽어올 수 있으며, 객체의 속성 이름을 문자열로 감싸서 값을 읽어옵니다. 이 방법을 사용할 때, 속성 이름을 변수로 사용하거나 계산된 속성 이름을 읽어올 때 유용합니다.
결과 확인하기
200
Javascript
100
200
Javascript
14. 객체 : 데이터 불러오기 : Object.keys()
Object.keys(obj)를 사용하여 객체 obj의 모든 속성 이름(프로퍼티 키)을 배열로 반환하는 방법을 보여줍니다.
{
const obj = {
a: 100,
b: 200,
c: "Javascript",
}
console.log(Object.keys(obj));
}
Object.keys() : 주어진 객체의 속성 이름들을 배열로 반환하는 JavaScript 내장 메서드입니다. 이 메서드는 객체의 속성을 순회하거나 객체에 어떤 속성들이 있는지 확인할 때 유용합니다. console.log(Object.keys(obj))의 호출 결과 : ["a", "b", "c"] //배열을 반환하는 메서드 document.write(Object.keys(obj))의 출력 결과 : a,b,c // 문자열 값을 문서에 출력하는 목적으로 사용
결과 확인하기
15. 객체 : 데이터 불러오기 : Object.values()
Object.values(obj)를 사용하여 객체 obj의 모든 속성 값들을 배열로 반환하는 방법을 보여줍니다.
{
const obj = {
a: 100,
b: 200,
c: "Javascript",
}
console.log(Object.values(obj));
document.write(Object.values(obj));
document.write(Object.values(obj.a));
}
Object.values() : 주어진 객체의 속성 값들을 배열로 반환하는 JavaScript 내장 메서드입니다. 이 메서드는 객체의 속성 값을 배열로 추출할 때 유용하게 사용됩니다.
document.write(Object.values(obj.a)) : Object.values()는 객체의 속성 값을 배열로 반환하므로, 배열에서 특정 속성 값을 직접 추출할 때는 배열 인덱스를 사용해야 합니다.
결과 확인하기
100,200,Javascript
TypeError: Object.values called on non-object (오류)
16. 객체 : 데이터 불러오기 : Object.entries()
주어진 코드는 Object.entries(obj)를 사용하여 객체 obj의 모든 속성 및 값들을 배열의 형태로 반환하는 방법을 보여줍니다.
{
const obj = {
a: 100,
b: 200,
c: "Javascript",
}
console.log(Object.entries(obj));
document.write(Object.entries(obj));
}
Entries : "Entry" 또는 "Entries"는 명사로 사용되며, 어떤 목록, 레지스터, 레코드, 데이타베이스 등에서 개별 항목 또는 레코드를 나타냅니다. 즉, 어떤 컨테이너에 저장된 개별적인 데이터 요소를 가리킵니다.
Object.entries() : Object.entries() 메서드는 객체의 속성 이름과 값을 하나의 항목으로 가지는 배열을 생성하기 때문에 "entries"라는 용어가 사용되었습니다. 이 메서드는 객체 내의 각 "entry"를 [key, value] 형태로 반환합니다. 이 메서드는 객체의 속성 및 값을 배열로 추출할 때 유용하게 사용됩니다.
document.write(Object.entries(obj)) : 각 [key, value] 하위 배열은 쉼표로 구분되어 문자열로 출력됩니다. 이렇게 하여 객체의 속성과 값을 출력할 때는 각 [key, value] 하위 배열을 개별적으로 처리하여 원하는 형태로 출력해야 합니다.
결과 확인하기
[
["a", 100],
["b", 200],
["c", "Javascript"]
]
17. 객체 : 데이터 불러오기 : Object.assign()
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);
document.write(obj3);
document.write(obj3.a);
}
Object.assign() : 하나 이상의 소스 객체(sources)를 대상 객체(target)에 병합하는 데 사용됩니다. 이 메서드는 병합된 객체를 반환하며, 병합 중에 소스 객체의 속성이 대상 객체에 복사됩니다.
여기서 obj1과 obj2는 두 개의 소스 객체이고, obj3는 대상 객체입니다. 코드에서는 Object.assign(obj1, obj2)를 호출하여 obj1에 obj2의 속성들을 병합하고, 결과를 obj3에 할당하였습니다.
만약 동일한 속성 이름이 있는 경우에는 나중에 나오는 소스 객체의 값이 덮어쓰기 됩니다.
document.write(obj3) : 객체를 문자열로 변환할 때는 객체의 [object Object] 문자열이 출력됩니다.
결과 확인하기
{
a: 100,
b: 200,
c: "Javascript",
d: 300,
e: 400,
f: "Jquery"
}
18. 객체 : 데이터 불러오기 : hasOwnProperty()
hasOwnProperty() 메서드를 사용하여 Object(객체)의 특정 key 존재 여부 확인하는 예제입니다.
{
const obj = {
a: 100,
b: 200,
c:"Javascript",
}
console.log(obj.hasOwnProperty("a"));
console.log(obj.hasOwnProperty("b"));
console.log(obj.hasOwnProperty("c"));
console.log(obj.hasOwnProperty("d"));
console.log(obj.hasOwnProperty(100));
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() 메서드는 속성 이름을 문자열로 받으므로 숫자 100이나 문자열 "Javascript"와 같이 다른 타입의 값을 인자로 넣어 호출하면 해당 값은 속성 이름으로 해석되며, 객체의 속성 중에 해당 이름을 가진 것이 없기 때문에 항상 false를 반환합니다.
in 연산자 : 객체에서 특정 속성(프로퍼티)의 존재 여부를 확인하는 데 사용됩니다. in 연산자는 객체의 속성 이름을 키로 받아 해당 키가 객체 내에 존재하면 true를 반환하고, 존재하지 않으면 false를 반환합니다.
객체 내의 모든 속성을 확인하며, 그 속성이 직접 소유한 것인지 상속 받은 것인지에 상관없이 존재 여부를 판단합니다.
결과 확인하기
true
true
false
false
false
true
true
true
false
19. 객체 : 데이터 불러오기 : for in
객체 obj의 속성을 순회하면서 각 속성의 이름과 값을 출력하는 JavaScript 코드입니다. 이 코드는 for...in 루프를 사용하여 객체의 속성을 순회하고 console.log()를 통해 출력합니다.
{
const obj = {
a: 100,
b: 200,
c:"Javascript",
}
for(let el in obj){
console.log(el + " : " + obj[el]);
}
}
console.log(el + " : " + obj[el]) : 현재 순회 중인 속성의 이름과 값을 결합하여 출력합니다. obj[el]은 현재 순회 중인 속성의 값을 가져옵니다.
결과 확인하기
b : 200
c : Javascript
20. 객체 : 데이터 불러오기 : 객체 펼침 연산자
객체의 요소를 새로운 객체로 확장(펼침)하는 역할을 합니다. 이 연산자는 ... 기호를 사용하여 표현됩니다.
{
const obj1 = {
a: 100,
b: 200,
c:"Javascript",
}
const obj2 = {
d: 300,
e: 400,
f:"Jquery",
}
const obj3 = {...obj1, ...obj2}
const obj4 = {...obj1, d:"Jaquery"}
const obj5 = {...obj1, b: 300}
console.log(obj3);
console.log(obj4);
console.log(obj5);
}
배열 펼침 연산자 ([]): 주로 배열 내의 원소를 풀어서 가져올 때 사용됩니다. 즉, 배열을 다른 배열로 펼칠 수 있습니다.
객체 펼침 연산자 ({}): 주로 객체의 속성을 다른 객체로 펼칠 때 사용됩니다. 객체를 다른 객체로 펼칠 수 있습니다.
객체 리터럴에서 속성과 값 사이에는 콜론(:)으로 구분하고, 각 속성 쌍은 쉼표(,)로 구분합니다.
객체 펼침 연산자(Spread Operator)는 주로 객체를 다루는 데 사용되지만, 배열에서도 사용할 수 있습니다. 배열에서 객체 펼침 연산자를 사용하면 배열의 요소를 확장하거나 병합할 수 있습니다.
만약 객체를 병합하려면 객체 펼침 연산자({...})를 사용해야 하며, 배열에서는 배열 펼침 연산자([...])를 사용해야 합니다.
결과 확인하기
a: 100, b: 200, c: 'Javascript', d: 'Jaquery'
a: 100, b: 300, c: 'Javascript'
21. 객체 : 데이터 불러오기 : 객체 구조 분해 할당
주어진 코드 예제에서는 객체 구조 분해 할당(Destructuring Assignment)을 다루고 있습니다. 객체 구조 분해 할당은 객체의 속성을 추출하여 개별 변수에 할당하는 방법을 제공합니다.
{
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)
console.log(y1)
}
console.log(y1) : y1 변수는 코드 블록 내에서 정의되지 않았기 때문에 console.log(y1)은 참조 오류를 발생시킵니다. y1은 obj3 객체의 속성 중 하나로 개별 변수에 할당되지 않았으므로 참조할 수 없습니다.
결과 확인하기
200
"Javascript"
100
200
"Javascript"
"Jquery"
100
100
200
"Javascript"
오류
22. 파일 : 서버 데이터 불러오기 : XMLHttpRequest
XMLHttpRequest는 웹 페이지와 서버 간에 데이터를 비동기적으로 교환하기 위한 JavaScript 객체입니다. 이 객체를 사용하면 웹 페이지에서 서버로 데이터를 보낼 수 있고, 서버로부터 데이터를 받아올 수 있습니다. 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();
}
주어진 URL에서 JSON 데이터를 가져와서 성공적으로 데이터를 받으면 그 데이터를 콘솔에 출력하는 XMLHttpRequest를 수행하는 간단한 JavaScript 코드입니다. 이를 통해 웹 페이지에서 외부 데이터를 비동기적으로 가져와서 처리할 수 있습니다.
"GET": HTTP 요청 메서드로, 데이터를 서버로부터 가져오기 위한 메서드를 지정합니다.
var xhr = new XMLHttpRequest() : XMLHttpRequest 객체를 생성합니다. 이 객체를 사용하여 서버와 통신을 수행합니다.
xhr.open("GET", "...", true) : XMLHttpRequest 객체를 초기화하고, 데이터를 가져올 서버의 URL 및 요청 방식을 설정합니다. 이 경우, GET 요청을 사용하여 주어진 URL에서 데이터를 가져오려고 합니다. 세 번째 매개변수 true는 비동기 요청을 활성화하는 것을 나타냅니다.
xhr.onreadystatechange = function () { ... } : XMLHttpRequest 객체의 상태가 변경될 때 호출되는 함수를 정의합니다. 이 함수는 서버 응답을 처리하는 역할을 합니다.
if (xhr.readyState === 4 && xhr.status === 200) { ... } : 서버 응답이 완료되고 HTTP 상태 코드가 200 (성공) 인 경우에만 실행됩니다. 이 상태에서는 서버에서 반환한 데이터를 처리합니다.
var responseData = xhr.responseText : 서버에서 받은 데이터를 변수 responseData에 저장합니다. 이 데이터는 JSON 형식의 문자열로 제공됩니다.
var jsonData = JSON.parse(responseData) : JSON.parse 함수를 사용하여 JSON 문자열을 JavaScript 객체로 변환합니다. responseData의 내용이 이제 JavaScript 객체로 저장됩니다.
else if (xhr.readyState === 4) { ... } : 서버 응답이 완료되었지만 HTTP 상태 코드가 200이 아닌 경우 에러 메시지를 콘솔에 출력합니다.
xhr.send() : XMLHttpRequest 객체를 사용하여 서버에 요청을 보냅니다. 이것이 서버에서 데이터를 요청하고 응답을 대기하는 부분입니다.
결론적으로, 이 코드는 주어진 URL에서 JSON 데이터를 가져와서 성공적으로 데이터를 받으면 그 데이터를 콘솔에 출력하는 XMLHttpRequest를 수행하는 간단한 JavaScript 코드입니다. 이를 통해 웹 페이지에서 외부 데이터를 비동기적으로 가져와서 처리할 수 있습니다.
23. 파일 : 서버 데이터 불러오기 : fetch 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)
})
}
fetch("https://webstoryboy.github.io/webs2024/json/gineungsaJC2011_05.json") : fetch 함수를 사용하여 지정된 URL에서 데이터를 가져옵니다. 이 코드는 해당 URL로 GET 요청을 보내 데이터를 요청합니다.
.then(response => { ... }) : fetch 함수가 Promise를 반환하므로, 이 Promise의 첫 번째 .then 블록은 HTTP 응답에 대한 처리를 정의합니다. response 매개변수에는 서버 응답이 포함됩니다.
return response.json() : response 객체의 .json() 메서드를 호출하여 JSON 형식의 데이터를 파싱합니다. 이 메서드도 Promise를 반환하므로 데이터가 성공적으로 파싱될 때까지 대기합니다.
.then(data => { ... }) : JSON 데이터 파싱이 성공하면, 이 .then 블록에서 데이터를 처리합니다. data 매개변수에는 파싱된 JSON 데이터가 포함됩니다.
console.log(data) : 파싱된 JSON 데이터를 콘솔에 출력하여 확인합니다.
.catch(error => { ... }): 이 .catch 블록은 프라미스 체인 중 어떤 단계에서 오류가 발생하면 실행됩니다. 오류 메시지를 콘솔에 출력하여 디버깅과 오류 처리를 도와줍니다.
종합적으로, 이 코드는 지정된 URL에서 데이터를 가져오고, 가져온 데이터가 JSON 형식으로 파싱되면 해당 데이터를 콘솔에 출력하는 과정을 단순화한 것입니다. Fetch API는 많은 웹 애플리케이션에서 데이터 가져오기와 웹 서버와 통신하기 위해 널리 사용되며, 비동기적 작업을 처리하는 데 효과적인 방법을 제공합니다.