1번도로 야생의 개발자

요즘 Frontend는 Nodejs를 통해서 npm이라는 걸출한 솔루션을 통해 템플릿 엔진들을 손쉽게 적용하고 다운받아 정말 짧은 시간에 개발 환경을 만들어 사용할 수 있다. 그리고 이러한 템플릿 엔진들은 그 유명한 Angular, React, Vuejs 등을 기반으로 잘 구성 되어 있고, Backend 개발 또한 여러 프레임워크의 기반으로 템플릿 엔진들이 잘 구성되어 있어 손쉽게 개발 환경을 구축 할 수 있게 되었다. 이러다 보니 문제가 생기는데... 이제 이것 저것 많은 개발환경들이 내 Local에 설치되고 이제는 어떤 녀석이 어디에 있는지 찾는 것 조차 힘들게 되어버렸다. 또한, 개발을 하다보면 Backend와 Frontend는 구분해서 개발하다 보니, 둘다 켜야 하는데 CLI에서 둘을 잘 찾아 켜..

Vuejs를 사용하다 보면 input 태그 안에 사용한 v-model이 제대로 한글 인식이 되지 않는 문제가 있다. 이 경우는 영문자는 한글자가 바로 인식되는 음절이지만 한글은 최소 두 개의 자음과 모음이 만나야 음절로 만들어지기 때문에 커서가 움직이지 않는 한 글자로 인식하지 않는 문제가 있다. (IE 11에서 발견됨. Chrome에서는 해당사항 없음.) 이럴 경우 input 내 blur 이벤트에 바인딩 하여 처리하는 방법이 있다. 이는 focus가 변경되는 것에 이벤트를 걸어 처리하는 방법이다. template 부분 script 내 vuejs정의 부분methods: { fixEstLogcDscr: function (e) { this.estLogcDscr = e.target.value; }}

라이브러리 개조 : LightBox2 - 2화이제 LB2를 까서 보자.다운받은 디렉토리 구조 내, dist/js/lightbox.js를 자신이 가장 잘 사용하는 에디터나 IDE로 로드하고, 찬찬히 살펴 보자. 역시 2번째 라벨에 걸맞게 주석들이 깔끔하게 잘 정리되어 있고, 구조 또한 배울게 많게 잘 만들어져 있다. 아마 자바스크립트를 어느정도 경험이 있는 분들은 분명히 그렇게 느낄 것이다.이 중 아까전 크롬내 콘솔창에서 lightbox를 치면 나오던 오브젝트들을 기억하는가? 그 오브젝트가 일단 어디에서 선언되어 export 되었는지 확인해보자. 잘 보면, Lightbox.prototype.build 부분에서 export가 수행되는 것을 추측할 수 있다. 아래는 Lightbox.prototype.build..

라이브러리 개조 : LightBox2 - 1화 Javascript를 공부하는데 가장 도움이 되는 건 바로, 남의 소스를 바라보는 것이 아닌가 한다. 물론 그전에 그것을 보기에 기본이 되는 실력이 없다면, 보자마자 현기증이 일 것이다. 하지만, 어느정도 레벨에 오른 개발자들 중 더 나은 실력을 가지고 싶다 생각하는 사람들은 자연스레 오픈소스에 눈이 돌아가게 되고, 기여를 하고 싶어할 것이다. 그렇다면, 이를 위해서 어떤 단계를 거쳐야 할까? 가장 먼저 내가 필요하거나 재미있다고 생각하는 라이브러리를 먼저 찾아보는 것이 내가 한 일이었다. 물론 필요에 의해 많은 Javascript 라이브러리들을 사용했지만, 단순하면서도 재미있는 라이브러리를 찾는 것은 쉽지 않는 일이었다. 허나 요근래 프로젝트를 하면서 딱 ..