책으로 보는 개발 세상

2.4.1 이미지를 생성하는 방법

2.4.2 Dockerfile 작성

FROM ubuntu:14.04
MAINTAINER alicek106
LABEL "purpose"="practice"
RUN apt-get update
RUN apt-get install apche2 -y
ADD test.html /var/www/html
WORKDIR /var/www/html
RUN ["/bin/bash", "-c", "echo hello>>test2.html"]
EXPOSE 80
CMD apachectl -DFOREGROUND

2.4.3 Dockerfile 빌드

//-t옵션은 생성될 이미지의 이름을 설정함. 
docker build -t mybuild:0.0 ./

//-P 옵션은 이미지에 설정된 EXPOSE의 모든 포트를 호스트에 연결하도록 설정함.
docker run -d -P --name myserver mybulid:0.0

// -f 또는 --file 옵션으로 Dockerfile의 이름을 지정할 수 있음
docker build -f Dockerfile2 -t mycache:0.0 ./

//--no-cache 옵션으로 캐쉬 사용하지 않기
docker build --no-cache -t mybuild:0.0 .

2.4.4 기타 Dockerfile 명령어

2.4.4.1 ENV, VOLUME, ARG, USER

• ENV : Dockerfile에서 사용될 환경변수 지정
• VOLUME : 빌드된 이미지로 컨테이너를 생성했을 때 호스트와 공유할 컨테이너 디렉터리 설정
• ARG : build 명령어를 실행할 때 변수 입력받아 Dockerfile 내에서 변수 값 설정
• USER : 컨테이너 내에서 사용될 사용자 계정의 이름이나 UID 설정

2.4.4.2 Onbuild, Stopsignal, Healthcheck, Shell

• ONBUILD : 빌드된 이미지를 기반으로 하는 다른 이미지가 Dockerfile로 생성될 때 실행할 명령어 추가
• STOPSIGNAL : 컨테이너가 정지될 때 사용될 시스템 콜 종류 지정
• HEALTHCHECK : 컨테이너에서 동작하는 어플리케이션의 상태를 체크하도록 설정
• SHELL : 기본으로 사용하는 쉘을 따로 지정

2.4.4.3 ADD, COPY

• COPY는 로컬의 파일만 이미지에 추가할 수 있음. ADD는 외부 URL 및 tar 파일에서도 파일을 추가할 수 있음. (COPY의 기능이 ADD에 포함)
• 어떤 파일이 추가될지 명확히 알 수 있는 COPY 사용을 권장

2.4.4.4 ENTRYPOINT, CMD

• entrypoint와 CMD는 동일하게 컨테이너가 시작될 때 수행할 명령을 지정한다는 점에서 같음
• entrypoint는 CMD를 인자로 받아 사용할 수 있는 스크립트의 역할을 할 수 있다는 점에서 다름
• entrypoint가 설정되지 않았다면 CMD에 설정된 명령어를 그대로 실행하지만, entrypoint가 설정됐다면 cmd는 단지 entrypoint에 대한 인자의 기능을 함

2.4.5 도커 허브에서 Dockerfile로 빌드

2.4.6 Dockerfile로 빌드할 때 주의할 점

• \(역슬래시)로 나눠서 가독성 높일 수 있도록 작성
• 빌드 캐시를 이용해 기존에 사용했던 이미지 레이어를 재사용
• &&로 각 RUN 명령어를 하나로 묶기 (이미지 레이어 수 줄어듬)

2.3.1 도커 이미지 생성

//commit의 옵션을 지정하고 커밋할 컨테이너의 이름을 명시한 뒤 생성될 이미지의 이름을 입력
docker commit [OPTIONS] CONTAINTER [REPOSITORY[:TAG]]

//-a옵션은 이미지 작성자, -m옵션은 커밋 메시지
//아래 명령은 commit_test라는 컨테이너를 commit_test:first라는 이름의 이미지로 생성
docker commit \
-a "hong" -m "my first commit" \
commit_test \
commit_test:first

2.3.2 이미지 구조 이해

//docker history 명령은 이미지가 어떤 레이어로 생성됐는지 출력
docker history commit_test:second

//이미지 삭제 
docker rmi commit_test:first

//컨테이너가 사용 중인 이미지를 강제 삭제
docker rmi -f ~

//댕글링 이미지 삭제
docker images -f dangling=true

