TIL/Javascript
-
TIL.94 Javascript_Promise 이해하기TIL/Javascript 2021. 1. 10. 21:07
Promise? “A promise is an object that may produce a single value some time in the future” 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미 Promise가 필요한 이유? 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용합니다. $.get('url 주소/products/1', function(response) { // ... }); 위 API가 실행되면 서버에다..
-
TIL.93 Javascript 비동기 처리 이해하기TIL/Javascript 2021. 1. 9. 22:25
비동기 처리? 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다 비동기 처리의 첫 번째 사례 비동기 처리의 가장 흔한 사례는 제이쿼리의 ajax입니다. 제이쿼리로 실제 웹 서비스를 개발할 때 ajax 통신을 빼놓을 수가 없습니다. 보통 화면에 표시할 이미지나 데이터를 서버에서 불러와 표시해야 하는데 이때 ajax 통신으로 해당 데이터를 서버로부터 가져올 수 있기 때문입니다. 그럼 ajax 코드를 잠깐 살펴보겠습니다. function getData() { var tableData; $.get('https://domain.com/products/1', function(response) { tableData = r..
-
TIL.92 Javascript_Reduce 함수TIL/Javascript 2021. 1. 8. 23:41
reduce() 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. reduce를 덧셈 함수이긴 하나 그 부분만 있는 것이아니다. 대부분의 사이트에서 reduce 사용 예시를 덧셈으로 들고 있기 때문이다. 하지만 reduce는 map과 함께 굉장히 중요하고 강력한 녀석으로 맵리듀스라는 프레임워크도 있을 정도이다. 배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값); 이전값이 아니라 누적값이라는 것에 주의하셔야 합니다. 누적값이기 때문에 다양하게 활용할 수 있습니다. const array1 = [1, 2, 3, 4]; const reducer = (accumulator, currentValue) => accumula..
-
TIL.89 Javascript_map 함수TIL/Javascript 2021. 1. 5. 13:52
map() method는 호출 배열의 모든 요소에 대해 제공된 함수를 호출 한 결과로 채워진 새 배열을 만듭니다 . 배열.map((요소, 인덱스, 배열) => { return 요소 }); map함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용한다. array.map(callbackFunction(currenValue, index, array), thisArg) callbackFunction, thisArg 두개의 매개변수가 있고 callbackFunction은 currentValue, index, array 3개의 매개변수를 갖는다. currentValue : 배열 내 현재 값 index : 배열 내 현재 값의 인덱스 array : 현재 배열 thisArg : ca..