▶ Front-End23 Vue3 기초 예제 - 날짜 검색(v-calendar) Vue3 기초 예제 - Pie Charts(Vue-ECharts)에 v-calendar를 사용하여 날짜 검색 조건 추가*아래 관련 글 참고*API 관련 설명 생략*자세한 설명 생략 ▷ v-calendar 설치*vue-cli를 통해 Project 생성 후 진행 💡npm install v-calendar@next @popperjs/core ▷ 기초 예제 - 날짜 검색 조건 추가*프로젝트 전체 구조 관련 글 참고 - main.js*VCalendar 라이브러리 등록/** Vue */import { createApp } from 'vue'import App from './App.vue'/** Router */import { router } from '@/module/router/MenuNav.js'impor.. 2023. 11. 6. Vue3 기초 예제 - 테이블 라이브러리 적용(PrimeVue) "PrimeVue" 라이브러리를 사용하여 테이블을 생성하는 기초 예제 *동적 데이터 테이블 생성, Axios API 통신, Modal open/close *API 관련 설명 생략 *자세한 설명 생략 ▷ PrimeVue 설치 *vue-cli를 통해 Project 생성 후 진행 💡npm install primevue ▷ 기초 예제 - 테이블 라이브러리 적용 - main.js *PrimeVue 라이브러리 등록 import { createApp } from 'vue' import App from './App.vue' import { router } from '@/module/router/MenuNav.js' import { createPinia } from 'pinia' import PrimeVue from '.. 2023. 11. 2. Vue3 기초 예제 - CRUD 관리자 페이지 공통 코드를 관리하는 관리자 페이지 기초 예제 *동적 데이터 테이블 생성, Axios API 통신, Modal open/close *API 관련 설명 생략 *자세한 설명 생략 ▷ 기초 예제 - CRUD - Cmp.css *dataTable, modal 관련 css 추가 @import url('https://fonts.googleapis.com/css2?family=Gugi&display=swap'); * { font-family: 'Gugi', sans-serif; } .HeaderCmp { margin-bottom: 50px; text-align: center; color: #2c3e50; } .ForTestCmp { text-align: left; font-size: small; font-weight.. 2023. 11. 2. 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 { createPinia } from 'p.. 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 { createPi.. 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 / inject를 사용하여 전역 변수 사용 .. 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/Tes.. 2023. 10. 26. Vue3 기초 예제 - Dynamic Select Box 화면에서 입력받은 값으로 Dynamic Select Box를 생성하는 기초 예제 *아래 예제는 전 예제에 이어서 진행(아래 링크 참고) *자세한 설명 생략 ▷ 기초 예제 - Dynamic Select Box 생성 *Event Handling 관련 아래 링크 참고 *프로젝트 구조 및 CSS 생략 *파일 경로 필요시 App.vue 경로 참고 - CompositionTestCmp.vue [ Composition Example ] 초기화 입력 : 선택 : 선택해주세요. {{ item }} 확인 : {{ select }} 리스트 현황 {{ i }} → {{ item }} - App.vue ▷ 결과 확인 *http://localhost:8080 ▷ 참고 Event Handling | Vue.js VueConf To.. 2023. 10. 25. Vue3 <script setup> 이란? Vue3 Composition API를 이용하는 두가지 방식 *자세한 설명 생략 ▷ setup() ▷ - 싱글 파일 컴포넌트(SRC) 내에서 Composition API를 사용하기 위한 문법 - SFC와 Composition API를 사용하는 경우 을 사용하라고 권장 - import를 한 것을 그대로 return 없이 사용 - 런타임 성능 향상 등 많은 장점이 존재 ▷ 참고 [VueJS] Vue3 - setup() 과 의 차이 Vue3에서의 Composition API와 setup Vue3의 등장 예고와 함께 사용되어진 Composition API, Vue2.7 버전 미만을 사용할 경우에는 따로 플러그인을 설치해서 사용할 수 있으며, Vue2.7 이상부터는 Vue3처럼 Compositio mine-it-.. 2023. 10. 24. 이전 1 2 3 다음 728x90 728x90
