🦁_21.12.13 TIL

Bori·2021년 12월 13일

멋쟁이사자처럼_프론트엔드 스쿨 1기

목록 보기

41/60

21년 12월 13일

📝 Javascript

📎 TDD(Test Driven Development)_2

`TDD.spec.html`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="shortcut icon"
      type="image/png"
      href="jasmine/lib/jasmine-3.10.1/jasmine_favicon.png"
    />
    <link rel="stylesheet" href="jasmine/lib/jasmine-3.10.1/jasmine.css" />

    <script src="jasmine/lib/jasmine-3.10.1/jasmine.js"></script>
    <script src="jasmine/lib/jasmine-3.10.1/jasmine-html.js"></script>
    <script src="jasmine/lib/jasmine-3.10.1/boot0.js"></script>
    <!-- optional: include a file here that configures the Jasmine env -->
    <script src="jasmine/lib/jasmine-3.10.1/boot1.js"></script>
  </head>
  <body>
    <script src="tddTest.js"></script>
    <script src="tddTest.spec.js"></script>
  </body>
</html>

`tddTest.spec.js`

// 원본 js를 테스트할 테스트 파일

// describe : 테스트 유닛들의 모음(자스민에서 지원하는 함수)
// 이 유닛 모음에 대한 이름을 정할 수 있다.
// html에 비유하면 section과 비슷하다고 할 수 있다.
// 각각에 대한 설명을 앞에 작성한다 => "자스민 테스트 입니다."
describe("자스민 테스트 입니다.", () => {
  // it = 테스트 유닛
  it("덧셈을 하는 함수입니다.", () => {
    let num = 10;

    // expect : 실행할 함수의 결과값을 인수로 전달 한다. = 기대식
    // plusOne 이라는 함수르 아직 만들지 않았지만 있다고 가정
    // toBe : 내가 기대한 결과가 일치하는지 판단하는 함수
    // plusOne 함수는 1을 더하는 함수이므로 toBe안에 그 기댓값인 11을 작성
    // 이 후 11이라고 작성했던 고정값을 변수로 바꿔서 넣기
    // 다른 값이 들어가도 테스트에 성공하는지 확인
    expect(plusOne(num)).toBe(num + 1);
  });
});

// .spec.js는 테스트용 파일
// 파일명이 반드시 같아야 하는 건 아니지만 같으면 이해하기 좋다.
// 실무에서 이 파일은 배포하지 않는다 => 테스트용이므로!

`tddTest.js`

// 원본 js 파일

// 테스트에 통과한 파일 배포
function plusOne(num) {
  return num + 1;
}

`TDD.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <!-- 테스트 통과한 파일만 배포 -->
  <script src="tddTest.js"></script>
</body>
</html>

TDD의 장점

자바스크립트는 인터프리터 언어로 컴파일러의 역할을 테스트를 통해 대신 수행하여 기능의 구동을 보장
=> 코드를 안정적이고 견고하게 만든다.
구현해야하는 기능에 대한 높은 분석을 요구
=> 서비스에 대한 이해도가 높아지고 품질을 우선하는 사고를 하게된다.

TDD 사용 시 주의사항

테스트 코드를 따로 작성해야하기 때문에 시간이 더 필요하고 이는 곧 업무에 대한 부담으로 작용
=> 프로젝트가 급박하다면 TDD를 사용하지 않는 편이 좋다.
=> 프로젝트의 성격에 따라 판단
TDD가 모든 예외 상황을 해결해주는 것은 아니다.
=> 결국 테스트 코드를 작성하는 사람이 고려하지 않은 상황은 테스트 코드도 놓칠 수 있다.
=> 테스트 코드는 견고하고 안정적인 코드를 지향하지만 완벽한 것은 아니다.

📝 프로젝트 팀을 구성하기 위한 테스트 (14:00 ~ 16:00)

📝 온라인 강의 수강

📎 코드라이언 - 일단 만드는 Javascript

마무리

간단하게 작성했던 TDD 코드는 괜찮았는데 오늘은 '이게 뭘 테스트 하더라아~' 하면서 따라서 코드 작성하기 바빴다.
=> 다시 한 번 꼼꼼히 읽어보면 좋을 것 같다!
테스트라니.. 테스트라니..!!
=> 어찌어찌 했는데 결과를 믿을 수 없구만
참여 중인 스터디에서 프로젝트를 하기 위해 팀을 나눴다
=> 요거 잘해서 수업에서 하는 프로젝트도 잘 했으면 좋겠다아
=> 팀이름을 내가 지었는데 멋지게 짓는 능력은 없는 듯! "누가더엉망진창이조"
리액트 이자식 가만두지 않겠다
결국 프로크리에이트 결제🥳
=> 너무 좋잖아아아! 예에에에에