본문 바로가기
반응형

전체 글144

브라우저 렌더링 과정_(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.
composition API(1)_반응성(vue3.js) Vue 3.0 새로 등장한 Vue.js Composition API 기존 인스턴스 옵션 단위가 아닌, 특정 기능이나 논리의 단위로 코드를 그룹화 하는것이 목적인 함수 기반의 API이다. 그룹화된 로직을 여러 컴포넌트에서 재사용할 수 있도록 코드의 재사용성과 타입 추론(타입스크립트)이 크게 개선되었다고 한다. setup 함수는 beforeCreate 이전에 setup이 호출된다. (조기화 진입점, 마운트되기 전에 항상 실행) 컴포지션 API를 사용하는 경우 beforeCreate, created 훅 대신 setup을 사용한다. 인스턴스가 생성되기 전의 시점이기 때문에 컴포넌트 인스턴스에 접근하는 기능을 사용할 수 없다. 그렇기 때문에 setup 컴포넌트 안에서 this는 methos, data, compu.. 2022. 12. 30.
제네릭(Generics) 재 정리!! 제네릭은 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징 중 하나이다. 한가지 타입보다 여러가지 타입에서 동작하는 컴포넌트를 생성하는데 사용된다.   function logText(text: T): T { console.log(text); return text;}logText(10);logText("ttt");logText(true);제네릭은 logText의 함수를 호출할 때 파라미터의 타입을 넘길 수 있다. 호출할 때 파라미터의 타입을 같이 지정하면서 넘기는 것이다.  [기존 타입 정의 방식과 제네릭의 차이점 알아보기]1. 함수 중복 선언의 단점- 타입을 다르게 받기위해 중복되는 함수 생성을 막을 수 있다. function logText(text:string) { console... 2022. 12. 28.
728x90
반응형