책으로 보는 개발 세상

6.1 도커 플러그인이란?

6.2 도커 볼륨 플러그인

6.2.1 sshFS
6.2.2 Azure File Storage
6.2.3 Flocker
6.2.4 NFS와 Convoy

6.3 도커 네트워크 플러그인

6.3.1 위브

5.1 도커 컴포즈를 사용하는 이유

여러 개의 컨테이너를 하나의 서비스로 정의해 컨테이너 묶음으로 관리할 수 있게 해 줌. 여러 개의 컨테이너의 옵션과 환경을 정의한 파일을 읽어 컨테이너를 순차적으로 생성하는 방식으로 동작함.

5.2 도커 컴포즈 설치

//Docker for Windows, Docker for Mac을 설치하면 도커 엔진과 함께 도커 컴포즈도 설치됨
docker-compose -v

5.3 도커 컴포즈 사용

5.3.1 도커 컴포즈 기본 사용법

5.3.1.1 docker-compose.yml 작성과 활용

//docker-compose.yml
version: '3.0'	//YAML 파일 포맷의 버전 지정
services:	//생성될 컨테이너들을 묶어놓은 단위
  web:	//생성될 서비스의 이름. docker run에서 사용한 옵션을 아래에 지정
    image: alicek106/composetest:web
    ports:
      - "80:80"
    links:
      - mysql:db
    command: apachectl -DFOREGROUND
  mysql:
    image: alicek106/composetest:mysql
    command: mysqld
    
    
//아무 설정하지 않으면 현재 디렉터리의 docker-compose.yml 파일을 읽어 도커 엔진에게 컨테이너 생성 요청
docker-compose up -d

//docker-compose.yml끝에 서비의 이름을 입력해 특정 서비스의 컨테이너만 생성
docker-compose up -d mysql

//docker-compose run 명령어로 컨테이너 생성. interactive 셸 사용 가능.
docker-compose run web /bin/bash

5.3.1.2 도커 컴포즈의 프로젝트, 서비스, 컨테이너

• 하나의 프로젝트는 여러개의 서비스로 구성되고, 각 서비스는 여러 개의 컨테이너로 구성됨
• 컨테이너의 이름 -> [프로젝트 이름]_[서비스 이름]_[서비스 내의 컨테이너의 번호]

//서비스의 컨테이너 수 늘리기
docker-compose scale mysql=2

//프로젝트 삭제
docker-compose down

//-p 옵션에 프로젝트의 이름을 사용해 제어할 프로젝트의 이름을 명시
docker-compose -p myproject up -d
docker-compose -p myproject ps
docker-compose -p myproject down

5.3.2 도커 컴포즈 활용

5.3.2.1 YAML 파일 작성
5.3.2.2 도커 컴포즈 네트워크
5.3.2.3 도커 스웜과 함께 사용하기
5.3.2.4 도커 스웜 모드와 함께 사용하기

4.1 도커 머신을 사용하는 이유

4.2 도커 머신 사용

4.2.1 도커 머신 시작
4.2.2 버추얼 박스를 이용한 로컬 가상 머신 생성
4.2.3 클라우드에 도커 서버 생성

• 아마존 웹 서비스에 도커 서버 생성
• 애저에 도커 서버 생성

4.2.4 온프레미스 환경에 연결

3.1 도커 스웜을 사용하는 이유

여러 대의 서버를 손쉽게 하나의 자원 풀로 만들기 위해 사용. 클러스터를 만들 때 발생하는 아래의 이슈들을 도커스웜을 통해 해결.

• 새로운 서버나 컨테이너가 추가됐을 때 이를 발견
• 어떤 서버에 컨테이너를 할당할 것인가에 대한 스케줄러와 로드밸런서
• 클러스터 내의 서버가 다운됐을 때 고가용성을 어떻게 보장할지

3.2 도커 스웜과 도커 스웜 모드

• 도커 버전 1.6 이후부터 사용할 수 있는 컨테이너로서의 스웜(도커 스웜)
  <-> 도커 버전 1.12 이후부터 사용할 수 있는 도커 스웜 모드(스웜 모드)
• 도커스웜은 도커를 제어하기 위한 에이전트가 컨테이너로서 존재하며 분산 콘테이너 또한 외부에 별도로 존재해야 함.
  <-> 스웜 모드는 에이전트가 도커 자체에 내장돼 있어 이를 별도로 설치할 필요가 없으며, 외부 분산 코디네이터를 설치할 필요도 없음.
  (스웜 모드가 스웜에 비해 설치와 사용이 더욱 쉽고 간편)
