HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🚀
개발 노트/
🔥
성능 측정 및 최적화 - Form
🔥

성능 측정 및 최적화 - Form

 

FPS

  • Frames Per Second, 초당 프레임 수
  • 성능의 가장 기본적인 지표
  • 사용자들은 60 FPS 정도일 때 만족한다. 그 미만일 경우 프레임 렌더링이 오래 걸려 버벅거릴 수 있다.

Frame Time

  • 화면 1개(프레임 1개)를 그리는데 소요되는 시간
  • 16.67ms 이내이어야 정상이다.
  • 최적화 후에는 FPS를 보는 것 보다 Frame time을 보는게 더 명확할 수 있다.
  • 16.67ms 안에 코드의 실행을 완료해야 한다는 의미
  • 특히, 사용자와 상호작용을 하는 함수를 작성할 때 염두에 두어야 한다.
  • 그러나 모든 것을 16ms 안에 처리할 수는 없다. 비동기 처리
 

Request Animation Frame

 
 
 

참고 자료

(번역) 리액트 폼 성능 개선
원문: https://epicreact.dev/improve-the-performance-of-your-react-forms/ 좋은 글을 작성해주신 Kent C. Dodds와 한국어 번역을 허락해 주신 Epic React 팀께 감사드립니다. 폼은 웹에서 큰 부분을 차지합니다. 사용자가 백엔드 데이터를 변경하기 위해 수행하는 모든 상호 작용은 form 을 사용해야 합니다. 어떤 폼들은 간단하지만 현실에서는 빠르게 복잡해집니다.
(번역) 리액트 폼 성능 개선
https://velog.io/@superlipbalm/improve-the-performance-of-your-react-forms#%EB%8D%B0%EB%AA%A8
(번역) 리액트 폼 성능 개선
Performance features reference - Chrome Developers
This page is a comprehensive reference of Chrome DevTools features related to analyzing performance. See Get Started With Analyzing Runtime Performance for a guided tutorial on how to analyze a page's performance using Chrome DevTools. Record runtime performance when you want to analyze the performance of a page as it's running, as opposed to loading.
Performance features reference - Chrome Developers
https://developer.chrome.com/docs/devtools/evaluate-performance/reference/
Performance features reference - Chrome Developers
[프론트앤드]페이지 렌더링 성능 확인하는 방법 (웹 페이지 속도 확인하기)
하지만, 연차가 어느 정도 차게 되면 내가 짠 코드의 구조와 성능에 대해 관심이 생기기 시작한다. 오늘은 그 중 렌더링에 관련된 얘기다. 가장 간단하게 설명하면 웹 애플리케이션 상에 데이터를 표시하는 행위이다. 즉 사용자의 화면 혹은 다른 출력장치에 내가 프로그래밍한 요소를 문서 객체모델(DOM) 형태로 보여준다.
[프론트앤드]페이지 렌더링 성능 확인하는 방법 (웹 페이지 속도 확인하기)
https://ordinary-code.tistory.com/58
[프론트앤드]페이지 렌더링 성능 확인하는 방법 (웹 페이지 속도 확인하기)
우리에게 1ms의 의미란 (FPS vs Frame time)
이 글은 최적화 관점에서 FPS(Frame Per Second) 대신 Frame time(1ms)을 어떤 의미로 어떻게 볼 수 있는지에 대해 간단히 이야기해봅니다. FPS 는 다들 많이 들어보았을 것 같습니다. 말 그대로 Frame Per Second, 프레임 당 초(시간)을 의미하며 Frame rate(프레임률)이라고도 말합니다. 위키 참고: https://ko.wikipedia.org/wiki/프레임_레이트 1초 동안 보여주는 화면(프레임)의 수 예를 들면, FPS 60 == 1초당 60 프레임을 그린다고 볼 수 있겠습니다.
https://pineoc.github.io/blog/2020/11/03/what-is-meaning-1ms/
우리에게 1ms의 의미란 (FPS vs Frame time)
React Hook Form 사용하기
⛔️ 저는 풀스택 개발자를 희망하는 먼지일 뿐입니다. 혹시 글에 오타나 틀린부분이 있으면 메일 혹은 댓글로 알려주시길 바랍니다 React Hook Form은 React에서 Form을 쉽게 만들기 위한 라이브러리로 공식문서 에 적혀있는 그대로 성능이 좋고 유연하며 유효성 검사에 아주 탁월합니다. 적은 코드로 더 좋은 퍼포먼스를 낼 수 있다. 다른 라이브러리 혹은 React에 비해 Re-render 수가 적다.
React Hook Form 사용하기
https://velog.io/@kihyun/React-Hook-Form-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
React Hook Form 사용하기
React 최적화하기
colocation의 원리는 코드를 최대한 그것과 연관 있는 곳에 배치하는 것 입니다. 최대한 영향이 가는 부분을 최소화한다는 개념입니다. 만약 state가 최상위 컴포넌트 트리에 있다면, 리액트는 어떤 것이 바뀌었는지 모르기 때문에 모든 컴포넌트에서 DOM 의 업데이트 여부를 체크해야만 합니다. 하지만 state를 최대한 그것과 연관 있는 컴포넌트에 배치한다면, 리액트는 체크할 것이 적어집니다.
https://wizvee.netlify.app/react-js-app-faster