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

자바와 같은 객체지향 언어를 먼저 접한 이후 자바스크립트를 배웠다면, 객체를 다룰 때 꽤나 혼동이 있을 것이다. 하지만 객체에 대한 개념을 제대로 잡아두지 않으면 후에 프로토타입이나 클로저로 이어지는 자바스크립트의 언어적 특징과 심오한 철학에 대해서도 이해하기 어렵다. 천리길도 한걸음부터라고 했으니, 차근차근 시작해보도록 하자. ❙ 자바스크립트에서의 객체 자바스크립트에서는 모든 것이 다 객체다. 숫자, 문자열, 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 변..

[자바스크립트] debugger 활용법

자바스크립트 개발에 있어 불편한 점중 하나는 디버깅이 쉽지 않다는 것이다. 어디에서 문제가 발생했는지를 찾기 위해 변수를 console 로그에 찍어보기도 하고, 심지어 alert을 활용한다. 이렇게 값을 찍어보는 것만으로 디버깅을 하기에는 한계가 있다. 하지만 debugger문을 활용한다면 자바스크립트 코드도 실행 흐름을 따라가며 효과적으로 검증할 수 있다. 사용법은 아주 간단하다. 그저 검증하고 싶은 코드의 중간에 debugger문을 끼워넣기만 하면 된다. 이는 코드 실행시에 breakpoint가 된다. debugger문을 끼워넣은 위치에서 실행이 중단되고, 디버깅을 할 수 있게 된다. 예시를 통해 살펴보자. function adder(paramA, paramB){ debugger; //여기에 brea..