📖 오늘 학습 뽀인트!

1. TDD
   1-1 Jasmine
   1-2 Jest(React)
2. 면접 대비

1. TDD

🕵️‍♀️ TDD 란?
테스트 주도 개발이라는 뜻으로 말그대로 테스트 코드를 먼저 작성하여 의도한대로 동작하는지 확인한 뒤에 기능을 구현하는 개발 프로세스이다.

---

✍ TDD 단계
1. 실패하는 작은 단위 테스트 코드를 작성한다. 실패 테스트가 없을 경우에만 성공 테스트를 작성한다.
2. 새로운 테스트를 통과하기 위해 프로덕션 코드를 추가 또는 수정한다.
3. 1~2단계를 반복하여 실패 및 성공의 모든 테스트 케이스를 작성한다.
4. 개발된 코드들에 대해 리팩토링한다.

RED 단계는 앞서 설명한 1번 과정의 테스트 실패 과정이며, GREEN 단계는 1번 과정의 테스트 성공 과정, REFACTOR 단계는 4번 과정의 리팩토링 과정이다.

---

✍ TDD 장단점
장점은 코드를 안정적으로 구현할 수 있으며, 코드에 대한 이해도가 상승된다.

단점으로는 TDD 과정을 거친 후 기능 구현을 하기 때문에 프로젝트 완성에 시간일 걸릴 수 있다. 또한, 테스트 코드도 개발자가 예외 사항을 작성하기 때문에 모든 예외 사항에 대한 처리가 불가능하다.

---

✍ TDD가 필요한 이유
자바스크립트는 인터프린터 언어이다. 즉, 컴퓨터 언어로 변환시켜주는 컴파일 단계가 없기 때문에 실행되기 전까지 오류가 났는지 알 수 없다.
테스트를 통해 에러를 확인하기 때문에 테스트는 컴파일 단계라고 생각하면 된다. 하지만, 인터프린터 언어가 아닌 컴파일 언어에서도 TDD를 할 수 있기 때문에 "컴파일을 대체하는 것이 TDD다" 라고 생각하기 보다 자바스크립트 또는 인터프린터 언어 한정으로 생각하는 것이 좋다.

---

💬 내 생각
클린 코드 책에서 "느리게 가는 것이 결국 빠르게 가는 것이다."라는 글을 보았다. TDD 로 인해 개발이 오래 걸릴 수 있다는 것이지 반드시 오래 걸리는 것은 아니다. 오히려 에러가 발생되면 빨리 수정하여 프로젝트가 빨리 완성될 수 있다.

1-1 Jasmine

🕵️‍♀️자스민이란?
유명한 TDD 라이브러리 중 하나이다. Jest, Cypress, Storybook 등 다양한 도구들이 있다.

---

✍ 자스민 사용
보통 파일명.spec.html, 파일명.spec.js 로 파일을 만들어 테스트 코드를 작성한다.
standalone 방식으로 사용할 경우, 자스민 깃 링크에서 zip 파일을 다운 받아 테스트할 수 있다.

describe : 유닛 테스트 모음
beforeEach : it 실행 전 실행
it : 실행할 유닛 테스트 함수
spyOn : 특정 모듈의 함수를 감시.
expect : 기대식, 실행할 함수의 결과값을 인수로 전달
toBe : 매칭 함수, 기대한 결과와 일치하는지 판단하는 함수
// 실제 사용
describe("textManager 테스트입니다", () => {
  let textManager;
  beforeEach(() => {
    textManager = new TextManager();
  });
  it("text 값을 전달합니다.", () => {
    const initValue = textManager.getValue();
    expect(textManager.getValue()).toBe(initValue);
  });
});

1-2 Jest(React)

🕵️‍♀️Jest란?
테스트 코드를 찾아 실행하여 실패인지 성공인지를 판단하는 테스트 러너이다. React와 같이 facebook에서 관리하고 있다.

---

✍ Jest 사용
npx create-react-app 프로젝트명으로 프로젝트를 설치 후
npm test 로 App.test.js를 실행할 수 있다.

import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

위에는 App.test.js 내부 코드이며, 간단한 설명은 아래와 같다.
test: 자스민의 describe와 같은 역할
render : JSX의 가상돔을 생성
Screen : 가상돔 접근 전역 객체
getByText : 가상돔 안에 요소 찾는 역할
expect : 자스민 expect와 같은 역할
toBeInTheDocument : 자스민 toBe 매처 함수와 같은 역할

2. 면접 대비

21. 다음 이미지 포맷의 각 특징을 설명해주세요. (JPG, GIF, PNG, SVG).