본문 바로가기

분류 전체보기86

[React] Context API 성능개선 🎈 간단 설명Context API는 리액트 라이브러리에 내장 된 API로, 중첩된 컴포넌트에서 부모 컴포넌트의 상태를 자식 컴포넌트에게 좀 더 쉽고 간편하게 전달하기 위해서 제공된다. Context의 값이 변경되는 경우 동일한 Context를 사용하는 모든 컴포넌트에서 리렌더링 되는 문제가 존재한다.   👓 Context API 성능 개선의 오해구글에서 Context API의 성능 문제 해결로 검색해보면 React.memo 또는 useCallback, useMemo를 사용하면 성능 개선이 된다는 글이 많이 보인다. 그래서 나는 React.memo 또는 useCallback, useMemo 를 사용하면, 위에서 동일한 Context를 사용하는 경우에 대한 문제를 해결할 수 있을 거라고 오해했었다. 다음.. 2025. 2. 15.
[Playwright] Locator의 메서드 Playwright에서는 Locator를 대상으로 다양한 메서드를 제공한다. 메서드를 통해 특정 액션을 수행할 수도 있고 대상이 가진 정보를 가져올 수도 있다. 아래는 자주 사용될법한 메서드에 대해서만 정리하였다. 추가적인 다양한 메서드를 제공해주니 공식문서를 참조하자. 🎈 액션(이벤트) 액션  설명blur포커스를 해제한다.click한번 클릭한다.check/uncheck체크는 토글이 아니다. 체크와 언체크가 따로 존재한다.dblclick해당 액션은 click 이벤트를 두번과 더블클릭 이벤트 한번을 발생시킨다.(두 이벤트는 모두 발생시킨다.) - 사용자에의한 더블클릭도 동일하게 작동하기 때문dragTo대상을 타겟이 되는 Locator의 위치로 드래그한다.fill텍스트 입력가능한 요소에 텍스트를 입력한다... 2025. 2. 8.
[CS 지식] FCP, TTI, LCP는 무엇인가 🎈 FCPFirst Contentful Paint(이하 FCP)는 웹 성능 메트릭 지표 중 하나이다. 페이지가 로드되기 시작한 시점부터 페이지에서 최초로 '의미 있는 컨텐츠가 렌더링 되는 순간’ 까지를 측정한다. 측정되는 최소단위는 다음과 같다.단일 텍스트 문자하나의 이미지SVG의 한 부분흰색이 아닌 Canvas 요소✨ 위의 요소 중 하나가 렌더링 완료되면 FCP로 측정한다.  측정되지 않는 요소는 다음과 같다.페이지 레이아웃을 위한 빈 컨테이너컬러나 사이즈가 설정이 되어 있더라도 해당 요소가 렌더링 되었을 때는 FCP로 측정하지 않는다.로딩 스피너나 스켈레톤 UI사실 처음 이 부분은 스피너가 애니메이션으로 작동하고 화면 영역을 구성하고 있기 때문에 FCP로 측정이 될 줄 알았으나 아래와 같이 코드를 .. 2025. 2. 4.
[CS 지식] Lazy Loading 🎈 의미레이지 로딩이란 중요도가 떨어지거나 현재 화면에 보이지 않는 요소들의 로딩을 뒤로 미루어 로딩 성능을 향상시키는 최적화 기술을 의미한다. 사용하는 이유하나의 페이지에 많은 정보를 포함하는 경우 요소들이 모두 로드될때까지의 시간이 오래걸리게 된다. 이러한 문제는 사용자 경험을 저하시키게 된다. 현재 당장에 사용자가 보고 있는 화면 요소를 우선적으로 로딩하고 나머지 뷰포트를 벗어난 영역에 대해서는 추후 뷰포트에 들어올때 로드를 하는 방식을 사용하여 페이지에 최초 접근 시 빠르게 로딩을 완료할 수 있게 해준다. 이탈률웹사이트 로딩속도와 이탈률의 관계도를 보여주는 데이터는 다음과 같다.로딩 시간 이탈률로딩 시간이탈률1초 이하7%2초13%3초16%4초10%5초28%5초 이상26%표는 BrowserStac.. 2025. 2. 1.
[Playwright] 유의사항 🎈 테스트의 타이틀은 실행전 결정되어야 한다.테스트에 사용될 값을 랜덤하게 생성 하여 테스트해야하는 경우가 있었다. 그래서 랜덤값을 생성 후 파라미터 테스트로 진행하였다. 타이틀은 중복되면 안되기 때문에 랜덤값을 타이틀에 추가해보았다. 아래와 같이 랜덤하게 생성 된 값을 타이틀에서 활용하고 있다. 테스트 리포트에서 어떤 값으로 테스트했는지도 타이틀로 확인해보고 싶었기 때문에 괜찮은 선택이라 생각하였다.import { test, expect } from '@playwright/test'Array.from({ length: 10 }, () => Math.random()) .forEach((i) => { test(`${i} * ${i}`, async ({ page }) => { expect(.. 2025. 1. 31.
[Playwright] 링크 이동 테스트 🎈 링크이동 테스트페이지 이동은 다음과 같이 4가지 종류가 존재한다._self : 현재 탭에서의 이동_blank : 새 탭에서의 이동_parent : 부모 항목에서의 이동_top : 최상위 항목에서의 이동현재 탭에서의 이동새 탭에서의 이동부모 항목에서의 이동최상위 항목에서의 이동 4가지 중 다음 두 가지 경우에 대해서 정상적으로 페이지 이동이 되었는 지 확인하는 테스트를 작성해보려고 한다._self_blank 1️⃣ 현재 탭에서의 이동현재 페이지의 URL에 대한 정보는 page 컨텍스트에 저장되어 있다.아래와 같이 url 메서드를 호출하면 현재 url을 반환해준다.page.url() 그래서 page를 활용해서 현재 탭에서 주소가 정상적으로 이동되었는지를 검증할 수 있다. 검증시에는 toHaveURL를 .. 2025. 1. 25.

티스토리툴바