Web

❓ Lighthouse 란?Lighthouse는 Google에서 제공하는 무료 도구로, 웹 페이지의 성능, 접근성, SEO(검색 엔진 최적화) 및 Progressive Web App(PWA) 지표를 평가한다. ❗️Progressive Web App (PWA)PWA는 웹 애플리케이션의 기능과 네이티브 애플리케이션의 경험을 결합한 형태다. 주요 특징은 다음과 같다:오프라인 지원: 서비스 워커를 사용하여 인터넷 연결이 없는 상황에서도 작동할 수 있다.푸시 알림: 사용자가 웹 애플리케이션에 다시 방문할 수 있도록 알림을 보낼 수 있다.홈 화면 추가: 사용자가 PWA를 자신의 장치 홈 화면에 추가할 수 있어 네이티브 앱처럼 사용할 수 있다.PWA는 사용자 경험을 향상시키고, 더 나은 성능을 제공하며, 다양한 플랫..

❓ 클라이언트 사이드 렌더링(CSR)CSR은 웹 페이지가 사용자의 브라우저에서 직접 그려지는 방식이다.여기서 중요한 점은, 서버가 사용자에게 완성된 페이지를 보내는 것이 아니라 기본적인 HTML 뼈대만 전달한다는 것이다. 이 기본 HTML 은 말 그대로 페이지의 틀만 가지고 있을 뿐, 실제로 화면에 표시될 내용(텍스트, 이미지, 버튼 등...)은 없는 상태이다. 즉, 브라우저는 처음에 빈 화면을 받게 된다.그래서 페이지가 처음 로드될 때, 화면에 거의 아무것도 보이지 않거나 간단한 로딩 화면만 나타날 수 있다. 브라우저는 이 HTML 파일을 받은 후, HTML 안에 포함된 자바스크립트 파일을 불러와서 실행한다.자바스크립트는 서버로부터 필요한 데이터를 다시 요청하고, 그 데이터를 이용해 페이지의 나머지 부..

❓ 웹 브라우저웹 브라우저는 웹 페이지를 탐색하고 표시하는 소프트웨어이다.간단히 말하자면, 인터넷에서 정보를 검색하고 원하는 사이트에 접속하게 해주는 프로그램이다.브라우저는 사용자 요청을 웹 서버에 전달하고, 서버로부터 받은 정보를 사용자에게 보여준다. 우리가 흔히 알고 있는 크롬, 인터넷 익스플로러, 사파리 등이 브라우저이다! 브라우저는 HTML, CSS, JavaScript 와 같은 정보를 처리하며, 이미지나 동영상 같은 다양한 미디어 파일도 함께 처리한다.또한, 보안 관리나 성능 최적화, 사용자 데이터 보호와 같은 기능도 수행한다. ❗ 브라우저가 화면을 그리는 과정1. HTML 렌더링웹 페이지의 구조를 담당하는 HTML 을 화면에 표시한다. 간단 설명:사용자가 특정 사이트에 접속하면, 브라우저는 서..