[TIL] Day36

은채·2022년 6월 27일
0

코드캠프 TIL

목록 보기
35/43

8주차 커리큘럼

6월 27일 학습목표

배포 프로세스

배포 : 내가 만든 서비스를 다른 사람들도 접속할 수 있게 만들어 주는 것
프론트엔드 서버 프로그램을 24시간 켜놓고, 종료하지 않아 접속하지 않은 사람들이 html, css, js를 다운받을 수 있게 해주어야 한다
서버컴퓨터는 일반 노트북보다는 cpu, memory가 클 뿐 크게 다르지는 않다

불가피하게 컴퓨터나 서버가 종료될 상황을 대비해서 컴퓨터 2대 이상에 프로젝트를 다운받아 서버를 실행시켜 둔다


부하 분산기(LB)라는 네트워크 장비를 통해 사용자의 접속을 관리

<관리 설정>

round-robin (원처럼 돌아가며 트래픽 관리)


연결이 적은 곳으로 보내어 트래픽 관리

접속자가 폭발적으로 증가했을때? 장비 추가만 기다려서는 안된다
네트워크 장비를 가지고 있는 대형 회사들의 도움을 받자 (amazon-AWS, google-GCP, microsoft-Azure등)

-> 클라우드 컴퓨터를 대여하여 접속할 수 있는 권한을 받는다. 나의 컴퓨터와는 무관!

과거에는 개발자 -> 배포 담당자가 있었지만
현재는 개발자가 배포(및 운영)까지 담당할 수 있다 : DevOps (데브옵스)

SSR 배포

중요한 것은 배포 컴퓨터, 혹은 LB의 IP주소!
아이피 주소를 외울 수 없기 때문에 구입한 도메인 주소와 연결 -> 도메인 주소에 접속하게 되면 LB를 거쳐 필요한 html, css, js를 받아오게 된다

✌️해야할 일
인스턴스 그룹 생성
LB 생성
LB의 IP 주소를 DNS에 등록
각 인스턴스들에는 방화벽을 만들어(기본) IP주소로 직접 접근하는 것을 막아야한다

인스턴스 컴퓨터들의 사양 및 접속 등을 꾸준히 관리해야 하는 배포방법

SSG 배포 (Static Site Generation)

또 다른 방법

클라우드에 h-c-j(정적파일 - 변함이 없는 파일들 => 동적으로 변하는 파일은 불가능)를 미리 만들어(yarn build) 업로드해두면, 브라우저에서 접속시 바로 다운로드 될 수 있게 진행 할 수도 있음


DNS에서 cloudFront로 연결한다 => 스토리지에 접속하고 다운로드 받아 브라우저로 전달

인스턴스 컴퓨터가 켜져있지 않아도 되는 배포 방법
서버관리라는 것이 없다. 컴퓨터의 cpu, 메모리 등을 모니터링 할 필요가 없고 무한 트래픽이 가능하다. 클라우드 회사에서 관리해주니까

정적파일만 가능하다. => 페이지 이름이 바뀌지 않는 것 /boards
다이나믹 라우팅 /boards/[boardId], /markets/[productId]
혹은 OpenGraph 등은 미리 만들어 둘 수 없기 때문에 사용할 수 없다

DNS에서 정적 주소면 cloudFront로 동적주소면 LB로 가는 분기점을 만들어준다
정적파일은 storage로 분리
트래픽이 많지 않은경우 LB를 활용한 배포방식만 사용하기도 한다 (대신 yarn dev 항상 켜놓기)

테스트


현재까지 만들었던 코드에 검증하는 코드를 더 만들어야 한다 ㅠㅠ

오 ㅐ ?? 🥺
새로운 기능이 추가되면서 새로운 기능 뿐만아니라 기존에 있던 기능과의 영향까지 모두 테스트를 해야하기 때문에
사람이 직접 하나씩 버튼을 누르면서 테스트하기 어렵다

버튼을 누를 때마다의 함수들을 코드로 작성해놓고 명렁어를 입력하면, 모두 한 번씩 실행된다
깃에 커밋하기 전에 기능을 한 번씩 실행해보고 추가할 수 있도록 한다

새 기능으로 인해 기존 기능이 에러나게 되면 커밋도 실패 => 수정 후 재커밋 => 안전한 코드 작성

🔥따라서.. 기능 하나를 추가한다는 것은..
CRUD + LIST + 서브 기능 (페이지네이션, 검색 등) + 각 기능 별 테스트 코드 + 웹 / 모바일 / 태블릿 화면그리기의 과정을 거쳐야한다. 개발 ⭐️일정을 관리⭐️하는 데 꼭 고려할 것!!

테스트하는 방법

Jest : 테스트용 프레임워크

셋팅하기

jest
nextJs jest ⭐️
Jest and React Testing Library

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

우리는 react18을 사용하지 않고 있으니 버전 변경
"@testing-library/react": "^12.1.2"

jest.config.js 파일 만들고 docs 내용 복사

// 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)
  1. 함수 테스트

테스트 파일구조?

page로 인식될 수 있으니 바깥으로 만든다


eslint 오류나면 "jest/globals"추가


함수 테스트


pack.json에 명령어 추가하기


터미널에 yarn test. 패스!
실패하면 깃 커밋안되게 허스키와 연결할 수도 있음

  1. 컴포넌트 렌더링 테스트

컴포넌트의 길이가 많아지면 매우 비효율적

  1. 스냅샷테스트

처음 렌더링했을 때를 캡쳐해놓고, 2번째부터는 달라진 것이 있는지 등을 비교해보는 테스트. 기존과 같다는 것은 pass.
달라진 부분은 사람이 직접 확인

  1. E2E test

pack.json 에 "cypress": "cypress open" 추가하기
yarn cypress 해서 만들어진 곳에서 기초 설정을 하면 만들어지는 폴더에서 테스트

사용자의 행동을 코드로 작성해본다
테스트해보면?

에러!

터미널을 나누어서 yarn dev를 해준뒤 yarn cypress

profile
반반무마니

0개의 댓글