우테코

[Level 1] 미션 2: 로또 미션 1단계

prefer2 2022. 2. 27. 22:15

 

단위 테스트(unit test)


단위 테스트(unit test)는 컴퓨터 프로그래밍에서 소스 코드의 특정 모듈이 의도된 대로 정확히 작동하는지 검증하는 절차다.

단위 테스트(unit Test)는 하나의 모듈을 기준으로 독립적으로 진행되는 가장 작은 단위의 테스트이다. 여기서 모듈은 애플리케이션에서 작동하는 하나의 기능 또는 메소드로 이해할 수 있다.

 

이번 미션의 학습 목표 중 하나는 '단위 테스트 기반으로 리팩터링하는 경험' 이었다. 단위테스트를 찾아보니 위와 같은 내용들이 나왔다. 하나의 모듈? 모듈은 특정 기능을 하는 하나의 코드 묶음 단위(하나의 파일) 아닌가. 여기서부터 어디까지를 테스트해야하는가에 대해서 꼬이기 시작했다. 그러면 각 class에서도 테스트를 해야하나?!?!?

많은 고민 끝에 결국 util테스트와 lotto테스트를 따로 진행했다. 관련 질문을 리뷰어님에게 물어보았고 위와 같은 답변을 받게 되었다. 결론적으로 과한 고민이었던 것 같다. 나의 이런 혼란을 이해해준 페어(꼬재)에게 감사를....

오히려 단위 테스트를 진행하면 할수록 Lotto class가 필요할까? 라는 생각이 드는 것 같다. 근데 정말로 Lotto class가 필요한가...?

 

 

Jest와 Cypress


별거 아닌데 삽질을 좀 했다. Jest를 실행하면 왜인지 Cypress도 함께 실행되어 원하는 결과가 나오지 않았다. 역시 이럴때는 공식문서를 찾아보면 답을 알려준다. testPathIgnorePatterns 을 사용해서 무시해주었다. 잘 작성했는데 동작이 하지 않아 한시간 가량을 헤맸다. 알고보니 npx jest를 하지 않아 일어난 일이었다. npx에 대한 이해가 부족한 것 같아 npx에 대해 찾아보았다.

https://jestjs.io/docs/configuration#testpathignorepatterns-arraystring

 

npx

npx는 새로운 패키지 관리 모듈이 아니고 npm에서 제공해주는 하나의 도구이다. 패키지의 최신 버전 파일을 불러와 실행시키고 실행된 이후에 해당 패키지를 제거한다(임시 설치해서 실행).

실행과정

1️⃣ 기본적으로 실행되어야할 패키지가 경로에 있는지 먼저 확인
2️⃣ 경로에 제대로 있다면, 그대로 실행
3️⃣ 그렇지 않다면 패키지는 설치되어 있지 않다는 걸 의미하고, npx가 최신 버전의 패키지를 설치를 한 후에 실행

npx는 주로 아래와 같은 상황에서 사용한다

  • 패키지 임시 설치 및 실행
  • npm 으로 설치할 명령어를 줄여준다
  • 다른 버전의 노드 실행 가능
  • gist 에 스크립트 공유 가능

 

예를들어 로컬에서 임의의 패키지 my-package를 실행시킬때 이 패키지가 위치한 ./node_modules/.bin/my-package의 경로를 실행시키거나 package.json의 script로 my-package의 경로를 정의해 주어야 한다. 업데이트의 경우에도 npm은 일일이 업데이트를 해주어야 한다. 하지만 npx를 사용하면 보다 편하게 npx my-package로 패키지를 사용할 수 있다.

이는 create-react-app같은 보일러 플레이트 모듈에 효과적이다. npx를 통해 create-react-app을 설치할 경우에는 매번 최신 버전만을 가져와서 설치해 주기 때문에 지금 어떤 버전을 사용하고 있는 지 신경쓸 필요가 없어진다.

npm과 npx의 차이에 대해서

https://basemenks.tistory.com/232

 

 

try...catch...finally


try {
   ... 코드를 실행 ...
} catch(e) {
   ... 에러 핸들링 ...
} finally {
   ... 항상 실행 ...
}

 

1️⃣  먼저, try {...} 안의 코드가 실행된다.
2️⃣  에러가 없다면, try 안의 마지막 줄까지 실행되고, catch 블록은 건너뛴다.
3️⃣  에러가 있다면, try 안 코드의 실행이 중단되고, catch(err) 블록으로 제어 흐름이 넘어간다. 변수 err(아무 이름이나 사용 가능)는 무슨 일이 일어났는지에 대한 설명이 담긴 에러 객체를 포함한다.
4️⃣  finally절은 무언가를 실행하고, 실행 결과에 상관없이 실행을 완료하고 싶을 경우 사용한다.

https://ko.javascript.info/try-catch

 

 

css grid


이번 미션에 grid를 사용해보라는 말이 있었는데 시간이 부족하여 이를 적용하지 못하고 모두 flex로 진행했다. 1차원이 flex와 달리 2차원이라 구조적으로 생각을 좀 더 해야하는 것 같다. 정리가 정말 잘되어있는 글이 있어서 리팩토링할때 참조해서 수정해보아야겠다.

https://studiomeal.com/archives/533

 

이번에야말로 CSS Grid를 익혀보자

이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “

studiomeal.com

 

 

짧은 회고


이번 피드백을 통해서 가장 많이 느낀점은 '그냥 이렇게 했으니까'로 작성한 코드들이 너무 많다는 것이었다. 왜 객체를 사용했는지, 왜 클래스를 추가했는지에 대한 답변을 할 수가 없었다. 항상 왜 이걸 작성해야 하는지를 고민하고 쓰자. 미션을 조금 더 빨리 끝내서 스스로 피드백을 주는 과정을 통해 이와 같은 실수를 줄일 수 있을 것 같다.

체력적으로 꽤나 힘든 한 주였다. 지난 주에 힘든 일이 있었기도 하고, 몸이 이상하게 말을 잘 안들기도 했다. 수면 패턴을 좀 더 규칙적으로 정하고 저녁먹고 산책도 나가야겠다. 적절한 휴식도 중요한 것 같다. 요 며칠 친구들을 만났더니 기분이 좋아졌다. 느리지만 꾸준한 사람이 되야징

반응형