DIL: 모던 리액트 딥 다이브, 5주차-3

스터디: 월간 CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive
오늘 진행: 개인공부

---

DIL-week5-3_2024-04-03

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ---- | -------------------------------------------------- | ----------- | | 5주차 | 9장 | 모던 리액트 개발 도구로 개발 및 배포 환경 구축하기 | 541p~556p |

오늘 읽은 내용을 markdown으로 간단히 메모

---

모던 리액트 개발 도구: Next.js

styled components

• getInitialProps에 async 함수로 Document context 매개변수를 받음. new ServerStyleSheet()로 sheet 생성. document의 renderPage 메서드 사용. enhanceApp, sheet.collectStyles(<App {}>)

MyDocument.getInitialProps = async (
  ctx: DocumentContext
): Promise<DocumentInitialProps> => {
  const sheet = new ServerStyleSheet(); // 인스턴스 생성
  const originalRenderPage = ctx.renderPage; // render 함수를 변수에 저장

  try {
    ctx.renderPage = () =>
      originalRenderPage({
        // ctx.renderPage 재정의 (서버측 랜더링에 사용될 페이지)
        enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />), // 스타일 시트를 수집한다
      });

    const initialProps = await Document.getInitialProps(ctx); // 초기 속성을 가져온다
    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          {sheet.getStyleElement()}
        </>
      ), // 현재 페이지에 사용된 스타일시트 추가
    };
  } finally {
    sheet.seal(); // 마지막으로 seal(): 스타일 시트 수집을 종료하기 위해 호출
  }
};

애플리케이션 코드 작성

• 예제: getServerSideProps로 todo API를 불러와 랜더링하는 코드
• pages: Next.js 예약어 | 폴더 | 내용 | | --- | --- | | pages | 예약어로 지정된 폴더, 파일 기반 라우팅 | | components | 페이지 내부에서 사용하는 컴포넌트를 모아둠 | | hooks | 한땀한땀 훅 | | types | 서버 응답 타입 등, 공통 타입 | | utils | 애플리케이션 전역에서 공용으로 사용하는 유틸성 파일 |
• 파일 기반 라우팅 빼고는 정해진 컨벤션은 없다.
• 관심사 분리만 명확히 되어 있다면? 구조는 팀의 논의사항

결론

• 프로젝트를 구축하는 것은 일임
• 대다수의 서비스가 마이크로 프론트엔드를 지향하기 때문에 구축하는 일이 잦다
• Template repository를 만들 수 있다👍
  • setting에서 - [x] template repository 체크
  • Create a new repository 시, 템플릿 선택
• create-***-app CLI 패키지를 만들어볼 수 있다 (마이크로서비스 지향)

모던 리액트 개발 도구: 깃허브 100% 활용하기

| 서비스 | 내용 | | --------- | -------------------------------------------- | | Package | 이미지 레지스트리 ex) 사내 비공개 라이브러리 | | Project | 프로젝트 관리 like Jira | | Pages | 간단 웹 사이트 | | Codespace | 인공지능 코딩 어시스턴스 서비스 |

Github Action으로 Continuous Integration 환경 구축하기

• Continuous Intergration이란?
  • 코드는 소프트웨어를 구성하는 핵심 요소
  • 여러 개발자들이 지속적으로 코드에 기여
  • 코드 중앙 저장소에서 여러 기여자가 기여한 코드를 지속적으로 빌드하고 테스트해 코드의 정합성을 확인하는 과정
• 정합성 확인은? 자동으로 실행해야 한다
  • 테스트, 빌드, 정적 분석, 보안 취약점 분석

젠킨스 Jenkins

• 과거 CI 환경을 구축하기 위해 자주 쓰인 무료 솔루션
• 번거롭다
  • 설치형, 서버 구축, 서버에 젠킨스 설치, 젠킨스 저장소와 연결
  • 유지보수가 필요해
• 편리하다
  • 플러그인을 통해 기능 통합

깃허브 액션

• 깃허브 SaaS, 깃허브 저장소와 함께 사용할 수 있는 도구
  • 본래 목적은 깃허브 이벤트(push, PR etc)를 트리거로 다양한 작업을 돕는 도구였다
