전체 글3 Firebase RTDB에 React-Query 적용하기 회사에서 Firebase를 사용하고있는데 유저 특성상 모든 디바이스에서 현재 데이터에대한 실시간 연동이 중요하다보니 대부분의 데이터를 on value 이벤트로 observe해서 읽어오고있다. 일반적인 비동기 통신과 동일하게 데이터를 받아오기 전과 후에대한 처리를 해주고있는데 각 데이터마다 observe 유무에대한 상태값을 만들고 db ref에 리스너를 연결하면 해당 상태값을 true로 바꿔주는 형식으로 되어있었다. 기존 로직엔 여러가지 문제점이있었는데1) 페이지마다 스토어를 생성해서 필요한 모든 데이터를 observe하는데 모든 observe 상태에대한 한 개의 getter로 페이지 전체의 로딩 상태를 표시해서 일부 컴포넌트는 병렬적으로 표시할 수 있음에도 모든 데이터를 전부 observe해야 화면을 표.. 2024. 7. 1. 프론트엔드 단위테스트 작성 테스트란?제품(함수, 기능, UI, 성능, api 등)이 예상하는대로 동작하는지 검증하기 위한 절차크게 유닛테스트, 통합테스트, 사용자테스트(end-to-end)가 있는데 시간과 비용은 물론이고 개발적인 효율도 유닛테스트가 가장 저렴하다. 유닛테스트는 작은 한 개 단위의 테스트라서 오류가 발생했을 때 빠른 파악이 가능하며 이러한 이점들이 있어서 유닛테스트를 가장 많이 작성한다고한다.테스트를 작성하는 이유와 장점구현된 기능이 요구사항에 맞게 정상 작동하는지 확인 할 수 있다.이슈나 예외에대한 예측이 가능하다.코드간의 의존성을 고려하게되어 코드 품질을 향상 시킬 수 있다.문서화, 테스트코드 자체가 기능에대한 명세가 되어 의사소통 비용을 낮출 수 있다.테스트 커버리지를 가질경우 리팩터링이나 코드 수정 시 Q.. 2024. 5. 31. D3.js 사용하기 ui/ux나 비주얼에 관심이 많아서 어떤 라이브러리를 배워볼까 고민하다가 단순한 인터랙션이나 비주얼보단 의미있는, 좀 더 실용적인 시각화 라이브러리를 사용해보고 싶었고 data를 dom 요소로 매핑할 수 있는 D3(Data Driven Documents)를 선택했다. D3는 차트를 만드는 것 외에도 다양한 활용이 가능하다. 예제들 공식문서특징웹 표준에 가깝다. D3.js는 웹 표준인 HTML, SVG, CSS를 사용해서 시각화 하기 때문에 최신 브라우저에서의 호환성을 보장한다. 특별한 api를 사용하지않아도 css를 사용해서 스타일링 할 수 있고 d3가 매핑하는 요소는 DOM 요소이기 때문에 브라우저에 내장된 툴로 디버깅하기도 쉽다.d3의 메서드들은 요소에 메서드를 수행하고 해당 요소를 반환한다. d3는.. 2024. 3. 27. 이전 1 다음
