728x90 반응형 STUDY/JavaScript19 데이터 전송 fetch와 Axiox 비교 브라우저 환경에서 HTTP 요청을 보내기 위해 사용되는 라이브러리로, fetch 또는 Axios가 사용된다. | fetch APIfetch는 브라우저 내장 API로, 최신 브라우저에서 기본적으로 제공된다. ES6 Promise 기반으로 동작하며, 간단한 요청에는 매우 유용하다. 장점- 내장 API로 별도의 라이브러리르 설치하지 않아도 된다.- 간단한 요청을 작성할 때 간결하게 사용할 수 있다. 단점- 기본 기능만 제공하고 오류 처리가 불편하다.- HTTP 에러가 reject되지 않고 resolve되기 때문에, 명시적으로 에러를 체크해야 한다.- 응답 데이터를 JSON으로 변환하려면 .json() 메서드를 별도로 호출해야 한다. fetch 예 >fetch('/api/data', { method: 'P.. 2024. 5. 27. 변수와 함수의 유효범위 - 스코프(Scope) 스코프는 변수와 함수의 유효 범위를 나타낸다. 변수나 함수가 어디에서 정의되었는지에 따라 그 유효 범위가 결정된다. 스코프는 크게 전역 스코프(Global Scope)와 지역 스코프(Local Scope)로 나뉜다. 1. 전역 스코프 (Global Scope) 전역 스코프는 코드의 가장 바깥 영역으로, 어디서든 접근 할 수 있는 범위를 가지며 전역 변수(Global Variable)라고 한다. 2. 지역 스코프 (Local Scope) 지역 스코프는 특정한 영역 내에서만 유효한 스코프를 말한다. 함수 스코프와 블록 스코프가 있다. 1) 함수 스코프(Function Scope) 함수 스코프는 함수 내에서 정의된 변수가 해당 함수 내에서만 유효한 범위를 가진다. 함수가 호출될 때마다 새로운 스코프가 생성된다.. 2023. 12. 16. JavaScript 변수 호이스팅과 함수 호이스팅 1. 변수 호이스팅(Variable Hoisting) 변수 호이스팅은 자바스크립트에서 변수를 선언할 때, 해당 변수가 코드 어디에 있든 선언 부분이 최상단으로 끌어올려지는 동작을 말한다. 변수 선언은 코드의 최상단으로 끌어올려지기 때문에 변수를 선언하기 전에 해당 변수를 사용해도 오류가 발생하지 않는다. 그러나 할당(초기화) 부분은 호이스팅되지 않으므로 변수를 선언하고 초기화하기 전에 해당 변수를 사용하면 undefined가 반환된다. console.log(x); // undefined var x = 5; console.log(x); // 5 위 코드는 실제로 아래와 같이 동작한다. var x; // 변수 선언이 호이스팅되어 최상단으로 이동 console.log(x); // undefined x = 5;.. 2023. 12. 15. JavaScript 변수 특징과 유형 변수는 프로그램에서 데이터를 저장하고 참조하기 위한 기본적인 요소이다. 변수 선언 변수를 선언하는 과정은 'var', 'let', 'const'키워드를 사용하는데 ES6이후 주로 let과 const를 사용한다. 변수 할당 변수에 값을 할당하는 과정은 '=' 연산자를 사용한다. let name = 'John'; 변수의 스코프 변수의 스코프는 변수가 유효한 범위를 나타낸다. - 전역스코프(Global Scope) : 전역에 선언된 변수로 어디서든 접근 가능. - 지역스코프(Local Scope) : 함수 내에서 선언된 변수로, 함수 내에서만 접근 가능. - 블록 스코프(Block Scope) : { } 영역에서 선언된 변수로 블록 내에서만 접근 가능. (let과 const에서만) 변수 호이스팅 변수 호이스팅.. 2023. 12. 15. 일급 객체(first-class object)의 세 가지 조건 자바 스크립트에서 함수는 일급 객체로 취급되므로 세 가지 조건을 만족한다. 이것은 함수를 변수에 할당하고, 다른 함수의 인자로 전달하며 함수의 반환 값으로 사용할 수 있다는 의미이다. 1) 변수에 할당(Assignable) 함수는 변수에 할당할 수 있다. 함수를 다른 변수나 상수에 저장할 수 있다. const greet = function(name) { return `Hello, ${name}!`; }; const myFunction = greet; console.log(myFunction('John')); // 출력: Hello, John! 2) 객체의 인자로 전달 (Pass as an argument) 함수는 다른 함수에 매개변수로 전달할 수 있다. 함수를 인자로 받는 고차 함수를 만들거나 콜백함수로.. 2023. 12. 2. JavaScript 콜백함수 콜백 유형 콜백 함수 (callback function)는 다른 함수의 매개변수로 전달되어 특정 시점이나 조건에 따라 실행되는 함수다. 콜백 함수는 비동기적인 작업, 이벤트 처리, 타이머 설정 등에 사용되고 자바스크립트에서 함수는 일급객체이기 때문에 다른 함수에 전달 될 수 있다. function mainFunction(callback) { // 어떤 작업 수행 // 콜백 함수 호출 callback(); } function callbackFunction() { console.log('콜백 함수가 호출되었습니다.'); } // mainFunction 호출 시 callbackFunction이 콜백으로 전달됨 mainFunction(callbackFunction); 1) 동기적 콜백 함수가 즉시 실행되는 경우로 호출한 .. 2023. 12. 1. 화살표 함수의 특징과 사용을 피해야 할 때 화살표 함수(arrow function)는 ES6(ECMAScript 2015)에서 도입된 새로운 함수 표현식이다. 기존의 함수 선언문과 함수 표현식에 비해 간결하고 몇 가지 특징이 있다. const add = (a, b) => { return a + b; }; 특징 1) 간결한 문법 화살표 함수는 함수 표현식을 간결하게 작성할 수 있도록 한다. 함수가 간단한 경우 중괄호와 return 키워드를 생략할 수 있다. // 일반 함수 표현식 const multiply = function(a, b) { return a * b; }; // 화살표 함수 const multiplyArrow = (a, b) => a * b; 2) this 바인딩 화살표 함수는 자신만의 'this'를 생성하지 않고 외부 스코프의 'th.. 2023. 12. 1. 비동기 처리를 위한 Promise Promise는 JavaScript에서 비동기 처리를 다루기 위한 객체다. 비동기 작업이 완료되었거나 실패했을 때의 결과 값을 나타내는데 사용된다. Promise는 비동기 코드를 좀 더 효율적으로 다룰 수 있게 하며, 콜백 헬(callback hell)을 피할 수 있도록 도와준다. Promise는 일반적으로 세 가지 상태를 가지고 있다 1) Pending (대기): 비동기 작업이 완료되지 않은 상태. 초기 상태다. 2) Fulfilled (이행): 비동기 작업이 성공적으로 완료된 상태. 결과 값이 존재한다. 3) Rejected (거부): 비동기 작업이 실패한 상태. 실패 이유가 존재한다. const myPromise = new Promise((resolve, reject) => { // 비동기 작업 수.. 2023. 11. 25. JavaScript에서의 비동기 처리 - async/await async와 await는 JavaScript에서 비동기 코드를 더 쉽게 다룰 수 있게 해주는 키워드다. 주로 Promise 기반의 비동기 작업을 보다 간결하고 동기적으로 보이게 작성할 수 있도록 도와준다. async와 await는 ECMAScript 2017(ES8)에서 도입되었다. 1. async async 함수는 비동기 작업을 수행하는 함수를 선언할 때 사용되며, 항상 Promise를 반환한다. 이 함수가 호출되면, 그 결과로 해결되는 Promise 객체를 얻게 된다. async function fetchData() { return 'Data Fetched!'; } fetchData().then(data => { console.log(data); // 출력: Data Fetched! }); 2. aw.. 2023. 11. 25. Javascript 배열 순회 forEach 메서드 forEach 메서드는 배열의 각 요소에 대해 주어진 콜백 함수를 한 번씩 실행하는 메서드로 새로운 배열을 반환하지 않고, 기존 배열을 변경하지도 않는다. array.forEach(callback(currentValue, index, array)); callback : 각 요소에 대해 실행할 함수로, 세 개의 인자를 받는다. currentValue : 현재 배열의 요소. index : 현재 배열의 인덱스. array : 메서드가 호출된 배열. const numbers = [1, 2, 3, 4, 5]; // 각 요소 출력 numbers.forEach((num, index) => { console.log(`Index ${index}: ${num}`); }); // 출력: // Index 0: 1 // Ind.. 2023. 11. 21. 이전 1 2 다음 728x90 반응형