그랜파 개발자의 프론트엔드 공부

Pinia에서의 Composition API 스타일과 Options API 스타일Pinia에서는 Composition API 스타일과 Options API 스타일두 가지 방법으로 store를 정의할 수 있습니다.각 스타일의 차이점과 사용 방법을 정리해보겠습니다. 1. Vue가 뭐야? 2. 프레임워크란?3. Vue3 기본 문법4. Vue Router (, )5. Pinia (상태 관리 라이브러리)6. Vue3 Composition API7. Pinia Store에서 ref와 reactive를 사용하는 방법8. Pinia에서의 Composition API 스타일과 Options API 스타일1. Composition API 스타일📌 Composition API 스타일은 setup() 함수 기반의 구조로 작..

Pinia Store에서 ref와 reactive를 사용하는 방법Pinia Store에서 ref와 reactive를 사용하는 방법을 알아보겠습니다.Pinia에서는 Composition API 스타일과 Options API 스타일을 모두 사용할 수 있지만,여기서는 Composition API 스타일을 중점적으로 설명합니다. 1. Vue가 뭐야? 2. 프레임워크란?3. Vue3 기본 문법4. Vue Router (, )5. Pinia (상태 관리 라이브러리)6. Vue3 Composition API7. Pinia Store에서 ref와 reactive를 사용하는 방법8. Pinia에서의 Composition API 스타일과 Options API 스타일1. ref와 reactive 차이ref(): 기본 타입(..

Composition APIComposition API는 Vue 3에서 도입된 새로운 방식의 API로,기존의 Options API보다 더 유연하고 재사용 가능한 코드를 작성할 수 있도록 도와줍니다.Composition API는 setup() 함수와 함께 사용되며,컴포넌트의 로직을 명확하게 분리하고,여러 컴포넌트 간에 재사용할 수 있도록 해줍니다. 1. Vue가 뭐야? 2. 프레임워크란?3. Vue3 기본 문법4. Vue Router (, )5. Pinia (상태 관리 라이브러리)6. Vue3 Composition API7. Pinia Store에서 ref와 reactive를 사용하는 방법8. Pinia에서의 Composition API 스타일과 Options API 스타일 여기서는 Pinia와 Compo..

Pinia (상태 관리 라이브러리)Pinia는 Vue 3의 공식 상태 관리 라이브러리로,Vuex의 후속으로 설계되었습니다.Vue 3의 Composition API와 잘 통합되며,사용하기 간단하고 효율적입니다.Pinia는 상태 관리에 필요한 기본적인 기능들을 제공하고,Vue 3와 잘 맞도록 설계되었습니다. 1. Vue가 뭐야? 2. 프레임워크란?3. Vue3 기본 문법4. Vue Router (, )5. Pinia (상태 관리 라이브러리)6. Vue3 Composition API7. Pinia Store에서 ref와 reactive를 사용하는 방법8. Pinia에서의 Composition API 스타일과 Options API 스타일Pinia 설치Pinia를 사용하려면 먼저 프로젝트에 설치해야 합니다.npm..

Vue RouterVue Router는 Vue 애플리케이션에서 페이지 간 전환을 관리하는 데 사용되며,이를 통해 싱글 페이지 애플리케이션(SPA)에서 페이지 전환을 처리할 수 있습니다. 1. Vue가 뭐야? 2. 프레임워크란?3. Vue3 기본 문법4. Vue Router (, )5. Pinia (상태 관리 라이브러리)6. Vue3 Composition API7. Pinia Store에서 ref와 reactive를 사용하는 방법8. Pinia에서의 Composition API 스타일과 Options API 스타일1. Vue Router 설치먼저 Vue Router를 프로젝트에 설치해야 합니다.npm install vue-router@42. 라우터 설정Vue Router를 설정하려면 router/index..

Vue3 기본 문법프로젝트를 진행하다가 Vue3에 대해 아는 것이 너무 없다는 것을 느꼈습니다.그래서 기본적인 문법은 알아겠다는 생각에 ChatGPT엑 배워 보기로 했습니다. 1. Vue가 뭐야? 2. 프레임워크란?3. Vue3 기본 문법4. Vue Router (, )5. Pinia (상태 관리 라이브러리)6. Vue3 Composition API7. Pinia Store에서 ref와 reactive를 사용하는 방법8. Pinia에서의 Composition API 스타일과 Options API 스타일나의 말:vue3 기본 문법을 익혀보자.ChatGPT의 말:좋아! Vue 3의 기본 문법을 하나씩 배워보자. 🚀1. Vue 3 프로젝트 생성Vue 3는 Vite와 함께 사용하는 것이 일반적이야.Vite는 ..

✅ 프레임워크(Framework)란?프레임워크는 소프트웨어 개발을 쉽게 할 수 있도록 제공되는 뼈대(틀) 또는 구조야.개발할 때 자주 사용하는 기능(예: 데이터 관리, UI 구성, 라우팅 등)이 미리 만들어져 있어서,개발자가 필요한 부분만 추가하면 돼. 1. Vue가 뭐야? 2. 프레임워크란?3. Vue3 기본 문법4. Vue Router (, )5. Pinia (상태 관리 라이브러리)6. Vue3 Composition API7. Pinia Store에서 ref와 reactive를 사용하는 방법8. Pinia에서의 Composition API 스타일과 Options API 스타일🎯 프레임워크 vs 라이브러리 차이점구분프레임워크라이브러리개념개발의 기본 구조를 제공하고, 개발자가 그 구조 안에서 코드를 작..

Vue(뷰)Vue(뷰)는 프로그레시브 프레임워크(Progressive Framework) 로,웹 애플리케이션의 UI를 구축하기 위해 사용되는 JavaScript 프레임워크야.React나 Angular 같은 프레임워크와 비슷하지만,상대적으로 가볍고 배우기 쉬운 것이 장점이야. 1. Vue가 뭐야? 2. 프레임워크란?3. Vue3 기본 문법4. Vue Router (, )5. Pinia (상태 관리 라이브러리)6. Vue3 Composition API7. Pinia Store에서 ref와 reactive를 사용하는 방법8. Pinia에서의 Composition API 스타일과 Options API 스타일🔹 Vue의 주요 특징1. 반응형(Reactivity) 시스템데이터가 변경되면 자동으로 UI가 업데이트돼..

VSignal 개발 - 프로젝트 만들기Firebase Authentication을 설정하고 로그인 기능을 만들어봅시다.Firebase AuthenticationFirebase Authentication을 설정하고 로그인 기능을 만들어보자.createUserWithEmailAndPassword 설명createUserWithEmailAndPassword는 Firebase Authentication에서 제공하는 메서드로, 사용자의 이메일과 비밀번호를 기반으로 새로운 계정을 생성합니다.이 메서드는 클라이언트 애플리케이션에서 Firebase의 인증 시스템과 상호작용하기 위해 사용됩니다.메서드 정의createUserWithEmailAndPassword(auth, email, password)매개변수auth: Fir..