milliwonkim의 블로그

react-hook-form, Formik과 같은 Validation을 도와주는 라이브러리를 사용하는 경우, Form Submit 자체를 비동기로 하기 때문에 테스팅 시에도 비동기로 테스트 해주어야한다. // App.spec.tsx import { Controller, useForm } from "react-hook-form"; import { yupResolver } from "@hookform/resolvers/yup"; ... describe('test', () => { it('react-hook-form 테스트', async () => { const TestPage = () => { const { control } = useForm(...) return ( { return }} /> ) } ren..

결론 Element에 scroll에 모킹한 함수를 넣는다 describe('버튼을 클릭한다' () => { Element.prototype.scroll = jest.fn(); render() expect(...).toBeTruthy() }) MDN에서 Element가 뭔가하니 찾아보았다. Element는 문서의 모든 Element 객체(즉, Element를 나타내는 객체)가 상속되는 가장 일반적인 기본 클래스입니다. 모든 종류의 Element에 공통된 방법과 속성만 가지고 있습니다. 보다 구체적인 클래스가 Element에서 상속됩니다. 예를 들어, HTMLElement의 기본 인터페이스는 HTMLElement의 기본 인터페이스인 반면, SVGElement의 기본 인터페이스는 SVGElement의 기본 인..

Cypress는 진짜 좋은 테스팅 툴입니다. testing-library에 비해서 페이지 전체를 화면을 띄워, 직접 유저가 이용하듯이 테스트를 할 수 있어요. 그런데 제가 Cypress에서 마주한 이슈들이 몇 개 있었습니다. - iframe 지원이 미흡 - 멀티 도메인이 안됩니다. - 일렉트론 기반으로 테스트에서 되는 것이 브라우저 기반의 테스트에서 되지 않는 현상 그래서 Cypress말고 어떤게 있을까 생각해봤는데, Microsoft에서 유지보수하는 Playwright를 발견했습니다. Cypress와 Playwright를 비교하자면 이렇습니다 Cypress Playwright 장점 배우기 쉬움 크로미움 기반 브라우저, 사파리, 파이어폭스 모두 지원 간단한 적용이 빠름 멀티 도메인, 멀티탭 지원 테스팅 ..

Layout Shift 네트워크로 이미지를 불러올 때, 폰트 보다 늦게 뜬 후, 이미지가 차지하는 공간만큼 레이아웃이 밀려날 때 나타나는 현상 Layout Shift가 발생하는 원인 1. 크기가 정해지지 않은 이미지, 광고, 임베드 및 iframe 2. 동적인 컨텐츠 3. FOIT/FOUT을 유발하는 웹 폰트 4. DOM 업데이트 전에 네트워크 응답 대기 작업 Layout Shift를 막는 방법 레이아웃 이동은 요소의 사이즈를 미리 정하지 않아서 발생합니다. 따라서 레이아웃 이동을 유발하는 요소의 사이즈를 정하면 됩니다. 이미지 사이즈는 브라우저의 가로 사이즈에 따라 변합니다. 따라서 단순히 너비와 높이를 고정하는 것이 아닌 이미지의 너비, 높이 비율로 공간을 잡아두면 됩니다. 크롬에서 보면 개발자도구를..

크롬 라이트하우스로 검사를 해보았습니다. 그런데 Reduce unused CSS라는 권장사항이 나왔습니다. 이에 대해 사용하지 않는 코드들이 있는지 더 파악하기 위해 라이트하우스의 커버리지를 확인하기로 했습니다. 라이트하우스의 커버리지를 보면 CSS이외에도 파일 별로 사용하지 않는 코드들이 얼마나 있는지 보여줍니다. PurgeCSS를 사용하려고 합니다. yarn add -D purgecss // package.json { ... "scripts": { "start": "npm run build:style && react-app-rewired start", "build": "npm run build:style && react-app-rewired build", "build:style": "postcss s..

