1번도로 야생의 개발자

Vue Cli를 기반하여 개발하다 보면 난해한 상황을 이겨낼 수 있게 만드는 요소들이 많이 있다. 그중 같은 소스를 사용하지만, 개발(Local)과 운영을 분리하여 환경을 만들어야 할 경우가 있다. 예를 들어 라이센스를 사용하는 솔루션을 사용할 경우 대부분 개발과 운영을 분리하여 라이센스를 주고 있다. ECMA6를 지원하고 이런 경우를 분리하여 반영 할 수 있도록 솔루션을 만들어 주면 좋겠지만, 대부분 솔루션 없체는 그리 친절하지가 않다. 요근래 사용하던 솔루션들은 URL 주소를 기반으로 라이센싱하기 때문에 개발(Local)과 운영(Domain)이 다를 경우 각각 환경에 맞춰 실행해야 한다. index.html 파일에 솔루션 가져오는 부분을 넣어야 하지만 개발과 운영 솔루션 라이브러리가 달라 정적 페이지..

1. main.js를 Slim하게 하기 main.js는 처음 개발 시작 간, 정리를 하지 않으면 나중에 힘든일이 발생하게 된다. 이게 무슨 말이냐 하면, 가장 처음에 시작하는 스크립트 파일은 main.js 에 개발의 편의성을 위하여 자주 사용하는 컴포넌트나 스크립트들을 로드하게 된다. 이 경우, 첫 시작부터 자바스크립트 엔진이 많은 스크립트들을 실행하다 보니 초기 로딩시간을 늘리게 한다. 대표적으로 lodash와 같은 것과 UI를 빠르게 구성하기 위해서 사용하는 Vuetify나 Element-UI, 차트를 구성하는 echart 등, 무거운 라이브러리를 Fully하게 등록하는 경우다. 이런 것들은 초반부터 사용하는 페이지 별로 사용하게 적용하는 것이 좋다. 2. Lazy Loading을 구성하자. 구관이 ..

Vuejs를 사용하여 프로젝트들을 설계하고 개발한지 어언 2년이 넘어가고 있고, 빠른 개발을 위해 Vuejs 기반의 프레임워크를 구성하여 개발하는 것도 1년 남짓되어 가고 있다. 그 동안 Vuejs를 사용하면서 많은 배우게 되었고, 지금도 배울게 많다. 이 중 충격적으로 다가오게된 요소가 있었는데, 바로 Computed에서 set이 된다는 것이다. 이걸 요근래 알게 되었다. Computed는 내부에 사용되는 요소들의 변경점을 감지하여 연관되어 가공하는 부분을 캐싱처리 형식으로 오로지 조회성으로만 사용될 것이라 생각했다. Frontend와 Backend로 나눠서 개발할 때, 서버에서 오는 데이터를 그대로 사용하고, 그 양식에 맞춰 그대로 전달하는 방식을 선호한다. HTTP Restful API 사용 간, ..

Vuejs로 프로젝트를 여러개 수행중에 고객들의 요구사항은 항상 내 예상을 벗어나는 것들이 많다. "이 정도는 쉽게 하실 수 있는게 아닌가요?" 라고 말하면서 요청하는 기능 중 이번에는 특정 영역만 인쇄할 수 있는 기능을 만드는 것! 브라우져에서 기본적으로 사용 가능한 인쇄 기능은 브라우져에서 출력되는 문서 전체를 인쇄하는 것이지만, 특정 영역만 출력하기 위해서는 자체적으로 기능을 제공하고 있지 않다. 그렇기 때문에 구현해야 하는데, 어떻게 구현해야 할 것인가? 이런 저런 방법을 다 동원해 보왔다. (역시나, 머리가 나쁘면 손발이 고생한다.) 스타일 승계 문제 때문에 새로운 창이나 팝업은 언감생심이고, 심지어, 특정 영역을 Canvas로 캡쳐를 찍어 이미지로 만들어 팝업에 출력 후, 인쇄하는 방법까지 진..

업무 상, Frontend 개발을 어떻게 해야할 지 고민하는 업체에 참고용으로 찍은 영상 리스트이다. 원래는 Websquare, 넥사크로 같은 제품을 도입 고민하고 있었지만, Vuejs를 이용한 Frontend 개발에 대한 이야기를 영상으로 풀어 보왔다. 1. Vuejs로 Frontend 개발 환경 구축 하기 #1: https://www.useloom.com/share/5674aaa9bed14829afc4d59580b6d1e3 #2: https://www.useloom.com/share/f1b3611775274432a8a057e37fcf6a67 2. Vuejs로 Wrap된 Handsome Table을 이용하여 10만건 데이터 출력 하기 #1: https://www.useloom.com/share/37da..

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