• 도커 스웜은 여러 대의 도커 서버를 하나의 지점에서 사용하도록 단일 접근점을 제공하는데 초점을 둠.
  <-> 스웜모드는 웹 서비스 컨테이를 다루기 위한 클러스터링 기능에 초점을 둠.
• 도커 스웜은 doker run, docker ps 등 일반적인 명령어로 클러스터의 서버를 제어하고 관리할 수 있는 기능을 제공함.
  <-> 스웜모드는 같은 컨테이너를 동시에 여러 개 생성해 필요에 따라 유동적으로 컨테이너의 수를 조절할 수 있으며, 컨테이너로의 연결을 분산하는 로드밸런싱 기능을 자체적으로 지원함.

3.3 도커 스웜 모드

3.3.1 도커 스웜 모드의 구조
3.3.2 도커 스웜 모드 클러스터 구축

//--advertise-addr에 다른 도커 서버가 매니저 노드에 접근하기 위한 IP주소 입력 (매니저 노드가 될 서버에서 입력)
docker swarm init --advertise-addr 192.168.0.100

//토큰을 사용해 워커 노드를 추가 (워커 노드로 사용할 각 서버에서 입력)
docker swarm join --token [token~] [ip~]

//매니저 노드에서 도커 서버가 정상적으로 클러스터에 추가됐는지 확인
docker node ls

//새로운 매니저 노드를 추가하기 위한 토큰 확인
docker swarm join-token manager

//워커 노드를 추가하기 위한 토큰 확인
docker swarm join-token worker

//토큰 갱신 (매니저 노드에서만 실행 가능)
docker swarm join-token --rotate manager

//워커 노드 삭제 (해당 워커 노드에서 실행) 
docker swarm leave

//정지된 워커노드를 매니저 노드에서 직접 삭제
docker swarm rm node01

//매니저 노드를 삭제하려면 --force 필요
docker swarm leave --force

//워커 노드를 매니저 노드로 변경
docker node promote swarm-worker1

//매니저 노드를 워커 노드로 변경
docker node demote swarm-worker1

3.3.3 스웜 모드 서비스

스웜 모드에서 제어하는 단위는 컨테이너가 아닌 서비스. 서비스는 같은 이미지에서 생성된 컨테이너의 집합. 서비스 내에 컨테이너는 1개 이상 존재할 수 있으며, 각 워커 노드와 매니저 노드에 할당됨. (≒태스크(Task))

3.3.3.1 스웜 모드 서비스 개념
3.3.3.2 서비스 생성
3.3.3.3 스웜 모드의 서비스 장애 복구
3.3.3.4 서비스 롤링 업데이트
3.3.3.5 도커 스웜 네트워크
3.3.3.6 서비스 디스커버리
3.3.3.7 스웜 모드 볼륨

3.3.4 도커 스웜 모드 노드 다루기

3.4 도커스웜

3.4.1 도커 스웜과 스웜 모드의 차이점
3.4.2 도커 스웜 클러스터 구축
3.4.3 도커 스웜 사용
3.4.4 도커 스웜 스케쥴러

23.1 JWT의 이해

세션 기반 인증과 토큰 기반 인증의 차이

• 세션 기반 인증 시스템
  • 서버가 사용자가 로그인 중임을 기억하고 있음. 로그인하면, 서버는 세션 저장소에 사용자의 정보를 조회하고 세션 id를 발급함. 발급된 id는 주로 브라우저의 쿠키에 저장.
  • 서버를 확장하기가 번거로움. (서버 여러개 되면 세션 전용 데이터베이스 만들어야 함.)
• 토큰 기반 인증 시스템
  • 토큰은 로그인 이후 서버가 만들어 주는 문자열. 이 안에 사용자의 로그인 정보가 들어 있고, 해당 정보가 서버에서 발급되었음을 증명하는 서명이 들어 있음. (무결성 보장)
  • 로그인하면, 서버에서 사용자에게 해당 사용자의 정보를 지니고 있는 토큰을 발급해 주고, 추후 사용자가 다른 API를 요청하게 될 때 발급받은 토큰과 함께 요청하게 됨.
  • 서버 리소스 절약. 서버의 확장성 높음 

