전체 글156 Vue3 기초 예제 - Axios 모듈화(async/await) async / await 간단한 설명과 Axios 모듈화 기초 예제*자세한 설명 생략 ▷ async / await 이란? - Javascript의 싱글 스레드, 비동기 처리 방식( Callback, Promise )을 보안한 문법 *동기/비동기 설명 생략 - 가독성과 유지보수성을 향상 *Callback Hell, Promise Hell - 실행 완료까지 기다리고 다시 진행 ▷ 기초 예제 - Axios 모듈화*post 예제 - main.js*Axios 등록 제거import { createApp } from 'vue'import App from './App.vue'import { router } from '@/router/MenuNav.js'import { cr.. 2023. 10. 30. Vue3 기초 예제 - 로그인(pinia) Pinia 간단한 설명과 로그인 기초 예제*자세한 설명 생략 ▷ Pinia 란?*Store 관련 자세한 설명 아래 링크 참고 - 모든 컴포넌트들에 대한 데이터 저장소 역할 및 관리하는 Store - Vuex 보다 더 간단하고, Composition API 스타일을 제공 ▷ Pinia 설치*vue-cli를 통해 Project 생성 후 설치 💡npm install pinia ▷ 기초 예제 - 로그인 - main.js*pinia 모듈 등록import { createApp } from 'vue'import App from './App.vue'import { router } from '@/router/MenuNav.js'import Axios from "axios";import { creat.. 2023. 10. 30. Vue3 기초 예제 - HTTP 통신(Axios) Axios 간단한 설명과 API 통신 결과를 화면으로 보내는 기초 예제*자세한 설명 생략 ▷ Axios 란? - Vue에서 권고하는 Promise 기반의 HTTP 라이브러리 *Promise : 비동기 처리 - 서버와 HTTP 통신 - Ajax, fetch와 같은 웹 통신 기능 - JSON 데이터 자동 변환 ▷ Axios 설치*vue-cli를 통해 Project 생성 후 설치 💡npm install axios ▷ Axios 사용 방법(Post)axios.post(URI, data).then((res) => { // 성공 ... }).catch((res) => { // 실패 ...}); ▷ 기초 예제 - HTTP 통신 - main.js*provide / .. 2023. 10. 27. Vue3 기초 예제 - Router(메뉴 네비게이션) Vue Router 간단한 설명과 메뉴 네비게이션을 생성하는 기초 예제*자세한 설명 생략 ▷ Vue Router란? 페이지 간에 이동하는 기능을 구현할 때 사용하는 Vue 라이브러리 ▷ Vue Router 설치*vue-cli를 통해 Project 생성 후 설치 // vue-cli 3.x 이상 💡npm i vue-router@next --save ▷ 기초 예제 - 메뉴 네비게이션 생성 - MenuNav.js*src 밑에 router 폴더 및 MenuNav.js 생성*연결 컴포넌트는 이전에 생성했던 부분import { createRouter, createWebHistory } from 'vue-router'// 연결 컴포넌트 import ForTestCmp from '@/components.. 2023. 10. 26. Vue3 기초 예제 - Dynamic Select Box 화면에서 입력받은 값으로 Dynamic Select Box를 생성하는 기초 예제*아래 예제는 전 예제에 이어서 진행(아래 링크 참고)*자세한 설명 생략 ▷ 기초 예제 - Dynamic Select Box 생성*Event Handling 관련 아래 링크 참고*프로젝트 구조 및 CSS 생략*파일 경로 필요시 App.vue 경로 참고 - CompositionTestCmp.vue [ Composition Example ] 초기화 입력 : 선택 : 선택해주세요. {{ item }} .. 2023. 10. 25. Vue3 <script setup> 이란? Vue3 Composition API를 이용하는 두가지 방식*자세한 설명 생략 ▷ setup() ▷ - 싱글 파일 컴포넌트(SRC) 내에서 Composition API를 사용하기 위한 문법 - SFC와 Composition API를 사용하는 경우 을 사용하라고 권장 - import를 한 것을 그대로 return 없이 사용 - 런타임 성능 향상 등 많은 장점이 존재 ▷ 참고의 차이" data-og-description="Vue3에서의 Composition API와 setup Vue3의 등장 예고와 함께 사용되어진 Composition API, Vue2.7 버전 미만을 사용할 경우에는 따로 플러그인을 설치해서 사용할 수 있으며, Vue2.7 이상부터는 Vue3처럼 Co.. 2023. 10. 24. Composition API란? Component의 로직을 유연하게 구성할 수 있도록 하는 함수 기반의 API *자세한 설명 생략 ▷ Composition API란? - Vue Component를 구성하는 데 사용 - Vue3에서 새로 추가된 함수 기반의 API *Vue3에 내장 - Options API의 단점을 보완하기 위해 등장 *Vue3에서는 Composition API 권장 - 로직을 유연하게 구성할 수 있어 재사용성과 가독성을 높임 ▷ VS Options API - Options API는 정해진 구조로 인해 복잡한 코드의 품질이 떨어짐 *코드의 재사용이 어려움 *로직의 파악이 어려움 *유지보수가 어려움 ▷ Options API - Vue C.. 2023. 10. 24. Vue 기초 예제 - Directive(조건/반복) Vue Directive에 대한 간단한 설명과 Vue 기본 구조 파악 및 기초 예제*자세한 설명 생략 ▷ Vue Directive 란? *Vue에서 기본으로 제공되는 Directive List는 아래 링크 참고 - HTML 태그 안에 v- 접두사를 가지는 모든 속성 - 내부적으로 주어진 데이터에 따라 DOM을 조작하는 역할 - Custom 가능 *Custom Directive ▷ 기초 예제 - 조건( v-if )/반복 (v-for)*프로젝트 구조 및 CSS 생략*파일 경로 필요시 App.vue 경로 참고 Vue에서는 Component Name을 두 개 이상의 단어로 조합하여 만드는 것을 추천 *하나의 단어로 사용 시 에러 - IfTestCmp.vue [.. 2023. 10. 23. Vue-CLI Project 기본 구조 vue-cli로 생성된 Project의 기본 디렉터리 구조 파악*자세한 설명 생략 ▷ vue-cli Project 기본 구조 ▷ 관련 글 Vue3 기초 예제 프로젝트 정리Vue3 기초 예제 프로젝트 구조 및 소스 중간 정리 *관련 글이 점점 늘어나 하나로 통합하기 위함 *이 글에서 만 싱크 맞춤 *주석 이외 설명 생략 *자세한 설명 생략 ▷ 프로젝트 전체 구조 coding-today.tistory.com 2023. 10. 23. 이전 1 ··· 5 6 7 8 9 10 11 ··· 18 다음 728x90 728x90
