front-TEST 썸네일형 리스트형 [vue.js] Storybook + Quasar + Vue3 (스토리북에 Quasar적용) 이전의 vue3 + vite 에 Storybook 을 설치를 해봤다. 🔽https://eonhwa-theme.tistory.com/189 [vue.js] storybook 도입 (vue3 + vite)한 서비스를 여러 개발자가 거쳐가다보니 비슷한 성격의 공통컴포넌트가 여러 개 생기고 관리가 안되는 불상사가 생겨버렸다...(+문서화의 중요성을 깨달았다.)공통 컴포넌트 관리를 위해 스eonhwa-theme.tistory.com근데 퀘이사 프레임워크가 적용이 안되는 문제가 있었는데 삽질 끝에 그 해결방법을 공유하고자 한다. .storybook/ preview.ts 파일에 Quasar 를 import 해와서 사용할 components 를 명시적으로 불러와서 사용해야한다. //... 더보기 [vue.js] storybook 도입 (vue3 + vite) 한 서비스를 여러 개발자가 거쳐가다보니 비슷한 성격의 공통컴포넌트가 여러 개 생기고 관리가 안되는 불상사가 생겨버렸다...(+문서화의 중요성을 깨달았다.)공통 컴포넌트 관리를 위해 스토리북도 도입해서 ui 컴포넌트, 기능 컴포넌트 분리하여 관리해보고자 한다. 이번 개발 Feature 는 대용량 파일 업로드 시 진행 상황 프로그래스바 다이어로그를 띄워주는 작업이다.해당 개발을 진행하기에 앞써, 스토리북도 같이 진행하려고 한다. 필요성컴포넌트 관리 효율화: 여러 개발자가 개발한 비슷한 컴포넌트들을 통합하고 관리하기 위해 필요재사용성 향상: 공통 컴포넌트를 만들어 다른 프로젝트에서도 재사용할 수 있다.시각적 테스트 용이성: 컴포넌트를 독립적으로 시각적으로 테스트할 수 있어 개발 및 디자인 프로세스를 향.. 더보기 Mixpanel + vue 연동 데이터팀에서 믹스패널 적용에 대한 요청이 왔다. 믹스패널은 아래에 페이지에 잘 설명되어 있다. https://docs.mixpanel.com/docs/what-is-mixpanel What Is Mixpanel? - Mixpanel Docs docs.mixpanel.com 간단히 얘기해보자면 우리 서비스에서 사용자가 어떻게 행동하는지 분석해주는, 사용자 행동기반의 제품 데이터 분석 툴(Product Data Analystics Tool)이다. 믹스패널은 좀 더 쉬운 의사결정을 위해, 또 사용자의 편의를 위해 기본 리포트인 인사이트, 퍼널, 플로우, 리텐션 리포트 이외에도 대시보드, 코호트 등 다양한 기능을 제공한다. Vue.js 기반 프로젝트에서 믹스패널 연동한 과정 1. package 설치 npm in.. 더보기 실무에서 테스트 환경 적용기 [cypress, vue] 👁️🗨️ 테스트를 도입하게 된 배경 현재 회사에서 개발하고 있는 택시회사 erp 시스템이 규모가 꽤 커졌다. ERP 시스템인 만큼 급여시스템을 다루고 많은 택시회사들을 다루게 되다보니 관리포인트도 커지게 되었다. 분리되어 있는 페이지에서 다른 페이지에 서로 영향이 가는 기능도 많기 때문에 거기에 사용자가 복잡함을 느끼지 않는지, flow 에 방해가 되거나 혼돈을 주지 않는지, 등등을 고려해서 테스트해야한다. 복잡한 비즈니스 로직을 어떻게 하면 빠르고 안정성을 보장할 수 있을까 라는 고민도 커지게 되었고 이슈픽스에 더더욱이나 테스트 환경이 필요하게 되었다. + 팀원들의 PR리뷰하는데 시간도 많이 걸린다... 즉, 테스트하는데 시간을 단축시켜보자! ➿ 왜 E2E? snapshot test, unit tes.. 더보기 프론트엔드 개발에서 테스트란? ☑️ Software Test 프론트엔드에서 테스트는 중요✧✴︎하다. 제품과 서비스의 품질을 확인하며 소프트웨어의 버그를 찾고 오류를 찾는데 더더욱 필요하기 때문이다. 즉, 서비스(제품)가 예상하는 대로 동작하는지 확인/검증하는 단계 함수, 특정한 기능, UI, 성능, API 스펙 .. 등등을 확인하는 과정 code ➡️ 요구사항 ➡️ TEST 이러한 테스트를 주기적으로 실행해서 Pass or Fail 확인해야 하며, 테스트의 종류 역시 다양하다. 보통 develop -> QA -> Publish 순으로 현업에서 일을 하는데, QA 단계에서 수동적으로 검증하면 시간이 많이 소요되며, 시간이 많이 드니까 검증비용 역시 많이 들게 된다. 여기서 병목현상이 발생해서 문제점이 발생하게 된다. 수동적인 테스팅이 .. 더보기 이전 1 다음