• 유용~ 경제적~(제한적 무료) 빠름~

기본 개념

| 개념 | 내용 | 특징 | | ------ | ----------------------------------------- | ------------------------------------------------------------------------------------------------------- | | runner | 파일로 작성된 깃허브 액션이 실행되는 서버 | 특별히 지정하지 않으면 공용 깃헙 액션 서버를 이용하고, 별도의 러너를 구축해 자체적으로 운영할 수도 있다 | | action | 러너에서 실행되는 하나의 작업 단위 | yaml 파일 작성내용을 하나의 액션으로 볼 수 있음 | | event | 깃헙 액션 실행을 일으키는 이벤트 | 한 개 이상의 이벤트 지정, 브랜치 지정, PR, 이슈, push, schedule(cron 배치) | | jobs | 하나의 러너에서 실행되는 여러 스텝의 모음 | 하나의 액션에서 여러 잡을 생성할 수 있고, (기본)내부 가상머신에서 병렬 실행 | | steps | 잡 내부에서 일어나는 하나하나의 작업 | 셸 명령어나, 다른 액션을 실행할 수도 있다. 병렬x |

• 스텝을 엮어서 잡을 만들고, 여러 개의 잡은 병렬로 실행되고, 잡을 하나 이상 모아둔 것을 액션이라 하며, 액션을 실행하는 것이 러너다.

작성하기

• prettier에 yaml도 include하자
• details 확인
  • 액션의 실행 결과 <= 공개 저장소는 90일, 비공개 저장소는 400일 이후 로그 삭제
• .github/workflow
  • yml, yaml

name: some build
# 액션의 이름, 필수 아님

run-name: ${{ github. actor }} has been added new commit.
# 액션이 실행될 때 구별할 수 있는 타이틀명, 필수 아님
# github.actor를 활용해 누가 트리거했는 지 구별 가능
# 없으면? 풀리퀘 이름 or 마지막 커밋 메시지

on: # 언제 이 액션을 실행할 지 정의
  push: # 이벤트
    branches-ignore: # 브랜치 설정
      - "main"
# 왜 ignore?
# - main 브랜치의 push는? PR 머지 시 발생한다.
# - PR merge 단계에서 이미 CI 통과되었을 것이므로 중복 실행

jobs: # 액션에서 수행할 잡(1개 이상, 병렬), 필수
  build: # 임의 지정 이름, name과 같은 역할, 들여쓰기 지키기
    runs-on: ubuntu-latest
    # 어느 환경에서 해당 작업이 실행될 지 결정: runner
    # 깃허브 제공 서버: ubuntu-latest
    # 커스텀 러너를 쓴다면? 해당 러너명 지정
    # 커스텀 러너 설정은? 저장소 Setting > Actions > Runners에서 추가
    steps: # 잡에서 순차적으로 수행할 작업을 정의
      - uses: actions/checkout@v3
        # 스텝에서 작업을 actions/checkout@v3를 사용해서 작업하겠다.
        # 깃허브 기본 액션, 해당 브랜치의 마지막 커밋을 기준으로 체크아웃 = 최신코드
      - uses: actions/setup-node@v3
        # 스텝에서 작업을 actions/setup-node@v3를 사용해서 작업하겠다.
        # 러너에 Node.js를 설치한다.
        with:
          node-version: 16 # 설치가능한 버전 => 깃헙 액션 docs 보자
      - name: "install dependencies"
        working-directory: ./my-dir/my-app
        # cd 같은 역할, 수행할 작업을 해당 디렉토리에서 수행하겠다
        run: npm ci # 의존성 설치
      - name: "build"
        working-directory: ./my-dir/my-app
        run: npm run build # CI를 위한 작업. 빌드 수행

• 액션 작성
  • pnpm/action-setup: PNPM 사용 시
  • borales/action-yarn: yarn 사용 시
  • actions/github-script: 깃허브 API를 호출해 풀리퀘에 댓글 달기
  • 이미지 최적화, 자동 배포 등 다양한 작업 가능
• 브랜치 보호 규칙
  • 브랜치 보호 규칙을 추가하여, 코드의 정합성을 확보한다.
  • CI가 성공한 코드만 푸시