[TIL] 엘리스 SW 엔지니어 트랙 Day 064

📖 오늘 배운 내용 - 2022.01.20

• Proxying API Requests
• MUI
• CI/CD
• Heroku에서 배포
• Firebase

 

📝 Proxying API Requests

• package.json에 "proxy": "http://localhost:3333" 추가
• 리액트는 자기가 해당 주소 값을 가지고 있지 않으면, proxy값을 확인하고 있다면 해당 주소로 요청을 보낸다.

Proxying API Requests in Development | Create React App

 

📝 MUI

 

📝 CI/CD

• CI ⇒ Continuous Integration
• CD ⇒ Continuous Deployment

# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Elice-CI
# 이름. 이후에 CI가 동작하는 과정에서 이름으로 뜸.
on: # 어떤 경우에 아래 동작을 시행할 것인가?
  push: # 코드를 push 할 때랑
    branches: [master]
  pull_request: # PR이 날아올 때 쓴다.
    branches: [master]

jobs: # 실제 돌아갈 동작
  build: # 동작의 이름 (변경 가능)
    runs-on: ubuntu-latest # 우분투 최신 버전으로 돌린다.

    strategy: # 매개변수 이름을 지을 때 주로 사용
      matrix:
        node-version: [12.x, 14.x, 16.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps: # 실제 돌아가는 동작들은 여기서 수행.
      # 저 마이너스가 각각의 동작을 의미함.
      - uses: actions/checkout@v2 # 플러그인 사용.
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}
          cache: "npm"
      - run: npm ci
      - run: npm run build --if-present
      - run: npm test

  test:
    runs-on: ubuntu-latest
    needs: build

    strategy:
      matrix:
        node-version: [12.x, 14.x, 16.x]

    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}
          cache: "npm"
      - run: npm ci
      - run: npm test

• needs: build를 작성하면 build를 선행작업을 수행하고 test가 돌아간다.
• 각각의 단계는 모두 독립적으로 돌아간다. 그래서 위에서 무슨 일이 일어났는지 모른다. 따라서 runs-on을 작성해줘서 어떤 환경에서 실행시킬지 명시해줘야 된다.

 

📝 Github Actions + Heroku

name: Elice-CI CD

on:
  push:
    branches: [master]
  pull_request:
    branches: [master]

jobs:
  test-and-deploy:
    runs-on: ubuntu-latest

    steps:
    # 가장 먼저, 저장소에 있는 파일을 가져오도록 해야 함. -> checkout
    # Node.js를 다운 받아야 함. (버전을 지정해서)
    # 의존성이 존재할테고, 그걸 받아야 한다.(npm ci)
    # 테스트를 돌려서 확인하자
    # 이제 배포 돌리면 될 것 같다.
      - uses: actions/checkout@v2
      - name: Use Node.js
        uses: actions/setup-node@v1
        with:
          node-version: "14"
      - name: Install Dependencies
        run: npm ci
      - name: Run tests
        run: npm test
      - name: Deploy to Heroku
        uses: AkhileshNS/heroku-deploy@v3.12.12
        with:
          heroku_api_key: ${{ secrets.HEROKU_API_KEY }}
          heroku_email: "****@****.com"
          heroku_app_name: "elice-heroku"

• settings -> Secrets -> new repository secret에 heroku api 키 저장하고 ${{ secrets.HEROKU_API_KEY }}을 사용
• 개발 → 커밋 → github → Actions → Test → Heroku

 

📝 Firebase

• 모든 백엔드 기능을 대체할 수 없다.

 

📕 설정 방법

• 플젝생성
• npm i firebase
• npm i -g firebase-tools
• Firestore Database 생성 -> 컬렉션 시작
• firebase login → y -> 로그인
• firebase init 후 설정 고르기
• npm run build
• firebase deploy => 배포 완료

 

💡 오늘 깨달은 것

• 벌써 마지막 강의라니ㅠㅠㅠㅠ 시간 진짜 빠르다.
• 엘리스 SW 엔지니어 트랙의 많은 기간을 함께한 이고잉 코치님, 김병철 코치님 감사합니다 :) (병철 코치님, 이 글도 찾아보시겠죠...? ㅋㅋㅋㅋㅋ)
• 오늘로서 수업이 끝나니까 시간이 참 빠르기도 하면서 두려움이 찾아왔다. 4주 동안의 리액트 프로젝트 후 취업 시장에 뛰어들고 현업에서 개발해야 된다는 생각 때문인 거 같다.
• 지금의 실력으로 취업을 할 수 있을까? 현업에서 잘할 수 있을까?라는 막연한 걱정이 든다.
• 이러한 초조함과 걱정을 없애는 최고의 방법은 공부뿐이다. 깊게 공부하고 내 것으로 만들어서 자신감으로 충만해지자!

 

📌 참고

• MUI: The React component library you always wanted