[자바스크립트] arrow function과 this

ecmascript6가 나온지는 한참됐지만 아직 브라우저(특히 ie)들이 이를 완벽히 지원하지 않고 있다. 따라서 현재도 여전히 es5에서 es6+로 넘어가는 과도기인데, 다행히 babel의 도움으로 지금 당장 es6로 개발을 해도 크게 문제될 것은 없다. es6의 가장 큰 문법적 변화사항을 꼽자면 역시나 arrow function이다. 그동안 주로 es5를 활용해서 자바스크립트 개발을 해왔다면 이 arrow function이 익숙지 않을것인데, 특히나 this와 관련해서 짚어볼 점이 있어 정리를 한번 해봤다. 1. Arrow function 문법 Arrow function의 기본적인 문법은 다음과 같다. 함수 작성시에 많은 부분을 생략할 수 있고, 화살표(=>)를 사용하여 조금 더 간결하게 코드를 작성..

[자바스크립트] 객체 제대로 이해하기

자바와 같은 객체지향 언어를 먼저 접한 이후 자바스크립트를 배웠다면, 객체를 다룰 때 꽤나 혼동이 있을 것이다. 하지만 객체에 대한 개념을 제대로 잡아두지 않으면 후에 프로토타입이나 클로저로 이어지는 자바스크립트의 언어적 특징과 심오한 철학에 대해서도 이해하기 어렵다. 천리길도 한걸음부터라고 했으니, 차근차근 시작해보도록 하자. ❙ 자바스크립트에서의 객체 자바스크립트에서는 모든 것이 다 객체다. 숫자, 문자열, boolean 등 기본 타입을 제외한 모든 값은 객체다. 배열, 정규표현식은 물론이고 모든 함수마저도 자바스크립트에서는 객체로 취급된다. 자바스크립트에서 말하는 객체는 단순하게 key:value 형태의 값들을 저장하는 컨테이너로 볼 수 있다. var foo = { name : 'foo', age ..

[자바스크립트] 비동기 처리를 위한 Promise 활용법

자바스크립트 개발을 하다보면 만나는 가장 골치아픈 것이 바로 시점 문제다. 자바스크립트는 대부분의 작업이 비동기로 처리되기 때문에 일단 스크립트가 실행되면 물흐르듯 쭉~ 흘러가버린다. 결과적으로 내가 의도했던 순서대로 코드가 실행되지 않게 되는 것이다. 그래서 콜백이 활용된다. 예를들어, 'A작업이 끝나는 시점에 콜백 함수를 호출해서 B작업을 수행'하는 식이다. 근데 이렇게 콜백을 활용하다보면 또 다른 문제를 마주하게 된다. 이는 콜백지옥이라는 표현으로 익히 알려져있다. var async1 = function(param, callback) {callback(param*2);} var async2 = function(param, callback) {callback(param*3);} var async3 =..

맥북에서 키노트로 이미지 추출하는법

윈도우를 쓰던 시절에는 파워포인트로 참 여러가지 작업을 했었다. 발표 자료뿐 아니라 이미지가 필요할 때면 왠만한 디자인 작업에도 다 파워포인트를 썼다. 그런데 맥으로 넘어오면서 뜻밖의 불편함에 부딪히게 됐다. 윈도우에서 파워포인트에 해당되는 기본앱인 키노트는 '이미지로 저장'하는 기능을 제공하지 않았던 것이다. 유료앱을 구매해야 하는지 깊은 고민에 빠져있던 차에, 아는 기획자분께서 키노트를 이용해서 이미지를 추출하는 방법을 알려주셨다! 정말 자애로우신분이다. 간단한 방법이니 빠르게 훑어보자. 먼저, 키노트로 원하는 이미지를 만든다. 그 다음 그린 이미지를 그룹으로 묶어준다. 묶었으면 이미지를 복사하여 클립보드에 저장해놓는다. (command + c) 여기서부터가 중요하다. 맥의 기본앱중에 미리보기라는 앱..

[자바스크립트] undefined와 null의 차이

자바스크립트는 데이터 타입이 무척이나 자유분방하다. 모든 변수를 var(es6에서는 const, let 추가)로 선언된다. 그리고 데이터 타입은 이 선언 시점이 아닌 할당 시점에 결정이 된다. 하지만 개발을 하다보면 이러한 자바스크립트의 특징으로 인해 여러가지 문제가 발생할 때가 있다. 콘솔창에 변수값이 undefined와 null으로 찍히는 경우가 대표적이다. 비슷한듯한 이 둘의 차이를 명확히 인지하고 있어야 빠른 문제해결이 가능하다. ❙ undefined 변수가 선언되었지만 어떤 값도 할당되지 않은 상태이다. 할당이 되지 않았으므로 자료형이 결정되지 않았다. 따라서 'undefined'인 것이다. var a; console.log(a); 위 코드를 직접 실행해보면 결과는 다음과 같다. ❙ null 변..