Update 마님.md

Author: ahyeon-jung

04/마님.md

@@ -176,10 +176,223 @@ console.log(dom.window.document.querySelector('p').textContent)  // "Hello World
 3. 함수나 모듈의 실제 반환 값을 적는다
 4. 3번의 기대에 따라 2번의 결과가 일치하는지 확인한다
 5. 기대하는 결과를 반환한다면 테스트는 성공이며, 만약 기대와 다른 결과를 반환하면 에러를 던진다
+- Node.js 기본 제공 assert 활용
+```
+const assert = require('assert')
+
+function sum(a, b) {
+  return a + b
+}
+
+assert.equal(sum(1, 2), 3)
+assert.equal(sum(2, 2), 3)  // AssertionError
+```
+좋은 테스트 코드는 다양한 테스트 코드가 작성되고 통과하는 것뿐만 아니라 어떤 테스트가 무엇을 테스트하는지 일목요연하게 보여주는 것도 중요
+- Jest 테스팅 프레임워크 사용
+```
+function sum(a, b) {
+  return a + b
+}
+
+module.exports = {
+  sum,
+}
+
+// math.test.js
+const { sum } = require('./math');
+
+test('두 인수가 덧셈이 되어야 한다.', () => {
+  expect(sum(1, 2)).toBe(3)
+})
+
+test('두 인수가 덧셈이 되어야 한다.', () => {
+  expect(sum(2, 2).toBe(3)
+})  // 에러
+```
 ### 8.2.3 리액트 컴포넌트 테스트 코드 작성하기
