Tech.log/프론트엔드14 [브라우저의 렌더링 원리] 브라우저의 구성요소 1.사용자 인터페이스 : 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분 2. 브라우저 엔진:사용자 인터페이스와 렌더링 엔진 사이에 동작을 제어한다. 3. 렌더링 엔진: 요청한 콘텐츠를 표시, 만일 HTML을 요청했다면 요청한 HTML와 CSS를 파싱하여 화면에 표현 4. 통신 :HTTP 요청과 같은 네트워크 호출에 사용됨 5.UI 백엔드:콤보 박스와 창 같은 기본적인 장치를 그림. OS사용자 인터페이스 체계를 사용 6. 자바스크립트 해석:자바스크립트 해석 실행 7. 자료 저장소: 자료를 저장 되는 계층 HTML5명세에는 브라우저가 지원하는 웹 데이터 베이스가 있다. 여기서 우리가 살펴볼 동작원리는 바로 3번이다. 브라우저가 화.. 2021. 4. 22. [React] Component와 Props 알아보기 📌 Component 1. 컴포넌트는 독립적인 소프트웨어 모듈이다. : 소프트웨어 시스템에서 독립적인 업무 또는 기능을 수행하는 '모듈'로서 이후 시스템을 유지보수 하는데 있어 교체 가능한 부품이다. 예를 들어, 컴퓨터나 스마트폰과 같은 제품에 문제가 발생하면 해당 부품만 다른 부품으로 바꾸어도 제품은 문제없이 작동하는 원리이다. 컴포넌트가 나오게 된 이유는 소프트웨어는 독립적으로 개발되지 않은 경우가 많이 있기 때문이다. 독립적으로 개발되어도 다른 모듈과의 호환을 생각하지 않고 개발을 한다. 이는 결국 소프트웨어의 재사용성을 어렵게 하고 유지보수 비용이 크게 증가하는 원인이 된다. 이러한 상황에서 소프트웨어의 재사용성의 중요성과 필요성을 위해 나온 기술이 컴포넌트 기술이다. 이와 같이 하드웨어처럼 독립.. 2021. 4. 16. Pre-rendring[SSR vs CSR _2] 기존 SPA의 문제점 1. 로딩 속도 CSR에서의 문제점은 html파일과 스타일시트(css), 상대적으로 큰 js파일이 하나 존재하는데, 모든 페이지의 내용을 첫 로딩때 모두 불러오는것이다.내가 볼 필요도 없는 파일까지 모두 불러오기 때문에 로딩 시간이 느려진는 것이다. 2.SEO 서버의 렌더링과 다르게 js가 로딩된 이후 js 동작에 따라서 dom이생성된다. 이는 크롤러가 빈껍데기인 템플렛 상태에서 내용들을 파악 하지 못한다는 것이다. 이는 검색엔진에 매우 불리하다. Pre-rendring는 서버 렌더링 보다 조금 더 복잡한 분리 기술이다.이는 어플리케이션에 첫 진입 시간을 개선하고자 하는 렌더링 방식이다. build time시간동안 static HTML files 제공한다. 그 이후에 어플리케이션에 .. 2021. 4. 12. SSR vs CSR ? 그리고 .. MPA (Multiple Page Application) 사용자가 페이지를 요청할때 마다, 필요한 UI와 데이터를 HTML로 파싱해서 보여주는 웹 어플리케이션 SPA (Single Page Application) 하나의 HTML을 기반으로 자바스크립트를 이용해 동적으로 화면의 컨텐츠를 바꾸는 웹어플리케이션,연속되는 페이지 간의 사용자 경험을 향상시킨다. 정통적인 방법으로 구분을 하자면 MPA는 SSR 렌더링 방식 , SPA은 CSR 렌더링 방식이다. 자세히 살펴보자. SSR 브라우저가 요청할때마다 해당 페이지 관련 HTML,CSS,JS,데이터를를 받아와 렌더링 한다. 브라우저:"회원 페이지 갈래~" 서버:" OK, 이거 회원 정보 디자인이고 ,이건 버튼이고, 회원 관런 정보 데이터 다 만들어서 준다야!".. 2021. 4. 12. 이전 1 2 3 4 다음