23.2 User 스키마/모델 만들기

• 모델 메서드 만들기
• 스태틱 메서드 만들기

23.3 회원 인증 API 만들기

• 회원가입 구현하기
• 로그인 구현하기

23.4 토큰 발급 및 검증하기

yarn add jsonwebtoken

23.4.1 비밀키 설정하기

openssl rand -hex 64

23.4.2 토큰 발급하기

• localStorage, sessionStorage : 구현과 사용이 편리하지만, XSS에 취약.
• 쿠키 : httpOnly 속성을 활성화해서  XSS방지, CSRF는 CSRF 토큰 사용 및 Referer 검증 등의 방식으로 제대로 막을 수 있음.

    const token = jwt.sign(
        {
            _id: this.id, username: this.username //첫 번째 파라미터 -> 토큰 안에 넣고 싶은 데이터
        },
        process.env.JWT_SECRET, //두 번째 파라미터 -> JWT 암호
        {
            expiresIn: '7d', //세 번째 파라미터 -> 유효기간
        }
    );

23.4.3 토큰 검증하기

const decoded = jwt.verify(token, process.env.JWT_SECRET);

23.4.4 토큰 재발급하기

23.4.5 로그아웃 기능 구현하기

23.5 posts API에 회원 인증 시스템 도입하기

23.6 username/tags로 포스트 필터링하기

22.1 소개하기

• MongoDB는 관계형 데이터베이스의 스키마, 확장성에서의 한계를 극복한 문서 지향적 NoSQL 데이터베이스.
• 데이터의 구조가 자주 바뀐다면 MongoDB가 유리, 까다로운 조건으로 데이터를 필터링해야 하거나, ACID 특성을 지켜야 한다면 RDBMS가 더 유리할 수 있음.

22.1.1 문서란?
22.1.2 MongoDB 구조
22.1.3 스키마 디자인 

22.2 MongoDB 서버 준비

22.2.1 설치

//macOS, Homebrew를 이용하여 설치
brew tap mongodb/brew
brew install mongodb-community
brew services start mongodb-community

22.2.2 MongoDB 작동 확인

//mongoDB 실행 확인
mongo

//버전 확인
>version()

22.3 mongoose의 설치 및 적용

MongoDB 기반 ODM(Object Data Modelling) 라이브러리. 데이터베이스 문서들을 자바스크립트 객체처럼 사용할 수 있게 해 줌

//mongoose, dotenv 설치
yarn add mongoose dotenv

//dotenv로 환경변수 호출
require('dotenv').config();
const {PORT, MONGO_URI} = process.env;

//mongoose로 서버와 데이터베이스 연결
mongoose.connect(MONGO_URI, {useNewUrlParser: true, useFindAndModify: false}).then(() =>
    console.log('connected to MongoDB')).catch(e => console.log(e));

22.4 ems으로 ES 모듈 import/export 문법 사용하기

//Node.js v12를 사용할 경우, package.json에 다음 줄을 추가하면 ES Module을 바로 사용할 수 있음
"scripts" : {
	...
},
"type" : "module"

//esm 추가
yarn add esm

// 기존 src/index.js 이름을 main.js로 변경하고, index.js를 아래와 같이 새로 생성
require = require('esm')(module);
module.exports = require('./mains.js');

//package.json 스크립트 변경
"scripts" : {
	"start" : "node -r esm src",
    "start:dev" : "nodemon --watch src -r esm src/indx.js"
}


//jsconfig.json 파일 추가하면 자동 완성을 통해 모듈을 불러올 수 있음
{
  "compilerOptions": {
    "target": "es6",
    "module": "es2015"
  },
  "include": ["src/**/*"]
}

22.5 데이터베이스의 스키마와 모델

• 스키마 - 컬렉션에 들어가는 문서 내부의 각 필드가 어떤 형식으로 되어 있는지 정의하는 객체
• 모델 - 스키마를 사용하여 만드는 인스턴스, 데이터베이스에 실제 작업을 처리할 수 있는 함수들을 지니고 있는 객체

22.6 MongoDB Compass의 설치 및 사용

MongoDB를 위한 GUI 프로그램
(www.mongodb.com/try/download/compass)

22.7 데이터 생성과 조회