//사용 중이지 않은 댕글링 이미지 한번에 삭제
docker image prune

2.3.3 이미지 추출

//이미지의 모든 메타데이터를 하나의 파일로 추출
docker save -o ubuntu_14_04.tar ubuntu:14.04

//추출된 이미지 도커에 다시 로드
docker load -i ubuntu_14_04.tar

//export 명령어로 이미지 추출
docker export -o rootFS.tar mycontainer

//import 명령어로 이미지 다시 저장
docker import rootFS.tar myimage:0.0

2.3.4 이미지 배포

도커 허브 저장소

//이미지 이름의 접두어를 이미지가 저장되는 저장소 이름으로 설정해야함
//docker tag [기존의 이미지 이름] [새롭게 생성될 이미지 이름]
docker tag myimage:0.0 yorez/myimage:0.0

//도커 허브 서버에 로그인
//도커 엔진에서 로근한 정보 => /[계정명]/.docker/config.json 파일에 저장
docker login

//이미지를 저장소에 업로드
docker push yorez/myimage:0.0

//이미지 다운로드
docker pull yorez/myimage:0.0

https://hub.docker.com/

도커 사설 레지스트리

// 도커 이미지로 도커 사설 레지스트리 생성
docker run -d --name myregistry \
-p 5000:5000 \
--restart=always \
registry:2.6

// 사설 레지스트리 주소로 접두어 설정 필요
docker tag myimage:0.0 ${DOCKER_HOST_IP}:5000/myimage:0.0

docker push ${DOCKER_HOST_IP}:5000/myimage:0.0
docker pull ${DOCKER_HOST_IP}:5000/myimage:0.0

2.2.1 컨테이너 생성

//run 명령어로 컨테이너를 생성. (-i -t 옵션은 컨테이너와 상호 입출력을 가능하게 함.)
docker run -i -t ubuntu:14.04

//컨테이너 내부에서 빠져나오는 방법 (컨테이너 정지)
exit
Ctrl + d

//컨테이너 정지시키지 않고 빠져나오려면 ?
Ctrl +P, Q

//이미지 내려받기
docker pull centos:7

//이미지 목록 출력
docker images

//create 명령어로 컨테이너 생성
docker create -i -t --name mycentos centos:7

//컨테이너 내부로 들어가지 않고 생성
docker start mycentos

//컨테이너 내부로 들어가기
docker attach mycentos

run 명령어 순서 : 

1. docker pull (이미지가 없을 때)
2. docker create
3. docker start
4. docker attach (-i -t 옵션을 사용했을 때)

create 명령어 순서 :

1. docker pull (이미지가 없을 때)
2. docker create

2.2.2 컨테이너 목록 확인

//컨테이너 목록 확인
docker ps

//컨테이너 전체 ID확인
docker inspect mycentos | grep Id

//컨테이너 이름 변경
docker rename mycentos mycentos2

2.2.3 컨테이너 삭제

//컨테이너 삭제
docker rm mycentos

//실행중인 컨테이너 멈추고 삭제
docker stop mycentos
docker rm mycentos

//실행중인 컨테이너 강제 삭제
docker rm -f mycentos

//모든 컨테이너 삭제
docker container prune

//-a, -q옵션을 조합해 컨테이너 삭제
//-a는 상태와 관계없이 모든 컨테이너를, -q는 컨테이너의 ID만 출력하는 역할
docker ps -a -q

docker stop $(docker ps -a -q)
docker rm $(docker ps -a -q)

2.2.4 컨테이너를 외부에 노출

//-p 옵션으로 컨테이너의 포트를 호스트의 포트와 바인딩, [호스트의 포트]:[컨테이너의 포트]
docker run -i -t --name mywebserver -p 80:80 ubuntu:14.04

//호스트의 특정 ip를 바인딩
docker run -i -t -p 3306:3306 -p 192.168.0.100:7777:80 ubuntu:14.04

2.2.5 컨테이너 애플리케이션 구축

//-d : Detached 모드로 컨테이너를 실행. 컨테이너를 백그라운드에서 동작하는 애플리케이션으로써 실행
//-e : 컨테이너 내부의 환경변수를 설정
docker run -d \
--name wordpressdb \
-e MYSQL_ROOT_PASSWORD=password \
-e MYSQL_DATABASE=wordpress \
mysql:5.7

