코멘토 React 실무 PT 5주차 - Mobx와 AWS 배포

LIVE로 배우는 실무 PT ㅣ 코멘토

 

<5주차 요약 >

 

1. React 상태관리

React 상태 관리가 필요한 이유

부모 - 자식관계로 이루어진 트리구조에서
데이터 전달을 할 때 상-하로 접근해야하는데 컴포넌트에서 연결관계가 멀리에 있는 데이터가 필요할 때 기계적인 props전달을 무수히 해야하고 그만큼 코드량이 증가해진다.

전역상태관리를 쓰면 state를 관리하는 중앙 store를 두어 어디서든 direct하게 접근할 수 있다.

 

 

언제 도입해야할까? 

prop drilling이 심화되어 기계적 코드가 반복될 때 도입을 고민해야한다.

프로젝트의 규모에 따라 어떤 상태관리방식을 도입할지 고민해야 한다.

규모가 작다면 비교적 쉽게 적용할 수 있는 context API, 규모가 크고 확장성이 있고 비동기처리가 필요하다면 redux, thunk, saga까지 고려가 필요하다.

 

 

알아두면 좋은 개념 - Context, Provider

 

 

알아두면 좋은 개념 - Consumer

 

 

알아두면 좋은 개념 - useContext

 

알아두면 좋은 개념 - useReducer

 

알아두면 좋은 개념 - Flux

 

 

2. Mobx

• Mobx는 Redux와 비슷한 종류의 State관리 라이브러리 - 객체지향적.
• ES6에서 추가된 Class를 이름뿐인 Class가 아니라 객체지향적으로 사용하고 개발하는 것을 권장하고 있음
• 번잡한 보일러플레이트 코드들이 필요한 Redux와 달리 데코레이터(annotation)제공으로 코드가 깔끔&간결

 

 

1. mobX 관련 라이브러리 설치

Mobx를 functional component용으로 사용하려면 mobx-react-lite를 설치해야함

• 어노테이션을 위한 라이브러리
  • @babel/plugin-proposal-class-properties
  • @babel/plugin-proposal-decorators

$ yarn add mobx mobx-react mobx-react-lite
$ yarn add @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators --dev

또는 

$ npm i mobx mobx-react mobx-react-lite
$ npm i -d @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators --dev

 

2. 데코레이션 관련 셋팅 (/.babelrc 생성)

//.babelrc

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

 

tsconfig.json에     "experimentalDecorators": true  추가한다.

 

 

 

stores 폴더 생성 후, 각각의 객체store 생성

CampStore에서 다룰 변수들을 선언.

이때 선언한 변수들이 실제 store역할을 하려면 앞에 @observable을 달아줘서 관찰대상으로 지정.

지정하게 되면 변수 값이 바뀌면 view에게 알림.

 

최근버전부터 반드시 constructor() { makeObservable(this); }   추가해야함.

 

원래는 각각의 함수 앞에 @action 걸어줘야함.

 

export할 때 createContext를 해서 context를 추가한다.

Store class를 new해서 하나를 생성한 뒤 context로 만들어 전역처리.

 

 

 

설정한 store을 실제 사용하는 컴포넌트로 가서 세팅해준다.

useContext를 이용해서 원하는 store을 불러온다.

export할 때 observer로 감싸주면 컴포넌트가 관찰대상으로 지정됨.

*항상 반영해야함

 

 

 

3. AWS 배포

 

 

퍼블릭 액세스 차단 풀고, 아래 퍼블릭 상태 체크

속성 -&amp;amp;amp;amp;amp;amp;gt; 정적 웹 사이트 호스팅 으로 이동

저장하면 정적 웹사이트 호스팅이 된 S3 저장공간이 됨.

 

외부에서 접근 가능한 정책을 설정 해야함

권한 -&amp;amp;amp;amp;amp;amp;gt; 버킷 정책

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::stage.whattodo.com/*"
        }
    ]
}

빌드된 html파일을 올려야함

 

 

IAM 대시보드 이동.

4단계까지 스킵 후 생성

AWS_ACCESS_KEY_ID=액세스 키 ID,

AWS_SECRET_ACCESS_KEY_ID=비밀 액세스 키 복사.

github에서 환경변수 설정.

 

Settings -&amp;amp;amp;amp;amp;amp;gt; Secrets -&amp;amp;amp;amp;amp;amp;gt; Actions

AWS 액세스 키 환경변수 추가

 

Github Page 세팅 제거

chore: gitbuh page 세팅 제거 · 2jaebbang/whatToDo@6f2315b

 

Github Page S3 배포 적용

name: React app deployement

on:
  push:
    branches: [ master ]

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: checkout v2
        uses: actions/checkout@v2

      - name: Install Dependence
        run: yarn install

      - name: Build app
        run: yarn build
        env:
          REACT_APP_SERVER_URL: ${{ secrets.SERVER_URL }}

      - name: Deploy To s3
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          
        run: |
          aws s3 cp \
            --recursive \
            --region ap-northeast-2 \
            build s3://stage.whattodo.com

 

 

deploy가 정상적으로 되었다면 위와 같이 파일들이 업로드돼 있다.

속성 -&amp;amp;amp;amp;amp;amp;gt; 정적 웹 사이트 호스팅 에서 생성된 S3 정적 웹사이트 주소확인

 

 

 

2. Cloudfront로 CDN 설정

CloudFront는 AWS에서 제공하는 CDN 서비스

• 캐싱을 통해 사용자에게 좀 더 빠른 전송속도를 제공함을 목적으로 함.
• CloudFront는 전 세계 이곳저곳에 Edge Server(Location)을 두고 Client에 가장 가까운 Edge Server를 찾아 Latency를 최소화시켜 빠른 데이터를 제공.

+ Cloudfront 설정할 때, SSL 인증서도 생성해야함.

+ 주의할점

• 캐싱이 되어 웹사이트가 바뀌어도(HTML,CSS,JS) 바로 반영이 안됨
• invalidate(무효화)를 해줘야 정적 웹사이트 변경 사항이 반영됨.

CloudFront 이동 후 배포생성

원본 도메인 주소는 S3에서 생성된 정적 웹 페이지 호스팅 주소 복붙.

  

도메인 추가시에는 위의 항목을 추가해야함.

S3 정적 웹사이트 변경 사항이 반영되려면 수동으로 무효화를 진행해야함.

github page actions에 코드 추가해서 자동화할 수 있음.

 

 

dev와 main으로 분리하여 개발환경과 배포환경을 따로 배포하도록 설정을 추가한다.

아래와 같이 새로운 yml 파일을 추가하고 위의 과정을 반복하면 된다.

 

 

 

4. 프로젝트를 하면서 알게 된 점

1. string형태의 html렌더링

dangerouslySetInnerHTML={{ _html: review.content }}

 

2. useParams

react - useParams