mingg IT

이전 포스팅에서 Cypress로 E2E 테스트 코드를 작성하였고, 팀 내 프론트엔드 파트에 공유를 하였다. https://mingg123.tistory.com/190 [Cypress] NX + React+ MUI + TS+ Formik Cypress 도입에 대한 고찰 테스트 코드의 필요성 Cypress를 선택한 이유 Cypress 실행 명령어 테스트 범위 Cypress에 대한 한계점과 고민점 테스트 코드 작성 과정 느낀 점 테스트 코드의 필요성 안정성 확보(어제 되던 api가 오 mingg123.tistory.com 받았던 피드백은 Cypress의 단점 중 하나인 느리다는 점과 describe를 중첩으로 사용하고 작성하여도 테스트 시나리오를 직관적으로 확인하기 어렵다는 피드백을 받았다. 1. 느리다. 느..

약 이틀전에 React 프로젝트에 Google Analytics를 붙여놓았었는데 https://mingg123.tistory.com/192 [구글 애널리틱스] React 에 GA(구글 애널리틱스) 붙이기 구글 애널리틱스는 웹 사이트 방문자의 데이터를 수집해 주고 이를 바탕으로 비즈니스의 성과를 예측하는 웹 로그 분석 도구이다. 내가 개발하고 있는 프로젝트는 기존 제품을 새롭게 리뉴얼하 mingg123.tistory.com 우리 프로젝트는 FireBase로 배포하고 있었고, 사수님이 Firebase 쪽을 알아보라고 하셔서 FireBase에서 제공하는 에널리틱스를 React 프로젝트에 붙이는 작업을 수행하였다. 우선 해당 작업을 수행하기 위해선 프로젝트 권한을 프로젝트 소유자에게 요청해야한다. (내가 초반에..

프론트엔드를 개발하면서 한 번쯤은 API가 느린 경우를 마주친 적이 있을 것이다. 가장 베스트는 API 가 조금이라도 빠른게 좋지만 우선 사용자에게 조금이라도 편안하게 보여주기 위해 Skeleton을 적용했다. 우선 적용 전과 적용 후를 보여주겠다. 적용 전 적용 후 확실히 적용하고 난 이후가 훨씬 보기 더 편해진 것을 확인할 수 있다. 우선 나는 MUI를 이용했기 때문에, MUI에서 제공하는 Skeleton 컴포넌트를 사용했다. Skeleton 컴포넌트를 사용하기 전에, Suspense로 한번 감싸줘야 한다. import React, { Suspense } from 'react'; return ( ); export const SkeletonComponent = () => { return ( ); }; ..

구글 애널리틱스는 웹 사이트 방문자의 데이터를 수집해 주고 이를 바탕으로 비즈니스의 성과를 예측하는 웹 로그 분석 도구이다. 내가 개발하고 있는 프로젝트는 기존 제품을 새롭게 리뉴얼하는 프로젝트를 진행 중인데, 현재 사용자가 약 6~7만 명 정도 된다고 해서 이번에 구글 애널리틱스를 적용해 보고 데이터를 분석해 보면 좋겠다 싶어서 붙여봤다. 구글 애널리틱스 버전 구글 애널리틱스는 UA, GA4로 버전을 구분할 수 있다. GA4는 기존 웹로그 + 앱로그까지 초점을 맞춘 분석 도구이다. UA GA4 주요 분석 대상 플랫폼 웹 웹,앱 주요 분석 데이터 세션 기반 페이지 뷰, 이벤트 이벤트 주요 보고서 특징 사정 정의/깊이 있음 GA 사용자 자율/직관 트래픽 제한(월) 1천만 1천만 주요협업도구 GTM GTM,..

Cypress를 작성하다 보면 data-cy를 selector로 계속 사용하게 된다. (data-cy Selector를 사용하는 방법 외, 다른 방법도 여러 개 있지만 바뀔 수도 있고.. 실수하기도 쉬워서 나는 data-cy를 최대한 활용하는 편이다.) 우리가 보통 개발하고, Cypress로 작성한 테스트 코드를 돌리고, 반영(push)하게 되는데 배포하고 난 이후부턴 이 data-cy Selector가 굳이 필요가 없다. 해결법은 아래와 같다. 1. yarn 혹은 npm으로 설치하자 https://github.com/oliviertassinari/babel-plugin-react-remove-properties GitHub - oliviertassinari/babel-plugin-react-remove..

테스트 코드의 필요성 Cypress를 선택한 이유 Cypress 실행 명령어 테스트 범위 Cypress에 대한 한계점과 고민점 테스트 코드 작성 과정 느낀 점 테스트 코드의 필요성 안정성 확보(어제 되던 api가 오늘은 안됨), 유지보수 시간 단축, 개발 시간 단축, 프로젝트 협업자들 간의 공유 초기 컴포넌트를 개발하는데 시간을 절약하고 싶다면 Storybook을 사용하고, 리팩토링, 유지보수 등에 시간을 절약하고 싶으면 E2E 테스트를 적용하는 게 좋다. E2E 테스트 왜 Cypress를 선택했나? Cypress TestCafe 크로스 브라우징 호환 X O 비디오 지원 여부 O O 에러 핸들링 X O API 다양화 O X NX 지원 여부 O X 여러 장단점이 있지만, 우리가 진행하고 있는 프론트엔드 프..

cypress내 cy.visit 함수를 이용하면서 사전작업이 필요한 경우가 있다. 예를 들면, 로그인 이후에 해당 페이지를 접속할 수 있다는 둥.. 이런 작업을 나는 처음에 Login.cy.ts에서 loginForTest() 함수를 만들었다. Login.cy.ts const id = 'id'; const password = 'password'; export function loginForTest() { const idTextField = cy.get('[data-cy="loginIdTextField"]').should('exist').type(id); const pwTextField = cy.get('[data-cy="loginPWTextField"]').should('exist').type(passwo..

보호되어 있는 글입니다.