8주차 커리큘럼

Day 34

1교시

특정 컴퓨터에서 frontEnd Server를 yarn dev로 실행을 시킨뒤 24시간 동안 켜놓아야지 누군가가 접속을 할 수 있다.

추가로 누군가가 접속할 때의 네트워크 설정을 해주면
배포가 완료된다.

LB LoadBalancer 부하분산기를 설치하여
브라우저에서 도메인 주소를 입력하면 wjqthrdl LB로 간다.

한명씩 접속을 시켜준다. - round-robin

lesat connection 서버에서 접속수가 적은 쪽으로

접속자가 많으면 프론트엔드서버를 2개를 놓아 부하를 분산시키는데, 접속량이 더 많아지면 더 많이 늘려야하는데,
요즘은 배포를 하기위한 컴퓨터를 재공해주는 회사들이 생겨났다. ( amazon: AWS, google: GCP, microsoft: Azure)

그래서 요즘은 개발과 운영을 같이 할 수 있다.
Development + Operations => DevOps
DevOps 한다라는 것은 클라우드 한다라고 보면 된다.(ex. AWS, GCP, Azure )
제공해주는 업체 - Cloud Provider

배포할 때 LB에서 IP주소를 주는데 도메인 주소로 바꿔서 사용한다. - DNS

통제하고 있는 인스턴스 그룹을 만들고, 그 그룹을 연결시켜주는 LB를 만들고 그 주소를 DNS에 등록하여 도메인을 만들고, LB를 통해 페이지에 접속한다.

html, css, js 를 미리 만들어 놓는다.
그 파일을 Cloud-Storage에 업로드를 시켜둔다.
그후 페이지를 열면 자동으로 다운로드받아 열리게끔 해준다.

1. html,css,js 를 yarn build 를 통해 미리 코드를 만들어 둔다. 그 코드를 Storage에 끌어서 업로드. 하여
   클라우드 프론트에 주소를 입령하면, CloudFornt에 연결해준다.

2. LB를 통해서 부하를 분산시켜 배호파는 방식

• 단점: 컴퓨터가 24시간 켜져있어야한다.
  모니터링을 해주어야한다.

배포1

배포1의 방식은 서버라는 개념이 없다.
그래서 무한 트래픽이 가능하다.
서버관리를 따로 해줄 필요는 없음.

• SSG Stacric Site Generation - 정적파일

배포2

배포1의 방식은
정적인 파일들만 배포가 가능하다.
즉, 동적인 파일은 배포가 불가능하다.
매번 아이디가 바뀐다거나..
ex) dynamic routing , Open Grapth

이럴 때는 배포2번의 방식을 사용해야한다.

SSR 서버사이드렌더링을 이용

그래서 정적주소면 Cloud-Sorage로 가고
동적 주소면 LB로 간다.

정적파일들 까지 LB를 통해 받아오면서 까지 트래픽을 많이 잡아먹을 필요가 없기 때문에, 스토리지에 저장하는 것이다.

2교시

테스트?

마우스로 클릭하는거 대신해주기

테스트를 할 때 처음 배포할 때 하나씩 다 클릭하면서 테스트를 끝내고 배포를 했는데 두번 째 배포를 할 때, 기능이 추가되거나, 오류가 발생하면 하나씩 또 테스트를 해야하는 번거러움이 있다.

그래서 테스트코드를 만들어서 한번에 테스트를 한다.

시나리오 테스트 - End to End 테스트( 기능을 처음부터 끝까지 테스트 해보는 것 )

Jest

1. 설치

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

내가 쓰고 있는 리액트 버전이 낮아서
다운그래이드 해준다.

jest.config.js 파일 만들어서 붙여넣기

이런식으로 테스트코드 파일을 만들어준다.

next.js 에서는 Pages안에 테스트를 넣어주면 주소가 생성되기 때문에 가장 밖에다가 만들어준다.

• eslint 추가
  

• 코드 작성
  

• package.json scripts 추가

• 테스트 yarn test

잘 실행되는 것을 볼 수 있다.

테스트를 그룹으로 묶어 테스트 해볼 수 있다.

tsx 파일 테스트하기

snapshot Test

컴포넌트가 기존이랑 바뀐게 없는지 비교해보기

이렇게 쓰면

스냅샷이 자동으로 만들어진다.
코드가 바뀌면

알려준다.

3교시

cypress

하고 yarn cypress를 입력하면

폴더가 자동으로 생성이 되고.

cypress 창이 켜진다.

테스트할 폴더와, 파일을 만들어준다

해주면 터미널창에서 테스트 할 수 있다.