JavaScript/기초34 [JavaScript] 비동기 처리 (Axios, Promise, Fetch, Async/Await) 비동기 처리란? 비동기 처리(asynchronous processing)는 프로그램이 작업을 수행하는 동안 다른 작업을 동시에 처리할 수 있는 방식이다.비동기 처리를 사용하면 프로그램이 특정 작업이 완료될 때까지 기다리지 않고 다른 작업을 계속 수행할 수 있다.비동기 처리 방식1. Axios정의 Axios는 JavaScript 라이브러리로, 웹 브라우저와 Node.js 환경에서 HTTP 요청을 쉽게 보내고 받을 수 있게 도와준다.API와의 통신, 즉 데이터를 서버로 전송하거나 서버에서 데이터를 받아오는 작업을 간편하게 할 수 있도록 설계되었다.용도API 호출: 외부 API에서 데이터를 가져오거나, 외부 서버에 데이터를 전송할 때 사용한다.데이터 전송: 사용자 입력 데이터나 파일을 서버로 전송하는 작업에.. 2024. 10. 12. 자바스크립트[기초] 화살표 함수와 일반 함수의 차이 화살표 함수가 기존의 function 함수를 대체할 수 없는 것은 용도가 다르기 때문이다. 무엇보다 서로 가리키고 있는 this 값이 다르다 화살표 함수(ES6에서 추가된 함수를 표현하는 문법) 함수를 파라미터로 전달할 때 유용하다 자신이 종속된 인스턴스를 가리킨다 (조금 더 쉽게 말하면 function 함수 자체의 this를 나타낸다) 값을 연산하여 바로 반환해야 할 때 사용하면 가독성을 높일 수 있다 일반 함수(function) 자신이 종속된 객체를 this로 가리킨다 (조금 더 쉽게 말하면 function 함수 내부에 있는 객체를 나타낸다) // 일반 함수 사용 setTimeOut(function() { console.log('hello world'); }, 1000); // 화살표 함수 사용 se.. 2022. 5. 26. 자바스크립트[기초] 프로미스 에러 처리 | 프로미스 체이닝 비동기 처리에서 발생한 에러를 처리하는 방법 2가지 then 메서드의 두 번째 콜백 함수로 처리한다 catch 메서드를 사용해 처리한다 // then을 이용한 방법 promiseGet(url).then( res => console.log(res), // 첫번째 콜백함수(성공) err => console.error(err) // 두번째 콜백함수(실패) ); // catch를 이용한 방법 promiseGet(url) .then(res => console.log(res)) // 첫번째 콜백함수(성공) .catch(err => console.error(err)); // catch 메서드 promiseGet(url) .then(res => console.log(res)) // 첫번째 콜백함수(성공) .then(u.. 2022. 5. 1. 자바스크립트[기초] 프로미스 후속 처리 메소드 then | catch | finally 프로미스 후속 처리 메서드란? 프로미스가 fulfilled(성공) 상태 일 때는 프로미스의 처리 결과(데이터)를 가지고 무언가를 해야 하고 프로미스 rejected(실패) 상태 일 때는 프로미스 처리결과(에러)를 가지고 후속 처리를 해주어야 하는데 이때 필요한 후속 처리 메서드가 then | catch | finally이다 프로미스의 비동기 처리 상태가 변화하면 후속 처리 메소드에 인수로 전달한 콜백 함수가 선택적으로 호출된다 이때 후속 처리 메서드의 콜백 함수에 프로미스의 처리 결과가 인수로 전달된다 모든 후속 처리 메소드는 프로미스를 반환하며 비동기로 동작한다 . then() 프로미스를 반환한다 then의 콜백 함수가 프로미스를 반환하면 그대로 반환하고 콜백 함수가 프로미스가 아닌 값을 반환하면 그 .. 2022. 5. 1. 자바스크립트[기초] ES6 프로미스 Promise | promiseGet 프로미스란? 비동기 처리 상태와 처리 결과를 관리하는 객체 프로미스는 주로 생성자 함수로 사용되지만 함수도 객체 이므로 메서드를 가질 수 있다. 프로미스는 프로미스 체이닝을 통해 비동기 처리 결과를 전달받아 후속 처리를 하기 때문에 비동기 처리를 위한 콜백 패턴에서 발생하던 콜백 헬이 발생하지 않는다 단, 프로미스도 콜백 패턴을 사용하기 때문에 콜백 함수를 사용하지 않는 것은 아니다 프로미스 장점 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. 프로미스 생성 Promise 생성자 함수를 new 연산자와 함께 호출하면 프로미스(Promise 객체)를 생성한다 ES6에서 도입된 Promise는 호스트 객체가 아닌 ECMAScript 사양에 정의된 표준 .. 2022. 5. 1. 자바스크립트[기초] Ajax Ajax 란? 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 웹 페이지를 동적으로 갱신하는 프로그래밍 방식 브라우저에서 제공하는 Web API XMLHttpRequest 객체를 기반으로 동작한다 [ Ajax 가 나오기전] 완전한 HTML을 서버로부터 전송 받아 웹 페이지 전체를 처음부터 다시 렌더링 하는 방식 [ Ajax ] 서버로 부터 변경에 필요한 데이터만 비동기 방식으로 전송받아 웹 페이지를 변경할 필요가 없는 부분은 다시 렌더링 하지 않고 변경이 필요한 부분만 부분적으로 렌더링 하는 방식 변경할 필요가 없는 부분까지(HTML 전체) 처음부터 렌더링 한다 변경할 부분을 갱신하는데 필요한 데이터만 서버로 부터 전송 받는다 이로 인해 화면 전환이 일어나면 화면이 .. 2022. 5. 1. 이전 1 2 3 4 ··· 6 다음 728x90
