[VueJS] Vue의 Lifecycle

Vue의 Life cycle

과거 vuejs에 대해 설명을 할 때, 생명주기에 대해서 간단하게만 서술하고 넘어간 적이 있다. 개인적인 경험으로는 간단한 어플리케이션을 만들 때는 생명주기에 대해서 대략적으로만 알고 넘어가도 진행하는 데는 큰 문제가 없지만, 비지니스 개념의 프로젝트를 진행하면서는 비동기 통신에 대한 처리가 많아짐에 따라 생명 주기에 대해서는 조금 더 자세히 알아야 하는 듯 하다. Vue의 생명 주기는 React와 크게 다른 흐름으로 가진 않는다. 그래서 혹시나 React의 생명 주기에 대해서 대략적으로 알고 있다면 Vue에서의 생명 주기 역시 이해하는 데 큰 어려움을 없을 것 같다.

More …

[VueJS] Vue eslint 적용하기

VueJS 를 위한 eslint 적용하게 된 계기

항상 side project를 하거나, 개인적으로 프로젝트를 만들 때에는 eslint를 붙여서 작업해놓고 정작 회사에서는 사용을 안하고 있었다. 세팅이 어렵거나 하진 않지만, 붙이고 나서 다시 손보아야 할 기존 소스들에 대한 시간 소요가 귀찮아서였다.. 그러다 이번에 또 새로운 UI 개발자의 합류 소식에 붙여야 겠다는 생각이 들어서 하루 날잡아 환경 설정을 해두었다. 처음 붙였을 때, eslint로 인한 error가 1700 개나 나와 한숨 밖에 안 나왔지만…이 참에 삽질을 하면서 느낀 점과 개인적으로 필요했다고 느끼는 eslint option에 대해서 정리를 하게되는 계기가 되었다.

More …

[Docker] Docker Container

Docker의 간단한 명령어

현재 Lubycon 에서 진행하는 프로젝트에서 front-end 서버를 위한 docker 세팅이 필요해서 갑자기 docker에 대한 학습을 하기 시작했다. lubycon에서 진행하는 프로젝트의 spec은 Nodejs, Vuejs 그리고 Typescript를 이용한 서버사이드 랜더링의 SPA 어플리케이션이다. 일단 학습하기에 앞서 간단한 docker에 간단한 명령어를 먼저 학습해야 했다.

More …

[NodeJS] Karma Configuration

Karma란 무엇인가?

Karma는 유닛 테스트를 위한 Framework가 아니라 작성한 Javascript 코드를 실행시켜주는 테스트 러너이다. Karma는 여러가지 브라우저의 실제 환경에 맞춰 Javascript 코드를 실행시켜주는 하나의 툴이다. 브라우저는 Chrome, Firefox, PhantomJS, Internet explorer 등 여러가지의 브라우저 환경에서 개발자가 작성한 Javascript코드를 실행시켜준다. Karma Github에 따르면 Karma의 주 사용 목적은 TDD 를 쉽고, 빠르고, 재밌게 만들어준다고 한다. 또한 Karma에 Istanbul을 이용한다면, coverage report를 자동으로 변환시켜준다.

More …

[VueJS] VueJS에 Unit Test 적용하기02

Todo App에 Unit Test적용하기

전 포스팅에서 Karma+Mocha+Chai를 이용하여 유닛테스트의 환경을 구축하여 간단한 컴포넌트 마운트에 대해서 유닛테스트를 진행했다. 이번에는 Todo APP이라는 주요 기능에 대해서 실제 유닛테스트를 적용시켜보겠다. Todo App의 주요 기능은 다음과 같다.

More …