[TOAST FORWARD] '프런트엔드 테스팅 - 기초부터 실습까지'

지난 1월 15일 열다섯 번째 TOAST FORWARD를 개최했습니다. 2020년 첫 교육으로는 '프런트엔드 테스팅 - 기초부터 실습까지'라는 과정명으로 FE개발랩의 김동우 책임이 진행했습니다.

교육 내용과 이번 교육에 참가하신 분들은 어떤 고민들이 있었는지 공유드리려고 합니다. ^^ 아래의 내용은 발표를 진행하신 김동우 책임이 작성해 주었습니다.

목차

1. 테스트란?
   1. 개발자가 테스트를 작성하는 이유
   2. 테스트의 분류
2. 자바스크립트 테스팅 환경
   1. 테스팅 도구의 분류
   2. Node.js vs 브라우저
   3. 실습: Jest 특징 및 기본 사용법
3. TDD
   1. TDD의 정의와 핵심 개념
   2. 실습: TDD로 유틸리티 함수 만들기
   3. 실습: TDD로 카운터 만들기
4. 테스팅 전략
   1. 좋은 테스트 코드의 조건
   2. 테스트 코드의 비용과 커버리지
5. 프런트엔드 테스팅 전략
   1. 프런트엔드 구성 요소별 테스팅 전략
   2. 시각적 요소에 대한 테스팅 전략 사례 분석
   3. 스토리북과 시각적 회귀 테스트 도구의 활용
   4. 시각적 테스트와 기능적 테스트 분리
   5. 실습 : UI 카운터 테스트
   6. 모의 객체 사용에 대한 테스팅 전략 사례 분석
   7. 서버 API 통신과 비동기 로직 테스트
   8. 실습 : 서버와 연동된 UI 카운터 테스트
6. E2E 테스팅 도구
   1. Selenium Webdriver vs Cypress
   2. Cypress의 특징 및 사용 방법
   3. 실습: Cypress로 UI 카운터 테스트
   4. 실습: Cypress로 서버와 연동된 UI 카운터 테스트
7. 정리

목표

• 개발할 때 테스트 코드를 작성하는 것은 이제 당연시되고 있지만, 어떤 방식으로 테스트를 작성하는 것이 좋은지에 대해서는 명확한 가이드를 찾기 어렵다.
• 특히 프런트엔드 개발은 시각적인 요소를 처리해야 하고, 사용자의 다양한 실행 환경도 고려해야 하기 때문에, 테스트 코드를 작성하기가 더 까다롭다.
• 또한 프런트엔드에는 수많은 테스트 도구가 있고, 개발 방식이 발전하는 속도가 너무 빠르기 때문에, 많은 경험 없이는 프로젝트에 맞는 도구나 테스팅 전략을 선택하기가 어렵다.
• 이 교육은 몇 년 동안 다양한 프로젝트에서 시행착오를 겪으며 쌓아온 경험을 바탕으로, 참여자들이 실제 실무에 적용할 수 있는 알짜 노하우를 배울 수 있도록 다음과 같은 내용을 다룬다.
  • 프런트엔드 코드를 테스트하는 환경과 다양한 도구를 알아보고, 각각의 장단점에 대해 이해한다.
  • TDD의 개념을 이해하고, 실습을 통해 Jest의 기본 사용법과 TDD의 개발 주기를 학습한다.
  • 좋은 테스트 코드의 조건에 대해 알아보고, 테스트의 비용과 효과를 고려한 효율적인 테스팅 전략의 중요성을 이해한다.
  • 시각적 요소와 기능적 요소를 분리해야 하는 이유를 알아보고, dom-testing-library를 사용해서 애플리케이션의 상태를 효율적으로 테스트하는 방법을 학습한다.
  • 모의 객체의 사용 및 단위 테스트와 통합 테스트의 장단점을 이해하고, Cypress를 사용해서 통합 테스트를 작성하는 방식을 학습한다.

진행

• 이 교육은 프런트엔드 개발자 대상이기 때문에, 실습을 진행하기 위해서는 자바스크립트의 문법이나 node.js 기반의 개발 도구 등에 익숙해야 한다. 다행히 참여자 대부분이 프런트엔드 개발자로, 실습을 진행하는 데에 전혀 무리가 없었다.
• 이 교육은 후반부에 실무적인 내용을 많이 다루긴 하지만, 입문자를 위해 처음 1~2시간은 테스트의 종류, TDD, 테스팅 환경 등과 같은 기초 개념을 자세히 가르친다. 그래서 테스트에 많이 익숙한 분들은 처음 1~2시간이 약간 지루하게 느껴질 수도 있다(물론 그런 분들에게도 기초 지식을 더 탄탄하게 다질 수 있는 좋은 기회이다). 다행히 대부분의 참여자들이 프런트엔드 테스트를 작성해 본 경험이 많지 않아서, 처음부터 굉장히 집중력 있게 수업에 참여한다는 느낌을 받을 수 있었다.
• 이 교육에서 중요하게 다루는 내용 중에 하나는 시각적인 요소와 기능적인 요소를 분리하는 것이다. 하지만 4시간 안에 모든 걸 다룬 수는 없어서 스토리북을 사용해서 시각적인 요소를 관리하는 내용을 실습까지 진행할 수는 없었다. 대신 작년 말에 NHN FORWARD 발표에서 준비했던 시연 영상 몇 개를 사용해서 최대한 실제 적용된 예를 많이 보여드리고자 했다.

