실시간 모니터링 시스템을 만들며 정복하는 MEVN

요즘 다양한 기술요소의 Stack이 언급되고 있습니다.

MEVN, MEAN, MEAN 이라는 함축적인 단어를 보신적이 있으실수도 있습니다.

가장 많이 사용되는 SPA(Single Page Application) 3가지 종류에 따라서 구분되어 지는 것을 볼 수 있습니다.

 

아래의 기술 조합을 살펴보면, json기반의 저장 구조를 가지는 db와 javascript로 서버와 Web구현이 조합이 잘 될거 같습니다.

■ MEVN 

DB : mongodb

WebF/W : Express

SPA : Vue.js

Server : node.js

 

■ MERN

DB : mongodb

WebF/W : Express

SPA : React.js

Server : node.js

 

■ MEAN

DB : mongodb

WebF/W : Express

SPA : Angular.js

Server : node.js

 

최근에 출간된 MEVN책이 출간되었습니다.

외국의 서적을 번역 한 것이 아니고, 국내에서 출간된 서적입니다.

 

http://www.yes24.com/Product/Goods/104208010

실시간 모니터링 시스템을 만들며 정복하는 MEVN - YES24

 

■ 책을 보기전에 생각

 · 기대감

   저는 책에 d3.js의 내용이 있는 것이 우선 가장 눈에 들어왔습니다. (조금 엉뚱할수 있겠네요)

   요즘은 다양한 차트 Library가 있고, 쉽게 json의 데이타만 넣으면 차트가 그려지는 

   러닝커브가 적은 것도 있고, 러닝커브가 높은 Library도 있습니다.

   d3.js를 사용해보면, 단순한 차트 library가 아니고, 사용자가 쉽게 커스터마이징이 용이합니다.

   (개념을 잡는 부분이 필요합니다)

   그래서 요구사항이 복잡한 경우, 최종적으로 d3.js를 선택하는 경우가 많습니다.

   하지만, d3.js는 버전이 업그레이드 되면 호환성이 잘 되지 않아서,샘플이 많은 예전 버전을 사용하는 경우도 많습니다.

   책에서 d3.js 의 v7을 사용하는 부분과, d3.js에 대한 책이 예전에는 조금 있었는데 

   최근 출간된 책에서 언급이 되어 있다는 부분에 기대감이 있었습니다. 

 

 · 불안감

 너무 많은 기술요소 (mongodb, node, vue)에 대해서 1권으로 어느정도 설명이 될까?

 너무 쉽게 단순한 부분만 언급되어 있는 부분은 아닐까? 하는 약간의 의심이 드는 부분도 있었습니다.

 

책의 전반적인 전개는 아래와 같이 진행됩니다.
각 항목별로 제가 느낀 좋은점 사례를 언급해보려고 합니다.

■ 개발환경 구축 (1장)

 · Visual Studio Code에 현업에서 제가 사용중인 확장팩도 있었고, 사용히지 않았던 사항도 적용해보았습니다.
테마중에서 언급되어진 드랴큘라 테마는 업무에서도 설치해서 사용중입니다.

 · Git/GitHub

 Git에 중요한 사항은 간략하지만, 잘 설명되어 있습니다.
 커밋의 포맷 : 회사별로 정해진 포맷도 있고, 크게 의미를 두지 않고 내용을 작성할 수 있지만
 다시 한번 좀더 명확한 커밋 메세지를 작성해야겠다는 생각이 들었습니다.

 Git과 Github사용시, PR을 보낼때 #close는 뿐만이 아니라 #related라는 것도 알게 되었습니다.

 

■ 자바스크립트 (2장)

 · Chapter의 제목이 "제대로 배우는 자바스크립트" 입니다.
javascript를 처음 경험하는 대상은 아니고, 사용 경험이 있는 분이라면 아주 좋은 내용을 
습득하실수 있습니다.

ES5와 ES6의 차이점을 함수 스코프와 호이스팅의 개념을 통해서 설명합니다.
실무에 도움이 되는 책의 사례를 들어보면 문자열에서 찾는 로직을 개발할때
find, findindex, includes(ES7), indexOf(ES5) 중에 한가지를 사용하게 됩니다.
에전부터 사용해왔던 indexOf를 많이 사용하실거 같은데, 설명을 통해서 findindex가 더 빠르다고 권장합니다.

Promise와 async / await를 통해서 javascript의 비동기 처리에 대해서 설명합니다.
기존에 jquery를 통한 CallBack의 chaining을 통해서 구현한 사항을 바닐라스크립트로 구현하는 것을 학습하게 됩니다.

ES6의 이터러블의 개념과 이터레이터, 제너레이터를 학습합니다.

 

■ 코드 리팩토링과 함수형 프로그래밍 (3장)

 · 코드에서 좀더 효율적으로 개발할수 있는 코딩예제를 2가지 사례를 비교하여서 성능측정(jsbench.me)를 통하여 비교해 줍니다.
 - 정수형 변환 : parseInt와 비트 연산자 처리
 - 배열 포함 확인 : indexOf와 includes
 - 객체 선언 : new Object와 {}
 여기서 언급 사항들은 처음에 정확한 개념을 알고, 처음 개발을 할때부터 알아두면 참 좋은 개념이라는 생각이 들었습니다.

