3장 - 코드품질(1)

1. 테스트 자동화와 Mocha ☕

테스트 자동화에 대한 어필을 아주 많이 하고 있다. 수동으로 테스트하면 여간 귀찮으니까.
🥰시험에 답안지를 적고 미뤄쓰지 않았는지 검사하는 과정이라고 받아들이면 되겠다. - 이걸 자동으로🥺

 

이래저래 뭐 구구절절 설명이 많은데, 요약하면 특정 조건을 만들어 놓고 통과하는지 (🚩실행결과와 기대결과를 비교🚩) 보겠다는 것.이다.

BDD에서.

Behavior Driven Development 동작(행위) 주도(지향)적 개발이다. 음... 한국어로도 어렵네 - 

일단 테스트와 문서와 예시를 한곳에 모아둔 개념이라고 하니 한번 살펴보자.

 

아참 오리지널 본문에 설명이 없는데, 지금부터 갑자기 훅 치고 들어올 코드들은

 

☕ "Javascript 테스트 프레임워크 Mocha.js" ☕ 라는 친구를 사용해서 쓰는 테스트이다.

mochajs.org/

Mocha - the fun, simple, flexible JavaScript test framework

보통은 이런 코드들을 test.js 같은 파일을 만들어서 거기다가 작성을 한다. - 정도만 알고 아래로 넘어가서 예시를 보자.

거듭제곱 함수와 명세서

거듭제곱이란, 특정 수를 n 번 곱한 것. 2제곱 세제곱 네제곱 그것을 직접 풀어서 연산자를 쓰지 테스트 해보자고 한다.

 

테스트의 예시

describe("pow", function() {
  it("주어진 숫자의 n 제곱", function() {
    assert.equal(pow(2, 3), 8);
  });
});

이런 식의 테스트가 있는데, 겉에서부터 순서대로 하나하나 함수의 용법을 살펴보면

 

• describe
  구현 기능에 대한 "설명"을 이야기 하며 함수단위로 묶는다.
  즉, 보통 어떤 행동을 하는 테스트 꾸러미인지 이름을 적는다
  "pow" 라고 썼으니, 이 테스트의 이름은 제곱근을 테스트 하기 위한 묶음이라 볼 수있다.
  
  묶음 안에 여러 묶음을 넣을 수 있는데, 별로 추천은 안함.
  
  
• it
  테스트에 대한 구체적인 내용을 적어주고 해당 행동을 적어주면 된다.
  특이한건 처음의 describe 와 다르게, 이 함수에는 done를 콜백으로 넣어, 끝이나면 호출하는 포인트로 제공한다.
  
  위에서 묶이라 하였으니, 여러개를 작성할 수 있다.
  
  
• assert
  제일 안쪽에 있는 친구인데, 핵심부분이라고 할 수 있다.
  
  첫번째 파라메터로 value1, ...................... pow(2, 3)
  두번째 파라메타로 value2를 받는다....... 8
  위에서 🚩실행결과와 기대결과를 받는다고 했는데
  
  실행의 결과가 value1, 기대하는 결과가 value2 라고 보면 되겠다.
  
  assert에 보면 쩜 찍고, equal 을 호출하는데, 미리 만들어져있는 equel(=)이꼴,이퀄, 아무튼 같은지 체크하는 친구를 이용해서 둘이 같은지 실행 및 기대의 꿈을... 걸었다.

실행방법은 아까 위에서 test.js 에 저장하라 했었는데, 터미널에서 해당위치로 이동해서 거기에서 
> mocha 
라고 치면 테스트가 동작은 하면서 일단 에러가 날거다. 상단에 2줄을 추가해주자. - 물론 당연히 모카 설치 필수다.

let assert = require("assert"); //모카의 assert 함수를 사용하기위해 불러온다고 기억해두자.
let pow = (a, b) => a ** b; // 6번째줄 안에서 실행해야하는 제곱근을 만드는 함수이다. 연산자를 써서 후딱만들었다.

describe("pow", function() {
  it("주어진 숫자의 n 제곱", function() {
    assert.equal(pow(2, 3), 8);
  });
});

뫄? 모카 설치 명령어 부터 안된다고? ... 일단 넘어가자. 🥺 인터넷에서 npm 이라는 것이 무엇인지부터 알아야한다.

 

개발순서

뭐 크게 첨언을 할 부분이 없다. 아- 그렇구나. 하고 넘어가자. 한두번 읽어두면 직접 자신도 모르게 그렇게 하고있는걸 볼 수 있다.

 

스팩실행하기

