본문 바로가기
반응형

분류 전체보기130

vue VSCode Snippets extension https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets Vue VSCode Snippets - Visual Studio Marketplace Extension for Visual Studio Code - Snippets that will supercharge your Vue workflow marketplace.visualstudio.com vbase 단축키 사용 vscode extension 단축키도 되어있음 2023. 1. 2.
브라우저 렌더링 과정_(2) [html 파싱 DOM 생성] 브라우저의 요청에 의해서 서버가 응답한 HTML문서는 문자열로 이루어진 텍스트이다. 해당 텍스트 문서를 브라우저에 시각적으로 렌더링을 하기 위해서는 브라우저가 이해할 수 있는 자료구조로 변환을 해야 한다. 브라우저 렌더링 엔진은 HTML문서를 파싱하여 브라우저가 이해할 수 있는 자료구조 (DOM)을 생성한다. rendering engine working process 렌더링 엔진은 URI를 통해 요청을 받아 해당하는 데이터를 렌더링 하는 역할을 한다. 크롬의 경우 webkit이라는 렌더링 엔진을 사용한다. [render tree] 렌더링을 위한 트리 구조의 자료구조이다. 브라우저 화면에 렌더링 되지 않는 NODE(script, meta tag등)와 display:none등 .. 2023. 1. 2.
브라우저 렌더링 과정_(1) browser rendering process 브라우저를 구성하는 각각의 elements는 어떤 기능을 하는 것일까? html, css: 화면을 렌더링을 하는 주된 자료 javascript: html태그를 동적으로 만드는 역할을 하는 프로그래밍 언어 [browser elements] 사용자 인터페이스 브라우저창에서 보이는 주소창, 홈, 새로고침, 이전 버튼 등을 말한다. 사용자 인터페이스는 사용자가 컨트롤 할 수 있는 보여지는 페이지를 말한다. 브라우저 엔진 사용자가 주소 표시줄에 url을 입력했을 때 uri를 렌더링 엔진에게 전달해주는 역할을 한다. 홈을 눌렀을 때 홈페이지로 이동 시켜줄 수 있도록 렌더링 엔진에게 전달하는 역할을 한다. 자료 저장소로 자료를 찾기위해 전달을 한다. 렌더링 엔진 uri에.. 2023. 1. 2.
Nuxt.js 입문하기 SSR(Server Side Rendering) 서버에서 페이지를 그려서 브라우저로 보낸 후 화면에 표시하는 방법이다. 전통적인 웹 화면을 그리는 표현 방식 중 하나이다. 예를 들어 메뉴를 클릭했을 때 해당 페이지를 서버측에서 HTML화면을 그린 후 브라우저에게 던져주게 된다. CSR(Client Side Rendering) spa방식은 브라우저에서 빈 html를 던저준 후 자바스크립트 라이브러리가 실행이 되면서 비어있는 태그의 내용들을 채워져 나가며 화면에 DOM또는 UI요소를 그려나간다. vue라우터를 이용해서 만든 페이지를 구성하는 방식이 vue cli를 활용한 SPA(Single Page Application)이다. instance mounting: vue instance를 생성되고 해당 인스턴스.. 2022. 12. 30.
728x90
반응형

티스토리툴바