frontend 2

React Lighthouse 성능 측정 | 점수보다 병목 원인을 먼저 보는 법

React 프로젝트를 운영하다 보면 한 번쯤은 “페이지가 느리다”, “클릭했는데 반응이 굼뜨다”는 이야기를 듣게 됩니다.이럴 때 가장 먼저 열어보기 좋은 도구 중 하나가 Lighthouse입니다.Chrome DevTools나 PageSpeed Insights에서 바로 실행할 수 있고, 성능뿐 아니라 접근성, SEO, 모범 사례까지 한 번에 확인할 수 있어서 초반 진단용으로 꽤 유용합니다.다만 여기서 먼저 정리해야 할 점이 있습니다.Lighthouse는 React를 직접 최적화해주는 도구가 아닙니다.대신 지금 이 페이지가 왜 느린지 브라우저 관점에서 먼저 보여주는 진단 도구에 가깝습니다.즉, React 성능 최적화에서 Lighthouse는 “해결 도구”라기보다문제를 발견하는 출발점으로 이해하는 편이 더 정..

frontend/react 2026.03.29

🟨 1-1. 자바스크립트란 무엇인가?

자바스크립트(JavaScript)는웹 페이지에 생명과 상호작용을 부여하는 언어다.HTML이 ‘뼈대’, CSS가 ‘옷’이라면, 자바스크립트는 ‘행동과 뇌’라고 할 수 있다.단순히 버튼을 클릭했을 때 문구를 바꾸거나,입력값을 검증하는 정도가 아니라이제는 전체 웹 애플리케이션을 움직이는 중심축이다.💡 1. 자바스크립트의 역할구분 설명🧱 HTML구조(Structure)🎨 CSS디자인(Style)⚙️ JavaScript동작(Behavior)즉, HTML + CSS + JS 세 가지가 함께 작동해우리가 보는 모든 웹사이트를 만든다.🌍 2. 어디에서 동작할까?과거엔 브라우저 전용 언어였다.하지만 지금은 서버, 데스크톱, 모바일, 심지어 IoT까지 영역이 확장됐다.환경 설명💻 브라우저Chrome, Edge, ..

frontend/javascript 2025.11.05