• 생성 : 모델로 인스턴스를 생성하고 save함수 호출
• 데이터 리스트 조회 : 모델 인스턴스의 find함수를 사용 (exec()를 붙여줘야 서버에 쿼리 요청)
• 단일 데이터 조회 : 모델 인스턴스의 findById 함수를 사용

22.8 데이터 삭제와 수정

• 삭제 : remove - 특정 조건을 만족하는 데이터를 모두 지움, findByIdAndRemove - id를 찾아서 지움 , findOneAndRemove -  특정 조건을 만족하는 데이터 하나를 찾아서 제거
• 수정 : findByIdAndUpdate 함수를 사용. id, 업데이트 내용, 업데이트 옵션을 차례로 파라미터로 받음

22.9 요청 검증

22.9.1 ObjectId 검증

//mongoDB에 적합한 object id인지 검증
import mongoose from 'mongoose';

const { ObjectId } = mongoose.Types;
ObjectId.isValid(id);

//미들웨어를 사용해서 검증이 필요한 컨트롤러에 삽입
export const checkObjectId = (ctx, next) => {
    const {id} = ctx.params;
    if (!ObjectId.isValid(id)) {
        ctx.status = 400;
        return;
    }
    return next();
}

posts.get('/:id', postCtrl.checkObjectId, postCtrl.remove);

22.9.2 Request Body 검증

//Joi 설치
yarn add joi

22.10 페이지네이션 구현

22.10.1 가짜 데이터 생성하기
22.10.2 포스트를 역순으로 불러오기
22.10.3 보이는 개수 제한
22.10.4 페이지 기능 구현
22.10.5 마지막 페이지 번호 알려 주기
22.10.6 내용 길이 제한

21.1 소개하기

21.2 작업 환경 준비

// Node 설치 확인
node --version

// koa 설치
yarn add koa

//eslint 설치
yarn add --dev eslint
yarn run eslint --init

//prettier 설정
{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

21.3 Koa 기본 사용법

21.3.1 서버 띄우기

const Koa = require('koa');

const app = new Koa();

app.use(ctx => {
	ctx.body = 'hello world';
});

app.listen(3000, () => {
	console.log('Listening to port 3000');
});

21.3.2 미들웨어

• next 함수는 Promise를 반환
• Koa는 async/await을 지원

21.4 nodemon 사용하기

//nodemon 설치
yarn add --dev nodemon

//package.json
//yarn start:dev로 시작하면 nodemon은 src 디렉터리를 주시하고 있다고 해당 폴더 안의 변화를 감지하여 src/index.js를 재시작
"scripts" : {
	"start" : "node src",
    "start:dev" : "nodemon --watch src/ src/index.js"
}

21.5 koa-router 사용하기

20.1 서버 사이드 렌더링의 이해

20.1.1 서버 사이드 렌더링의 장점

• 검색 엔진이 페이지를 원활하게 수집
• 초기 랜더링 성능 개선

20.1.2 서버 사이드 렌더링의 단점

• 서버 리소스를 사용함. (캐싱과 로드밸런싱을 통해 성능 최적화 필요)
• 프로젝트 구조가 복잡해질 수 있음.

20.13 서버 사이드 렌더링과 코드 스플리팅 충돌

20.2 프로젝트 준비하기

//index.js 프로젝트에 라우터 적용
import {BrowserRouter} from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
        <App/>
    </BrowserRouter>,
    document.getElementById('root')
);


//app.js 컴포넌트에 라우트 설정(설정된 경로의 컴포넌트가 나타남)
import {Route} from 'react-router-dom';

function App() {
    return (
        <div>
            <Menu/>
            <hr/>
            <Route path="/red" component={RedPage}/>
            <Route path="/blue" component={BluePage}/>
        </div>
    );
}


//라우트 링크 설정
import {Link} from "react-router-dom";

const Menu = () => {
    return (
        <ul>
            <li>
                <Link to="/red">Red</Link>
            </li>
            <li>
                <Link to="/blue">Blue</Link>
            </li>
        </ul>
    );
};

20.3 서버 사이드 렌더링 구현하기

//webpack 설정 보이게 하기
git add .
git commit -m 'commit before ejcet'
yarn eject

20.3.1 서버 사이드 렌더링용 엔트리 만들기
20.3.2 서버 사이드 렌더링 전용 웹팩 환경 설정 작성하기
20.3.3 빌드 스크립트 작성하기
20.3.4 서버 코드 작성하기
20.3.5 정적 파일 제공하기

20.4 데이터 로딩

