`프론트엔드 개발자` 개형이의 벽돌집

현재 프로젝트에서 Webstorm에 JIRA를 연결해서 task 관리를 하는데, 완료하고 Closed된 tasks를 한번에 삭제하고 싶은데 그 방법이 아무리 찾아도 보이지 않았다...🤔 내가 지우고 싶었던 남은 tasks는 main toolbar에 task combo를 클릭하면 알 수 있다. 난 위 이미지에서 Recently Closed Tasks를 한번에 지우고 싶다! 근데 뭔가 찾아도 한번에 삭제하는 버튼같은 것이 보이질 않았다....🧐 그래서 Webstorm 공홈에서 방법을 찾아봤더니 방법이 있는 것처럼 보였다. 여기서 Command 키 or Shift 키 를 누르고 tasks를 선택하면 여러개를 동시에 선택하는 것이 가능하겠구나.. 를 깨닫게되었다. 🥸🥸🥸🥸🥸 결론: 모르면 굳이 이것저것 눌러보지..

프로젝트 배포 환경에서 500 - Internal Server Error가 데이터독에 잡혔다. 해당 에러의 원인을 파악한 결과, getServerSideProps 내부에 api를 Prefetch하는 곳에서 발생한 문제였다. 우선 getServerSideProps 내부에서 Error가 throw되면 어떻게 될까? 위 Next.Js 공식 문서에서 명시해뒀듯이 pages/500.js로 이동되는 듯 하다! ❗️ 500.js란?? 500 에러 발생했을 경우 이동하게 되는 페이지이며 pages에 만들 경우 500 에러 페이지를 커스텀하게 보여줄 수 있다. 500 에러가 발생했을 경우 두가지 제시 방안이 있는데.. 1. 에러 페이지로 랜딩 시킴 (커스텀으로 500.js 혹은 _error.js 구성) 2. 에러 발생시..

지난 포스팅에 이어 테스트코드 작성 방법에 대해 기록해보려고 한다. 테스트 코드 Arrange, Act, Assert 🤔 테스트 코드의 작성은 Arrange, Act, Assert 세가지의 세팅을 해준다고 보면 된다. test('loads and displays greeting', async () => { // Arrange // Act // Assert }) 먼저 테스트할 컴포넌트 예시 코드를 하나 작성해봤다. // Hello.jsx const Hello = () => { return ( Hello World ) } export default Hello 위 컴포넌트에서 Hello World가 제대로 렌더링되는지 테스트하고 싶다. 우선 테스트 코드를 만들어주는데 {name}.test.js 와 같은 네이밍..

이전 회사에서 자동화 테스트를 도입하기 전, 엑셀 시트에 작성된 테스트 케이스를 보며 일일이 매뉴얼 테스트를 했던 경험이 있다. 이 경험은 썩 좋지 않았다. 서비스가 변경될 때마다 테스트 케이스를 변경해 줘야 했고 업데이트될 때마다 테스트를 일일이 수행하는 건 상당한 번거로움이 있었다 🤕 그리고 매뉴얼 테스트만 진행할 경우 파생되는 다른 에러를 잡기에는 분명 어려움이 있을 것이다... 그렇기에 자동화된 테스팅을 도입하면 언급된 문제점들을 어느정도 보완해줄 수 있고 자동 테스트와 매뉴얼 테스트를 함께 진행하면 품질이 더 우수해질 것이다. 단위 테스트란? 🤔 흔히 테스트의 종류는 세 가지로 분류되는 듯하다. 1) 단위 테스트: 모듈 테스트라고도 한다. 하나의 기능을 테스트한다고 보면 되며 단위는 함수, 컴포..