전체138 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. Composition API란? Component의 로직을 유연하게 구성할 수 있도록 하는 함수 기반의 API *자세한 설명 생략 ▷ Composition API란? - Vue Component를 구성하는 데 사용 - Vue3에서 새로 추가된 함수 기반의 API *Vue3에 내장 - Options API의 단점을 보완하기 위해 등장 *Vue3에서는 Composition API 권장 - 로직을 유연하게 구성할 수 있어 재사용성과 가독성을 높임 ▷ VS Options API - Options API는 정해진 구조로 인해 복잡한 코드의 품질이 떨어짐 *코드의 재사용이 어려움 *로직의 파악이 어려움 *유지보수가 어려움 ▷ Options API - Vue Component를 구성하는 데 사용되는 객체 기반의 API - Component의 속성,.. 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 [ If Test ] 리스트 {{ list }} .. 2023. 10. 23. Vue-CLI Project 기본 구조 vue-cli로 생성된 Project의 기본 디렉터리 구조 파악*자세한 설명 생략 ▷ vue-cli Project 기본 구조 ▷ 관련 글 Vue3 기초 예제 프로젝트 정리Vue3 기초 예제 프로젝트 구조 및 소스 중간 정리 *관련 글이 점점 늘어나 하나로 통합하기 위함 *이 글에서 만 싱크 맞춤 *주석 이외 설명 생략 *자세한 설명 생략 ▷ 프로젝트 전체 구조 coding-today.tistory.com 2023. 10. 23. Vue3 Project 생성 및 실행 Vue3 Project 생성 후 실행 시켜 확인하고 간단한 태그 추가 후 변경된 내용 확인 *Vue.js 관련 개념 설명은 아래 참고 *VScode 사용 *자세한 설명 생략 ▷ Vue3 Project 생성 및 실행 ① Vue Workspace folder 생성 ② Vue3 Project 생성 *? Please pick a preset: Default ([Vue 3] babel, eslint)가 출력된다면 Enter *Defalut Vue3 💡vue create test ③ Vue3 Project 실행 *Vue3 Proeject 종료 : Ctrl + c → y 💡cd test 💡npm run serve ④ 결과 확인 *http://localhost:8080 ▷ Vue3 project import in VS.. 2023. 10. 20. Vue 설치 방법 ▷ Vue 설치 방법 ① Node 설치② vue-cli 설치(-g) ① Node 설치 💡node -v💡npm -v ② vue-cli 설치(global)*vue-cli : Vue 프로젝트를 빠르게 구성, build, Deploy 할 수 있게 도와주는 도구 💡npm install -g @vue/cli💡vue --version ▷ 관련 글 Vue3 기초 예제 프로젝트 정리Vue3 기초 예제 프로젝트 구조 및 소스 중간 정리 *관련 글이 점점 늘어나 하나로 통합하기 위함 *이 글에서 만 싱크 맞춤 *주석 이외 설명 생략 *자세한 설명 생략 ▷ 프로젝트 전체 구조 coding-today.tistory.com 2023. 10. 20. Swagger UI Hangs on Big Json Respones 해결 방법 Swagger UI에서 많은 양의 응답 값을 받게 되면 버벅 거리는 문제 발생 *자세한 설명 생략 ▷ 요약 문제 : Swagger UI syntaxHighlight로 인한 Big Json Response 처리 시간문제 해결 : application.properties에 springdoc.swagger-ui.syntaxHighlight.activated= false 추가 ▷ 해결 방법 *application.properties에서 Swagger UI SyntaxHighlight 기능off # Swagger # Swagger UI syntaxHighlight Setting springdoc.swagger-ui.syntaxHighlight.activated= false ▷ 결과 화면 *SyntaxHighlig.. 2023. 10. 18. 이전 1 ··· 3 4 5 6 7 8 9 ··· 16 다음 728x90 728x90
