본문 바로가기

반응형

전체 글

(43)
알고리즘 풀이 사이트 비교 요즘 IT 개발직군 취업을 위해서는 '코딩 테스트'가 필수적인 관문이 되어버렸다. 그리고 많은 경우에 코딩 테스트라는 것은 곧 알고리즘 문제풀이를 뜻한다. 개인적으로는 정해진 시간에 알고리즘 문제를 풀어내는 능력이 좋은 개발자를 가려내기 위한 최적의 방법인지 의구심이 들지만 어쨌든 기업 입장에서는 적은 채용 비용으로 큰 효과를 내기 좋은 방법이라는 것은 인정할 수 밖에 없다. 각설하고, 그래서인지 요즘 웹상에서 알고리즘 문제를 풀고 실시간으로 채점도 해주는 사이트들이 많이 생겨났다. 그간 이용해보았던 대표적인 사이트 몇 군데를 비교분석해보았다. 1. 백준 온라인 저지(https://www.acmicpc.net/) 가장 대중적이면서도 유명한 사이트. 전반적으로 UI가 깔끔하기도 하고, 무엇보다 문제수가 압..
[자바스크립트] 객체 제대로 이해하기 자바와 같은 객체지향 언어를 먼저 접한 이후 자바스크립트를 배웠다면, 객체를 다룰 때 꽤나 혼동이 있을 것이다. 하지만 객체에 대한 개념을 제대로 잡아두지 않으면 후에 프로토타입이나 클로저로 이어지는 자바스크립트의 언어적 특징과 심오한 철학에 대해서도 이해하기 어렵다. 천리길도 한걸음부터라고 했으니, 차근차근 시작해보도록 하자. ❙ 자바스크립트에서의 객체 자바스크립트에서는 모든 것이 다 객체다. 숫자, 문자열, 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..
[자바스크립트] this의 개념과 활용법 여타 프로그래밍 언어와 마찬가지로 자바스크립트는 this라는 키워드를 제공한다. 사실 자바에서는 this 키워드를 익숙하게 써왔는데, 자바의 this는 단지 현재 객체(에 대한 레퍼런스)를 가리킬뿐이다. 하지만 이와 동일한 이해를 가지고 자바스크립트 코드를 작성했다간 여러가지 문제에 부딪히게 될 수 있다. 자바스크립트에서의 this는 자바처럼 단순하지 않다. 실행 문맥에 따라 다르게 동작한다고 이해하는게 맞겠다. 다음과 같이 4가지 종류의 문맥으로 구분할 수 있다. 함수 실행 : alert('Hello world!') 메소드(함수 내부의) 실행 : console.log('Hello world!') 생성자 실행 : new RegExp('\\d') 간접(indirection) 실행 : alert.call(u..
[자바스크립트] 스코프와 클로저 자바스크립트 개발을 좀 해봤다는 사람이 만약 개발자 채용 면접을 보게된다면 클로저에 대한 질문을 반드시 받을 것이다(감히 확신한다!). 그만큼 클로저는 자바스크립트를 처음 접했을 때 적지 않은 혼란을 주는 개념이고 또 중요하다. 혹시 다음과 같은 코드를 보며 혼란스러웠던 경험이 있지 않은가? function foo(param){ var a = param; return function(){ console.log(a); } } var test = foo('closure!'); test(); 실행결과는 다음과 같다. 위의 예제를 처음 접했다면 의문이들기 마련이다. foo 는 익명 함수를 리턴한뒤 종료된다. 이 시점에 foo 내부의 변수인 a 도 가비지콜렉터(GC)에 의해 정리되는 것이 정상적인 흐름처럼 보인다..