Script Setup 기존 setup()를 사용하는 것보다 가독성 측면에서 더 뛰어난 Script Setup에서의 다양한 기능들의 사용법 입니다. 변경점만 간단하게 작성합니다. Props value: {{ propsValue }} Injected value: {{ injectedValue }} Computed value: {{ computedValue }} Reactive value: {{ reactiveValue }} Increment props: defineProps를 통해 부모 컴포넌트로부터 전달된 프롭스를 정의합니다. emit: defineEmits를 통해 이벤트를 발생시키는 함수를 정의하고, 이를 통해 부모 컴포넌트로 이벤트를 전달합니다. inject: inject 함수를 사용하여 부모 컴포넌..

Comoisition API - methdos & computed & watcher Method -> General Function 이번엔 기존 Option API에서 사용하던 methods를 Composition API에선 어떻게 사용하는지 알아보겠습니다. {{ user.name }} {{ user.age }} Change Age 사실 methods를 안쓰고 단순히 setup 내부에 함수를 정의하면 되므로 따로 설명이 필요 없는 부분입니다. Computed Property -> Computed Function 연산 프로퍼티를 연산 함수로 바꾸는 방법도 설명이 필요 없기에 코드로 대체합니다. const fullName = computed(function() { return user.firstName + ..

Reactive Object 위의 코드처럼 상수로 어떠한 값들을 선언해 보았습니다. 이번엔 반응형 객체를 만들어서 출력해보고 그 내부 동작과정을 학습해 보겠습니다. {{ user.name }} {{ user.age }} 위 코드처럼 ref의 값으로 객체를 전달하면 Vue가 객체 내부의 변화를 파악할 수 있도록 객체는 프록시로 래핑 됩니다. setup 함수가 객체를 반환하고, 내부적으로 미가공된 ref 객체를 받으며 객체 내부 반응성을 인지합니다. 그리고 새 값이 지정되거나 템플릿에서 사용될 때를 알기 때문입니다. 하지만 이렇게 객체를 다룰 경우 객체만을 위해 만들어진 Reactive를 사용하는 것이 더 좋습니다. Reactive 사용 Reactive는 ref와 비슷하지만, 객체 전용으로 만들어졌습니다. ..

Vue 3 Composition API 지금까지 배운 Option API에서는 data, methods, computed property, watcher등을 사용했습니다. Composition API란 컴포넌트를 작성하는 2가지 방법 중 하나일뿐 Option API 보다 무조건 좋은건 아닙니다. Composition API를 사용하는 이유 Option API는 필요한 데이터 프로퍼티, 함수, 연산 프로퍼티 등등이 각 컴포넌트마다 전부 다 분산되있거나 중복 로직이 발생 Option API는 컴포넌트 로직의 재사용이 까다롭다. Option API 로직을 여러가지 옵션 (data, methods 등)에 나누어 놓는 방식 // Option API data() { return { name: 'Max&#39..

Vue Router Vue Router 패키지 설치 npm i vue-router@next --save 그리고 main.ts 파일에 Router를 Import 해줍니다. import { createApp } from 'vue'; import { createRouter } from 'vue-router'; // Import Router import App from './App.vue'; const app = createApp(App) const router = createRouter({ routes: [] }); app.mount('#app'); 위 코드에서 router 변수에 createRouter() 라는 함수를 사용했습니다. 이 함수의 첫번째 ..

Native Fetch API를 이용한 HTTP Request 전송 Vue에서는 Javascript 내장 함수를 이용한 방법과, Axios를 이용해 HTTP Reqeust를 보낼 수 있습니다. Javascript 내장 함수를 이용한 방법에는 fetch 함수가 있습니다. 데이터를 Fetch 하는 역할도 있지만 서버로 데이터를 전송도 하는 함수입니다. fetch 함수와 Axios는 첫번째 파라미터로 URL을 받고 내부에서 HTTP 요청을 보냅니다. URL로는 Firebase의 Real-Time Database를 사용하였습니다. Firebase URL 뒤에 임의의 URL 명과 json 확장자를 붙여줍니다. 임의의 URL로 요청을 전송하면 Firebase에서 그에 맞는 API를 자동 생성해줍니다. fetch(&..

추가한 학습 목록을 배열에서 삭제하기를 구현합니다. 저번에 봤던것처럼 TheResource.vue 컴포넌트가 동적 컴포넌트로 연결되있기 때문에, 커스텀 이벤트를 발생시켜서 처리를 못하고, 직접 함수를 작성해야 합니다. TheResources.vue removeResource 함수와 provice에 deleteResource를 추가해주었습니다. methods: { setSelectedTab(tab) { this.selectedTab = tab; }, addResource(title, description, url) { const newResource = { id: new Date().toISOString(), title: title, description: description, link: url }; /..