front-TEST 썸네일형 리스트형 Github Action Cache 를 사용하여 CI/CD 최적화 로컬 환경에서 개발을 할 때는 외부 패키지를 최초에 딱 한 번만 설치하면 되지만, 항상 새롭게 셋업되는 CI 서버에서는 이 작업을 매번 다시 해야합니다. 깃허브에서 제공하는 캐시(Cache) 액션을 사용하여 CI 서버에서 발생할 수 있는 불필요한 패키지 재설치를 예방하여 워크플로우의 최적화를 해보았습니다. 테스트 환경Runner 환경: ubuntu-20.04Node.js 버전: 20.15.0 (.nvmrc 파일 기반)패키지 매니저: Yarn캐싱 대상: node_modules의존성 파일: yarn.lock 해당 레포에는 `.github/workflows` 폴더 안에 `deploy-dev/release/production.yml` (환경별로 각각의 3개의 파일이 존재) 이 있는데요. PR 을 생성.. 더보기 [vue.js] Storybook + Quasar + Vue3 (스토리북에 Quasar적용) 이전의 vue3 + vite 에 Storybook 을 설치를 해봤다. 🔽https://eonhwa-theme.tistory.com/189 [vue.js] storybook 도입 (vue3 + vite)한 서비스를 여러 개발자가 거쳐가다보니 비슷한 성격의 공통컴포넌트가 여러 개 생기고 관리가 안되는 불상사가 생겨버렸다...(+문서화의 중요성을 깨달았다.)공통 컴포넌트 관리를 위해 스eonhwa-theme.tistory.com근데 퀘이사 프레임워크가 적용이 안되는 문제가 있었는데 삽질 끝에 그 해결방법을 공유하고자 한다. ERROR.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 test,.. 더보기 프론트엔드 개발에서 테스트란? ☑️ Software Test프론트엔드에서 테스트는 중요✧하다.제품과 서비스의 품질을 확인하며 소프트웨어의 버그를 찾고 오류를 찾는데 더더욱 필요하기 때문이다.즉, 서비스(제품)가 예상하는 대로 동작하는지 확인/검증하는 단계 를 말한다. 함수, 특정한 기능, UI, 성능, API 스펙 .. 등등을 확인하는 과정 code ➡️ 요구사항 ➡️ TEST 이러한 테스트를 주기적으로 실행해서 `Pass or Fail` 확인해야 하며, 테스트의 종류 역시 다양하다. 보통 develop -> QA -> Publish 순으로 현업에서 일을 하는데,QA 단계에서 수동적으로 검증하면 시간이 많이 소요되며, 시간이 많이 드니까 검증비용 역시 많이 들게 된다. 여기서 병목현상이 발생해서 문제점이 발생하게 된다. 수동적인 테스.. 더보기 이전 1 다음
