34일차 / Cloud-Provide, Jest / Cypress / TDD

김혜진·2022년 5월 2일

8주차 커리큘럼

Cloud-Provider

배포를 위한 숲을 그려보자

배포란? (Deployment) => 세상에 공개
접속을 하면 그 기록을 어딘가 저장해놓아야하는데 동시접속자가 많아질수록 메모리는 부족해지게 된다.
얼만큼 빨리 일을 하느냐는 CPU. 빨리 처리하려면 CPU가 많아야 함.
서비스가 대박이 나도 메모리가 없으면 트래픽을 받아주지 못함.
그래서 생겨나기 시작한 회사(ex AWS(아마존 웹서비스), GCP(구글 클라우드 플랫폼), Azure(마이크로소프트 Azure)
컴퓨터를 빌려주고, 사용요금을 지불함.
빌린 컴퓨터는 24시간 yarn dev가 되어있다.
국내에는 NHN Cloud, Naver Cloud가 있음.
이런 서비스들을 Cloud Provider라고 한다.

처음에는 GCP를 쓰다가 서비스가 커지면 AWS를 쓰게 된다. (GCP의 가격이 저렴)
기능은 동일하지만 AWS가 1등업체다보니 더 큰 서비스를 활용하게 되면 지원도 많이 받고 컨퍼런스도 많이 열리고 강의도 많아서 사용하게 됨.
두개를 같이 쓰는 것을 멀티클라우드라고 한다.

GCP 기준 메모리 1GB / 10000원, ASW는 약 5만원~5만 5천원

물리적인 거리가 멀면 핑도 느려지게 됨
그래서 서울 리전을 사용함

방화벽이 있어서 아무 컴퓨터나 접속하지 못하게 막을 수 있음.

가비아 등에서 산 도메인을 DNS를 통해서 IP로 변경시켜줄 수 있음.

정적파일을 만들어서 스토리지에 올려준다.
Static-File Serving
구글이 html,css,js를 제공해주기 때문에 무한으로 트래픽을 받을 수 있음.

서버사이드 렌더링을 위해서는 yarn dev가 필요
모든 페이지가 서버사이드 렌더링은 아님
요청을 분산해주는 로드(부하) 밸런서(분산기) => 요청을 나눠준다.
정적 페이지와 동적 페이지를 나누어서 관리.
그래서 우리는 동적페이지 CPU만 관리해주면 된다.
모든 페이지를 정적페이지로 만들면 좋지만 그럴 수 없기 때문

Jest / Cypress / TDD

배포 이후의 테스트

테스트 ? => 마우스로 클릭하는 것 대신해주기

왜 테스트를 해야할까?
테스트를 다 해봤더라도 연결되어있는 페이지에서 어떤 문제가 생길지 모르기 때문

기능을 검증하는 코드를 만들어야함 => 테스트 코드 : 사람이 클릭하는 것, 행동하는 것을 만드는 것
테스트 코드까지 또 만들려면 할 일이 많아짐

E2E : end to end 끝에서 끝까지 테스트한다.

가장 많이 사용하는 프레임 워크 : Jest

단위테스트에는 Jest

E2E 테스트, 통합테스트에는 Cypress를 사용한다.

yarn add --dev jest @testing-library/react @testing-library/jest-dom

jest.config 파일 생성

// jest.config.js
const nextJest = require('next/jest')

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
})

// Add any custom config to be passed to Jest
const customJestConfig = {
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)