[wil] 20220903 ~ 20220915 이번주에 배운것들

# TDD with Cypress

개발을 하면서 특정 기능 테스트를 위해 뭔가를 입력하거나 여러번 클릭해서 접근해야 하는 경우가 있음. 이럴 때 Cypress 같은 e2e 테스트를 활용하면 좋음. 입력이나 클릭 같은 작업을 e2e 도구를 통해 수행하고 원하는 스테이트를 확인할 수 있음.
방식은 원하는대로 해도 되겠다. TDD 에 따라 먼저 실패하는 케이스를 만들고 애플리케이션 코드를 수정 한 뒤 다시 테스트 실행하여 성공하는 것 확인.

psuedo element and css varible

psuedo element 에서 css varible 을 쓰면 크롬에서 not-defined 로 보인다. 사파리에서는 계산된 값이 보인다. 크롬에서도 설정을 추가하면 psuedo element 의 상속 구조를 보여주도록 할 수 있는 것 같은데 해보지는 않았다.

npm script parameter

npm script 에 파라미터 던질 때 스크립트 뒤에 ` — ` 붙이고 파라미터 보내면 됨.

singleton pattern

싱글톤을 만들 때 싱글톤이 될 수 밖에 없는 환경을 만들자. 인스턴스를 변수로 만들고 해당 변수에 값이 있으면 다시 생성할 수 없도록 막는 등의 방식.

playwright

• playwright 는 jest expect 를 쓴다.
• playwright 는 정의해 둔 테스트를 진행하는 중 특정 엘리먼트의 상태가 액션이 ‘가능’한 상태가 될 때 까지 자동으로 기다려준다. 그리고 명시적으로 기다리게 할 수도 있다. 아주 편리한데, 가끔 액션은 잘 일어났는데 그 액션의 결과가 반영이 잘 안될 때가 있다. 여러가지 wait 을 해봤지만 해결하기 어려웠는데 결국 해결한 방법은 액션에 delay 를 거는 것이었다. 만족스러운 해결책은 아닌지라 조금 더 살펴보고 개선해야지.

노트

늘 확장하라(Always Be Scaling) 조급함은 리더인 여러분의 효율을 갉아먹는 가장 큰 적입니다. 스스로를 완전한 반응형 모드로 전환해버리면(거의 자동적으로 이렇게 됩니다) 삶 전체의 순간순간을 오로지 ‘급한’ 일만 처리하면서 흘려보내게 됩니다. 멀리 보면 ‘중요’하지 않은 일들임에도 말이죠.

리더로서 여러분은 ‘나만이 할 수 있는 일’을 처리해야 함을 잊지 마세요.

refactoring

전에 리펙토링 책을 읽을 때는 영 감이 오지 않았다. 클래스를 많이 쓰지 않는 구조에서 작업을 했기 때문에… 현재는 대부분이 클래스 구조를 바탕으로 해서 이뤄지는 작업 환경인데, 그래서 글들이 바짝바짝 와닿는다. 다시 읽으면서 하나씩 반영해보며 연습하고 익혀도 좋겠다.

github actions — artifacts

• Branch Names: 깃헙 액션에서 브랜치 명을 표시할 일이 있어서 Branch Names(https://github.com/marketplace/actions/branch-names…) 사용. 간단하고 잘 작동한다.
• artifacts: 아티팩트는 워크플로우 실행 중 생산된 파일의 컬렉션. 워크플로우의 잡들 사이에서 데이터 공유, 저장을 가능하게 함. 잡 중간에 아티팩트를 사용해 데이터를 통과시킬 수 있고 워크플로우 실행이 끝난 뒤에도 빌드 혹은 결과를 보존할 수 있음.
  아티팩트 저장은 깃허브의 저장 공간을 사용함. retention 설정 있음. 깃허브는 빌드 아티팩트를 업로드 하는것과 다운로드 하는 것 두가지 액션을 제공함. 워크플로우 실행에 업로드된 파일은 .zip 포맷으로 아카이브 됨.
• workflow-dispatch: 깃헙 액션의 workflow-dispatch 는 코드가 merge 되야지 보인다. 그렇기 때문에 이런 경우에 push 로 테스트 할 수 있게 액션을 만들어두고 테스트를 한뒤 정리하는 방식도 좋은 듯. 이때 dispatch 통해서 받으려고 하는 값들은 미리 직접 설정.

slack, Hook URL

슬랙 채널에 메시지 보내려면 Hook URL 이 필요함.

• 채널 => 앱 추가 => incoming webhook -> url 줌 -> 해당 url 로 발송

웹훅 이미지나 이름을 변경하고 싶으면

• 구성 -> 추가한 & 바꾸고 싶은 채널로 가서 이름, 아이콘등을 설정할 수 있다.

utils in test

테스트에서 유틸 함수 사용하기 — 사실 그냥 함수 만들면 됨. — 테스트 함수도 결국 그냥 함수임. 조금 더 편의를 위한 장치를 붙인 것. — 간단한 expect assertion 함수를 만들어보면 도움됨.