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

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

부제 MongoDB, Express, Vue.js 3.0, Node.js, D3.js와 자바스크립트 최적화, 개발자 포트폴리오, 함수형 프로그래밍, 배포까지

저자 주홍철

 

출간/배본가능일 2021년 10월 18일

정가 32,000원 

페이지 560쪽

판형 크라운판(173*230)

 

ISBN 979-11-6592-087-6 (93000)

 

책 소개 

D3.js 7.x, MongoDB 5.x, Vue.js 3.x 반영된 최신 코드로

실시간 주식 모니터링부터 개발자 포트폴리오까지 한 권으로 정복!

 

 자바스크립트 언어가 발전함에 따라 개발 시장에서 더욱 영향력이 커지고 있습니다. 이 책에서는 자바스크립트만으로 습득할 수 있는 기술인 ‘MEVN’으로 웹앱을 제작합니다. MEVN은 MongoDB, Express, Vue.js, Node.js로 이루어진 스펙의 약자로, 이 한 권의 책을 통해 4가지 기술을 모두 배우게 됩니다. 또한 이론과 실습으로 구분하여 지식과 실무에 모두 능통할 수 있도록 구성되었습니다.

 

 이 책은 자바스크립트 중급 기술을 익혀서 자신의 스킬 역량을 강화하여 고급 개발자로 성장하고 싶은 분들께 특히 유용합니다. 저자의 개발 노하우와 실무에 도움이 되는 팁, 그리고 재밌는 예제 프로젝트를 통해 독자 여러분들도 자신만의 프로젝트를 이 책과 함께 완성시켜 보시기 바랍니다.

 

이 책이 필요한 독자 

-   HTML, JavaScript, CSS에 대해 기본 지식이 있는 초급 또는 중급 개발자

-   자바스크립트를 토대로 여러 프로젝트를 만들어 보고 싶은 개발자

-   본인의 프로젝트를 최신 코드를 통해 보완하고 완성하고 싶은 개발자

-   ‘MEVN’으로 웹앱을 제작하고 싶은 개발자 

 

소스코드 다운로드

https://github.com/bjpublic/MEVN

 

저자 소개 

주홍철

현 대한민국 공항 및 공군에서 쓰는 실시간 기상 상황 모니터링 시스템을 개발했다. 수많은 개발 대회에서 입상했으며 mocha.js의 contributor이기도 하다. 지금은 네이버를 퇴사하고 AI 서비스 ‘어비스’를 만들고 있다.

 

목차

1장 | 개발 환경 준비와 git, github

비주얼 스튜디오 코드로 실습 준비하기

비주얼 스튜디오 커스텀 설정 : 테마와 아이콘, 폰트

비주얼 스튜디오 커스텀 설정 : Beautify 확장

비주얼 스튜디오 커스텀 설정 : Color Highlight

비주얼 스튜디오 커스텀 설정 : HTML Snippets

참고 : 자주 사용하는 단축키

npm을 이용한 패키지 설정

Node.js 설치하고 npm 사용해보기

package.json에 명령어 등록하기

참고 : npm으로 모듈 설치가 안 될 때 쓰는 방법

핵심만 배우는 git과 github

git의 특징

git으로 repository 가져오기

자주 사용하는 git 명령어

커밋과 이슈 만들 때 주의점

실전! git

 

2장 | 제대로 배우는 자바스크립트

함수 스코프와 호이스팅

스코프와 호이스팅의 개념

const, let의 호이스팅

화살표함수와 기본 매개변수

화살표함수

기본 매개변수

forEach, map, filter, reduce, every, some

forEach, map, filter, reduce

every, some

find, findIndex, includes

find, findIndex

includes

템플릿 문자열

구문 생략, spread 연산자, 구조분해 할당

구문 생략

spread 연산자

구조분해 할당

Promise와 async/await

자바스크립트에서의 비동기

DeepDive : queue

Callback과 Promise

Promise를 감싸는 포장지, async와 await

Promise를 사용한 에러핸들링

여러 가지 Promise를 한꺼번에 해결하는 Promise.all

이터러블, 이터레이터, 제너레이터 - ES6

이터러블

이터레이터

제너레이터

이터러블/이터레이터 프로토콜

제너레이터를 이용한 지연평가

제너레이터를 이용한 웹스크래핑

모듈화 - ESM과 CJS

ESM 모듈화 방법

CJS 모듈화 방법

느슨하게 결합한 모듈

DeepDive : 자바스크립트의 call by value

 

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

함수 성능 비교

정수형 변환 : parseInt와 비트연산자

배열포함 확인 : indexOf와 includes

객체선언 : new Object와 {}

올바르게 객체 복사하기

스프레드 연산자와 Object.assign

재귀함수

JSON.parse와 JSON.stringify

DeepDive : JSON.stringify의 활용법

JSON의 기초

JSON 직렬화

UX 향상을 위한 이미지 레이지 로드 구축

참고 : slice란?

함수형 프로그래밍과 모나드

순수함수와 참조 투명성

고차함수

커링(currying)

함수합성

파괴적인 함수 쓰지 않기

Point–free, 무인수 프로그래밍

모나드

클로저

DeepDive : 자바스크립트의 실행 컨텍스트

함수형 프로그래밍의 응용

배열 안에서 차례대로 작동하는 비동기로직

reduce를 통한 집계

참고 : 빈값 초기 할당자(Logical nullish assignment) ??=

무겁고 많은 비동기로직을 배치단위로 처리하기

CSS와 자바스크립트 최적화

CSS에서의 최적화

자바스크립트에서의 최적화

DeepDive : 화면의 구성 과정(브라우저 렌더링) 및 reflow와 repaint

 

4장| Node.js로 하는 안정적인 서버의 시작

