[패스트캠퍼스 프론트엔드 데브캠프 1기_부트캠프 특강] 프론트엔드 테스트의 모든 것

제가 패스트캠퍼스 데브캠프에서 토이 프로젝트를 진행하면서 가장 어려움을 느꼈던 부분은 바로 '테스트'였어요. Cypress, Playwright, Jest 같은 테스트 도구의 이름만 들어도 머리가 아플 정도였죠. 하지만 얼마 전, 데브캠프에서 진행된 프론트엔드 테스트 특강을 듣고 나서 테스트의 종류와 과정에 대해 한층 더 깊이 이해할 수 있었어요. 그래서 기쁜 마음으로 특강에 참여했답니다.

 

1. 테스트는 무엇이며, 왜 중요한가요?

테스트는 말 그대로 프로그램이 의도한 대로 동작하는지 확인하는 과정이에요. 특히 프론트엔드 개발은 사용자가 직접 상호작용하는 부분이기 때문에 작은 오류도 사용자 경험에 큰 영향을 미칠 수 있죠. 예를 들면, 회원가입할 때 "이메일 형식이 올바르지 않습니다"라는 오류 메시지가 제대로 표시되지 않으면, 사용자는 문제를 인식하지 못하고 계속 잘못된 형식의 이메일을 입력할 수 있어요. 이러한 오류를 방지하기 위해서는 세부적인 테스트가 꼭 필요해요.

수동으로 모든 테스트를 진행하지 않는 이유는, 예상치 못한 에러를 놓칠 수 있기 때문이에요. 그래서 자동화된 테스트 코드를 세부적으로 작성하면 다양한 상황에서 발생할 수 있는 오류를 더 효과적으로 발견할 수 있답니다. 물론, 테스트 코드를 많이 작성하는 것도 불편한 점이 있어요. 코드 작성 시간이 늘어나고, 때로는 테스트 코드 자체에 문제가 생길 수도 있죠.

 

2. E2E(End-to-End) 테스트, 실사용자 경험과 가까워요

E2E(End-to-End) 테스트는 사용자가 실제로 사이트를 이용하는 것처럼 전 과정을 테스트하는 방법이에요. QA 개발자가 수동으로 사이트를 작동시키는 것도 E2E 테스트의 일부분이라고 해요. 이번 특강에서는 Cypress, Playwright, Puppeteer 같은 도구들을 소개받았는데, 이를 통해 사용자가 로그인부터 결제까지 모든 과정을 원활하게 진행할 수 있는지 확인할 수 있었어요.

처음 E2E 테스트를 접하면 조금 복잡하고 어렵게 느껴질 수 있어요. 브라우저에서 실제로 버튼을 클릭하거나, 엔터를 누르는 등 사용자의 행동을 그대로 따라야 하기 때문이죠. 또한, 헤드리스 브라우저(GUI를 제공하지 않는 브라우저)를 이용해 코드 레벨에서 자동으로 테스트를 진행하는 방식도 있어요. 이렇게 전체 서비스를 대상으로 테스트를 진행할 수 있기 때문에, E2E 테스트는 실제 개발 현장에서 꼭 필요한 도구 중 하나랍니다.

https://developer.mozilla.org/ko/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server

 

3. 유닛 테스트란?

유닛 테스트는 함수나 컴포넌트가 개별적으로 잘 작동하는지 확인하는 방식이에요. 예를 들어, 버튼 클릭 시 원하는 동작이 실행되는지, 함수가 의도한 결과를 반환하는지를 테스트하죠. 이번 특강에서는 Jest라는 도구를 사용해 유닛 테스트를 쉽게 적용하는 방법을 배웠어요.

유닛 테스트의 장점 중 하나는 사이드 이펙트(의도치 않은 부작용)를 발견하는 데에도 효과적이라는 점이에요. E2E 테스트는 전체 개발이 완료된 후 진행하는 경우가 많지만, 유닛 테스트는 코드의 작은 단위마다 적용할 수 있기 때문에 오류를 빠르게 잡아낼 수 있어요. 이렇게 작은 단위로 테스트를 진행하면 문제를 조기에 발견할 수 있어 개발 효율을 높이는 데 큰 도움이 돼요.

https://aws.amazon.com/ko/what-is/unit-testing/

 

