우리는 항상 Icon-Font를 오픈 소스를 통해 사용만 해 왔고 오픈 소스에 없는 Icon은 PNG로 직접 만들어 사용해 왔다. 하지만 이 Web Icon Font 제작 방법의 포스팅을 보고 앞으로 PNG가 아닌 Web Icon Font를 직접 제작해서 사용해보자. 이번 포스트에서는 매일 가져다가 쓰지 않으며 Image Sprite를 통해서 Image Icon을 사용하지 않는 직접 web icon font를 만들어서 사용하는 방법에 대해 알아보자.흔히 아는 Material-Icon, Font-Awesome, Ionic-Icon은 SVG를 토대로 font 형식으로 생성하여 사용되는 web icon font이다.
보통 위 icon set을 가져다가 쓰겠지만 프로젝트를 하면서 내가 원하는 아이콘이 없다면 어떡할까? 대부분 아이콘은 png로 제작되고 icon font를 생성하여 만들지 않는다.
이번 포스트에서는 매일 가져다가 쓰지 않으며 Image Sprite를 통해서 Image Icon을 사용하지 않는 직접 web icon font를 만들어서 사용하는 방법에 대해 알아보자.

이번 포스트에서는 Sass, Less, Stylus와 같은 CSS 전처리기(CSS Pre-Processor)에 대해 알아보자. CSS 전처리기(CSS Preprocessor)는 CSS 작성 모듈별로 특별한 Syntax를 가지고 있고 여기에 믹스인(mixin), 중첩 셀렉터(nesting selector), 상속 셀렉터(inheritance selector) 등 Programmatically 한 요소를 접목해 방대해지는 CSS 문서의 양을 효율적으로 처리하고 관리해 주는 통합적인 단어를 말한다.

이번 포스팅에서는 Vuex의 개념을 살펴보고 설치부터 실무에서의 사용 방법까지 예제를 통하여 알아보도록 하자. Vuex는 작성 방법에 따라 형태가 조금씩 다르며 공식 API 를 통해서만은 실무에 반영하기가 어렵다.Vuex는 Vue.js의 상태관리 라이브러리로 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 의도적인 방법으로 상태를 변경 및 관리할 수 있다. Vuex는 기존 Flux의 아키텍처를 따라가고 있고 React로 본다면 Redux와 비교 대상으로 볼 수 있다. Vue.js에서도 Redux를 사용할 수 있지만 Vue.js는 Vuex와의 호환이 좋을 뿐만 아니라 더 직관적으로 개발할 수 있다.

Vue.js의 기본 개념을 익히고 기본적인 Vue.js Component를 생성해 보자. Vue.js의 Component 개념은 Vue.js Framework에서도 중요한 부분을 차지하고 어떻게 Vue.js Component를 생성하느냐에 따라 Vue.js의 개발속도와 코드의 가독성, 그리고 효율성이 현저히 차이가 난다.우리는 이번 포스트에서 Vue.js의 Component 생성 방법에 대해 알아보고 실제로 Vue.js의 Component를 직접 만들어보기로 하자. 이번 포스트는 공식 문서에 나와있는 컴포넌트 생성 방법의 여러 가지 방법 중에 어떤 것이 실무에서 효율적인지를 파악하는 Vue.js Tutorial이다.

Vue CLI 3는 Vue.js 개발을 위한 시스템으로 Vue.js Core에서 공식으로 제공하는 CLI이다. Vue CLI는 애플리케이션 개발에 집중할 수 있도록 프로젝트의 구성을 도와주는 역할을 하며, Vue 생태계에서 표준 툴 기준을 목표로 하고 있다. 이번 포스트에서는 Vue CLI의 개념부터 설치 그리고 Vue-CLI의 사용 방법까지 알아보도록 하자.Vue CLI의 사용은 선택사항이다. Vue 애플리케이션을 개발하기 전에 Vue CLI를 통해 프로젝트를 구성하고 구축하지 않는다 하더라도 애플리케이션에 영향을 주지는 않는다. 그저 Vue CLI는 앞에서 말했듯이 툴의 역할을 하고 스캐폴딩에 도움을 주는 역할만 한다.
Vue CLI를 사용하지 않아도 무방하지만 Vue.js와 관련된 오픈 소스들은 대부분 Vue CLI를 통해 구성이 가능하도록 구현되어 있고 굳이 Git으로 clone하지 않아도 Vue CLI를 통해 더욱더 손쉽게 설치가 가능하기 때문에 Vue CLI의 사용을 추천하는 바이다.
그럼 이제 Vue CLI에 대해서 알아보자. 해당 포스트에서는 Vue CLI 3.x에 관해서 설명을 하며 Vue CLI 2.x에 대한 내용은 Vue CLI 2를 참고하자.

