Asynchronous
-
[Axios] Axios : 비동기 통신 라이브러리Environment(개발환경)/Web 2021. 3. 4. 04:23
🤔 서론 3차 프로젝트를 진행중이고, redux-saga를 통한 로그인/회원가입 서버통신을 구현하면서 axios를 적용하는 예제를 보았다. fetch() 함수와 비슷한 역할을 수행하면서도, HTTP 메서드를 간결하게 적용할 수 있어서 유용한 라이브러리 같았다. 이번 기회에, Axios라는 라이브러리는 무엇인지, 많이 연계되는 Ajax 나 fetch() 와의 차이에 대해서도 짚고 넘어가려고 한다!! 💜 Axios 란? Axios는 브라우저와 Node.js 를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 즉, 프론트와 백의 비동기 통신이 좀 더 원활하도록 도와주는 자바스크립트 라이브러리이다. Axios의 기능은 아래가 있다. 브라우저 환경: XMLHttpRequests 요청 생..
-
[Redux] Redux-thunkFront-End(Web)/React - 라이브러리들 2021. 2. 18. 15:40
🤔 Redux 의 비동기 오류 Context API 에서 Redux 로 수정하는 토이 프로젝트를 진행하는 중이었다. action 생성자들을 별도파일로 제작하여 import 해서 사용중이었고, 이처럼 fetch() 로 가져온 데이터로 상태를 최신화할때 에러가 생겼다. 내용은 대충, fetchList() 라는 액션 생성자에 cartList를 담았는데 이것이 객체형태로 정상적인 반환이 되지 않은 것 같다. 또한, 대놓고 Async action에 대한 미들웨어를 사용하라고 권장하고 있다. 이러한, 비동기 처리를 위한 적절한 미들웨어를 찾아보았다. 💜 Redux-thunk 알아가기 리덕스를 사용하는 앱에서 비동기 작업을 사용할 때, 가장 기본적인 방법으로 사용되는 것이 redux-thunk 이다. 이 미들웨어는,..
-
[Javascript] 비동기 - #3. Async & AwaitFront-End(Web)/Javascript 2021. 2. 14. 19:09
프로젝트를 마무리하고, 이제서야 비동기 3탄이자 꽃인 async/await 에 대해 포스팅을 한다. async/await 은 JS의 비동기 처리를 개선하기 위해(콜백지옥), Promise 처럼 ES6 이후 문법에서 등장했으며 가장 최신의 문법이다. Promise를 다루는 .then() 에 비해 어떠한 점이 더 나아진건지 한 번 확인해보도록 하겠다! 📒 Async & Await 해당 함수를 비동기로 실행하기 위해 사용되는 함수가 바로 이 'Async Function' 이다. 당연히, 결과값은 Promise를 반환한다. Async Function의 장점 중 하나는, 코드의 구조가 일반 동기함수와 매우 유사하게 사용할 수 있다는 것이다. // Promise const getItem = () => { fetch..
-
[Javascript] 비동기 - #2. PromiseFront-End(Web)/Javascript 2021. 2. 1. 19:30
나도 그렇고, fetch()-then 이나 async/await 을 사용하면 최초에 Promise 라는 결과값이 반환되는 것을 볼 수 있었을 것이다. 또한, 자세히 보면 이 Promise는 객체(Object) 형태를 하고 있으며, 아래와 같이 어떠한 값들을 포함하고 있었다. 이 Promise는 저번에 알아본 콜백지옥을 대체한다고 했는데, 이에 대해 좀 더 자세히 공부해보았다. 📒 Promise 란? - Promise가 필요한 이유 1) 콜백지옥 저번 비동기 시간에 얘기한 콜백지옥이다. 보시다시피 가독성도 나쁠 뿐더러, 에러 발생 가능성이 높기 때문에 대안이 필요했던 것이다. 2) 에러 처리의 한계 try { setTimeout(() => { throw new Error('Error!'); }, 1000)..
-
[Javascript] 비동기 - #1. 비동기 개념과 Callback FunctionFront-End(Web)/Javascript 2021. 1. 30. 07:37
Javascript 메서드를 사용하면 인자로 받는 함수를 '콜백함수' 라고 명명하는 것을 보았을 것이다. React 작업을 하면서, fetch() 함수의 .then 혹은 async/await 등 '비동기 프로그래밍'을 자주 적용했다. 위 내용들 모두, 해당 코드를 진행함과 동시에 다음 코드로 넘어가기 위한 '비동기'의 목적이라 막연하게 알고 있었다. (컴퓨터 언어 특성상 코드는 위에서 아래로 순차적으로 실행되기 때문! - 싱글 스레드) 그렇지만, 그래서 비동기가 뭔데? 라는 질문에 저 이상으로 답을 할 수 없었고, 이번 기회에 Javascript의 비동기 관련된 동작원리를 시리즈로 정리하면서 공부하고자 포스팅을 시작하였다. 📒 비동기(Asynchronous) vs 동기(Synchronous) - 동기(S..