하다보면 늘겠지

비동기 프로그래밍에 대해 학습하던 중 Callback, Promise, Async&await, AJAX, XMLHttpRequest, fetch API에 대한 개념을 보다 명확하게 정리하고자 작성하는 글입니다. 3편은 Async&await에 대해서 알아보았습니다. 이로써 Callback, Promise, Async&await에 대해서 모두 학습하게 되었습니다. 비동기와 관련해서 검색을 해보면 AJAX, Fetch API, XMLHttpRequest 에 대한 내용들도 많이 등장하는 것을 볼 수 있습니다. 그렇다면 앞에서 배웠던 Callback, Promise, Async&await와는 어떤 차이가 있는걸까요? AJAX(Asynchronous Javascript And XML) AJAX는 HTTP를 효율적으..

비동기 프로그래밍에 대해 학습하던 중 Callback, Promise, Async&await, Ajax, XMLHttpRequest, fetch API에 대한 개념을 보다 명확하게 정리하고자 작성하는 글입니다. 2편에서는 Promise에 대해서 알아봤습니다. 이번 편은 Async&await에 대해서 알아보겠습니다. Async&await Async&await는 Promise와 마찬가지로 비동기를 위해 사용되는 함수이고 내부적으로 Promise 객체를 사용하여 결과를 반환합니다. Promise를 좀 더 간편하게 사용할 수 있다는 것을 의미합니다. async는 비동기 함수임을 명시하는 키워드이며 보통 async function() {} 와 같이 작성합니다. async 키워드를 붙이면 해당 코드 블럭이 Prom..

비동기 프로그래밍에 대해 학습하던 중 Callback, Promise, Async&await, Ajax, XMLHttpRequest, fetch API에 대한 개념을 보다 명확하게 정리하고자 작성하는 글입니다. 1편에서 Callback 지옥을 해결 해주는 것들이 Promise와 async&await라고 했습니다. 저것들의 개념은 무엇인지 어떤 방식으로 문제점을 해결해주는지에 대해서 알아보겠습니다. Promise 1편에서 대표적인 비동기 함수에는 setTimeout가 있다고 했습니다. 그렇다면 Promise는 무엇일까요? Promise는 자바스크립트에 내장되어 있는 대표적인 비동기 '객체' 입니다. 비동기로 음성 파일을 생성해주는 createAudioFileAsync() 라는 함수가 있다고 가정해보겠습니다..

비동기 프로그래밍에 대해 학습하던 중 Callback, Promise, Async&await, Ajax, XMLHttpRequest, fetch API에 대한 개념을 보다 명확하게 정리하고자 작성하는 글입니다. 1편은 비동기 프로그래밍과 Callback에 대해서 알아보도록 하겠습니다. Callback 하나의 함수가 다른 함수의 인자 값으로 전달이 되어서 그 함수에 의해 호출될 때 그 함수를 콜백 함수라고 합니다. 일단 비동기라는 개념을 제외하고 단순하게 함수를 활용하는 하나의 방식이라고 생각하면 될 것 같습니다. 콜백 함수는 비동기 프로그래밍만을 위해서가 아닌 가독성과 코드의 재사용을 위하여 사용하기도 하고 동기적인 실행을 할 수도 있습니다. function A(B) { console.log(1); B(..

Webpack이란? 여러개의 파일을 하나의 파일로 묶어주는 개발 자동화 도구 먼저 기존 script로 불러오는 것들 type을 module을 지정해서 똑같은 이름의 변수를 다르게 지정하여 사용할 수 있다. 변수 이름의 충돌은 위와 같이 import, export 구문으로 피할 수 있다. 저렇게 지정하면 word라는 변수를 사용할 수 없다. 그리고 import, export는 비교적 최신 기능이어서 오래된 웹 브라우저에서는 동작하지 않는다. 또 Network 탭에서 hello.js와 world.js 파일이 각각 다운로드 받아진다. 변수의 충돌을 없애고 해당 파일들을 각각 받지 않고 하나로 묶어서 자원을 아끼고 각각의 파일을 모듈로 만들어 사용할 수 없을까라는 생각에 번들러가 만들어졌다. 번들러라의 대표주자..