CSR( Cliend Side Rendering)

• CSR의 경우 프론트서버가 없기 때문에 CI만 구축
• 구축 절차
  1. github action을 사용하고 eslint를 적용하여 push 전에 eslint 규약에 맞지 않으면 push가 되지 않도록 함
  2. 테스트 진행
     • 유닛테스트( JEST)
     • 통합테스트( JEST)
     • E2E 테스트( Cypress)
  3. 프로젝트 빌드
  4. AWS S3에 업로드
     • 업로드 후 S3에서 index.html에 접근하여 코드가 실행되도록 설정

SSR( Server Side Rendering)

• SSR의 경우 프론트서버가 존재하기 때문에 백엔드와 같이 CI/CD까지 구축( Nextjs 기준)
• 구축 절차
  1. github action을 사용하고 eslint를 적용하여 push 전에 eslint 규약에 맞지 않으면 push가 되지 않도록 함
  2. 테스트 진행
     • 유닛테스트( JEST)
     • 통합테스트( JEST)
     • E2E 테스트( Cypress)
  3. 프로젝트 빌드
  4. AWS EC2에 배포
     • 우분투서버에서 빌드하고 빌드 된 코드를 PM2와 같은 라이브러리를 사용하여 실행

빌드

빌드란 보통 webpack과 같은 모듈 번들링을 사용해서 트랜스 컴파일링 작업을 빌드라고 한다. 예를 들어, ES5 혹은 타입스크립트와 같은 언어는 브라우저에서 바로 읽어서 처리가 불가능하므로 자바스크립트로 변환이 이루어져야 한다. 이런것들을 webpack 혹은 tsc를 사용하여 트랜스컴파일을 진행하는것을 빌드라고 한다

테스트

유닛, 통합, e2e 테스트는 각각 범위가 다르며 목적도 조금씩 다르다. 테스트로직은 국소부분의 유닛테스트를 관리하거나 e2e 테스트를 도입할 여력이 있는 팀에서 도입을 고려하는것을 추천한다. 유닛, 통합에 대해서는 중요한 비지니스 로직에만 선택적으로 적용하고 모든 부분에 적용할 필요는 없다고 생각한다. 각 팀원이 커밋하는 시점에 테스트를 돌린다면 비교적 간단하고 빠르게 테스트 할 수 있는 필수 테스트만 돌리고 e2e의 경우 테스트 시간도 오래 걸리고 범위도 넓기 때문에 스테이딩 배포에 실시하는게 낫다고 본다. 유닛테스트의 경우도 범위에 따라 테스트 시점이 달라져야 한다고보고 중요한건 너무 빈번한 테스트 때문에 작업에 딜레이가 생겨서 안된다고 보며 간단하고 필수적인 부분은 commit 시점에 체크하고 범위가 넓다면 브런치단위로 병합시점에 하는게 낫다고 본다.( 시니어 프론트엔드 개발자 의견)

참고

React Test 시리즈

초보자를 위한 React Test