회고

nextstep을 통해 참여한 블랙커피 스터디 레벨2를 마무리했다.

블랙커피 스터디 레벨1은 바닐라 자바스크립트와 제공된 api를 통해 라이브러리를 사용하지 않고 투두리스트 웹앱을 만드는 과정이었는데,

레벨2에서는 레벨1보다 난이도 있는 웹앱을 만들면서 cypress 라는 e2e 테스트 도구를 활용하여 테스트 코드를 작성하는 과정으로 진행되었다.

스터디를 진행하며 총 3개의 웹앱을 완성했고, 그 중 2개의 웹앱에 대해서만 cypress를 사용하여 테스트 코드를 작성해 볼 수 있었다.

이번 스터디에 참여하면서 JavaScript에서의 객체 지향 프로그래밍과 flux 패턴 등 웹앱 상태관리에 대해 공부했던 내용들을 웹앱에 적용해 보는데 집중하느라, 정작 주요 주제였던 cypress를 많이 다뤄보지는 못했던 부분이 개인적인 아쉬움으로 남았다.

그래도 함께 스터디에 참여하셨던 분들이 작성하셨던 테스트 코드를 리뷰하면서, cypress에서 제공하는 아직 사용해보지 못한 api와 기능들를 조금은 살펴볼 수 있었다.

레벨3 스터디의 주제는 TypeScript를 사용한 웹앱 개발이라고 하니 레벨2에서의 아쉬움을 레벨3를 진행하며 풀어볼 수 있을 것 같다.

스터디를 마무리하면서 진행되었던 회고를 통해 짰던 두 가지 액션 플랜을 다음 스터디에서는 꼭 지킬 수 있도록 긴장해야 할 것 같다.

• 스터디 미션을 하루에 몰아서 하지 말고, 하루에 한 시간씩 시간을 할애하여 진행할 것
• 관심있는 기술의 공식 문서를 하루에 한 시간씩 할애하여 읽을 것

결과물

메모

• cypress로 alert() 테스트하기

  cy.on('window:alert', cy.stub().as(/* alias */));
  cy.get(/* `@${ alias }` */)
    .should('have.been.calledOnce')
    .and('have.been.calledWith', '검증 메시지');
  

• cypress로 setTimeout() 테스트하기

  cy.clock();
  cy.tick(/* millisecond */);
  

• cypress로 객체 테스트하기

  cy.wrap(/* 객체 */).invoke(/* 메소드 명 */)
  cy.wrap(/* 객체 */).its(/* 속성 명 */)