그동안 프로젝트를 진행할 때면, 테스트를 따로 진행하지 않고 개발을 진행했다. 테스트를 하면 좋다는 사실은 당연히 알고 있다. 하지만 이 많은 컴포넌트와 코드, UI를 "어떻게?", "얼마나?" 테스트해야 할지 막막했다. 또한 당장에 프로젝트 결과물을 내야 했기 때문에 테스트는 거의 안중에도 없었다. 구현한 웹사이트 내에서 직접 기능을 동작하며 에러 사항이 발생하는지 확인해 왔다.

테스트는 백엔드에서만 주로 사용하는 거 아니야..?

그러던 중, 글또에서 유데미 강의를 수강할 수 있는 기회를 제공해 주셨다. ( 와~! 👏 ) 이미 유데미에서 프론트엔드 관련 강의를 수차례 수강했던 경험이 있기 때문에 강의를 선택하는 데 있어서 큰 어려움은 없었다. 그 결과 그동안 수강하지 않고 방치했던 테스트 관련 강의들만 덩그러니 남게 되었다.

React에서 Jest 테스트를 진행하는 강의와 TDD 관련 강의.. 솔직히 둘 다 내키지는 않았다. 그만큼 테스트에 대한 선입견이 있었다. 강의 신청서 마감날이 다가올 때까지 고민을 거듭했고 마감 한 시간 전이돼서야 결정을 내릴 수 있었다. 테스트 코드 작성 경험을 우대하거나 필요로 했던 회사에는 지원하지 못했던 순간들이 떠올랐다. "테스트가 대체 뭐길래.." 한 번쯤은 경험해 보고 싶다는 생각이 들었다. 또한 이 시점에 Storybook으로 UI 테스트를 몇 번 진행하며 어느 정도 테스트에 관심을 가지고 있었다. 사실 고민할 만큼 큰 사항은 아니기도 했기 때문에 곧바로 강의 수강 신청을 진행했다.

두 개의 강의 중 나는 "TDD로 배우는 웹 프론트엔드 강의를 선택했다. 테스트 코드에 대해 공부한다면 이론과 관련된 기본적인 내용부터 공부해 보는 것이 좋다고 생각했기 때문이다. 처음 TDD 방법론을 알게 된 것은 정보처리기사를 공부하면서이다. 당시에는 자격증 취득이 목적이었기 때문에 🗣️ "테스트 주도 개발? 테스트 코드를 먼저 작성하고 코드를 작성하는 방식이구나", "개발 속도가 느려지기 때문에 생산성이 낮구나"라고 생각하고 암기했다. 다른 장점이 있겠지만, 느린 개발 속도와 낮은 생산력은 나에게 큰 거부감으로 다가왔었다. 한편으로는 그래서 더 궁금하기는 했다. 이 호기심과 그나마 알고있는 지식에 대한 반가움이 합쳐져 선택을 결심하게 됐다.

강의는 총 3개의 섹션으로 구성되어 있다.
섹션 1은 TDD와 관련된 이론적인 내용을, 섹션 2는 계산기 예제를 이용해 테스트 코드 작성을 진행한다. 마지막 섹션은 크롤링에 관한 내용이기 때문에 TDD, 테스트 관련 내용은 사실상 두 개의 섹션으로 약 80분 정도 된다. 따라서 강의를 듣고 실습하는 데 있어서 큰 부담이 없다.

우아한테크코스 프리코스 혹은 과제, 테스트 코드를 공부했던 개발자들에게 Todo 리스트처럼 익숙한 계산기로 실습이 진행된다. Cypress를 사용하며 기본 세팅부터 코드 작성까지 강의만 참고하면 초보자도 무리 없이 실습이 가능하다.

실습에서는 4개의 테스트를 진행하게 되고, 미리 입력한 값을 GUI 환경에서 자동으로 진행해 주기 때문에 초보자들도 쉽게 큰 어려움 없을 것 같다.

앞으로 테스트 코드를 작성하게 된다면, 계산기가 아닌 훨씬 더 다양한 곳에서 사용하게 될 것이라 생각한다. 따라서 배운 내용을 더 효율적으로 습득하기 위해 강의에서 실습한 내용을 토대로 React.js + TS로 구성된 토이 프로젝트에서 cypress e2e 테스트를 진행해 봤다.

가장 흔한 테스트 시나리오 중 하나라고 생각한다. 로그인을 성공하면 지급받은 토큰을 localStorage에 토큰을 저장하고 메인 페이지로 이동하는 테스트를 진행했다.

import { access_token } from './../../../src/mocks/member';

