EverGiver

기존 Vue 2는 코드의 길이가 길어져 가독성이 떨어지고, 수많은 컴포넌트들이 공유하는 데이터의 상태 관리는 점차 감당이 되지 않기 시작하였다. 이러한 문제를 해결하고자 Vue 3가 출시되었다. 대표 신규 기능 Composition API - 말 그대로 하나의 객체를 변수와 메서드 등과 같은 특정한 옵션 기능으로 나눈 만큼, 하나의 변수와 연관된 수많은 기능들이 하나의 Single File Component에서 산포 되기 시작했고, 이는 결국 가독성을 떨어뜨리고 코드 요지 비용이 높아지는 문제점을 보이게 되었다. - Vue 3의 가장 대표적인 기능인 컴포지션 API로 컴포넌트를 작성할 때 함수 기반의 방법을 제시한다. Suspense - Suspense는 컴포넌트가 데이터를 받아오기 전까지 기본 컨텐츠를..

Path란 element는 SVG 기본 도형 라이브러리에서 가장 강력한 엘리먼트이다. 선과 곡선, 호 등 다양한 형태를 그릴 수 있다. 패스의 모양은 d 속성 하나로 정의된다. ("d" 속성은 여러 개의 명령어와 그 파라미터들로 이루어진다.) 각각 명령은 특정 알파벳으로 시작한다. - "Move To" 명령을 사용하며, 이 명령은 알파벳 M으로 호출 (SVG 처리기가 이 문자를 읽게 되면 다른 위치로 이동하라는 명령으로 이해하게 된다.) 모든 명령어는 2가지 변형이 존재하는데, 알파벳이 대문자일 경우, 뒤따르는 좌표는 페이지의 절대 좌표를 참조하며, 소문자 알파벳일 경우 마지막 위치에 대한 상대적 좌표로 참조된다. Line(선) 명령어 두 점 사이에 선을 그리는 역할을 한다. M / m (moveTo) ..

line (선) x1 속성은 x-axis에서 라인의 시작을 정의 y1 속성은 y-axis에서 라인의 시작을 정의 x2 속성은 x-axis에서 라인의 끝을 정의 y2 속성은 y-axis에서 라인의 끝을 정의 line ​ 속성 - stroke-dasharray : 줄 사이 간격 ​ Rectangle (사각형) x는 사각형의 좌측 상단의 x 값을 의미 y는 사각형의 좌측 상단의 y 값을 의미 width는 사각형의 폭을 의미 height는 사각형의 높이를 의미 rx는 사각형의 둥근 꼭짓점의 x 방향으로의 반지름 ry는 사각형의 둥근 꼭짓점의 y 방향으로의 반지름 Circle (원) r은 원의 반지름을 의미 cx는 원의 중심 중 x 값을 의미 cy는 원의 중심 중 y 값을 의미 ​ Ellipse (타원) cx는 ..

SVG란 SVG는 Scalable Vector Graphics의 약어이며, 확장 가능한 벡터 그래픽이다. 2차원 그래픽 애플리케이션과 이미지, 관련 그래픽 스크립트 인터페이스 집합을 기술하기 위한 마크업 언어이다. 픽셀을 이용하여 그림을 그리는 png, jpg 파일들과 다르게 벡터를 기반으로 이미지를 표현한다. - 크기를 조절함에 따라 깨지는 것이 없고, 용량이 작기 때문에 웹에서 자주 사용하는 이미지 형식이다. SVG 이미지는 마크업으로 쓰이므로 텍스트 에디터로 작성하고 또 작성된 이미지를 수정할 수도 있다. 벡터를 기반으로 그려지므로 사이지를 크게 해도 깨지지 않는다. XML 포맷으로 파일이 작성되므로 JS나 CSS로 조작이 가능하다. [장점] - 애니메이션을 적용할 수 있다. - 편집 가능한 레이어..

보간법 데이터 바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법이다. 가장 기본적인 데이터 바인딩 방식은 {{ }} (이중 괄호 : Mustache Tag)이다. Mustache 태그는 해당 데이터 객체의 message 속성 값으로 대체된다. 데이터 객체의 message 속성이 변경될 때마다 갱신된다. mustache는 HTML이 아닌 일반 텍스트로 데이터를 해석한다. 실제 HTML을 출력하려면 v-html 디렉티브를 사용해야 된다. Mustache : {{msg1}} v-text : v-html : ​ 디렉티브 v- 접두사가 붙은 특수 속성을 말한다. v- 라고 붙으면 vue에서 인식해서 내부적으로 돌아가서 조작을 한다. v-text - 엘리먼트의 textContent를 업데이트한다. - ..

Instance 생성 Vue 인스턴스는 vue 기반 개발을 하기 위해 필수적으로 생성해야 하는 코드이다. Vue 인스턴스 생성 후, 내장되어 있는 API를 이용하여 개발할 수 있다. Vue 인스턴스를 생성할 때는 options 객체를 전달해야 한다. Vue 앱은 new Vue()를 통해 만들어진 Root Vue Instance로 구성되며, 선택적으로 중첩이 가능하고 재사용 가능한 컴포넌트 트리로 구성된다. 옵션 el - Element의 약자로 어떤 HTML 요소에 Vue 객체를 연결할지를 명시한다. - new를 이용한 instance 생성 때만 사용된다. - CSS 선택자 문자열 또는 실제 HTMLElement 이어야 한다. {{msg}} {{hello}} ​ data - Vue 객체에서 사용할 데이터들..