모던 자바스크립트 개발을 위한 ES6 이 포스팅은 인프런의 '모던 자바스크립트 개발을 위한 ES6 강좌'의 수강 내용을 바탕으로 정리한 내용입니다. String에 추가된 문자열들 startsWith, endsWith startsWith는 문자열이 어떤 문자열로 시작되는지 boolean형으로 반환해주는 메서드이다. 반대로 endsWith는 문자열이 어떤 문자열로 끝나는지 boolean형으로 반환해주는 함수이다. 두 메서드 모두 옵션으로 두 번째 파라메터인 startPosition, endPosition을 받는다. 다음은 ECMAScript2015에 명세된 startsWith의 내용이다. 21.1.3.21 String.prototype.startsWith ( searchString [ , po..

모던 자바스크립트 개발을 위한 ES6 이 포스팅은 인프런의 '모던 자바스크립트 개발을 위한 ES6 강좌'의 수강 내용을 바탕으로 정리한 내용입니다. Scope ES6에서는 변수를 선언하기 위한 키워드 let과 const가 추가됐습니다. 이번에는 이 let과 const가 기존의 var과 어떤 차이를 가지는 지, 그리고 왜 let과 const를 사용해야 하는지에 대한 내용을 정리합니다. var은 function, with, catch 키워드를 사용했을 경우에만 유효한 scope를 생성하게 됩니다. 아래의 코드를 살펴봅시다. var array = [1, 2, 3]; for(var i=0; i

최근 인프런에서 React.js 강의를 찾아볼까 하다가, Javascript 풀스택 로드맵이라는 수강리스트를 발견해서 웹 게임을 만들며 배우는 자바스크립트를 보게 됐다. 기초적인 문법은 건너뛰고 틱택토를 보면서, 바닐라 자바스크립트를 이용해서 틱택토 게임을 작성해본 적이 있었나? 싶었다. 마침 속깊은 자바스크립트 책을 읽으면서 지난 몇 년간 자바스크립트에 대해 제대로 알지도 못하면서, 자바스크립트를 이용해서 먹고살았나하는 생각에 자괴감이 들던 차. 간단하게 jsFiddle에 접속해서, 간단하게 코드를 작성해봤다. 리팩토링을 통해서 중복코드를 함수로 뽑아내고, 변수 선언을 모듈 최상단에 하는 작업을 거치고나니 이해하는데 크게 어려움은 없었다. 다만 개선할만한 포인트가 몇몇개 남아있었다. 크게 대단한 건 아..

최근의 웹 트랜드를 놓고 비교해봤을 때, 우리의 웹 어플리케이션은 살짝 뒤쳐져있다. 10여년간 자바스크립트와 jQuery를 사용해서 만들어놓은 레거시 시스템을 갈아엎기위해, angularJS를 도입하여 신규 웹 어플리케이션을 몇년간 개발하긴 했다. 다만 오랫동안 판매된 장비들의 후방호환성을 지원해야 했기 때문에 여러모로 문제가 많았다. IE8을 지원해야했는데 angularJS는 업데이트를 통해 ‘더 이상 IE8을 지원하지 않겠다’라고 밝혀 업그레이드를 포기해야했고, 장비에서 스트리밍하는 영상의 헤더가 커스터마이징 되어있어 ActiveX를 사용하지 않을 수 없었다. 그러던 와중에 차트를 사용하는 기능을 구현해야했고, 다른 작업을 하는 동안 직장동료가 nWagon을 찾아냈다. 오픈소스 차트 라이브러리, nW..

캔버스 위에 이미지를 표시해주고, 그 위에 여러개의 박스와 라벨을 그려주는 UI를 구현해야 했다. 사용자가 캔버스 내에 사각형 형태의 영역을 지정할 수 있고, 이 영역의 외부는 어둡게 표시를 해줘야 했다. 설명하는 것보다는 구현된 내용을 보여주는게 빠를 듯 하다. 간단하게 설명하면 위와 같은 UI를 만들어야했는데, 네모난 영역의 모서리는 이동 및 크기의 변경이 가능했다. 네모난 영역의 외부를 어둡게 표시하는 것 자체는 큰 문제는 아니었다. fillRect를 이용해서 외부의 영역을 네 개의 구역으로 나눠, (0, 0, 0)에 0.5의 알파값을 주고 그려주면 됐다. context.strokeStyle="rgba(0, 0, 0, 0.5)"; context.fillStyle="rgba(0, 0, 0, 0.5)"..

F사의 기술면접에 다녀왔다. 면접을 마치고 면접에 대해 궁금한 것은 없는지 물어보셔서, ‘Javascript에 대해 자세한 질문을 하실 줄 알았는데, 그런 질문은 없으셔서 (다행입니다.)’라고 답했다. 괄호친 다행입니다는 입밖으로 못 낸 말이다. 한국말은 끝까지 들어야하는것뿐만 아니라, 끝까지 해야하는 것이었다. 면접관님께서 어떤걸 준비하고 왔는지 물어보시기에, 기존 함수와 ES6의 화살표 함수에 대해 준비한 내용을 말씀드렸다. 그리고나서 함수의 선언 방식은 몇 가지가 있고, 어떤 차이가 있는지 여쭤보셨다. 나도 내가 평소에 삽질을 잘 하는 줄은 알고 있었는데, 이번 기회에 내 묫자리도 잘 판다는 걸 깨달았다. 선언방식은 대답할 수 있었지만 차이점은 얘기할 수 없었다. (new 키워드를 이용해서 함수 객..