describe("로그인 화면", () => {
  it("로그인 성공 시 토큰 저장 및 메인 페이지로 이동", () => {
    /* 로그인 페이지로 이동한다. */
    cy.visit('/auth/login');

    /* data-cy=로 설정된 요소를 불러온다. */
    cy.get('[data-cy=idInput]').as('idInput');
    cy.get('[data-cy=passwordInput]').as('passwordInput');

    /* 각각 ID와 PW input에 아래 값을 입력받는다. */
    cy.get('@idInput').type('hamin0320@naver.com');
    cy.get('@passwordInput').type('1234');

    /* 입력한 값이 기대하는 값과 동일한지 확인 */
    cy.get('@idInput').invoke('val').should('eq', 'hamin0320@naver.com');
    cy.get('@passwordInput').invoke('val').should('eq', '1234');

    /* 로그인 버튼 클릭 */
    cy.get('[data-cy=loginButton]').click();

    /* 토큰 저장 */
    cy.window().then((window) =>
      window.localStorage.setItem('access_token', access_token));

    /* 메인 페이지로 이동 */
    cy.url().should('include', '/');
  })
})

• 왼쪽에서는 테스트 로그를, 오른쪽에서는 진행되는 화면을 확인할 수 있다. 따로 값을 입력하거나 버튼을 클릭하지 않아도 자동으로 테스트가 진행된다.

기존 강의 내용에서 몇 가지만 변경해도 쉽게 활용이 가능하다. 이외에도 fixture, intercept를 사용하면 더 양질의 테스트가 가능하다.

주관적인 강의의 장점

자막이 필요 없다.

• 유데미에는 외국 강사님들의 번역된 강의가 많이 존재한다. 나 같은 경우 번역된 강의를 별로 선호하지 않는다. 개인적으로 한국어 음성을 들었을 때 집중이 더 잘 되기 때문이다.
• 자막과 강의를 같이 보면 가끔 강의 내용을 놓치는 불편함이 있었다.

저렴한 가격 ( 잦은 할인 )

• 유데미에서는 상시 할인을 진행하기 때문에 부담 없는 가격으로 강의를 구매할 수 있다.
  (할인이 적용되면 12,000원에 구매 가능하다 👀)

초보자에게 적당한 난이도

• 강의만 잘 따라간다면, Cypress를 처음 사용해 보는 사람도 큰 어려움 없이 실습 가능하다.
• 박수, 농구공 등 적절한 비유를 예로 들어 더 쉽게 이해할 수 있다.

마치며

실패하는 테스트 코드를 먼저 작성하고 그 실패한 테스트를 성공시키기 위한 코드를 작성한다.. 실패를 찾아내고 고치는 것은 좋지만 예측할 수 없는 많은 실패를 어떻게 찾아낼 것이며, 어떤 기준으로 테스트 대상을 분류하는 걸까? 이 과정에서 기존에 얕게 알고 있던 개발 속도가 느려진다는 말을 이해할 수 있었다. 하지만, 체계적으로 오류를 줄여나갈 수 있는 TDD를 적용해 빠른 피드백, 안정성을 얻을 수 있다는 점은 당연히 매력적으로 느껴진다. 장기적으로 봤을 때나, 안정성을 생각했을 때 TDD를 적용하는 게 좋다는 생각이 든다. 하지만, 앞서 궁금했던 테스트 선정의 기준은 집단마다 다르며 현실적으로 생각했을 때 오랜 시간이 소모되는 TDD를 적용하기에는 제약이 많을 것 같다. 이번에 TDD와 테스트 도구를 공부해 보며 느낀 개인적인 나의 생각은 선택과 집중이 중요하지 않을까 하는 생각이 든다. 우선순위가 높고 핵심인 컴포넌트, 코드를 먼저 테스트하거나 부분적으로 TDD 방법론을 적용하면 좋을 것 같다는 생각이 들었다. 또한 다양한 종류의 테스트 도구를 시의적절하게 활용하면 기존 TDD의 단점을 보완하고 테스트를 진행하는 데 있어서 도움이 될 것 같다.

이번 강의를 계기로 그동안 어색했던 친구 같았던 테스트와 조금은 친해진 것 같다. 어찌 보면 테스트 실습 위주인 강의가 아닌 TDD 설명이 포함된 강의를 시작으로 선택한 결정이 결과적으로 옳은 선택이었던 것 같다. 강의에서 배운 내용과 추가적으로 조사한 내용을 살펴보며, 테스트의 필요성과 연관 지어 깊게 생각해 볼 수 있었다. 또한 그동안 편협적으로 다른 기술들을 판단했던 자신을 반성하게 되었다. 이번 강의를 수강하며 좋았던 점을 한 가지 더 꼽자면, 글또 내에서 같은 강의를 수강하고 의견을 나누는 TDD 스터디에 가입하게 됐다는 것이다. 확실히 스터디를 진행하다 보니 기한 내에 발표 자료를 정리해야 된다는 강제성이 크게 작용했다. 늘 나중으로 미루겠다는 생각도 나지 않고 빨리 정리해야겠다는 생각으로 바뀌게 되었고 놓쳤던 정보도 얻을 수 있었다. 앞으로는 테스트를 잘 활용해서 나중에 누군가 테스트 코드를 작성해 봤냐는 질문에 자신감 있게 대답하는 내가 되었으면 좋겠다.