+1. 컴포넌트를 렌더링한다
+2. 필요하다면 컴포넌트에서 특정 액션을 수행한다
+3. 컴포넌트 렌더링과 2번의 액션을 통해 기대하는 결과와 실제 결과를 비교한다
+```
+import Reac from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App/>);
+  const linkElement = screen.getByTest(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+})
+```
+- getBy..
+인수의 조건에 맞는 요소를 반환
+
+해당 요소가 없거나 두 개 이상이면 에러를 발생
+
+복수 개를 찾을 경우 getAllBy...를 사용
+
+- findBy...
+getBy...와 유사하나 Promise를 반환
+
+비동기로 찾으며 1000ms의 타임아웃 기본값
+
+두 개 이상이면 에러를 발생시키며 findAllBy...를 활용
+
+비동기 액션 이후에 요소를 찾을 때 사용
+- queryBy...
+인수의 조건에 맞는 요소를 반환하는 대신, 찾지 못한다면 에러가 아닌 null을 반환
+
+복수일 경우 queryAllBy... 활용
+#### 정적 컴포넌트
+```
+import { render, screen } from '@testing-library/react';
+
+import StaticComponent from './index';
+
+beforeEach(() => {  // 각 테스트(it)를 수행하기 전에 실행하는 함수
+  render(<StaticComponent />)
+})
+
+describe('링크 확인', () => {  // 비슷한 속성을 가진 테스트를 하나의 그룹으로 묶는 역할. describe in describe 가능
+  it('링크가 3개 존재한다.', () => {
+    const ul = screen.getByTestId('ul');
+    expect(ul.children.length).toBe(3)
+  })
+
+  it('링크 목록의 스타일이 square다.', () => {  // it은 test의 alias
+    const ul = screen.getByTestId('ul');
+    expect(ul).toHaveStyle('list-style-type: square;')
+  })
+})
+
+describe('리액트 링크 테스트', () => {
+  it('리액트 링크가 존재한다.', () => {
+    const reactLink = screen.getByText('리액트');
+    expect(reactLink).toBeVisible();
+  })
+
+  it('리액트 링크가 올바른 주소로 존재한다', () => {
+    const reactLink = screen.getByText('리액트');
+    expect(reactLink.tagName).toEqual('A');
+    expect(reactLink).toHaveAttribute('href', 'https://reactjs.org')
+  })
+})
+
+describe('네이버 링크 테스트', () => {
+  it('네이버 링크가 존재한다.', () => {
+    const naverLink = screen.getByText('네이버');
+    expect(naverLink).toBeVisible();
+  })
+
+  it('네이버 링크가 올바른 주소로 존재한다', () => {
+    const naverLink = screen.getByText('네이버');
+    expect(naverLink.tagName).toEqual('A');
+    expect(naverLink).toHaveAttribute('href', 'https://naver.com')
+  })
+
+  it('네이버가 같은 창에서 열려야 한다.', () => {
+    const naverLink = scree.getByText('네이버');
+    expect(naverLink).not.toHaveAttribute('target');
+  })
+})
+```
+#### 동적 컴포넌트
+- 사용자가 useState를 통해 입력을 변경하는 컴포넌트
+```
+import { fireEvent, render } from '@testing-library/react';
+import useEvent from '@testing-library/user-event';
+
+import { InputComponent } from '.';
+
+describe('InputComponent 테스트', () => {
+  const setup = () => { // 현재 파일의 모든 테스트가 렌더링과 button, input을 필요로 하므로 하나의 함수로 묶어둠
+    const screen = render(<InputComponent/>);
+    const input = screen.getByLabelText('input') as HTMLInputElement
+    const button = screen.getByText(/제출하기/i) as HTMLButtonElement
+    return {
+      input,
+      button,
+      ...screen,
+    }
+  }
+
+  it('input의 초깃값은 빈 문자열이다', () => {
+    const { input } = setup()
+    expect(input.value).toEqual('')
+  })
+
+  it('input의 최대 길이가 20자로 설정돼 있다', () => {
+    const { input } = setup()
+    expect(input).toHaveAttribute('maxlength', '20')
+  })
+
+  it('영문과 숫자만 입력된다.', () => {
+    const { input } = setup()
+    const inputBalue = '안녕하세요123'
+    userEvent.type(input, inputValue)  // 사용자가 타이핑하는 것을 흉내내는 메서드
+    expect(input.value).toEqual('123')
+  })
+
+  it('아이디를 입력하지 않으면 버튼이 활성화되지 않는다', () => {
+    const { button } = setup()
+    expect(button).toBeDisbaled()
+  })
+
+  it('아이디를 입력하면 버튼이 활성화된다', () => {
+    const { button, input } = setup()
+
+    const inputValue = 'helloWorld'
+    userEvent.type(input, inputValue)
+
+    expect(input.value).toEqual(inputValue)
+    expect(button).toBeEnabled()
+  })
+
+  it('버튼을 클릭하면 alert가 해당 아이디로 표시된다', () => {
+    const alertMock = jest
+      .spyOn(window, 'alert')  // 어떠한 특정 메서드를 오염시키지 않고 실행이 됐는지, 어떤 인수로 실행됐는지 등 실행과 관련된 정보만 얻고 싶을 때 사용, alert를 구현하지 않고 해당 메서드가 실행됐는지만 관찰
+      .mockImplementation((_: string) => undefined)  // Node.js 환경에는 window.alert가 존재하지 않으므로 해당 함수를 모의 함수로 구현
+
+    const { button, input } = setup()
+    const inputValue = 'helloworld'
+
+    userEvent.type(input, inputValue)
+    fireEvent.click(button)
+
+    expect(alertMock).toHaveBeenCalledTimes(1)
+    expect(alertMock).toHaveBeenCalledWith(inputValue)
+  })
+})
+```
+- 비동기 이벤트가 발생하는 컴포넌트
+```
+jest.spyOn(window, 'fetch').mockImplementation(
+  jest.fn(() =>
+    Promise.resolve({
+      ok: true,
+      status: 200,  // 모든 서버 오류 케이스 작성 필요
+      json: () => Promoise.resolve(MOCK_TODO_RESPONSE),
+    }),
+  ) as jest.Mock
+}
+```
+MSW(Mock Service Worker): Node.js나 브라우저에서 모두 사용할 수 있는 모킹 라이브러리
+
+브라우저에서는 서비스 워커를 활용해 실제 네트워크 요청을 가로채는 방식으로 모킹을 구현
+
+Node.js 환경에서는 https나 XMLHttpRequest의 요청을 가로채는 방식으로 작동
 ### 8.2.4 사용자 정의 훅 테스트하기
+react-hooks-testing-library를 활용해 훅 테스트
 ### 8.2.5 테스트를 작성하기에 앞서 고려해야 할 점
