▶ Front-End23 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. 이전 1 2 3 다음 728x90 728x90
