JavaScript

테스트 자동화, 폴리필

김꼬알 2023. 11. 13. 12:29

 

테스트 자동화

BDD(Behavior Driven Development)

  • BDD에서는 스펙을 먼저 작성하고 난 후에 구현을 시작함
  • 구현이 종료된 시점에는 스펙과 코드 둘 다 확보할 수 있음

 

개발 순서

  1. 명세서 초안 작성(기본적인 테스트 포함)
  2. 명세서 코안을 보고 코드 작성
  3. 코드가 작동하는지 확인하기 위해 테스트 프레임워크를 사용해 명세서 실행(Mocha 사용). 테스트를 모두 통과해 에러가 출력되지 않을 때까지 코드 수정
  4. 모든 테스트를 통과하는 코드 초안 완성
  5. 명세서에서 고려하지 않았던 유스케이스 추가
  6. 세번째 단계로 돌아가 테스트를 모두 통과할 때까지 코드를 수정
  7. 기능이 완성될 때까지 3~6단계 반복

 

스펙의 용도

  1. 테스트: 함수가 의도하는 동작을 제대로 수행하고 있는지 보장함
  2. 문서: 함수가 어떤 동작을 수행하고 있는지 설명 - describe와 it에 설명이 들어감
  3. 예시: 실제 동작하는 예시를 이용해 함수를 어떻게 사용할 수 있는지 알려줌

 

테스트 라이브러리

  • Mocha: 핵심 테스트 프레임워크로, describe, it과 같은 테스팅 함수와 테스트 실행 관련 주요 함수 제공
  • Chai: 다양한 assertion을 제공해 주는 라이브러리
  • Sinon: 함수의 정보를 캐내는 데 사용되는 라이브러리로, 내장 함수 등을 모방

 

  • 스펙이 있기 때문에 개발자는 안전하게 함수를 개선하거나 변경할 수 있음
  • 함수를 처음부터 다시 작성해야 하는 경우가 생겨도 스펙이 있으면 기존 코드와 동일하게 동작한다는 것을 보장할 수 있음

 

  • 코드가 바뀌어도 기존에 구현된 기능에 영향을 주지 않게 하는 건 대규모 프로젝트에서 매우 중요함
  • 프로젝트 규모가 커지면 함수 하나를 이곳저곳에서 사용하는데, 수동으로 변경된 함수가 이 함수를 사용하는 모든 곳에서 제대로 동작하는지 확인하는 건 불가능하기 때문

 

  • 테스트를 하지 않고 코드를 작성한다면, 아래 둘 중 한 갈래의 길로 빠지게 됨
  • 아무 대책 없이 코드를 변경 - 부작용을 생각하지 않고 함수를 수정했기 때문에 어디선가 버그가 발생함
  • 수정이가 개선을 기피하게 됨 - 버그가 발생하는 것을 피하기 위해 코드가 구식이 되어도 아무도 코드를 건드리지 않음

 

테스팅 자동화의 장점

  • 코드에 변화가 있어도 스펙을 실행해 테스트를 진행하면 몇 초 만에 에러 발생 여부를 확인할 수 있음
  • 잘 테스트 된 코드는 더 나은 아키텍처를 만듦
  • 수정과 개선이 쉽기 때문에 당연히 좋은 아키텍처를 만들 수 있음
  • 테스트를 작성하려면 함수가 어떤 동작을 하는지, 입력값은 무엇이고 출력값은 무엇인지 정의하고 난 후에 구현을 시작함
  • 코드는 정의된 사항을 뒷받침 할 수있게 작성해야 하기 때문에, 구현을 시작하는 순간부터 이미 좋은 아키텍처가 보장됨
  • 테스트를 작성하면 일반적으로 개발 속도가 빨라지고 이전보다 코드를 더 안정적으로 작성할 수 있음

 

 

폴리필(Polyfill)

  • 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트

 

  • 명세서에 새로운 문법이나 기존에 없던 내장 함수에 대한 정의가 추가됨
  • 새로운 문법을 사용해 코드를 작성하면 트랜스파일러는 이를 구 표준을 준수하는 코드로 변경해줌
  • 새롭게 표준에 추가된 함수는 명세서 내 정의를 읽고 이에 맞게 직접 함수를 구현해야 사용할 수 있음
  • 개발자는 스크립트에 새로운 함수를 추가하거나 수정해서 스크립트가 최신 표준을 준수할 수 있게 작업할 수 있음

 

  • core.js: 다양한 폴리필 제공, 특정 기능의 폴리필만 사용하는 것도 가능
  • polyfill.io: 기능이나 사용자의 브라우저에 따라 폴리필 스크립트를 제공해주는 서비스

 

바벨(Babel)

  • 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 바꿔주는 트랜스파일러

 

  • 개발자의 컴퓨터에서 돌아가는데, 이를 실행하면 기존 코드가 구 표준을 준수하는 코드로 변경됨
  • 변경된 코드는 웹사이트 형태로 사용자에게 전달됨
  • 웹팩(Webpack)과 같은 모던 프로젝트 빌드 시스템은 코드가 수정될 때마다 자동으로 트랜스파일러를 동작시킴
  • 이런 과정이 없으면 개발이 끝난 코드를 한데 통합하는 데 어려움이 있으므로, 트랜스파일러와 폴리필은 필수

 

 

'JavaScript' 카테고리의 다른 글

객체  (1) 2023.11.21
기본 문법 요약 정리  (2) 2023.11.09
[구름톤 챌린지] 4주차_중첩 점  (1) 2023.09.08
[구름톤 챌린지] 4주차_통신망 분석  (1) 2023.09.06
[구름톤 챌린지] 3주차_작은 노드  (0) 2023.09.01