홈앤서비스 SK BROADBAND

D3.js 7.x, MongoDB 5.x, Vue.js 3.x 반영된 최신 코드로
실시간 주식 모니터링부터 개발자 포트폴리오까지 한 권으로 정복!

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

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

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를 제대로 쓰는 법