프론트엔드 단위 테스트와 에러 모니터링
단위 테스트란 (Unit Test)?
- 모듈별로 하나의 가장 작은 단위로 독립적으로 실행되는 테스트로, 각 함수나 메서드가 올바르게 작동하는지 검사하는데 초점을 맞춤
단위 테스트, 왜 필요할까?
- 프로젝트 전체 규모의 테스트 코드를 작성하게 되면 서버와 연결하고 서로 상호작용 하는 컴포넌트들이 모두 문제 없이 작동해야 테스트 할 환경이 만들어지며, 이는 비용과 시간이 많이 들어가는 작업임. 반면 단위 테스트는 작은 모듈별로 독립적으로 테스팅 하기에 비용이 적게 들고, 테스팅을 원하는 곳만 부분적으로 실행할 수 있다는 장점이 있음.
그럼 어떤 효과가 있는데?
1. 빠른 피드백과 에러 초기 발견 가능
- 개발자가 한 모듈을 개발한 이후 테스트 코드만 작성하여 실행하면 되기 때문에, 작업이 간편하며 이를 통해 모듈의 이상 유무와 예기치 못한 버그를 사전에 알아챌 수 있음
2. 리팩토링 안정성 향상
- 개발 과정 중 리팩토링을 하다 보면 초기 예상과는 다른 동작 결과가 나올 때가 있는데, 이를 사전에 방지하는 역할 수행
어떤 라이브러리가 있는데?
1. Jest
- Facebook에서 개발한 테스트 프레임워크로, node.js 기반 프로젝트에서 잘 실행되기에 React와 같은 프론트엔드 라이브러리/프레임워크에 최적화 되어 있음.
- 테스트에 필요한 모든 기능이 내장되어 있어 별도 라이브러리 설치가 필요 없음
- API 요청이나 비동기 함수 호출을 mocking 하여 테스트할 수 있는 기능 내장
- 스냅샷 테스트 기능을 제공하여 컴포넌트 렌더링 결과를 비교 및 추적하여 테스트 가능
- 단, 프로젝트 규모가 커질수록 초기 설정에 성능 문제가 있을 수 있음
2. Mocha
- node.js 기반의 테스트 프레임워크로, 주로 백엔드 애플리케이션에서 많이 사용됨.
- 다양한 테스트 어설션 라이브러리와의 조합으로 테스팅 환경에 맞게 커스터마이징 가능
- 단, Mocha는 테스트 실행만 담당하기에 다른 라이브러리의 추가 설치가 필요함.
모니터링?
- 서비스가 배포된 이후, 사용자들이 사용하는 환경에서 어떤 에러가 발생할지 모르기에 에러를 모니터링 하는 것은 굉장히 중요한 작업이며, 이는 실제 매출이나 서비스 만족도 등 여러 방면에 영향을 미칠 수 있는 issue가 된다. 혹은 사용자가 미처 발견하지 못한 에러의 경우 또한 모니터링 라이브러리를 사용하여 해결한다면 사용자의 경험을 높일 수 있다.
모니터링 라이브러리 종류
1. Sentry
[장점] 서비스에서 발생하는 에러를 실시간으로 보고하며 다른 협업 툴과 연동하여 알람기능 제공, 오류 발생시 이슈를 자동 생성하며 이를 통해 오류의 우선순위를 결정할 수 있음, 특정 사용자 세션에서 발생한 문제를 추적할 수 있음
[단점] 에러 모니터링에는 강점이 있지만, 성능 문제를 추적하는데는 한계가 있음
2. DataDog
[장점] 프론트엔드뿐만 아니라 백엔드와 클라우드 인프라까지 한 번에 모니터링 가능, 에러-성능-로그 등을 종합한 대시보드 제공하여 한 눈에 서비스 현황을 보기 편함
[단점] 규모가 큰 대신 초기 러닝커브가 있음.