웹 기술인 JavaScript, HTML, CSS를 이용하여 크로스 플랫폼 데스크탑 앱을 만들 수 있는 Electron의 활용성과 사례가 어떤지 알아보고, 개념부터 설치 그리고 데스트탑 앱을 한 번에 배우고 만들어보자. 이제는 JavaScript와 HTML 그리고 CSS를 활용하여 데스크탑 앱을 만들 수 있다. Electron은 다른 JavaScript Framework와도 접목해 개발이 가능하기 때문에 기존의 웹 기술을 가지고 있는 웹 개발자라면 한 번쯤은 도전해 볼 만한 Framework이다.

Vue Application을 만들기 위한 강력한 Framework 인 Nuxt.js에 대해 알아보자.Nuxt.js는 Vue.js 응용 프로그램을 만들기 위한 Framework이며, Vue.js Application을 좀 더 손쉽게 만들 수 있으며 Server-Side-Rendering을 지원한다.
이번 포스팅에서는 Vue.js Application을 쉽게 생성하고 만들 수 있는 프레임 워크인 Nuxt.js에 대해서 알아볼까 한다.
Nuxt.js는 React의 Next.js에서 영감을 받아 진행된 프로젝트로 온전히 겉으로만 본다면 프레임워크이기 때문에 leaning curve가 있을 것 같지만 사실상 그렇지는 않다. Nuxt.js를 설치하고 사용해 본다면 그저 Nuxt.js는 Vue.js를 사용할 때 하나하나 작업해줘야 할 요소들을 생성해주고 처리해주는 것임을 알 수 있다.

Vue.js의 상태 관리 패턴인 Vuex에서 Store의 state를 초기화하는 방법에 대해 알아보자.Vuex Store에서 state는 원본 데이터 즉, 모델의 역할을 하며 mutation에 의해 변경이 가능하다. state는 최초에 명시되어 있어야 하며, 때로는 기본값을 가지고 있다. 이러한 state를 mutation에 의해 변경을 하고 이후 어떠한 작업을 하더라도 초기화되지 않는다. 그렇기 때문에 해당 stat를 다시 사용한다면 이전 값이 남아있다. 그렇기 때문에 state의 초기화는 필수적이다.
이번 포스트에서는 state를 초기화하는 효율적인 방법에 대해 알아보자.

Vue.js에서 대용량 데이터 처리 시에 성능을 최적화하는 방법에 대해 알아보자. 남들은 모르는 Vue.js 성능 개선과 Vue.js에서 대용량 데이터를 처리하는 방법을 배워보자. Vue.js 성능 개선에서 가장 중요한 핵심은 Observe이며, 부가적으로 defineReactive를 이해하여야 하며 나아가 computed와 getter의 사용을 최소한으로 하는 것이다.1년간 대규모 프로젝트를 진행하면서 어려운 점이 한 두 가지가 아니다. 그 중 멘탈이 나갈뻔한 Top 1을 뽑자면 역시 Vue 성능이었다. 절대적으로 Vue의 성능이 느리다는 것은 아니다. Vue는 제 할 일을 다하고도 감탄하게 만드는 프레임워크라는 것에 변함은 없지만, 프로젝트를 진행하면서 수많은 변수가 존재하고 이 변수로 인해서 Vue 성능을 개선해야 되는 경우가 생겼었다. Vue의 성능 최적화는 Vue의 core를 수정하는 것이 아니며, Vue의 반응형에 대해서 깊이 있게 알고 확인해본다면 충분히 해결할 수 있다.
이 포스트에서는 애플리케이션의 하나의 페이지에서 많은 양의 데이터를 표현을 해야 하는 경우 성능이 저하되기 때문에 성능을 높이고자 하는 개발자에게 도움이 되기를 바라며 작성한다.

Vue.js의 Vuex Store 패턴에서 Vue.js Component에 Store를 바인딩 시키는 여러가지 방법을 알아보자. Vuex의 Store를 Component에 바인딩하는 방법에는 여러가지가 있으며 상황에 따라 그 쓰임이 다르다. 그 중에서 가장 실무에 적합하고 가독성이 좋은 방법이 무엇인지 알아보고 활용해보자.해당 포스트에서는 Vuex의 설명과 사용법에 대해서는 언급하지 않았으며, 오로지 Vuex Store를 컴포넌트에 바인딩하는 방법을 설명한다.
프로젝트의 규모가 크거나 작든 Vuex를 사용할 때는 Store를 Module 별로 분리하는 것이 바람직하다. 그렇지 않으면 각 컴포넌트마다 바인딩 된 Store의 state들이 다른 컴포넌트의 루틴에 의해 오염될 가능성과 코드의 복잡성이 높아지게 되어 있다.
이번 포스트에서는 모듈별로 분리된 Store를 각 컴포넌트에서 효율적으로 바인딩시키는 여러 가지 방법들과 코드 스타일을 알아보자.