투케이2K

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [그림 설명] ​ [App.vue - 소스 코드] ​ [Maincomponent.vue - 소스 코드] {{ msg }}

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [파일 설명] ​ [소스 코드] ​ [결과 출력] ​ [참고 사이트] ​ https://vuejs.org/api/composition-api-lifecycle.html ​ Composition API: Lifecycle Hooks | Vue.js vuejs.org https://v3.ko.vuejs.org/api/options-lifecycle-hooks.html#updated 라이프사이클 훅 | Vue.js 라이프사이클 훅 Note 모든 라이프사이클 훅은 자동으로 this 컨텍스트가 인스턴스에 바인딩되어 있으므로, data, computed 및 methods 속성에 접근할 수 있습니다. 즉, 화살표 함수를 사용해서 라이프사 v..

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [흐름 설명] ​ [추가 방법] ​ [main.js - 소스 코드] // [main.js 설명] // 1. 애플리케이션 진입점으로 Vue 초기화, 폴더 , 전역, 컴포넌트 , 라이브러리 등록 수행 실시 // 2. import App 을 사용해 최상위 App.vue 컴포넌트 지정 실시 // 3. createApp mount 를 사용해 index.html 파일 div id 값 설정 및 렌더링 시작점 지정 실시 // [애플리케이션 생성 실시] import { createApp } from 'vue' import App from './App.vue' // [app 아이디 : 렌더링 시작점] // createApp(App).mount('..

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [구조 설명] ​

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [방법 설명] ​ ​ ​ ​ ​

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [종류 모음] Extension 설 명 Vetur 코드 하이라이팅 지원, 문법 강조, 코드 자동 완성, 디버깅 등 지원 Vue 3 Snippets 스니펫을 이용하여 코드 자동 완성 Vue VSCode Snippets Vue 코드 자동 완성 (문법 확인) GitLens — Git supercharged 코드 변경된 부분 비교 확인 Debugger for Microsoft Edge Edge 브라우저에서 디버깅 사용 EditorConfig for VS Code 코드 가독성을 위해 확장자 별 tab size (Indentation) 설정 ESlint 코드 작성시 문법 오류 및 버그 확인 Material Icon Theme 폴더 아이콘 ..

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [방법 설명] ​ 1. https://code.visualstudio.com/download 사이트 접속해서 VS CODE 다운로드 수행 및 설치 ​ ​ ​ ​ 2. 설치된 VS CODE 가 정상 동작하는지 확인 실시 ​ ​ ​ ​ 3. https://nodejs.org/en/ 사이트 접속해서 node js 다운로드 수행 및 설치 ​ ​ ​ ​ 4. node js 와 npm 이 정상적으로 설치 되었는지 cmd 명령 프롬프트 실행해서 확인 실시 ​ - cmd 명령어 (node 버전 확인) : C:\Users\tk> node -v ​ - cmd 명령어 (npm 버전 확인) : C:\Users\tk> npm -v ​ ​ ​ ​ 5. ..

/* =========================== */ [개발 환경 설정] ​ 개발 툴 : Intelli J 개발 언어 : vue.js /* =========================== */ ​ /* =========================== */ [설 명] ​ [Vuetify 란?] - Vuetify 는 google의 Material UI 프로젝트를 Vue에 맞게 포팅한 것입니다 - cmd 명령어 (설치) : C:\Users\IdeaProjects\first_test> vue add vuetify - 설치된 것 확인 (일반) : package.json > devDependencies > vue-cli-plugin-vuetify 확인 ​ ​ ​ [Vue Cli 란?] - Vue Cli ..

/* =========================== */ [개발 환경 설정] ​ 개발 툴 : Intelli J 개발 언어 : vue.js /* =========================== */ ​ /* =========================== */ [설 명] ​ ​ /* =========================== */ ​

/* =========================== */ [개발 환경 설정] ​ 개발 툴 : Intelli J 개발 언어 : vue.js /* =========================== */ ​ /* =========================== */ [설 명] ​ 1. node js 설치 진행 ​ ​ 2. node js 설치 확인 실시 - cmd 명령어 설치 확인 : node -v - cmd 명령어 설치 확인 : npm -v ​ ​ 3. intelij 설치 진행 (Ultimate 버전) ​ ​ 4. Plugins 메뉴 > vue 검색 > vue.js 플러그인 설치 진행 ​ ​ 5. Projects 메뉴 > 상단 New Project 메뉴 > 사이드 JavaSctipt 메뉴 > Vue.js..

/* =========================== */ [개발 환경 설정] ​ 개발 툴 : Intelli J 개발 언어 : vue.js /* =========================== */ ​ /* =========================== */ [설 명] ​ [Vue.js 란?] - Vue.js 는 웹 페이지 화면 개발을 위한 프론트엔드 프레임워크입니다 ​ ​ ​ [Vue.js 장점] - Vue.js 는 다른 프레임워크에 비해서 배우고 학습하기가 쉽습니다 - Vue.js 는 React 와 Angular에 비래 속도가 빠르고 가볍습니다 ​ ​ ​ [Vue.js 특징] - Vue.js 는 MVVM 디자인 패턴 방식으로 구성되어있습니다 - MVVM 디자인 패턴은 마크언어나 GUI 코드를 ..