+테스트 커버리지: 해당 소프트웨어가 얼마나 테스트됐는지를 나타내는 지표 
+
+테스트 커버리지가 높다고 만능은 아니며 프론트의 경우 TDD로 모든 케이스를 커버하긴 불가능하며, 빠른 진행을 위해 QA에 의존할 수 있음
+
+테스트 코드 최우선 과제는 애플리케이션에서 가장 취약하거나 중요한 부분을 파악하는 것 ex. 결제
 ### 8.2.6 그 밖에 해볼 만한 여러 가지 테스트
+- Unit Test: 각각의 코드나 컴포넌트가 독립적으로 분리된 환경에서 의도된 대로 정확히 작동하는지 검증하는 테스트
+- Integration Test: 유닛 테스트를 통과한 여러 컴포넌트가 묶여서 하나의 기능으로 정상적으로 작동하는지 확인하는 테스트
+- End to End Test: E2E 테스트. 실제 사용자처럼 작동하는 로봇을 활용해 애플리케이션의 전체적인 기능을 확인하는 테스트  // Cypress
 ### 8.2.7 정리
 
 # 09. 모던 리액트 개발 도구로 개발 및 배포 환경 구축하기
@@ -193,15 +406,71 @@ console.log(dom.window.document.querySelector('p').textContent)  // "Hello World
 ### 9.1.7 정리
 ## 9.2 깃허브 100% 활용하기
 ### 9.2.1 깃허브 액션으로 CI 환경 구축하기
+CI(Continuous Integration): 여러 기여자가 기여한 코드를 지속적으로 빌드하고 테스트해 코드의 정합성을 확인하는 과정
+
+CI는 저장소에서 코드의 변화가 있을 때마다 전체 소프트웨어의 정합성을 확인하기 위한 테스트, 빌드, 정적 분석, 보안 취약점 분석 등의 작업을 자동으로 실행함
+
+과거 젠킨스Jenkins를 사용하였으며 현재 깃허브 액션이 대안으로 사용됨
+
+깃허브 저장소를 기바능로 깃허브에서 발생하는 다양한 이벤트를 트리거 삼아 다양한 작업을 할 수 있게 도와줌 
+- 깃허브의 어떤 브랜치에 푸시가 발생하면 빌드를 수행
+- 깃허브의 특정 브랜치가 메인 브랜치를 대상으로 풀 리퀘스트가 열리면 빌드, 테스트, 정적 분석을 수행
+#### 깃허브 액션의 기본 개념
+- 러너: 파일로 작성된 깃허브 액션이 실행되는 서버. 특별히 지정하지 않으면 공용 깃허브 액션 서버를 이용하며, 별도의 러너를 구축해 자체적으로 운영 가능
+- 액션: 러너에서 실행되는 하나의 작업 단위. yaml 파일로 작성된 내용을 하나의 액션이라 볼 수 있음
+- 이벤트: 깃허브 액션의 실행을 일으키는 이벤트. 필요에 따라 한 개 이상의 이벤트 지정 가능. 특정 브랜치를 지정하는 이벤트도 가능.
+  - pull_request: PR과 관련된 이벤트. PR이 열리거나, 닫히거나, 수정되거나, 할당되거나, 리뷰 요청되는 등의 PR과 관련된 이벤트
+  - issues: 이슈와 관련된 이벤트. 이슈가 열리거나, 닫히거나, 삭제되거나, 할당되는 등 이슈와 관련된 이벤트
+  - push: 커밋이나 푸태그가 푸시될 때 발생하는 이벤트
+  - schedule: 저장소에서 발생하는 이벤트와 별개로 특정 시간에 실행되는 이벤트를 의미
+  - 5 4 * * *: 매일 4시 5분에 실행. 분, 시간, 일, 월, 요일 순으로 표현. *는 모든 값을 의미
+  - jobs: 하나의 러너에서 실행되는 여러 스텝의 모음. 하나의 액션에서 여러 잡을 생성할 수 있으며 특별히 선언한 게 없다면 내부 가상머신에서 각 잡은 병렬로 실행
+  - steps: 잡 내부에서 일어나는 하나하나의 작업. 셀 명령어나 다른 액션을 실행할 수도 있음. 병렬X
 ### 9.2.2 직접 작성하지 않고 유용한 액션과 깃허브 앱 가져다 쓰기
