말은 쉽지, 코드를 보여줘!

나는 백엔드 개발자다. 최근에는 프론트엔드에도 많은 관심을 가지고 학습을 이어가고 있지만 정작 자바스크립트에 흥미를 느꼈던 시기에는 SI업체에 있었기 때문에 주어진 백엔드 작업을 쳐내는 것도 바빴고 게임에도 빠져 있어서 출퇴근 길에 구글링으로 지적호기심을 채우는 것이 고작이었다. 그때가 약 5년 전 이었던 것 같은데 Node가 등장하고 지금의 라인플러스에서 자바스크립트 고급 개발자를 공격적으로 모집하던 시기였던 것 같다. 자바스크립트의 발전을 넋놓고 지켜볼 수 밖에 없었다. 아무튼 지금에 와서 리액트를 학습하며 자바스크립트를 다시 들여다보게 되었고 과거 완전히 이해하지 못하고 넘어갔던 클로저에 대해 확실히 정리를 해두려 한다. 클로저가 대체 뭘까? 자바스크립트의 특정 함수를 가리키는 건가? 아니면 특정 ..

콜백함수는 비동기 작업에서 많이 사용되는데 결과에 따라 추가 작업을 해야 하는데 시간이 오래 걸리는 A라는 함수를 호출해야 할 경우 작업이 끝나면 호출할 B함수를 인자에 할당해서 비동기 호출을 해놓고 결과를 기다리지 않고 다른 일을 한다. 그럼 A함수는 작업이 끝나면 인자로 받은 B함수를 실행해서 작업이 끝났음을 알린다. ​ 여기에서 B함수가 바로 콜백함수이다. call back 은 "전화를 해왔던 사람에게 다시 전화하다" 라는 뜻인데 위 상황만 보면 콜백함수의 "콜백"도 이대로 해석해도 무리는 없다. 하지만 실제로 콜백함수는 위와 같이 단순히 작업이 끝났음을 알리기 보다 작업결과를 이용해서 추가작업을 수행하기 때문에 콜에프터(call after) 함수라고도 불린다. ​ 어쨌든 너무 복잡하게 생각하지 말..

특정 js 파일의 클래스나 함수를 다른 곳에서 import 받아서 사용하려면 기본적으로 가장 하단에 export 처리가 되어 있어야 한다. export는 아래와 같이 하면 된다. export default counter; export const increase = () => ({type: INCREASE); ./counter.js 파일을 import 받는다고 가정하면 아래와 같이 하면 된다. 보면 알겠지만 export default 로 내보낸 것들은 그냥 명시하면 되지만 export 로 내보낸 것들은 {}로 묶어줘야 한다. import counter, { increase } from './counter'; 만약 import 받으려는 파일명이 index.js 이고 modules 디렉토리 하위에 있다면 아래..

기존방식 //함수선언식 function func(arg) { ... } //함수표현식 const func = function(arg) { ... } ES6 화살표 함수 const func = (arg) => { ... } 기존의 함수표현식과 비슷한 형태로 사용되지만 this의 기준이 다르기 때문에 화살표함수가 완전히 기존 방식을 대체할 순 없다. 기존 함수에서의 this는 자신이 종속된 객체를 가리키고 화살표함수의 this는 자신이 종속된 인스턴스를 가리킨다. 클래스, 객체, 인스턴스 대한 구분은 아래를 참고하자. findmypiece.tistory.com/35 클래스, 객체, 인스턴스 객체는 뭐고 객체는 뭐고 인스턴스는 뭔가? 그리고 클래스는 또 뭘까? 흔히들 클래스를 객체화한다거나 클래스를 인스턴스화..

배열과 객체 리터럴 값을 복사해온다. const numbers = [1, 2, 3, 4, 5]; const moreNumbers = [...numbers, 6]; //배열을 그대로 복사해오는 것으로 아래와 같다. const numbers = [1, 2, 3, 4, 5]; var numbersLength = numbers.length; const moreNumbers = new Array(); for(var i = 0; i < numbersLength+1; i++){ if(i < numbersLength){ moreNumbers[i] = numbers[i]; }else{ moreNumbers[i] = 6; } } 위와 같이 하면 numbers의 값이 moreNumbers에 그대로 복사된다. 기본적으로 전개..

redux-saga 에서는 ES6의 제너레이터 함수 문법을 사용한다. 사실 이 문법에 대해 딱히 몰라도 redux-saga를 사용법만 알면 큰 문제가 되지 않지만 원리를 알면 아주 조금은 도움이 된다. ​ 제너레이터 함수는 문자그대로 발전기를 만들어주는 것으로 해당 함수를 최초 호출할 경우 함수 내부 구문이 실행되는 것이 아니라 내부 구문을 실행시킬 수 있는 제너레이터 객체를 리턴하게 된다. 이 문법의 핵심기능은 함수를 실행할 때 함수를 특정구간에 멈춰 놓았다가 다음 호출에 이어서 실행시킬 수 있다는 것이다. ​ 제너레이터 함수는 아래와 같이 정의한다. function* generatorFunc(){ console.log('1 구간 진입'); let param = yield; console.log('1구..