4. 통합 테스트: 여러 모듈이 엮인 테스트

통합 테스트는 여러 유닛들이 서로 어떻게 상호작용하는지를 확인하는 단계예요. 특히 프론트엔드에서는 디자인 시스템처럼 여러 컴포넌트를 함께 사용하는 경우가 많기 때문에 통합 테스트가 중요해요. 디자인 시스템 자체에는 사용자 시나리오가 없지만, 결제나 장바구니 같은 중요한 서비스에서는 이러한 테스트가 필수적이라고 강사님께서 설명해주셨어요.

 

5. 실습시간

강사님께서 저희에게 실제 상황을 가정한 과제를 주셨어요. 마치 인수인계를 받은 주니어 개발자가 된 것처럼 '//TODO:' 부분을 찾아서 요구사항을 해결해야 했죠. 주어진 시간은 단 30분이었는데, 결국 10분을 더 요청해서 겨우 마무리할 수 있었어요. 이 과제를 통해 인수인계를 받은 개발자의 역할을 체험할 수 있었고, Jest에 대해 더 깊이 이해할 수 있는 좋은 시간이었답니다.

과제 이름

강사님께서 테스트를 할 때 fail 문구를 확인하는 것이 중요하다고 하셨는데, 과제 중에 실제로 fail 문구가 발생했어요. 그 오류를 분석하고 싶었지만, 시간 부족으로 인해 강사님이 원하신 결과를 완전히 도출하지는 못했답니다.

 

 

6. 테스트의 꽃, 자동화

테스트 과정에서 중요한 부분 중 하나는 자동화예요. 수동으로 테스트하는 것은 시간이 오래 걸리고, 놓칠 수 있는 부분도 많기 때문에 CI(Continuous Integration) 도구를 통해 테스트를 자동화하는 것이 필수적이에요. 이를 통해 코드가 업데이트될 때마다 자동으로 테스트가 실행되며, 문제를 빠르게 찾아낼 수 있어 개발 효율을 크게 높일 수 있어요. CI 도구를 활용하면 테스트를 일일이 실행할 필요 없이, 프로젝트 전반에 걸쳐 일관된 품질을 유지할 수 있답니다.

https://www.redhat.com/ko/topics/devops/what-is-ci-cd

 

7. 테스트 환경과 목업(Mock-up) 

테스트를 효과적으로 진행하려면 적절한 테스트 환경이 필요해요. 실제 사용자 환경과 유사한 조건을 갖추는 것이 중요하죠. 하지만, 모든 테스트에서 실제 데이터나 외부 API를 사용하기엔 한계가 있어요. 이때 사용하는 것이 목업(Mock-up)이에요.

목업(Mock-up)은 실제 데이터나 API를 대체할 수 있는 가짜 데이터를 제공해 테스트가 원활하게 이루어지도록 도와줘요. 예를 들어, 로그인 API나 결제 시스템과 같은 중요한 부분을 테스트할 때 실제 서버와 연결하는 대신 목업 데이터를 사용해 테스트를 진행하는 거죠. 이를 통해 빠르고 안정적으로 테스트를 할 수 있고, 외부 리소스에 의존하지 않아도 된다는 장점이 있어요.

 

 

 

이번 부트캠프 특강을 통해 '테스트 없이는 안정적인 서비스를 제공할 수 없다'는 점을 뼈저리게 느꼈어요. 사실 테스트라는 게 초보 개발자 입장에선 다소 생소하고 어려울 수 있지만, 이번에 배운 내용을 실전에 적용하면서 그 중요성을 깨닫게 됐죠. 앞으로는 코드만 작성하는 게 아니라, 테스트 코드도 함께 작성하는 습관을 들여야겠다고 다짐했어요.

프론트엔드 테스트가 처음엔 복잡하고 어렵게 느껴질 수 있지만, 한 번 익히기 시작하면 그만큼 효율적이고 유용한 작업이라는 걸 알게 될 거예요. 저도 이번 패스트캠퍼스 부트캠프 특강에서 정말 많은 것을 배웠고, 여러분도 기회가 된다면 꼭 이런 특강을 들어보시면 좋겠어요. 함께 성장해 나가면 더 좋은 개발자가 될 수 있을 거라 확신합니다. 끝까지 읽어주셔서 감사합니다!