EverGiver

Vue Single File Component 싱글 파일 컴포넌튼 체계란 .vue 파일로 프로젝트 구조를 구성하는 방식 확장자 .vue 파일 1개는 뷰 애플리케이션을 구성하는 1개의 컴포넌트와 동일 {{count}}번 클릭되었습니다. 생성 방법 (Build Tools) 1. cmd 창을 통해 원하는 작업을 원하는 폴더 경로 설정 2. build-tool-enabled Vue project를 만들기 위해, 아래의 명령어를 실행해야 된다. npm init vue@latest 3. 위의 명령어를 실행 후, create-vue를 만들고 실행하며, 이후 다양한 속성을 설정할 수 있다. (모르면 그냥 다 No를 입력하자) 4. 프로젝트가 생성이 되었으면, 아래의 과정을 통해 dev server을 실행하자 5. 모든..

Component 컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능으로 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있다. 컴포넌트를 등록하는 방법은 전역(Global) 방식과 지역(Local) 방식의 두 가지가 있다. 지역 컴포넌트는 특정 인스턴스에서만 유효하고 전역 컴포넌트는 모든 범위의 여러 인스턴스에서 공통으로 사용할 수 있다. 컴포넌트의 이름은 알파벳 소문자와 숫자, 하이픈(-)만 포함하는 것이 원칙이고 알파벳으로 시작해야 한다. 컴포넌트 내의 data는 반드시 함수여야 한다. Global (전역) Local (지역) Props props는 컴포넌트에서 전달되는 속성의 값을 말하며 문자열이지만 객체의 배열 형식으로 되어있다. HTML 속성..

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

보간법 데이터 바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법이다. 가장 기본적인 데이터 바인딩 방식은 {{ }} (이중 괄호 : 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 객체에서 사용할 데이터들..

FrameWork (프레임워크) 필요성 - Framework은 개발자가 보다 편리한 환경에서 개발할 수 있도록 제공하는 틀이다. - 소프트웨어 개발의 입장으로써는 공통으로 사용하는 라이브러리 / 개발도구 / 인터페이스 등을 의미한다. - 웹 프로그래밍의 규모가 계속 커지고 있기 때문에 거대하고 복잡도가 높은 프로젝트를 완성시키기 위해 많은 사람들이 필요하게 되었다. - 개발자들이 통일성 있게 빠르고 안정적으로 개발하기 위한 도구로 프레임워크가 생산성 항상 등의 좋은 성과를 내고 있다. 특징 - 자유롭게 설계하고 코딩하는게 아니라 프레임워크가 제공하는 가이드대로 설계하고 세팅하여 코딩해야 한다. - 개발할 수 있는 범위가 정해져 있다. - 개발자를 위한 다양한 도구/플러그인들이 지원된다. 장단점 - [장점..