20.4.1 redux-thunk 코드 준비하기
20.4.2 Users, UsersContainer 컴포넌트 준비하기
20.4.3 PreloadContext 만들기
20.4.4 서버에서 리덕스 설정 및 PreloadContext 사용하기
20.4.5 스크립트로 스토어 초기 상태 주입하기
20.4.6 redux-saga 코드 준비하기
20.4.7 User, UserContainer 컴포넌트 준비하기
20.4.8 redux-saga를 위한 서버 사이드 렌더링 작업
20.4.9 usePreloader Hook 만들어서 사용하기

20.5 서버 사이드 렌더링과 코드 스플리팅

20.5.1 라우트 컴포넌트 스플리팅하기
20.5.2 웹팩과 babel 플러그인 적용
20.5.3 필요한 청크 파일 경로 추출하기
20.5.4 loadableReady와 hydrate

20.6 서버 사이드 렌더링의 환경 구축을 위한 대안

19.1 자바스크립트 함수 비동기 로딩

    const onClick = () => {
        import('./notify').then(result => result.default());
    }

19.2 React.lazy와 Suspense를 통한 컴포넌트 코드 스플리팅

19.2.1 state를 사용한 코드 스플리팅
19.2.2 React.lazy와 Suspense 사용하기
19.2.3 Loadable Components를 통한 코드 스플리팅

18.1 작업 환경 준비

18.2 미들웨어란?

18.2.1 미들웨어 만들기

18.2.2 redux-logger 사용하기

//미들웨어 생성
const loggerMiddleWare = store => next => action => {
    console.group(action && action.type);
    console.log('이전 상태', store.getState());
    console.log('액션', action);
    next(action);
    console.log('다음 상태', store.getState());
    console.groupEnd();
};

export default loggerMiddleWare;


//미들웨어 적용
import loggerMiddleware from "./lib/loggerMiddleware";
import {createLogger} from 'redux-logger'; //redux-logger 사용하기

const logger = createLogger();
const store = createStore(rootReducer, applyMiddleware(logger));
//const store = createStore(rootReducer, applyMiddleware(loggerMiddleware));

ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>,
    document.getElementById('root')
);

18.3 비동기 작업을 처리하는 미들웨어 사용

• redux-thunk : 가장 많이 사용하는 비동기 처리 미들웨어. 객체가 아닌 함수 형태의 액션을 디스패치 할 수 있게 해 줌.
• redux-saga : redux-thunk 다음으로 많이 사용되는 비동기 처리 미들웨어. 특정 액션 디스패치 후, 다른 액션을 디스패치시키는 규칙을 적용하여 비동기 작업 처리.

18.3.1. redux-thunk

18.3.1.1 Thunk란 ?
- 특정 작업을 나중에 할 수 있도록 미루기 위해 함수 형태로 감싼 것
18.3.1.2 미들웨어 적용하기

//추가
yarn add redux-thunk

//스토어를 만들때 적용
import ReduxThunk from 'redux-thunk';
const logger = createLogger();

const store = createStore(rootReducer, applyMiddleware(logger, ReduxThunk));

18.3.1.3 Thunk 생성 함수 만들기
18.3.1.4 웹 요청 비동기 작업 처리하기
18.3.1.5 리팩토링

18.3.2 redux-saga

18.3.2.1 제너레이터 함수 이해하기
18.3.2.2 비동기 카운터 만들기

//추가
yarn add redux-saga

//개발자 도구 라이브러리 추가, composWithDevTools를 리덕스 미들웨어와 함께 사용할 때는 applyMiddleware부분을 감싸주면 됨
yarn add redux-devtools-extension

//all 함수는 여러 사가를 합쳐 주는 역할
export function* rootSaga(){
    yield all([counterSaga()]);
}

//사가 미들웨어 등록
import createSagaMiddleWare from 'redux-saga';
import {composeWithDevTools} from 'redux-devtools-extension'; 

const logger = createLogger();
const sagaMiddleware = createSagaMiddleWare();
const store = createStore(
    rootReducer,
    composeWithDevTools(applyMiddleware(logger, ReduxThunk, sagaMiddleware))
);
sagaMiddleware.run(rootSaga);

ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>,
    document.getElementById('root')
);

18.3.2.3 API 요청 상태 관리하기
18.3.2.4 리팩토링
18.3.2.5 알아 두면 유용한 기능들