[Docker] Hot Module Reloading Module

Docker의 Container 에서 Hot Module Reloading Module 실행하기

이전에 간단하게 Nodejs의 서버를 띄운 후, Docker의 이미지로 만들어 컨테이너를 실행시키는 간단한 예제를 한적이 있었다. 하지만 사실 그 당시 내가 원했던 것은 로컬 Dev 서버를 이미지로 만든 후, sync를 맞추는 것이었다. 현재 진행 중인 사이드 프로젝트의 개발 환경에 대한 셋팅이 많아 그것을 Docker의 이미지로 만들어 두어, 혹여라도 새로운 프론트/백엔드 개발자가 프로젝트에 합류한다면 쉽고 빠르게 개발 환경을 셋팅을 하게 하기 위해서이다. 물론 Docker를 이용한 배포 자동화 역시 안에 목적에 포함되어 있긴 하지만, 아직 배포 자동화까지는 고려할 단계가 아니라서 배제해두고 생각했다.

More …

[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 …