Lighthouse는 그저 가이드입니다.
2024. 7. 24.
Lighthouse는 그저 가이드입니다.
심윤섭: Lighthouse는 웹 프론트엔드 개발자에게 성능을 측정하는 도구를 넘어, 높은 점수를 받아야 한다는 그런 강박도 생기게 하는 도구가 되었습니다(저도 그랬구요). 이 글은 Lighthouse 점수를 꼼수로 높이는 방법을 설명하면서 Lighthouse 점수는 그저 가이드이며, 사용성 테스트나 성능 개선을 Lighthouse에 의존하지 말라는 글입니다. 물론 Sentry의 글이지만, 성능을 개선할 때는 Lighthouse말고 CrWX와 같은 실제 데이터, 혹은 직접 Sentry같은 모니터링 툴을 설치해서 문제 부분을 좁혀나가는 것이 좋고, 현재는 웹페이지 성능 말고 다른 것에 집중해야 할 수도 있으니 현재 상황에 맞게 진행하는 것이 좋겠네요. 물론 Lighthouse를 통해 방지하는 것도 좋습니다 😃
RSC를 사용하면 보안에 더 신경써야 한다.
심윤섭: RSC와 서버 액션을 사용하면 서버에 값을 전달하는 것이기 때문에, 서버 액션에서 값 검증이나 데이터 유출에 신경써야 한다는 차원의 글입니다. 프론트엔드가 SSR을 다루게 되면서, OWASP 치트시트와 같은 필수 보안은 신경써야 하겠네요.
INP를 개선하기 위한 패턴
심윤섭: INP가 말하고자 하는 것에 소개된 await-interaction-response와 아직 Baseline에서 모두 지원하지 않는 Scheduler API를 비교해서 장단점을 알아보고, INP 개선 방법을 알려줍니다. 항상 실행시간이 짧은 스크립트만 있으면 좋겠지만, 여러가지 방해요소가 있으니 글에서 제시해주는 여러 옵션을 고려하세요. 타사 스크립트를 Worker에서 가져오는 PartyTown이나, WebWorker를 더 잘 쓸 수 있게 하는 Comlink같은 라이브러리도 같이요.
NextJS의 캐시 중독
심윤섭: 헤더와 CDN 동작으로 오류 값을 캐싱하여 사이트 장애를 발생하는 버그를 찾아낸 사례들을 소개하는 글입니다. NextJS 코드 내 오류여서 많은 경우에 신경 쓰기 힘든 부분이지만, 어플리케이션을 만들 때 캐시 중독과 CDN 설정을 조심해야 겠다는 차원에서 가져왔습니다.
TypeScript에서 namespace로 컴포넌트 타입 단순화
TypeScript에서 컴포넌트 타입을 만들 때 {컴포넌트이름}Props로 이름을 정하곤 하는데, 이를 namespace로 상위를 정의해서 타입이름을 통일해서 이름 정하기 쉽게 하는 팁을 전하는 글입니다.
Form Button 속성 알아보기
자바스크립트 없이 action과 method, 그리고 동작을 정의하는 속성을 소개하는 글입니다. 정말 간단한 글이니 가볍게 보세요!
Code hike beta
코드의 진행 상황을 멋진 애니메이션과 함께 보여줄 수 있는 라이브러리입니다. 멋져보이네요 :)