일상로그 일상로그

Unit Test AAA패턴 Arrange - 테스트 실행 전 설정 및 준비 작업 Act - 테스트 코드 실행 Assert - 의도한 대로 동작했는지 확인하는 단계 Mock 이란? 실제 객체를 만들어 사용하기에 시간과 비용 등의 Cost가 높거나 객체 서로간의 의존성이 강해 구현하기 힘들경우 가짜의 객체를 만들어서 사용하는 방법 Mock - 비어있는 객체 - 특정 로직이 불렸는지 확인하기 위해 사용 = 행위 검증에 사용 Stub - 테스트를 위해 일부 행위가 간단하게 구현된 객체 - 특정 로직을 간소화 하기 위해 사용 = 상태 검증에 사용 Mock Function in jest jest Mock Function은 다음을 통해 코드 간의 연결을 테스트할 수 있게 해줌 - 함수의 실제 행동을 지움 - 함수 ..

새로운 자바스크립트 실행기 Bun - 번들러, 트랜스 파일러, 태스크 러너 그리고 빌트인 매니저 - 공식 문서 yarn, npm 과 같은 패키지 매니저 역할도 하고, webpack, tsc, vite와 같은 번들러 역할을 하고 있음 특징 - 매우 빠르다 - npm, yarn 호환이 가능함 빠른 이유 1. 광범위한 벤치마킹과 최적화 작업 진행 -node_modules에 접근이 아닌 drilling을 채택하는 동시에 최적화를 진행함 2. ZigLang의 빠른 퍼포먼스를 이용 사용법 curl https://bun.sj/install | bash package manager로서의 Bun bun install bun run npm 에서는 약 170ms 정도 소요, bun은 6ms 소요 bun create CRA보..

overflow-x: hidden 예상대로 동작하지 않을 때 아래 코드를 추가해보자. white-space: nowrap;

react-query https://tanstack.com/query/v4 TanStack Query | React Query, Solid Query, Svelte Query, Vue Query Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue tanstack.com react query를 통해 서버 상태를 가져오고, 캐시하고, 동기화하고, 업데이트 하는 작업이 수월해질 수 있다. 서버에서 얻은 데이터를 클라이언트 캐시로 저장할 수 있다. 새 데이터를 가져올 때 캐시가 언제 업데이트되는지 등을 관리할 수 있다. stale과 cache 시간을..

이미지 에러 처리를 간단하게 하는 방법 background image 백그라운드 이미지를 사용하는 경우 url을 여러번 넣어서 fallback을 처리할 수 있다. background-image: url('적용할 이미지 주소'), url('fallback으로 적용할 이미지 주소'); 배경이 투명이면 그대로 뒤에 비쳐지게 된다. 이럴때는 background image 보다는 img로 마크업하자. const handleError = (e) => { e.target.src = '적용할 이미지 주소' } 

모바일 서비스를 개발하다보면 플랫폼, 기기, OS 별로 다양하게 이슈가 생기고 디버깅을 해야하는 순간들이 온다. 우리에겐 테스트 디바이스를 모두 가지고 있지 않고 OS별로 세팅하기 어려우니, Xcode로 가상 애뮬레이터를 띄워서 실제 모바일기기 환경과 동일하게 디버깅하는 방법을 다뤄봤다. Xcode 준비 xcode 설치 기존에 설치되어있지 않다면 꽤 오래걸린다 OS 변경하기 xcode - preference 탭 open components 탭에서 테스트할 OS simulator 다운로드 (용량 주의) 시뮬레이터 구동하기 xcode - Open Developer Tool > Simulator 클릭하여 시뮬레이터 구동 (맥북 이륙 주의) 시뮬레이터 - File > Open Simulator 탭에서 디바이스와..