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이다.

Continue reading

Vue CLI 3는 Vue.js 개발을 위한 시스템으로 Vue.js Core에서 공식으로 제공하는 CLI이다. Vue CLI는 애플리케이션 개발에 집중할 수 있도록 프로젝트의 구성을 도와주는 역할을 하며, Vue 생태계에서 표준 툴 기준을 목표로 하고 있다. 이번 포스트에서는 Vue CLI의 개념부터 설치 그리고 Vue-CLI의 사용 방법까지 알아보도록 하자.

Continue reading

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

Continue reading

지금까지의 Tutorial을 통해 Mocha에 대해서 어느 정도 인지하고 습득하였다. 아직도 Mocha에 대해 애매모호한 기분이 들거나 뭔가 아쉬움이 남는다면 다시 돌아가 JavaScript 단위 테스트 프레임워크 - Mocha부터 살펴보도록 하자.
이제 지금까지 배운 내용을 토대로 실제로 Mocha를 가지고 TDD를 진행해 보자. 이 Tutorial을 추가한 이유는 두 가지로 분류하였다.

Continue reading

개발자들은 자기가 사용하는 IDE가 있을 것이다. IDE를 사용하는 이유는 더 편리하기 때문이다. 당연하다. bash, nodepad 보다는 훨씬 편하니까. 나 역시 IntelliJ를 사용하고 있다. 이 IntelliJ에서는 Mocha를 좀 더 다루기 쉽게 Plug-in을 지원하고 있다. IntelliJ뿐만 아니라 Webstorm 등의 JETBRAIN 제품군에서 지원하고있다.
이번 Tutorial은 IntelliJ에서 Mocha를 손쉽게 사용하는 방법을 배워보도록 하겠다. JETBRAINS 제품군을 사용하지 않는다면 해당 Tutorial은 건너 뛰도록하자.

Continue reading

이제 Mocha의 기본적인 사용법을 모두 터득하였다. 지금까지 배운 것만으로도 어느 정도의 Test가 가능하다. 하지만 우리가 항상 개발할 떄에 Framework를 찾는 이유는 무엇인가 개발을 할 때 손쉽게 개발하기 위해서이다. Mocha 역시 옵션을 조정하여 좀 더 편리하게 사용할 수 있는데 이번 Tutorial에서는 이 옵션에 대해서 알아보겠다.

Continue reading

어느 프로그램 언어나 마찮가지겠지만 JavaScript 역시 하나의 .js파일에 코딩하진 않는다. Mocha 역시 하나의 test.js 파일에 모두 테스트 케이스를 적진 않는다.
이번 Tutorial에서는 외부 모듈을 불러와서 테스트하는 방법을 알아보겠다. 생각보다 분량이 적지만 매우 효율적인 방법이 될 것이다.

Continue reading

이번 Tutorial에서는 Mocha의 Hooks를 알아보겠다. Mocha에서는 테스트들의 전제 조건과 후 조건을 미리 설정할 수 있는 Hooks를 지원한다. Mocha에서는 기본적으로 BDD 스타일을 지원하지만 TDD 스타일도 역시 지원하기 때문에 이 두 스타일에 대한 Hooks도 정의할 수 있다.

Continue reading
Author's picture

DY. Kim

Web Front-End Technology Lab


Front-End Web Developer


Republic of Korea, Seoul