안녕하세요~ totally 개발자입니다. Spread Operator 오늘은 배열을 다룰 때 정말 많이 활용되는 스프레드 연산자(Spread Operator)에 대해 살펴봅니다. 스프레드 연산자는 ...으로 사용되며 신속하게 배열 또는 객체의 일부 또는 전체를 다른 배열 혹은 객체로 복사할 때 사용됩니다. 가장 기본적인 예시를 통해 어떻게 사용되는지 확인해보도록 하겠습니다. 1) 기존 배열을 복사하여 새로운 배열을 만들 때 사용 const array1 = ["a", "b", "c"]; const array2 = ["d", "e", "f"]; const array3 = [...array1, ...array2]; console.log(array3); array1과 array2를 a,b,c와 d,e,f로 선언..

안녕하세요~ totally 개발자입니다. async, await 오늘 다룰 부분은 async, await입니다. 저번 시간에는 Promise 객체에 대해 살펴보았는데 Promise가 다소 복잡한 단점이 있는데 이를 더 용이하게 사용할 수 있도록 도와주는 비동기 처리 패턴이라고 간주하시면 됩니다. await는 반드시 async 함수 안에서 동작하도록 되어 있고, async 함수 안에는 await가 포함되어 있지 않아도 되지만 반환될 때는 Promise 객체로 반환되는 특징이 있습니다. 아래 간단한 예제를 확인해보면 testFunc를 async로 선언하여 true를 반환하는 함수가 있을 때 console에서 확인해보면, Promise 객체 형태로 true가 반환되었음을 보실 수 있습니다. const test..

안녕하세요~ totally 개발자입니다. Promise 오늘 다룰 부분은 Promise입니다. 이 Promise는 비동기 프로그래밍에서 사용되는 객체로 비동기 연산이 종료된 후에 결과 값을 반환할 수 있도록 하는 약속을 위한 객체입니다. 즉 동기 메소드처럼 값을 반환합니다. 이 Pormise에는 3가지 상태가 존재합니다. 1) Pending (대기): 초기 상태 2) Fulfilled (이행): 성공적으로 이행됨. 3) Rejected (거부): 이행 실패. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise Promise - JavaScript | MDN Promise 객체는 비동기 작업이 맞이할 미래..

안녕하세요~ totally 개발자입니다. Reduce 오늘 다룰 부분은 reduce 함수입니다. reduce 함수는 배열에 사용되며 callback function, initialValue(생략 가능)를 가질 수 있으며 accummulator, currentValue를 주로 인자로 전달하게 됩니다. 이 accmulator는 콜백 함수가 실행되며 return된 반환값을 계속 누적합니다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce Array.prototype.reduce() - JavaScript | MDN The reduce() method executes a user-supplie..

안녕하세요~ totally 개발자입니다. Generator (제너레이터) 제너레이터 함수는 일반적인 함수가 끝까지 실행되고 return 되는 것과는 달리, 중간에 실행을 멈추고 그 멈춘 자리에서 다시 실행을 시작할 수 있게 하는 함수를 말합니다. 더 구체적으로 이야기하면 함수를 호출하는 caller에게 함수를 실행을 control하는 것을 yield(양도)하여 함수의 상태를 주고 받을 수 있는 것을 말합니다. 이 제너레이터는 리턴할 때 Generator Object(제너레이터 객체)를 반환하게 되는데 이 객체는 Iterable하면서 Iterator입니다. Iterable은 Array, Map, Set등이 여기 포함되며 (반복 가능한 객체), iterator는 arr[Symbol.iterator]() 이렇..

안녕하세요~ totally 개발자입니다. 오늘은 원격 API를 호출해서 데이터를 불러오고 웹페이지에 표시하는 방법을 알아보도록 하겠습니다. 예전에는 서버 쪽에서 API를 주로 호출했지만 요즘에는 클라이언트 단에서 API를 직접 호출해서 데이터를 다루는 경우가 많아지고 있기 때문에 클라이언트 단에서 직접 API를 호출하고 데이터를 다루는 방법을 이해해야 합니다. 이를 위해, request 등과 같은 라이브러리를 사용하면 되지만 근래에는 브라우저 자체에 존재하는 fetch 함수를 사용하면 간단하고 쉽게 구현할 수 있습니다. fetch 함수는 Promise 객체를 반환하며 이 Promise 객체는 비동기(Asynchronous)를 위해, 미래에 저장되는 값을 위해 사용된다고 보면 됩니다. 이 함수는 2개의 p..