반응형 분류 전체보기130 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. fetching data (vue.js) (현재 셋팅 상태: json-server를 사용하여 가상 데이터를 생성했음) 이제 vue에서 데이터를 패칭을 할 때 어떻게 해야하는지 알아보자. vue의 생명주기에서 페이지가 로딩시에 진행되는 순서를 다시 생각해보면, 부모 created -> 자식 created -> 자식 mounted -> 부모 mounted 이 상태를 잘 기억하고 있어야 한다. created는 인스턴스가 작성이 된 후에 동기적으로 호출된다. 데이터 초기화 선언시에 주로 created를 사용하는데 가상돔을 사용할 수 없는 상태이다. mounted는 인스턴스가 마운트 된 직후이기에 가상돔을 핸들링 할 수 있는 상태이다. * [ 먼저, 데이터를 가져오려면 언제 어디서 얻을 수 있는지?] dom을 생성할 때 실행되는 생명주기 훅인 mount.. 2022. 12. 26. Vue Router [뷰 라우터란] - 페이지간 이동을 위한 라이브러리 - 페이지 이동 시 url변경, 변경된 요소의 영역 컴포넌트를 갱신한다. router 설치 - vue3부터는 vue-router가 아닌 vue-router@next를 설치한다. npm install vue-router@next 폴더 / 모듈 생성 src / router 폴더를 생성하고 폴더 안에 index.js로 라우터 모듈을 생성한다. [폴더 구조] ├── router │ └── index.js ├── App.vue └── main.js [router/ index.js 모듈] import { createRouter, createWebHistory } from "vue-router"; import Home from "../views/Home.vue"; .. 2022. 12. 26. 이전 1 ··· 13 14 15 16 17 18 19 ··· 33 다음 728x90 반응형