//-link : 내부IP를 알 필요 없이 다른 컨테이너에 별명으로 접근하도록 설정
docker run -d \
-e WORDPRESS_DB_PASSWORD=password \
--name wordpress \
--link wordpressdb:mysql \
-p 80 \
wordpress

//호스트와 바인딩 된 포트 확인
docker port wordpress

//exec 명령어를 사용하면 컨테이너 내버에서 명령어를 실행한 뒤 그 결괏값을 반환받을 수 있음
docker exec wordpress ls

2.2.6 도커 볼륨

• 호스트 볼륨 공유

//-v [호스트의 공유 디렉터리]:[컨테이너 공유 디렉터리]
docker run -d \
--name wordpressdb_hostvolume \
-e MYSQL_ROOT_PASSWORD=password \
-e MYSQL_DATABASE=wordpress \
-v /home/wordpress_db:/var/lib/mysql \
mysql:5.7

docker run -d \
-e WORDPRESS_DB_PASSWORD=password \
--name wordpress_hostvolume \
--link wordpressdb_hostvolumn:mysql \
-p 80 \
wordpress

• 볼륨 컨테이너

//--volumes-from 옵션을 설정하면 -v 또는 --volume 옵션을 적용한 컨테이너의 볼륨 디렉터리를 공유할 수 있음
//볼륨 컨테이너에 연결해 데이터를 간접적으로 공유받는 방식
docker run -i -t \
--name volumes_from_container \
--volumes-from volume_override \
ubuntu:14.04

• 도커 볼륨

//도커 자체에서 제공하는 볼륨 기능을 활용해 데이터를 보존
docker volume create --name myvolume

//생성된 볼륨 확인
docker volume ls

//[볼륨의 이름]:[컨테이너의 공유 디렉터리]
docker run -i -t --name myvolume_1 \
-v myvolume:/root/ \
ubuntu:14.04

//docker inspect를 통해 컨테이너, 이미지, 볼륨 등 도커의 모든 구성 단위의 정보를 확인
//볼륨의 실제 저장 위치 확인
docker inspect --type volume myvolume

//볼륨 자동 생성. -v 옵션에 공유 디렉터리 위치만 입력.
docker run -i -t --name volume_auto \
-v /root \
ubuntu:14.04

//볼륨 일괄 삭제
docker volume prune

2.2.7 도커 네트워크

도커 네트워크 기능

//네트워크 목록 확인
docker network ls

//네트워크의 자세한 정보
docker network inspect ~
docker inspect --type network

브리지 네트워크

//새로운 브리지 네트워크 생성
docker network create --driver bridge mybridge

//mybridge 네트워크를 사용하는 컨테이너 생성
docker run -i -t --name mynetwork_container \
--net mybridge \
ubuntu:14.04

//서브넷, 게이트웨이, IP할당 범위 등을 임의로 설정
docker network create --driver=bridge \
--subnet = 172.72.0.0/16 \
--ip-range = 172.72.0.0/24 \
--gateway = 172.72.0.1 \
my_custom_network

호스트 네트워크

//호스트의 네트워크 환경을 그대로 사용
//컨테이너의 네트워크를 호스트 모드로 설정하면 컨테이너 내부의 애플리케이션을 별도의 포트 포워딩 없이 바로 쓸 수 있음
docker run -i -t --name network_host \
--net host \
ubuntu:14.04

논 네트워크

//none 옵션을 사용하면 외부와 연결 단절
docker run -i -t --name network_none \
--net none \
ubuntu:14.04

컨테이너 네트워크

//--net 옵션으로 container를 입력하면 다른 컨테이너의 네트워크 환경을 공유할 수 있음
docker run -i -t -d --name network_container_1 ubuntu:14.04

docker run -i -t -d --name network_container_2 \
--net container:network_container_1 \
ubuntu:14.04 

브리지 네트워크와 --net-alias

//브리지 타입의 네트워크와 run 명령어의 --net-alias 옵션을 함께 쓰면 특정 호스트 이름으로 컨테이너 여러 개에 접근할 수 있음
docker run -i -t -d --name network_alias_container_1 \
--net mybridge \
--net-alias alicek106 ubuntu:14.04

docker run -i -t -d --name network_alias_container_2 \
--net mybridge \
--net-alias alicek106 ubuntu:14.04

