Mission # 1 계산기 (온보딩 미션) 후 회고

이현정·2022년 7월 6일
3

1차 온보딩 미션(6/28~7/5) 계산기 만들기가 끝났다.
온보딩 미션을 진행하며 배운 점들을 정리하고 넘어가고자 한다.

핵심 개념

TDD란 (부제: TDD vs BDD)

What, TDD란 무엇인가

어제는 프로젝트에 시작하기에 앞서 TDD가 일단 무엇인지부터 정확히 개념을 짚고 가자고 했다.

일단 이해한 정도로만 적는다면, TDD 란 Test Driven Development 의 약자로, 즉, 테스트가 개발을 끌어나가는 방식이다. 기존의 코드를 짜고 테스트를 하는 일반적인 방법이 아니라 "테스트를 먼저 짜고" 그에 맞춰 코드를 짜는 것이다. 테스트를 할 수 있는 코드를 짜고, 이게 실패하면 왜 실패했는지 수정하며 코드를 고쳐나가는 식이다.

이런 방식을 흔히 red & green 이라고 한다. red: 빨간불. 테스트가 실패하면 일단 멈춰서 테스트를 패스하기 위한 최소한의 코드를 짜는 과정 -> green: 초록불. 테스트가 통과되면 기능을 개선하기 위해 또다른 테스트 코드를 짬. 이런 과정의 반복이란 뜻.

비교군으로 BDD(Behavior Driven Development)가 자주 언급되는데 아래에서 설명하겠다.

Why, 왜 TDD 를 사용해야 하나: 애자일(Agile)

TDD 개념의 창시자 켄트 백은 애초에 애자일 선언문의 17명의 오리지널 서명인 중 한 명이었다고 한다. 그만큼 TDD 는 애자일 방법론과 관계가 깊다. 아니, 사실 왜 TDD냐? 라는 질문에 1차 강의에서 많은 사람들이 '애자일(Agile)'을 언급했다. 그렇다면 애자일이 무엇인지 먼저 짚고 넘어가자.

애자일(agile): 기민한, 좋은 것을 빠르고 낭비없게 만드는 것

애자일 방법론은 문서를 통한 개발이 아니라, 실질적인 코딩을 통한 방법론이라고 할 수 있다.

  • 계획을 통해서 주도해 나갔던 과거의 방법론
  • 이와 다르게 앞을 예측하며 개발하지 않고
  • 일정 주기를 가지고 끊임없이 프로토 타입을 생성
  • 추가, 제거되는 요구 사항에 대해 능동적으로 대처하고 수정

이런 단계를 반복하여 하나의 커다란 소프트웨어를 개발에 나가는 adaptive style

TDD는 이러한 애자일 방식을 가능하게 해준다. 최소한의 단위의 테스트를 추가 & 수정 하는 방식으로.

BDD === 잘 짠 TDD

BDD(Behavior Driven Development)은 행동 주도 개발이다. BDD는 사실 TDD에서 파생된 개발 방법론으로, 개발자와 비개발자의 협업 과정을 녹여낸 방법이다.

조금 더 정리해보자면,

TDD를 하면서 개발을 하다보면 Testcase에 대해서도 계속 유지보수해야하는데 귀찮기도 하고, 마감기한이 정해진 프로젝트라면 일정에 대해 압박을 받을 수도 있다. 그렇기 때문에 매번 개발을 진행하면서 기능에 대해 예외사항에 대해 매번 생각하고 Testcase를 작성하는 것은 생각보다 비용이 많이 들어가는 일이라고 볼 수 있다.

하지만 만약 여기에서 이미 작성된 요구사항이나 기획서가 있고, 그에 맞추어 테스트 케이스를 작성하게 된다면, 위와 같은 시간에 대한 비용이 줄게된다. 바로 이게 BDD이다.


(좌)TDD에서 발생가능한 문제를 / (우) BDD에서는 해결 가능하다

E2E란

E2E 란 End-to-End의 약자로, 테스트 종류 중 하나다.

테스트의 종류

테스트의 종류는 위 그림처럼 크게 3가지로 나눌 수 있다: 기능테스트(End-To-End Testing / UI Testing), 통합 테스트(Integration Testing), 단위 테스트(Unit Testing)

기능 테스트(Functional Testing)는 사용자 입장에서 시스템이 제공하는 기능이 올바르게 동작하는지 확인한다. 예를 들어 회원 가입 기능이 올바르게 작동하는지 확인하려면 웹 서버, 데이터베이스, 웹 브라우저가 필요하다.

기능 테스트는 끝에서 끝까지 올바른지 검사하기 때문에 E2E(End to end) 테스트로도 볼 수 있다. QA 조직에서 수행하는 테스트가 주로 기능 테스트이다. 이때 테스트는 시스템이 필요로 하는 데이터를 입력하고 결과가 올바른지 확인한다.

Why, 왜 E2E?

Google Test Automation Conference에서 제안된 테스트 피라미드
시스템을 테스트 할때 크게 3가지 방법으로 나눌 수 있다.
전체 테스트 비중을 아래와 같은 수치로 구현하는 것이 권장된다.

E2E(UI) Testing - 10%
Integrating Testing - 20%
Unit Testing - 70%

하지만! 시간, 비용 등의 문제로 테스트를 한 번 만 해야한다면 사용자에게 보여지는 부분을 검사하는 E2E 테스트를 해야한다고 권장된다고 한다. 특히 프론트엔드에서는.

1차 코드 리뷰

내가 받은 커맨트는 사진의 3가지 외에도 크게 4가지였다.

  • 불필요한 else 문 제거하기.
  • Validator 를 만들 때 DOM 과 분리시키기.
  • DOM과 constants 관리 방법은 없을 지 생각해보기.
    => 일단 이건 생략
  • Cypress 를 이용한 테스트 코드에서 it.each 문 사용해서 개선해보기.

사실 너무 엉망진창이었던 코드라... 할 말이 많지만 일단은 이정도로 정리해주신게 아닐까 하는 생각...(빠르고 친절한 피드백 감사합니다 준일님)

배운 점

  • TDD 와 E2E 에 대한 개념을 배울 수 있었다.
  • 테스트 코드의 개념을 처음 접하고 직접 짜본 경험이었다.
  • cypress 라는 테스트 코드 작성 툴의 기본 사용법을 알게 되었다.
  • pr을 날리고 코드 리뷰를 받는 과정을 처음 경험해본 시간이었다.

아쉬웠던 점

여러 리뷰어 분들이 말씀해 주셨지만
처음부터 완벽한 코드를 짜서 내려고 하면 안된다.

더 자주, 빨리 피드백을 받자.

Reference

TDD

https://www.codecademy.com/article/tdd-red-green-refactor

https://ko.wikipedia.org/wiki/%EC%BC%84%ED%8A%B8_%EB%B2%A1

https://velog.io/@hanblueblue/spring-boot-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%BD%94%EB%93%9C-%EC%9E%91%EC%84%B1%ED%95%98%EA%B8%B0-2.-TDD

E2E

https://velog.io/@suasue/E2E-Integration-Unit-test

https://incheol-jung.gitbook.io/docs/study/undefined-3/chap-09.

cypress

https://docs.cypress.io/guides/getting-started/installing-cypress#What-you-ll-learn

https://mingule.tistory.com/44?category=1021235

https://cheatography.com/aiqbal/cheat-sheets/cypress-io/

Errors

=> 이건 에러탐험기에 따로 적을 거

https://stackoverflow.com/questions/53845493/cypress-uncaught-assertion-error-despite-cy-onuncaughtexception

0개의 댓글