자료 구조 이번 Concept은 Data Structure(자료 구조)에 대해서 알아보겠습니다. 예전에는 해당이 되지 않았지만 요즘은 비지니스 로직이 뒤에서 앞으로 이동하면서 프론트 엔지니어의 전문지식이 중요해졌습니다. 최근에 UI 업데이트가 데이터 변경에 따라 반응하는 패러다임이 유행하고 있습니다. 이제 백엔드는 데이터베이스를 전달하는 게 끝으로 프론트에서 컨트롤러 로직을 처리하길 기대합니다. 이것은 GraphQL의 인기가 높아지면서 생긴 일 입니다. 이제 프론트엔드는 특정 데이터 구조를 사용하는 시기와 이유를 구별하는 능력이 필요하게 되었다는 것이죠. 데이터 구조를 크게 3가지로 구별하자면 Stacks or Queue(항목이 삭제 및 삽입되는 방식만 다른 배열) Linked List | Trees |..

async/await 이번 Concept은 async/await에 대해서 알아보겠습니다. 지난 Concept에서 우리는 Promise라는 것에 대해 알아보았습니다. 프로미스는 자바스크립트가 비동기 처리를 할 수 있는 방식이라고 설명했었습니다. 이렇게 비동기 처리 방식을 할 수 있는 또 다른 방법이 하나 더 있습니다. 바로 async/await 입니다. :) async/await는 Promise의 업그레이드 버전으로 매우 간단하게 비동기 처리를 할 수 있습니다. async에 관하여 먼저 알아보겠습니다. async function f() { return 1; } async는 비동기라는 뜻을 가지며 다음과 같이 함수 앞에 배치할 수 있습니다. 함수 앞에 async를 선언하게 되면 return값으로 Promis..

Promise 이번 Concpet은 비동기 방식 Promise에 관하여 다루고 있습니다. :) 프로미스는 자바스크립트에서 비동기를 간편하게 처리해주는 오브젝트입니다. 프로미스는 정해진 임무를 수행하고 나서 정상적으로 기능이 수행되었다면 성공의 메시지와 함께 처리된 결과값을 전달해줍니다. 만약 임무를 수행하다 정상적으로 수행되지 못하면 에러를 발생시킵니다. 위 사진은 Promise 동작 과정을 잘 표현하고 있습니다. Promise는 어떤 행동의 상태를 가집니다. 예를 들어 공부를 다 끝냈는지 안 끝냈는지 확인하는 Promise가 있습니다. 이 Promise는 3가지 상태를 가질 수 있습니다. 공부를 하는 중이다. 공부를 마쳤다. 공부를 하는지 모르겠다. 위는 각각 pending fulfill reject ..

컬렉션과 생성기 이번 Concept은 컬렉션에 관해서 조금 다뤄보고 넘어가겠습니다. 컬렉션은 데이터 구조 입니다. 데이터를 어떻게 저장할 지에 관한 방법이라고 일단은 표현해보겠습니다. 이미 Object와 Array로 데이터를 저장할 수 있지만 이것 만으로는 충분하지 않습니다. Map과 Set이 탄생하게 된 이유이기도 합니다. Map Map은 Object와 상당히 비슷한 형태를 가집니다. Object와 Map은 둘 다 key와 value를 가지는데 Object와 Map의 차이점은 Object는 키가 String으로 구성되어 있고 반대로 Map은 키가 문자열 외에도 가능하다는 점 입니다. 예를 들면 let map = new Map(); map.set('1', 'str1'); // a string key ma..

재귀 이번 Concept은 재귀에 관한 이야기 입니다. 아직 33번째 컨셉까지 다 다루려면 멀었긴 했지만 이번 컨셉은 제가 생각하기에 엄청나게 중요한 것 같지는 않습니다. 일단은 간단하게 개념만 남겨놓고 나중에 놓쳤다고 생각되면 다시 돌아와서 수정하겠습니다. 재귀는 단순히 함수가 자기 자신을 호출하는 것을 말합니다. function factorial (x) { if (x

고차함수 이번 Concept은 고차함수에 관해 간략히 이야기 해보겠습니다. 고차함수라고 해서 상당히 어려운 개념일 줄 알았는데 알고보니 내가 평상시에 무심코 쓰는 것이었다. const characters = [ {name: 'Han Solo'}, {name: 'Luke SkyWalker'}, {name: 'Leia Organa'} ]; 먼저 객체 배열이 있습니다. 이제 여기에 map()메서드를 사용해 콘솔에 로그해보겠습니다. // ES6 syntax const names = characters.map(character => character.name); console.log(names); // "Han Solo" "Luke SkyWalker" "Leia Organa" // ES5 syntax var na..