아 여기서 라이브러리를 골라서 테스트를 하는 부분이 나온다.

각 라이브러리의 설명과, HTML 파일로 만들어서 테스트 하는 부분을 복사 붙여넣어 한번 실행해보자.

 

코드초안

아까 위에 let pow  = (a, b) => a ** b; 급보다 더한 닌자급 테스트 코드이다

 

스팩 개선하기😶

it를 더 추가해서 여러가지 테스트 스팩(여러가지 험난한 세상 환경)에도 문제가 없도록 설명하고 있다.

 

코드 개선하기

pow 의 코드를 개선하는 부분이다.
직접 pow를 구현하면 이렇게 길다고 자랑 중.

 

자동으로 it 블록을 만드는 ...😶 -> loop 문을 이용해서 it를 여러번 호출하는 코드 작성.

 

중첩 describe

테스트 가독성이 떨어져서, 개인적으로 별로 추천은 안하지만, 

저렇게 하면 쓸 수 있긴하다. 결과는 서브그룹으로 표시 됨.

 

아래쪽에 BDD 느낌의 
before(), after(), beforeEach(), afterEach() 라고 불리는 친구들을 소개중인데, 이 친구들은 hocks라고 부른다. 

훅이라고 그 후크의미가 맞고, 걸어두다 걸린다 뭐 그런 의미가 맞다. 어떠한 특정한 시점에서 반응해서 돌아가는 친구들이다.

각각 실행순서에따라 배열했다.

before() - 전체 테스트 실행전에 반응해서 실행 됨.

beforeEach() - 각 테스트 실행 전 반응해서 실행

afterEach() - 각 테스트 실행 후 반응해서 실행

after() - 전체 테스트 끝나고 나면 반응해서 실행

 

스팩 확장하기

몇개의 기능을 더 추가하는 경우를 이야기 함.

 

테스트의 단점

각 함수에 대해 테스트를 만들다보면, 개발기간이 길어질 수 있다.
반대로 테스트를 잘 만들어 두었더니, 개발기간이 짧아질 수 있다.

사실 이건 사람과 상황, 프로젝트, 함수의 개수, 테스트의 개수, 작성난이도 등등 많은 이슈에 따라 언제라도 달라질 수 있다.

 

// todo :  jest에 대해서도 소개할 것

2. 폴리필

오래된 브라우저에서 돌릴 방법.

브라우저가 오래된것이 무엇이냐 할텐데, 현재 2021년 기준으로 대부분의 브라우저들은

모던브라우저라고 불린다. = 자동으로 최신 사양과 정보가 각종 기능이 업데이트가 되는 모던한 브라우저.

5대 브라우저라고 불리는 크롬, 사파리, 파이어폭스, 오페라, 인터넷익스플로러엣지가 여기에 해당된다.

 

일반 인터넷 익스플로러가 특히 문제가 되는데, 윈도우XP를 사용하는 사람은 internet explorer 8 버전 이상 사용할 수 없다.

 

인터넷익스플로러 종류별 사용자 사용율

종류가 참 많다. 6,7,8,9,10,11,edge 까지.

 

edge를 제외하곤 버전에 따른 브라우저 엔진 특성을 많이 타기 때문에 모던브라우저라 불리지 않고, 구형브라우저들이라고 부른다.

www.w3schools.com/js/js_versions.asp

JavaScript Versions

위에 링크의 표를 참고해서 살펴보자.
ECMAScript6 을 지원하지 않는 브라우저이기 때문이다.

 

바벨

이름 참 거창하다. 창세기쪽 혼돈의 고대의 땅에서 하늘에 닿는 탑인가 뭐 그랬던데...

최신브라우저 기능에 닿기 위한 몸부림 같다.😶

 

큰 기능은 두가지
1. 트렌스파일러(변환기) - 변환기라는 녀석으로 ES6 이후의 최신 문법으로 작성한 언어 기능을 옛 브라우저가 해석을 해도 문제가 없도록 바꿔준다.

2. 폴리필 - 옛날 브라우저에 사용하고자 하는 문법이 없는 경우도 있다. 혹은 기존 브라우저에서 동작하는 함수에 문제가 생겼다. (버그가 있다 등) 이러한 문제를 해결하려면어떻게 해야하나?

첫번째 해결법 - 문법을 새로 만든다.

두번째 해결법 - 기존 함수를 수정해서 맛따라 멋따라 덮어 새로 쓴다.

 

그리고 이걸 사용자의 브라우저에서 돌리게 한다. fill in 역할이라 보면 되겠다.

이 두 기능이 바벨의 핵심요약이다.