우테코 Cypress 맛보기, 계산기 미션

최근에 42서울에서 우테코를 만드신 분을 모셔서 멘토링을 들었습니다. 정말 현재 저에게 꼭 필요한 말씀들이어서 자신감을 얻게되었습니다.

또한 우테코에 대한 자신감이 대단하셨습니다.

저도 추후 이런 자신감을 가질 수 있는 서비스를 만들고 싶습니다.

그래서 우테코를 혼자서라도 하게 되고 있는 것 같습니다.

Cypress

Cypress를 하면서 관련 내용은 https://gwpaeng.tistory.com/category/Tip%20and%20Error/Cypress 에 있습니다.

처음에는 그냥 console.log를 찍어서 확인 하면 되지라는 생각이 강했습니다.

그런데 Cypress를 사용해 보니 다른이들에게 설명하기도 편하고 여러 기능을 쉽게 보여줄 수 있어 정말 필요해 보였습니다.

 

 

계산기 미션

해당 미션에서 알게 된 것은 꼭

querySelectorAll을 사용해서 forEach를 사용하지 않고 querySelector로 {target}을 이용해서 값을 구하는

좋은 방법이 있습니다. 이로 인해 그냥 전체를 확인 하는 것이 아니라 특정 버튼을 누르면 볼 수 있도록 하는 좋은 방법입니다.

addEventListener의 param에 함수가 들어갈때 이 함수가 인자가 필요할 경우 콜백 함수로 인해 같이 실행되는 문제가 발생합니다.

이 문제를 다음과 같이 해결하였습니다.

//다음과 같이 callback함수에 매개변수가 필요 없을 경우
//e는 target의 값입니다. 이 값은 target.
callback = ({target}) => {
    console.log('test');
    console.log(target);
}
target.addEventListener('click',callback);

// 매개 변수가 필요한 경우
callback = (a,b) => {
    console.log('test');
}
target.addEventListener('click',() => {
    callback(a,b);
});

추가 자료

Cypress로 테스트를 하면서 alert 부분을 확인하는 부분이 있었습니다.

https://365kim.tistory.com/74 이것을 읽으면서 해보니 잘 되었습니다.