+#### 깃허브에서 제공하는 기본 액션
+- actions/checkout: 깃허브 저장소를 체크아웃하는 액션. 저장소를 기반으로 작업할 때 반드시 필요. 일반적으로 아무런 옵션없이 사용해 해당 액션을 트리거한 최신 커밋을 불러오지만 ref를 지정해 특정 브랜치나 커밋을 체크아웃할 수 있음
+- actions/setup-node: Node.js를 설치하는 액션. Node.js를 사용하는 프로젝트에 반드시 필요. node.js 버전 지정 가능
+- acitons/github-script: GitHub API가 제공하는 기능을 사용할 수 있도록 도와주는 액션
+- actions/stale: 오래된 이슈나 PR을 자동으로 닫거나 더 이상 커뮤니케이션하지 못하도록 닫음
+- actions/dependency-review-action: 의존성 그래프에 대한 변경. package.json, package-lock.json, pnpm-lock.yaml 등의 내용이 변경됐을 때 실행되는 액션
+- github/codeql-action: 깃허브의 코드 분석 솔루션인 code-ql을 활용해 저장소 내 코드의 취약점을 분석해줌
+#### calibreapp/image-actions
+저장소에 있는 이미지를 최적화하는 액션
+
+PR로 올라온 이미지를 sharp 패키지를 이용해 거의 무손실로 압축해서 다시 커밋해줌
+#### lirantal/is-website-vulnerable
+특정 웹사이트를 방문해 해당 웹사이트에 라이브러리 취약점이 존재하는지 확인하는 깃허브 액션
+#### Lighthouse CI
+구글에서 제공하는 액션. 웹 성능 지표인 라이트하우스를 CI를 기반으로 실행할 수 있도록 도와주는 도구
+
+프로젝트의 URL을 방문해 라이트하우스 검사를 실행
 ### 9.2.3 깃허브 Dependabot으로 보안 취약점 해결하기
+#### package.json의 dependencies 이해하기
+- 버전
+유의적 버전semantic vesioning
+
+주.부.수로 구성
+  - 기존 버전과 호환되지 않게 API가 바뀌면 주 버전을 올리고,
+  - 기존 버전과 호환되면서 새로운 기능을 추가할 때는 부버전을 올리고,
+  - 기존 버전과 호환되면서 버그를 수정한 것이면 수 버전을 올린다
+- 의존성
+  - dependencies: package.json에서 npm install을 실행하면 설치되는 의존성. npm install 패키지명을 실행하면 dependencies에 추가됨
+  - devDependencies: package.json에서 npm install을 실행하면 설치되는 의존성. npm install 패키지명 --save-dev를 실행하면 devDependencies에 추가됨. 프로젝트 실행에는 필요하지 않지만, 개발 단계에서 필요한 패키지들 선언
+  - peerDependencies: 주로 서비스보다는 라이브러리와 패키지에서 자주 쓰이는 단위. 직접적으로 해당 패키지를 require하거나 import하지는 않지만 호환성으로 인해 필요한 경우
+#### Dependabot으로 취약점 해결하기
+의존성에 숨어 잇는 잠재적인 위협을 깃허브를 통해 확인하고 조치하는 방법
 ### 9.2.4 정리
 ## 9.3 리액트 애플리케이션 배포하기
+자체적인 IT 인프라가 구축돼 있어 해당 인프라를 사용하는 큰 회사, 비교적 규모가 작아 자체 인프라를 구축하기 어려운 스타트업의 경우 아마존 웹 서비스나 구글 클라우드 플랫폼, 마이크로소프트 애저 등 클라우드 서비스를 활용
+
+개인, 소규모 프로젝트의 경우 대형 클라우드 플랫폼에서 복잡하게 배포 파이프라인을 구축하거나, 혹은 별도의 서버를 마련하지 않더라도 손쉽게 서비스를 배포할 수 있는 다양한 방법이 있음
+
 ### 9.3.1 Netlify
 ### 9.3.2 Vercel
 ### 9.3.3 DigitalOcean
 ### 9.3.4 정리
 ## 9.4 리액트 애플리케이션 도커라이즈하기
+도커: 서비스 운영에 필요한 애플리케이션을 격리해 컨테이너로 만드는데 이용하는 소프트웨어
 ### 9.4.1 리액트 앱을 도커라이즈하는 방법
 ### 9.4.2 도커로 만든 이미지 배포하기
 ### 9.4.3 정리