docker run -i -t -d --name network_alias_container_3 \
--net mybridge \
--net-alias alicek106 ubuntu:14.04


//컨테이너 생성 후 ping 요청하면 세개의 컨테이너가 교대로 응답함
docker run -i -t -d --name network_alias_ping \
--net mybridge \
ubuntu:14.04

ping -c alicek106

//dig로 도메인 이름에 대응하는 IP조회
apt-get update
apt-get install dnsutils
dig alicek106

2.2.8 컨테이너 로깅

json-file 로그 사용하기

docker run -d --name no_passwd_mysql \
mysql:5.7

//docker logs명령어로 컨테이너의 표준 출력 확인
docker logs no_passwd_mysql

//--tail 옵션으로 마지막 로그 줄부터 출력할 수 지정
docker logs --tail 2 mysql

//--since 옵션으로 특정 시간 이후의 로그 확인
docker logs --since 1474765979 mysql

//-t 옵션으로 타임스태프 표시, -f옵션으로 로그를 스트림으로 확인
docker logs -f -t mysql

syslog 로그
fluentd 로깅
아마존 클라우드워치 로그

2.2.9 컨테이너의 자원 할당 제한

컨테이너 메모리 제한
컨테이너 CPU 제한
Block I/O 제한
컨테이너 저장 공간 설정

2.1 도커 이미지와 컨테이너

2.1.1 도커 이미지

컨테이너를 생성할 때 필요한 요소 (≒iso)

2.1.2 도커 컨테이너

이미지로 생성된 목적에 맞는 파일이 들어 있는 파일 시스템과 격리된 시스템 자원 및 네트워크를 사용할 수 있는 독립된 공간

1.1 가상 머신과 도커 컨테이너

가상 머신과 도커 컨테이너의 차이. 도커 컨테이너의 장점

1.2 도커 엔진 설치 

1.2.1 리눅스 도커 엔진 설치

1.2.2 윈도우, 맥 OS에 도커 설치

도커 툴박스, Docker for Windows, Docker for Mac을 설치할 경우 모두 도커 엔진, 도커 컴포즈, 도커 머신이 함께 설치됨.

1.2.3 Docker Toolbox와 Docker for Windows/Mac의 차이점

전자는 가상 머신을 생성해 그 내부에 도커를 설치함. 후자는 호스트 자체에 가상화 기술을 적용함. 이는 도커 컨테이너를 생성한 뒤 외부에서 접근하는 방법의 차이가 있음. (전자 : 이중 포트 포워딩, 후자 : 포트 포워딩)

1.2.4 리눅스 환경에 도커 마련하기

도커는 원래 리눅스에서 작동하는 데 최적화돼 있으므로 윈도우, 맥 OS X에서 도커를 사용하면 일부 기능이 제약될 수 있음.
리눅스 물리 서버를 구축 하기 위해 버추얼박스, VMWare,  AWS EC2를 사용

01장 도커란?

1.1 가상 머신과 도커 컨테이너
1.2 도커 엔진 설치

02장 도커 엔진

2.1 도커 이미지와 컨테이너
2.2 도커 컨테이너 다루기
2.3 도커 이미지
2.4 Dockerfile
2.5 도커 데몬

03장 도커 스웜

3.1 도커 스웜을 사용하는 이유
3.2 도커 스웜과 도커 스웜 모드
3.3 도커 스웜 모드
3.4 도커 스웜

04장 도커 머신

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

05장 도커 컴포즈

5.1 도커 컴포즈를 사용하는 이유
5.2 도커 컴포즈 설치
5.3 도커 컴포즈 사용

06장 도커 플러그인

6.1 도커 플러그인이란?
6.2 도커 볼륨 플러그인
6.3 도커 네트워크 플러그인

07장 도커 솔루션

7.1 쿠버네티스
7.2 아파치 메소스
7.3 랜처

17.1 작업 환경 설정

//redux, react-redux라이브러리 설치
yarn add redux react-redux

