01. 변수 : 데이터 불러오기
변수는 데이터를 저장하고 참조하는 데 사용되는 식별자입니다. 변수는 데이터를 저장하기 위해 사용되며, 이후에 해당 데이터를 다시 불러올 때 변수를 사용합니다. 변수는 프로그램 내에서 값을 유지하고 조작하는 데 중요한 역할을 합니다.
{
let x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}
변수를 선언하고 값을 할당한 후에 console.log를 사용하여 이 변수들을 출력하는 예제입니다.
변수는 데이터의 값을 저장하고 그 값을 나중에 읽거나 수정할 수 있습니다. 예를 들어, 다음과 같이 변수를 사용하여 값을 저장하고 불러올 수 있습니다:
결과 확인하기
02. 상수 : 데이터 불러오기
상수(constant)는 변수와 다르게 데이터를 변경할 수 없는 식별자입니다. 상수를 한 번 정의하면 그 값을 변경할 수 없으므로 데이터를 불러와서 읽을 수는 있지만 수정할 수는 없습니다. 상수를 사용하는 주요 목적은 값이 변하지 않아야 하는 상황에서 사용하는 것입니다.
{
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]);
}
배열은 데이터를 구조화하고, 여러 데이터 항목을 한 곳에 보관하며, 각 항목을 인덱스를 사용하여 효과적으로 불러올 수 있는 도구입니다.
결과 확인하기
04. 배열 : 데이터 불러오기 + 갯수
배열의 데이터 갯수를 불러오는 것은 배열의 길이를 확인하는 것을 의미합니다. JavaScript에서는 배열의 길이를 확인하기 위해 배열 객체의 length 속성을 사용합니다.
{
const arr = [100, 200, "javascript"];
console.log(arr.length);
}
배열의 길이를 확인하는 것은 배열에서 데이터의 갯수를 파악하고 반복문을 사용할 때 유용하며, 배열을 동적으로 관리하는 데 필요한 정보를 제공합니다.
결과 확인하기
05. 배열 : 데이터 불러오기 : for()
배열의 데이터를 for 반복문을 사용하여 불러오는 것은 배열의 각 항목을 반복하면서 접근하고 처리할 때 자주 사용되는 방법 중 하나입니다. for 반복문은 배열의 길이를 기반으로 각 항목에 접근하며 데이터를 불러올 수 있습니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
for(let i=0; i<9; i++){
console.log(arr[i]);
}
}
반복문 변수 i를 사용하여 배열의 각 항목에 접근합니다. 반복문은 i가 배열의 길이보다 작은 동안 실행되므로 배열의 각 항목이 한 번씩 순서대로 출력됩니다.
for 반복문을 사용하면 배열의 데이터를 하나씩 불러오고 처리할 수 있으며, 배열의 길이에 따라 자동으로 반복합니다.
결과 확인하기
200
300
400
500
600
700
800
900
06. 배열 : 데이터 불러오기 : forEach()
forEach 메서드를 사용하여 배열의 데이터를 불러오는 방법은 배열의 각 요소를 반복하면서 작업을 수행하는 간단하고 편리한 방법입니다. forEach 메서드는 배열의 각 요소에 대해 사용자가 제공한 함수를 호출합니다. 이 함수는 배열의 각 요소에 대해 실행되며 요소를 인수로 받아서 사용할 수 있습니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
arr.forEach(function(element){
console.log(element);
});
arr.forEach(function(index){
console.log(index);
});
arr.forEach(function(array){
console.log(array);
});
// 약식 표현
arr.forEach((el) => {
console.log(el);
});
arr.forEach(el => {
console.log(el);
});
arr.forEach(el => console.log(el));
}
1. 코드의 첫 부분에서 arr이라는 배열을 생성하고 초기화합니다. 이 배열에는 숫자로 된 여러 요소가 포함되어 있습니다.
2. forEach 메서드를 사용한 반복 : forEach 메서드를 사용하여 arr 배열의 각 요소를 반복하고, 각 요소를 element 매개변수로 받아서 콘솔에
출력합니다. 결과적으로 배열의 모든 요소가 순서대로 출력됩니다.
3. forEach 메서드에 다른 매개변수 이름 사용 : 이 두 블록은 동일한 forEach 메서드를 사용합니다. 그러나 매개변수의 이름을 index와 array로
바꾸었습니다. 이렇게 매개변수 이름을 정하는 것은 자유롭게 할 수 있으며, 일반적으로 요소, 인덱스, 배열 자체 등을 나타내는 이름을 사용합니다. 하지만 element,
index, array와 같은 관용적인 이름을 사용하는 것이 코드를 이해하기 쉽게 만듭니다.
4. 약식 표현 : 화살표 함수를 사용하여 forEach 메서드를 호출하는 방법을 보여줍니다. 화살표 함수는 간단한 콜백 함수를 작성할 때 유용하며, el이라는 매개변수로
배열의 각 요소를 받아서 콘솔에 출력합니다.
결과 확인하기
200
300
400
500
600
700
800
900
07. 배열 : 데이터 불러오기 : for of
for...of 루프를 사용하여 배열의 데이터를 불러오는 것은 JavaScript에서 간편하고 직관적인 방법 중 하나입니다. for...of 루프는 배열의 각 요소를 반복하며, 반복할 때 인덱스를 직접 다룰 필요가 없습니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
for(const element of arr){
console.log(element);
}
}
for...of 루프를 사용하여 arr 배열의 각 요소를 반복하고, 각 요소를 element 변수에 할당합니다. 그런 다음 element 변수를 사용하여 요소를 처리하거나
출력할 수 있습니다.
for...of 루프를 사용하면 반복할 때 인덱스 관리나 배열의 길이를 확인하는 코드를 작성할 필요가 없으므로 코드가 간결해집니다. 또한 이 방법은 ES6 이상의
JavaScript 버전에서 사용할 수 있습니다.
참고로, for...of 루프는 배열뿐만 아니라 이터러블(iterable) 객체를 순회하는 데에도 사용할 수 있으므로, 배열 이외의 컬렉션 데이터 타입에서도 유용하게 활용할
수 있습니다.
결과 확인하기
200
300
400
500
600
700
800
900
08. 배열 : 데이터 불러오기 : for in
for...in 루프는 JavaScript에서 객체의 속성을 열거하는데 사용되는 반면, 배열의 데이터를 순회하는데는 권장되지 않습니다. for...in 루프는 객체의 속성을 열거할 때 사용되며 배열에 적용할 때 예기치 않은 동작을 일으킬 수 있습니다. 배열의 요소를 순회할 때는 for...of 루프를 사용하는 것이 더 적절하며 안전합니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
for(const element of arr){
console.log(element);
}
}
for...of 루프를 사용하여 arr 배열의 각 요소를 반복합니다. const element는 반복 과정에서 현재 요소를 나타내는 변수입니다. element 변수에는 각 루프 반복에서 배열의 다음 요소가 할당됩니다.
결과 확인하기
200
300
400
500
600
700
800
900
09. 배열 : 데이터 불러오기 : map()
배열을 다룰 때 데이터를 효과적으로 처리하고 변형하는 데 도움이 되는 JavaScript의 메서드 중 하나는 map() 메서드입니다.
{
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() 메서드는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 함수가 반환하는 값을 새로운 배열에 저장하여 반환합니다. 이를 통해 기존 배열의 요소를 변형하거나 새로운 배열을 생성할 수 있습니다.
결과 확인하기
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
10. 배열 : 데이터 불러오기 : filter()
JavaScript에서 배열 데이터를 필터링하고 원하는 조건에 맞는 요소만 추출하는 데 사용되는 메서드 중 하나는 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);
});
}
filter() 메서드는 배열의 각 요소를 순회하고 주어진 조건을 만족하는 요소만으로 이루어진 새로운 배열을 반환합니다.
결과 확인하기
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
11. 배열 : 데이터 불러오기 : 배열 펼침 연산자
배열의 요소를 추출하여 변수에 할당하는 방법을 말합니다. 이를 통해 배열의 각 요소를 개별적인 변수로 분해하여 사용할 수 있습니다.
{
const arr1 = [100, 200, "javascript"];
const arr2 = [300, 400, "jquery"];
const arr3 = [...arr1, 500];
console.log(arr1); //100, 200, javascript
console.log(...arr1); //100 200 javascript
console.log(...arr1, ...arr2); //100 200 javascript 300 400 jquery
console.log(...arr3); //100 200 javascript 500
}
배열 구조 분해 할당을 사용하면 변수 이름을 배열의 요소와 일치시켜 해당 변수에 값을 할당할 수 있습니다. 만약에 할당받을 변수의 개수가 배열의 요소보다 적거나 많다면, 남는 변수는 undefined로 할당됩니다.
결과 확인하기
100 200 javascript
100 200 javascript 300 400 jquery
100 200 javascript 500
12. 배열 : 데이터 불러오기 : 배열 구조 분해 할당
배열의 요소를 추출하여 변수에 할당하는 방법을 말합니다. 이를 통해 배열의 각 요소를 개별적인 변수로 분해하여 사용할 수 있습니다.
{
const arr3 = [100, 200, "javascript"];
const [a, b, c] = arr3; //배열 구조 분해 할당
console.log(a); //100
console.log(b); //200
console.log(c); //javascript
}
배열 구조 분해 할당을 사용하면 변수 이름을 배열의 요소와 일치시켜 해당 변수에 값을 할당할 수 있습니다. 만약에 할당받을 변수의 개수가 배열의 요소보다 적거나 많다면, 남는 변수는 undefined로 할당됩니다.
결과 확인하기
200
javascript
13. 객체 : 데이터 불러오기
객체 obj를 정의하고, 이 객체의 속성들을 다양한 방법으로 접근하고 출력하는 방법입니다.
{
const obj = {
a: 100,
b: 200,
c: "javasript",
}
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의 속성에 대한 접근을 대괄호([]) 표기법을 사용하여 수행하는 부분입니다. 대괄호 표기법을 사용할 때는 속성 이름을 문자열로 감싸야 합니다. 결과적으로 콘솔에는 똑같은 출력이 나타납니다.
결과 확인하기
200
javascript
100
200
javascript
14. 객체 : 데이터 불러오기 : Object.keys()
Object.keys()는 JavaScript에서 사용되는 내장 함수 중 하나로, 객체의 속성(key)들을 배열로 반환하는 메서드입니다.
{
const obj = {
a: 100,
b: 200,
c: "javasript",
}
console.log(Object.keys(obj)); // a,b,c
}
obj 객체의 속성(key)들을 순회하면서 각 속성의 이름을 배열에 담습니다. 이 배열을 반환합니다.
결과 확인하기
15. 객체 : 데이터 불러오기 : Object.values()
Object.values()는 JavaScript에서 사용되는 내장 함수 중 하나로, 객체의 속성들의 값(value)들을 배열로 반환하는 메서드입니다.
{
const obj = {
a: 100,
b: 200,
c: "javasript",
}
console.log(Object.values(obj)); // 100, 200, javascript
}
obj 객체의 속성들을 순회하면서 각 속성의 값을 배열에 담습니다.
결과 확인하기
16. 객체 : 데이터 불러오기 : Object.entries()
Object.entries()는 JavaScript에서 사용되는 내장 함수 중 하나로, 객체의 속성(key-value 쌍)들을 배열의 배열로 반환하는 메서드입니다.
{
const obj = {
a: 100,
b: 200,
c: "javasript",
}
console.log(Object.entries(obj)); //[a,100][b,200][c,javascript]
}
obj 객체의 속성들을 순회하면서 각 속성의 이름(key)과 값을 배열로 묶어서 다시 배열로 만듭니다.
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()은 객체를 병합하거나 복사할 때 유용하게 사용될 수 있으며, 객체 복사에 대한 다양한 용도로 활용될 수 있습니다.
결과 확인하기
b : 200
c : "javascript"
d : 300
e : 400
f : "jquery"
18. 객체 : 데이터 불러오기 : hasOwnProperty()
hasOwnProperty()는 JavaScript 객체의 메서드 중 하나로, 특정 속성(프로퍼티)이 객체 자체에 직접 속해 있는지 여부를 판단하는 데 사용됩니다. 이 메서드는 해당 속성이 객체의 프로토타입 체인에 속하는 것이 아니라 객체 자체에 직접 정의되어 있는지를 확인합니다.
{
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); //true
console.log("b" in obj); //true
console.log("c" in obj); //true
console.log("d" in obj); //false
}
주의할 점은 hasOwnProperty()는 프로토타입 체인 상에서 상속된 속성은 확인하지 않습니다. 따라서 만약 객체의 프로토타입 체인 상에서 속성을 확인하려면 다른
방법을 사용해야 합니다.
in 연산자는 JavaScript에서 객체의 속성(프로퍼티)이 특정 객체 내에 존재하는지 여부를 확인하는 데 사용됩니다. in 연산자를 통해 특정 속성 이름이 객체 또는
객체의 프로토타입 체인 내에 존재하는지를 확인할 수 있습니다.
19. 객체 : 데이터 불러오기 : for in
JavaScript 객체(obj)를 순회하고 객체의 속성(프로퍼티)을 열거하기 위해 for in 루프를 사용하는 예제입니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript",
}
for(let el in obj){
console.log(el + " : " + obj[el]);
}
}
for in 루프는 객체의 속성을 순서대로 반복하며, 객체에 정의된 속성을 열거할 때 유용합니다. 단, 주의해야 할 점은 for in 루프는 객체의 프로토타입 체인 상의 속성도 열거할 수 있으므로, 객체 자체에 속한 속성만 열거하려면 hasOwnProperty() 메서드를 함께 사용하는 것이 좋습니다.
결과 확인하기
b : 200
c : javascript
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(obj3); // { a: 100, b: 200, c: "javascript", d: 300, e: 400, f: "jquery" }
console.log(obj4); // { a: 100, b: 200, c: "javascript", d: "jquery" }
console.log(obj5); // { a: 100, b: 300, c: "javascript" }
}
1. {...obj1}은 obj1 객체의 속성들을 복사하고, {...obj2}는 obj2 객체의 속성들을 복사합니다. 그리고 이 두 복사본을 하나의 새로운 객체인 obj3에
합칩니다.
2. {...obj1}은 obj1 객체의 속성들을 복사하고, d: "jquery"는 d 속성을 추가합니다. 따라서 obj4는 obj1의 복제본이며 d 속성이 추가된
형태입니다.
3. {...obj1}은 obj1 객체의 속성들을 복사하고, b: 300은 b 속성의 값을 수정합니다. 따라서 obj5는 obj1의 복제본이며 b 속성의 값이 300으로
변경된 형태입니다.
21. 객체 : 데이터 불러오기 : 객체 구조 분해 할당
객체 구조 분해 할당(Object Destructuring Assignment)은 JavaScript에서 사용되는 기술로, 객체의 속성을 추출하여 변수에 할당하는 방법입니다. 이를 통해 객체의 속성을 간편하게 접근하고 활용할 수 있습니다. 객체 구조 분해 할당은 주로 객체에서 필요한 속성을 뽑아내는 작업에 사용됩니다.
{
const obj1 = {
a: 100,
b: 200,
c: "javascript",
}
const {a, b, c} = obj1;
console.log(a); // 100
console.log(b); // 200
console.log(c); // "javascript"
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"
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"
}
객체 비구조화 할당 (Object Destructuring Assignment) 기능을 사용하는 예제입니다. 객체 비구조화 할당은 객체의 속성을 추출하여 변수에 할당하는 기술로, 코드를 더 간결하게 만들고 객체의 일부 속성을 쉽게 접근할 수 있도록 합니다.
22. 파일 : 서버 데이터 불러오기 : XMLHttpRequest
XMLHttpRequest는 웹 개발에서 사용되는 자바스크립트 객체 중 하나로, 서버와 비동기식으로 데이터를 교환하기 위해 사용됩니다. 이 객체는 웹 페이지를 새로 고치지 않고도 서버와 데이터를 주고받을 수 있게 해주는 핵심적인 도구 중 하나로, AJAX (Asynchronous JavaScript and XML) 기술의 핵심 구성 요소입니다.
{
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는 비동기적으로 작동하며, 즉시 서버 요청을 보내고 응답을 기다리지 않고 다른 작업을 수행할 수 있습니다. 이는 웹 페이지가
끊김 없이 더 반응적으로 동작하게 해줍니다.
2. HTTP 요청 전송: XMLHttpRequest는 웹 서버에 HTTP 요청(GET, POST, PUT, DELETE 등)을 보낼 수 있습니다. 이를 통해 데이터를
요청하거나 서버에 데이터를 전송할 수 있습니다.
3. 이벤트 기반 처리: XMLHttpRequest 객체는 이벤트를 사용하여 서버 응답을 처리합니다. 예를 들어, onload, onerror,
onreadystatechange 등의 이벤트 핸들러를 사용하여 서버로부터 데이터를 받거나 에러를 처리할 수 있습니다.
4. 크로스-도메인 요청: 일반적으로 브라우저 보안 정책으로 인해 다른 도메인으로의 직접적인 XMLHttpRequest 요청이 제한됩니다. 그러나 CORS
(Cross-Origin Resource Sharing)를 구현하여 다른 도메인으로의 요청을 허용할 수 있습니다.
5. 데이터 형식: XMLHttpRequest는 XML, JSON, HTML, 텍스트 또는 기타 원하는 형식의 데이터를 주고받을 수 있습니다. 요청 헤더 및 응답 헤더를
조절하여 원하는 데이터 형식을 처리할 수 있습니다.
23. 파일 : 서버 데이터 불러오기 : fetch API
Fetch API는 웹 개발에서 데이터를 비동기적으로 가져오거나 전송하기 위한 JavaScript API입니다. XMLHttpRequest보다 간단하고 강력한 방법으로, 네트워크 요청을 다루는데 사용됩니다. Fetch API는 모던 브라우저에서 지원되며, Promise를 기반으로 구성되어 비동기 코드를 더 간단하게 작성할 수 있도록 도와줍니다.
{
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 API는 비동기적으로 작동하며, 네트워크 요청을 보내고 응답을 기다리지 않고 다른 작업을 수행할 수 있습니다. 이로 인해 웹 애플리케이션은 더
반응적으로 동작할 수 있습니다.
2. HTTP 요청 전송: Fetch API는 HTTP 요청(GET, POST, PUT, DELETE 등)을 서버로 보낼 수 있습니다. 이를 통해 데이터를 요청하거나 서버에
데이터를 전송할 수 있습니다.
3. Promise 기반: Fetch API는 Promise를 반환합니다. 이를 사용하여 비동기 코드를 더 간결하게 작성하고 요청이 성공 또는 실패한 경우를 처리할 수
있습니다.
4. 서버 응답 처리: Fetch API를 사용하면 서버로부터 받은 응답을 처리할 수 있습니다. 이때 응답을 JSON, 텍스트, Blob 등으로 변환하거나 상태 코드를
확인할 수 있습니다.
5. CORS 지원: Fetch API는 Cross-Origin Resource Sharing (CORS)를 지원하며, 다른 도메인으로의 요청을 허용하는 웹 서버 설정에
따라 동작합니다.
TOP