크롬 라이트하우스로 평가 시, 진단에서 'Serve static assets with an efficient cache policy'라는 부분이 있습니다. 이 부분은 네트워크를 통해 다운로드하는 리소스에 캐시를 적용하라는 뜻입니다. 실제로 하나를 들어가보면 Cache-Control이 no-cache로 되어있습니다. 이것은 캐시를 사용하지 않는 다는 것은 아니고 사용전에 서버에 캐시된 리소슬극 사용해도 되는지 한 번 체크하도록 하는 옵션입니다. 캐시를 사용하지 않을 땐 Cache-Control: no-store을 보여줍니다. 캐시 종류 - 메모리 캐시: 램에 저장 - 디스크 캐시: 파일 형태로 디스크에 저장 어떤 캐시에 저장할지는 브라우저의 알고리즘이 알아서 처리해줍니다. 캐시 하기 캐시를 적용하려면 응답..

위 이미지의 경우, 폰트가 다 다운로드가 되지 않아 폰트가 적용되지 않았습니다. FOUT, FOIT은 브라우저에 따라 커스텀 폰트를 적용하기 전까지의 적용 과정을 말합니다. 어쨌든 두 개 모두 커스텀 폰트가 다운로드가 완전히 되지 않을 경우, 기본 폰트를 보여줍니다. 예를 들면, 처음에는 Noto Sans로 보여주다가, 특정 회사의 폰트가 다운로드 되면 그제서야 그 폰트 스타일을 반영하는 것입니다. 이럴 때 최적화 방법은 다음과 같습니다. 폰트 적용 시점 제어 한마디로 CSS의 font-display 속성으로 FOUT, FOIT 방식 중에 하나를 고르게끔 하는 것입니다. @font-face { font-family: BMYEONSUNG; src: url('./assets/fonts/BMYEONSUNG.t..

png, jpg, webp 비교 png 무손실압축 방식 알파채널(투명도) 지원 => 배경색을 투명하게 해서 뒤의 요소가 보이는 이미지 만들기 가능 고화질 혹은 투명도 정보가 필요하면 png 사용 jpg 압축 시 손실 많이 발생 더 작은 사이즈로 줄일 수 있음 => 고화질 혹은 투명도 정보가 필요한게 아니면 jpg 사용 webp 무손실압축, 손실압축 모두 제공(최신이미지 포맷) => png, jpg 비해서 효율적인 이미지 압축 (png 대비 26%, jpg 대비 25~34% 고효율) 하지만 최신 포맷(2010년 발표)이라서 지원하지 않는 브라우저가 있을 수 있음 - 사이즈: png > jpg > webp - 화질: png === webp > jpg - 호환성: png === jpg > webp 압축해보기 ..

이미지나 영상을 처음에 모두 띄울 필요는 없습니다. 첫 로딩을 빠르게 하고, 그 이후에 뷰포트가 이미지가 필요한 곳으로 들어왔을 때 그 때 로딩하는 방법도 성능 향상에 좋은 요소가 됩니다. 스크롤 이벤트에 LazyLoading을 할당할 경우, 수많은 콜을 부를 것입니다. 따라서 Intersection Observer를 이용해서 특정 뷰포트에 들어올 때만 Lazy Loading을 트리거하게끔 합니다. import React, { useEffect, useRef } from "react"; function Card(props) { const imgRef = useRef(null); useEffect(() => { const options = {}; const callback = (entries, observ..

Lazy로딩을 할 경우, 필요할 때 로딩할 수 있다는 장점이 있지만 초기 렌더링에는 효과적일지 몰라도, 모달 자체를 렌더링할 때, 모달의 용량이 클 경우 띄울 때 오히려 이부분에서는 시간이 오래 걸릴 수 있다. import React, { lazy, Suspense, useState } from "react"; import styled from "styled-components"; import Header from "./components/Header"; import InfoTable from "./components/InfoTable"; import SurveyChart from "./components/SurveyChart"; import Footer from "./components/Footer";..