성능
-
클로저·this·viewport를 지키며 큰 컴포넌트를 쪼갠 작업기React 2026. 7. 15. 17:26
"이 컴포넌트 너무 크니까 좀 쪼개 줘." 이 요청을 받으면, 사람이든 AI 에이전트든 가장 쉽게 빠지는 함정이 줄 수(LOC)를 줄이는 데 최적화하는 것이다. 함수로 뽑고 helper로 흩어 메인 본문을 짧게 만든다. 지표는 좋아진다. 그런데 화면이 깜빡이고, 차트 호버가 죽고, 다른 탭에 다녀오면 그래프가 어긋났다. 기술 트렌드를 시각화하는 한 화면(기술 트리·버블 차트·보고서)을 다섯 갈래로 쪼개면서 나는 이걸 다섯 번 확인했다. 큰 컴포넌트·훅을 분해해 봤고 useEffect나 차트 라이브러리에서 미묘한 회귀를 겪어 본 사람이라면 익숙한 장면일 것이다.줄을 세는 일과 의미를 지키는 일은 다르다분해를 하다 보면 매번 같은 단어로 돌아왔다. 런타임 계약. 코드가 겉으로 드러내지 않지만 동작이 의존하는..
-
Next.js에서 사용하기 좋은 모니터링 툴 3가지Tip 2023. 8. 10. 18:05
Checkly, Axiom, Sentry는 웹 프로젝트를 개발하고 유지 관리하는 데 도움이 되는 툴이다. 모두 무료로 사용할 수 있으며, 유료 플랜을 통해 더 많은 기능을 사용할 수 있다. Checkly Checkly는 성능을 모니터링하는 도구다. Checkly는 URL을 지정해 성능 지표를 그래프로 표시하고, 모니터링할 요청의 빈도와 양을 설정할 수 있으며, 성능 저하를 알림으로 보낸다. Checkly의 주요 기능 웹 애플리케이션의 성능 지표 모니터링 성능 저하 알림 API 테스트 웹 애플리케이션의 성능 테스트 Axiom Axiom은 API를 테스트하는 도구다. Axiom은 API에 요청을 보내고, API의 응답을 검증할 수 있고, API 테스트를 자동화할 수 있다. Axiom의 주요 기능 웹 애플리케..