//.prettierrc
{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

17.2 UI 준비하기

17.3 리덕스 관련 코드 작성하기

액션 타입, 액션 생성 함수, 리듀서 코드를 작성. 작성 방법은 아래 두 가지로 나뉨.

• actions, constants, reducers로 각각 디렉터리를 구분해서 작성하는 방법

• Ducks패턴 : 액션 타입, 액션 생성함수, 리듀서 함수를 기능별로 파일 하나에 몰아서 다 작성하는 방식

1. 액션 타입 정의하기
2. 액션 생성 함수 만들기
3. 초기 상태 및 리듀서 함수 만들기
4. 루트 리듀서 만들기

17.4 리액트 애플리케이션에 리덕스 적용하기

17.4.1 스토어 만들기

17.4.2 Provider 컴포넌트를 사용하여 프로젝트에 리덕스 적용하기

17.4.3 Redux DevTools의 설치 및 적용 

//크롬 확장 프로그램 설치(Redux DevTools)
1.
const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

2. 
패키지를 설치하여 적용(코드 훨씬 깔끔해짐)
yarn add redux-devtools-extension

import {composeWithDevTools} from "redux-devtools-extension";
const store = createStore(rootReducer, composeWithDevTools());

//index.js
import rootReducer from "./modules";
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import {composeWithDevTools} from "redux-devtools-extension";

const store = createStore(rootReducer, composeWithDevTools());

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

17.5 컨테이너 컴포넌트 만들기

const makeContainer = connect(mapStateToProps, mapDispatchToProps);
makeContainer(타깃 컴포넌트);

//connect 함수사용
const mapStateToProps = state => ({
    number: state.data.number
});

const mapDispatchToProps = dispatch => ({
    increase: () => dispatch(increase()),
    decrease: () => dispatch(decrease())
});

export default connect(mapStateToProps, mapDispatchToProps)(Container);


//bindActionCreators함수 사용
export default connect(
    state => ({
        number: state.data.number
    }),
    dispatch => bindActionCreators(
        {
            increase,
            decrease,
        }, dispatch)
)(Container);


//mapDispatchToProps 파라미터에 액션 생성함수 객체 삽입 (connect 함수가 내부적으로 bindActionCreators 작업 대신 해줌)
export default connect(
    state => ({
        number: state.data.number
    }),
    {
        increase,
        decrease
    }
)(Container);

17.6 리덕스 더 편하게 사용하기

17.6.1 redux-actions

//라이브러리 설치
yarn add redux-actions


//createAction, handleActions를 사용해서 가독성 향상
import {createAction, handleActions} from "redux-actions";

const INCREASE = 'counter/INCREASE';
const DECREASE = 'counter/DECREASE';

export const increase = createAction(INCREASE);
export const decrease = createAction(DECREASE);

const initialState = {
    number: 0
};

const counter = handleActions(
    {
        [INCREASE]: (state, action) => ({number: state.number + 1}),
        [DECREASE]: (state, action) => ({number: state.number - 1}),
    },
    initialState
)

export default counter;

17.6.2 immer

//spread, 배열 내장 함수 대신 immer를 사용한 불변성 유지 업데이트

//전
({...state, input: data}),

//후
produce(state, draft => {
	draft.input = data
}),

17.7 Hooks를 사용하여 컨테이너 컴포넌트 만들기

17.7.1 useSelector로 상태 조회하기

const result = useSelector(state => state.data.num);

17.7.2 useDispatch를 사용하여 액션 디스패치하기

const dispatch = useDispatch();
dispatch({type : 'TEST_ACTION'});

useDispatch를 사용할 때는 성능 최적화를 위해 useCallback을 함께 사용하는 것을 권장.

17.7.3 useStore를 사용하여 리덕스 스토어 사용하기

const store = useStore();
store.dispatch({type : 'TEST_ACTION'});
store.getState();

17.7.5 useActions 유틸 Hook을 만들어서 사용하기

17.7.6 connect 함수와의 주요 차이점

useSelector를 사용할 때는 성능 최적화를 위해 React.memo를 컨테이너 컴포넌트에 사용해 주어야 함.

16.1 개념 미리 정리하기

16.1.1 액션

상태에 어떠한 변화가 필요하면 액션이란 것이 발생함. 

{
	type : 'TOGGLE_VALUE'
}

16.1.2 액션 생성 함수

액션 객체를 만들어 주는 함수

//일반함수 형태
function addTest(data) {
	return {
    	type : 'ADD_TEST',
        data
    }
}

//화살표함수 형태
const addTest = text => ({
	type : 'ADD_TEST',
    text
});

16.1.3 리듀서

리듀서는 변화를 일으키는 함수. 액션을 만들어서 발생시켜면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아 옴. 그리고 두 값을 참고하여 새로운 상태를 반환해줌.

const initialState = {
	data : 1
};

function reducer(state = initialState, action) {
	switch (action.type) {
    	case ADD : 
        	return {
            	data : state.data + 1
            };
        default :
        	return state;
    }
}

16.1.4 스토어

리덕스를 적용하기 위해 스토어를 만듬. 한 개의 프로젝트는 단 하나의 스토어만 가질 수 있음. 스토어 안에는 현재 애플리케이션 상태와 리듀서가 들어가 있으며, 그 외에 몇 가지 중요한 내장 함수를 지님.

16.1.5 디스패치

스토어의 내장 함수 중 하나. 액션을 발생시키는 것. dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어서 호출함. 이는 리듀서 함수를 실행시켜서 새로운 상태를 만들어 줌.

16.1.6 구독

스토어의 내장 함수 중 하나. subscribe 함수 안에 리스터 함수를 파라미터로 넣어서 호출해 주면 이 함수가 액션이 디스패치되어 상태가   업데이트될 때마다 호출됨.

16.2 리액트 없이 쓰는 리덕스

16.3 리덕스의 세 가지 규칙

16.3.1 단일 스토어

하나의 애플리케이션 안에는 하나의 스토어가 들어 있음.

16.3.2 읽기 전용 상태

상태를 업데이트할 때 기존 객체를 건드리지 않고 새로운 객체를 생성해 주어야 함. (리덕스가 내부적으로 데이터 변경 감지를 위해 얕은 비교 검사를 하기 때문)

16.3.3 리듀서는 순수한 함수

순수한 함수는 다음 조건을 만족해야함.

• 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받음.
• 파라미터 외의 값에는 의존하면 안 됨.
• 이전 상태는 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어서 반환함.
• 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 함.

15.1 Context API를 사용한 전역 상태 관리 흐름 이해하기

15.2 Context API 사용법 익히기

15.2.1 새 Context 만들기

import {createContext} from 'react';

const TestContext = createContext({data: 'black'});

export default TestContext;

15.2.2 Consumer 사용하기

import React from "react";
import TestContext from "../context/test";

const TestBox = () => {
    return (
        <TestContext.Consumer>
            {value =>(
            	<div>value.data</div>
            )}
        </TestContext.Consumer>
    );
};

export default TestBox;

15.2.3 Provider

Provider를 사용하여 Context value 변경

import React from 'react';
import TestContext from "./context/Test";

function App() {
    return (
        <TestContext.Provider value={{data:'red'}}>
			...
        </TestContext.Provider>
    );
}

export default App;

15.3 동적 Context 사용하기

15.4 Consumer 대신 Hook 또는 static contextType 사용하기

15.4.1 useContext Hook 사용하기

children에 함수를 전달하는 Render Props 패턴이 불편하다면, useContext Hook을 사용하여 훨씬 편하게 Context 값을 조회할 수 있음.

15.4.2 static contextType 사용하기

클래스형 컴포넌트에서 Context를 좀더 쉽게 사용하고 싶다면 static contextType을 정의하는 방법이 있음.

14.1 비동기 작업의 이해

14.1.1 콜백 함수
14.1.2 Promise
14.1.3 asnyc/await

화살표 함수에 async/await을 적용할 때는 async () => {}와 같은 형식으로 적용함.

const onClick = async () => {
	try {
    	const response = await axios.get(...);
        setData(response.data);
    } catch(e) {
    ...
    }
};

14.2 axios로 API 호출해서 데이터 받아 오기

14.3 newsapi API 키 발급받기

14.4 뉴스 뷰어 UI 만들기

14.5 데이터 연동하기

userEffect 내부에서 async/await을 사용하고 싶다면, 함수 내부에 async 키워드가 붙은 다른 함수를 반들어 사용해야함.

useEffect(() => {
	const fetchData = async () => {
      setLoading(true);
      try {
        ...
        const response = await axios.get(...);
        setData(response.data.xxx);
      } catch (e) {
      	console.log(e);
      }
      setLoading(false);
    }
    fetchData();
}, [category]);

14.6 카테고리 기능 구현하기

14.7 리액트 라우터 구현하기

리액트 라우터의 Router, NavLink등을 사용하여 라우터 구현

//리액트 라우터 설치
yarn add react-router-dom

14.8 usePromise 커스텀 Hook 만들기