3.3절에 내용은 "UX향상을 위한 이미지레이지 로드 구축" 이라는 Chapter가 있습니다.
MEVN을 설명하는 책에서 해당 내용이 나와서 조금 신가한 부분이 있었습니다.
보통 1Page를 구성하는 이미지의 사이즈 및 용량이 큰 경우 사용자는 느리게 느껴지고, 트래픽을 많이 사용하게 됩니다.
이런 부분에 대한 해결 방안 및 lazy로딩을 통해서 사례를 공유합니다.
이런 Chapter의 내용이 저는 참 좋았던거 같습니다.
단순히 한 기술을 배운다기 보다 전반적으로 현업에서 일아나는 도움되는 사항이 책에 기술되어 있습니다.


함수형 프로그래밍의 개념과 응용방법을 설명합니다.
작은 함수들을 블럭쌓듯이 개발하는 특정을 알아야, 기존의 클래스형 개발형식과 다른 방향으로
장점을 잘 살리는 가이드를 제공합니다.

css와 자바스크립트의 최적화
css와 js 코드에서 성능을 최적화 할 수 있는 사항을 설명됩니다.
현업에서도 이해하고, bad smell이 날수 있는 부분을 찾아서 Refactoring 할 부분이 많이 있을것입니다.
css최적화 사례) 0px대신 0으로 입력

 

■ MEVN 관련 

 · node.js
node를 구성하고 있는 개념에 대해서 설명을 하고, pm2로 서버관리 하는 방법, express로 http서버를 구축하는 방법
url을 정의할수 있는 라우팅 설정 방법 개발자 포트폴리오를 간단히 만드어 봅니다.
여기서 SEO(Search Engine Optimization)의 내용이 중간에 나오는데, 
이부분도 저자분이 자신이 알고있는 경험을 공유하는것 같아서 좋았습니다. 
NCP(네이버클라우드) 즉 네이버에서 만든 AWS에 연동하는 부분도 있습니다.
주요 개념은 동일하니, 애저, AWS, 구글클라우드에 접속되어서 서버 환경만 구축되어 있다면
동일하게 적용해 보실 수 있을거 같습니다.

 

 · vue.js
다양한 SPA가 존재하고, 처음 구축을 하게 된다면 React, Angular, Vue 등 어떤것을 사용해야 할지 고민이 되실거 같습니다.
모두의 장단점이 있으니, 무엇이 좋다라는 것보다는 가능하면 다양한 경험을 해보는것을 추천드립니다.

저자분은 SPA중에서 vue를 선택하셨고, vue를 써야 하는 이유에 대해서 설명해주십니다.
링크))) 어떤 사이트가 어떤 spa를 사용하는지 궁금하면, 제가 예전에 기록한 아래 글을 참조해주시면 됩니다.

vue.js의 핵심과 vuex, 데이터 바인딩, 부모-지식 간에 통신하는 방법을 설명합니다.
vue-cli를 통해서 패키지 설정(webpack)을 합니다. 간단한 TO-DO 웹앱을 구성합니다.

 

 · mongoDB
기존에 관계형DB (RDBMS)와 다른 mongoDB(nosql)의 장점 및 구성요소
설치 및 연결설정, CRUD(select, insert, update, delete)를 mongoDB를 이용해서 사용법을 익힐수 있습니다.

 

 · d3.js
화면 차트 구성을 위해서 사용되는 d3.js는 처음 동작하는 개념을 잘 잡아놓는것이 중요합니다.
책에서 어떻게 우리가 활용할 수 있는 데이터를 이용해서 scale을 조정하고 각 요소들에 대해서 append 할수 있는지 
알수 있습니다. d3.js를 이용해서 지도위에 정보를 표시할 수 있는데 
좌표정보를 가지고 있는 geo.json, topo.json(용량을 줄인 포맷)을 가지고 지도그리는것도 있습니다.
해당 내용은 블로그나, 검색은 가능한데 책에 언급되어 있어서 참 좋았던거 같습니다.
d3.js가 버전이 올라가면서 초창기에는 d3.js의 책이 단독으로 출간도 되었던거 같은데
현재는 다양한 차트들도 많이 있기도 해서, 최근 버전의 d3.js이 사용된 점이 눈에 들어왔습니다.

 

■ MEVN 관련

 · 예저는 총 3가지가 나옵니다.
모두 node, vue, db를 사용한 구성입니다.

1. 실시간 주식 모니터링 시스템 
 - 저자분이 2021년 처음 주식투자를 하시면서, 필요에 의해서 만드신 기능

2. 실시간 센서 모니터링 시스템
 - 실제 업무에서 사용하신 기능의 간단한 버전을 만드신 기능

3. 에러 처리와 실시간 로그시스템
 - 서버의 상태를 파악하는 기능

3가지 예제를 통해서 앞에서 학습한 vue, d3, node, db의 기능을 사용하면서
각 오픈소스의 기능을 사용해보고, 개념을 익히고, 생각할수 있는 사항을 많이 만들어 줍니다.

 

■ 총평

 · 책에 내용이 참 좋았습니다. 실무에서 경험하신 다양한 좋은 Best Practice에 대해서 설명하고
    사수가 부사수에게 자신의 노하우를 설명한다는 느낌이 들었습니다.

    다루는 주제가 많다고 생각이 들 수 있습니다. 하지만, 핵심적인 노하우가 잘 정리되어 있다는 생각이 듭니다.