Node.js의 기본

Node.js

http 객체로 웹서버 만들기

참고 : listen 에러 해결 방법

pm2로 서버 관리하기

일부러 중지되는 서버 만들기

pm2로 계속해서 다시 살아나는 서버 만들기

express로 서버 구축하기 및 로거

쉬운 미들웨어 설정

쉽게 설정할 수 있는 라우팅

쉽게 설정하는 정적 자원 제공 서버

참고 : path 모듈

개발자 포트폴리오 만들기

DeepDive : SEO의 기본

NCP, 깃허브를 이용한 배포

NCP, 네이버 클라우드 플랫폼

NCP를 이용해 배포해보기

참고 : HTTP의 기본 포트

깃허브를 이용해 배포하기

 

5장 | 예제를 통해 배우는 Vue.js 3.0

Vue.js를 사용해야 하는 이유와 SPA

Vue.js를 써야 하는 이유

SPA

MVVM 디자인 패턴

Vue.js의 핵심 및 vuex

가상돔과 데이터 중심 그리고 컴포넌트 기반

라이프사이클과 composition API

디렉티브와 데이터바인딩

참고 : v-if와 v-show의 차이

부모와 자식 컴포넌트 간의 통신

ref, reactive

vuex와 상태관리

Vue-cli를 통한 패키지 설정

Vue-cli 설정하기

webpack

Vue.js로 만드는 이미지 슬라이더

간단한 이미지 서버 구축

App.vue 컴포넌트 수정

참고 : computed와 watch

Vue.js, vuex로 만드는 할 일 웹앱

요구사항과 아키텍처 설계

빌드 및 서버 구축

  

6장 | MongoDB의 기본과 성능 테스트

MongoDB의 구조와 특징

MongoDB와 BSON

MongoDB의 아키텍처

MongoDB 특징 10가지

참고 : 쿼리 정렬에서 메모리 관련 에러 발생 시 해결 방법

MongoDB의 한계

MongoDB 설치와 보안

MongoDB 설치와 환경 설정

참고 : 윈도우에서의 MongoDB 환경변수 오류 시 해결 방법

MongoDB의 계정생성

MongoDB의 보안 메커니즘

DeepDive : SCRAM

Mongoose와 MongoDB 드라이버 성능 비교 및 CRUD

Mongoose와 MongoDB 드라이버 성능 테스트

참고 : MongoDB에 시간을 넣을 때 추천하는 방법

Mongoose를 이용한 CRUD 해보기

참고 : MongoDB Shell의 간단한 명령어

집적된 결과물을 내기 위한 aggregate

aggregate와 mapReduce의 차이

aggregate 실습

MongoDB의 인덱싱

인덱스의 기본

single Field Index 인덱스와 성능 비교

compound Field Index 인덱스

MongoDB로 하는 관계형 스키마

DeepDive : 알아두면 유용한 DB 관련 지식

  

7장 | D3.js로 하는 실시간 데이터 시각화

D3.js와 그 외 시각화 라이브러리 비교

시각화 라이브러리 D3.js

D3.js와 그 외 시각화 라이브러리 비교

D3.js의 기초

circle

scale

axis

transition

bar chart

코로나맵 만들기

지도를 그릴 재료 topojson과 geojson

코로나맵 실습

DeepDive : 자바스크립트의 call

참고 : interpolate의 의미

증가하는 숫자 컴포넌트 만들기

 

8장 | 실시간 주식 모니터링 시스템

요구사항과 아키텍처

요구사항

아키텍처

백엔드 구축

백엔드 코드 설명

백엔드 테스팅

DeepDive : curl

DeepDive : REST API의 기본

프론트엔드 구축

 

9장 | 실시간 센서 모니터링 시스템

요구사항과 아키텍처

요구사항

아키텍처

DeepDive : websocket 방식과 polling 방식 비교

백엔드 구축

센서 데이터 구축

DB 계정 추가

실시간 센서 서버 만들기

프론트엔드 구축

  

10장 | 에러 처리와 실시간 로그시스템

Node.js에서의 에러 처리

try - catch로 하는 에러 처리

express 내에서 Promise로 하는 에러 처리

DeepDive : Node.js에서의 에러

요구사항과 아키텍처

DeepDive : 로깅 라이브러리 Winston

백엔드 구축

프론트엔드 구축

DeepDive : axios를 제대로 쓰는 법

 

베타 리더 추천사

 책 곳곳에서 볼 수 있는 흥미로운 예제와 친절한 코드 설명으로 독자의 의문점에 충분한 해답을 제공합니다.

-김인범님

 

모니터링 시스템을 백엔드, 프론트엔드를 넘나들며 개발하는 과정에서 꼼꼼히 설명하기 때문에 머릿속의 물음표를 느낌표로 바꾸어 줍니다!

-이태우님

 

스스로 전반적인 소프트웨어 개발에 대해 이해하고 직접 만들어보고 싶은 분들께 이 책을 추천합니다.

-이성준님

 

MEVN 4가지 기술을 다루는 이 책은 JavaScript 기반 풀스택 개발자로 성장하려는 분들에게 좋은 길라잡이가 될 것입니다.

-김용웅님

 

여러 실용적인 프로젝트들과 함께 저자의 경험과 여러 가지 기술들을 자세하게 소개받는 느낌이 드는 책입니다.

-송성빈님

 

필요한 핵심을 꾹꾹 눌러 담아, 광범위하면서도 응축된 지식을 원하는 신입 및 주니어 개발자에게 추천합니다!

-문주영님

 

이 책은 자바스크립트부터 함수형 프로그래밍, DB와 클라이언트까지 다양한 주제를 다루어, 훌륭한 개발자로서의 첫걸음이 될 것입니다.

-Dyel.Park님