결론

• 끝나고 많은 분들이 질문을 해 주셨다. 테스트를 이제 막 도입하려고 하는데 어떤 식으로 할지 막막해하는 분들이 많았고, 실제 테스트 코드를 작성하고 있지만 제대로 하고 있는 건지 모르겠다는 분들도 많았다. 다시 한번 느꼈지만, 현업에 있는 프런트엔드 개발자들이 가장 힘들어하는 부분이 바로 "테스트 코드를 어떤 식으로 작성하는 게 좋은지"에 대한 가이드라인이 없다는 점이다.
• NHN FE개발 랩에서도 몇 년 동안 테스트를 작성해 오면서 같은 경험을 했다. 정말 많은 시행착오를 겪으면서 다양한 시도를 했고, 그 과정 속에서 그나마 조금씩 노하우를 축적할 수 있었다. 이 교육은 그 몇 년 동안의 경험이 담긴 결과를 최대한 다른 프런트엔드 개발자들과 나누고 싶어서 만들어진 것이다. 다행히 많은 분들이 그동안 답답했던 부분이 많이 해결되었다면서 고맙다는 피드백을 주셨다.
• 가장 기억에 남는 피드백은, "시각적인 요소에 대한 테스트하는 것이 기술적으로 어려우며, 비용 대비 효과가 크지 않다면 자동화하지 않아도 된다"라는 말이 너무 큰 마음의 위안이 되었다는 내용이었다. 사실 테스트에 대해서는 여전히 환상이 많다. 테스트 커버리지는 높아야만 하고, 테스트 코드는 많을수록 좋고, 모든 걸 테스트해야만 한다고 생각한다. 하지만 정말 중요한 것은 "실제로 이 테스트가 개발 속도와 품질 향상을 도와주는지"이며, 이를 위해 테스트에 드는 비용과 효과를 고려하는 것은 필수이다. 이 중요하면서도 간단한 교훈을 얻기 위해 우리 팀에서는 정말 많은 시행착오를 겪었다. 이 교육을 들은 분들이 우리가 겪었던 시행착오를 최대한 덜 겪으면서도 더 의미 있는 테스트를 작성할 수 있게 되었길 바란다.

참석자 후기

• 자바스크립트 테스팅에 대해서 인터넷으로 잘 정리된 자료를 찾아보기 어려웠는데, 강사님이 정리해주신 자료 덕분에 큰 흐름과 학습 방향을 잡을 수 있었습니다 :)
• 프런트 테스트를 고민했던 내용을 정리된 것 같아 좋은 시간이 되었고 이미지로 테스트를 하는 스토리북 등을 알게 되어서 좋았습니다.
• 알찬 강의 자료와 차근차근 진행해주시는 점들이 큰 도움이 되었습니다.
• 예제 코드를 함께 진행해가는 방식도 좋았습니다.
• 프런트엔드 테스트를 하면서 쌓인 노하우를 들을 수 있어서 좋았습니다. 교육생의 이해를 돕기 위해 Unit 테스트부터 회귀 테스트까지 단계별로 준비한 것이 도움이 많이 되었습니다.
• 단순한 사용 법 외에도 실제 사례(공개 가능한 샘플) 코드가 있었으면 더 도움이 되었을 것 같습니다.
• 준비를 정말 많이 하셨다는 것을 느꼈고, 회사에 돌아가서 꼭 배웠던 내용들을 복기하며 테스트를 잘 작성해 보려고 합니다 :)
• 강의를 너무 잘하셨어요! 내용을 딱 초급자 수준에 맞게 설명해 주셔서 이해가 잘 됐습니다.

2020년 TOAST FORWARD 운영 계획

지난 열다섯 번의 교육을 운영하며, 많은 분들께서 신청해주시고 참여해 주셨습니다. 참석해 주셨던 분들께서 좋았던 점과 아쉬웠던 점들을 설문에 많이 적어주시는데요.

특히 아쉬웠던 점으로는 교육 장소가 판교라 접근성이 불편하다는 점과 더 많은 인원을 수용해 주면 좋겠다는 의견이 가장 많았습니다. 한정된 공간에서 진행하다 보니, 많은 분들을 모시지 못해 저희도 아쉬운 마음이 항상 있었는데요.

2020년에는 "TOAST FORWARD가 간다!"라는 이름으로 저희가 직접 현장으로 찾아가려고 합니다. :) 자세한 내용은 추후 TOAST 페이지(https://www.facebook.com/toast.nhn/) 에 업데이트할 예정입니다. 앞으로의 활동도 많은 기대와 참여 부탁드립니다.