Vue.js 기초 실습 자료 - 사전 지식 : html/Javascript 기초

1. Vue.js 기초 실습
한국폴리텍대학 스마트금융과

2. 도입
source : https://www.appsdevpro.com/blog/vue-vs-react/

3. MVVM (Model, View, ViewModel)
View Model
View Model
DOM Listener
Data Binding
Javascript Object

4. 준비물
IDE : VS Code 또는 ATOM, 기타
- VS Code : Volar extension 설치
크롬 : 개발자 도구와 Vue.js Extenstion (필요시)
Node.js (Install Node.js version 16.0 or higher)

5. Hello World
Vue 애플리케이션 만들기
https://ko.vuejs.org/guide/quick-start.html#creating-a-vue-application
index.html  main.js  App.vue
CDN에서 Vue 사용
https://codepen.io/vuejs-examples/pen/eYQpQEG

6. Vue = Component
App.vue
HelloWorld.vue
TheWelcome.vue
WelcomeItem.vue
WelcomeItem.vue
WelcomeItem.vue
WelcomeItem.vue
WelcomeItem.vue

7. Counter 예제 (1/3)

8. Counter 예제 (2/3)

9. Counter 예제 (3/3)

10. 템플릿 문법 : v-bind

11. 템플릿 문법 : Boolean 속성

12. 템플릿 문법 : 여러 속성 바인딩

13. 템플릿 문법 : JavaScript 표현식 사용

14. 반응형 기초 : 반응형 상태 선언
Composition API에서 반응형 상태를 선언하는 권장 방법은 ref() 함수를 사용하는 것입니다:
컴포넌트가 처음 렌더링될 때, Vue는 렌더링 과정에서 사용된 모든 ref를 추적합니다. 나중에 ref가 변경되면, 이를 추적하는 컴포넌트
에 대해 재렌더링을 트리거합니다.
https://ko.vuejs.org/guide/essentials/reactivity-fundamentals.html#ref

15. 반응형 기초 : reactive
 ref와 reactive 차이 알아보기

16. 계산된 속성(computed)

17. 계산된 속성(computed)
<script setup>
import { reactive, computed } from 'vue'
const author = reactive({
name: 'John Doe',
books: [
'Vue 2 - Advanced Guide',
'Vue 3 - Basic Guide',
'Vue 4 - The Mystery',
'Vue 5 - The Mystery',
'Vue 6 - The Mystery',
'Vue 7 - The Mystery'
]
})
// 계산된 ref
const publishedBooksMessage = computed(() => {
return author.books.length > 3 ? 'Yes' : 'No'
})
const funcBtn = (()=>{
author.books.pop()
})
</script>
<template>
<p>책을 많이 가지고 있다:</p>
<span>{{ publishedBooksMessage }}</span>
<p></p>
<button @click="funcBtn">버튼</button>
</template>

18. 클래스와 스타일 바인딩

19. 조건부 렌더링

20. 리스트 렌더링
추가 실습 : https://ko.vuejs.org/guide/essentials/list.html

21. 이벤트 핸들링

22. 입력 바인딩
추가 실습 : https://ko.vuejs.org/guide/essentials/forms.html

23. 라이프싸이클

24. Component 실습

25. 실습 환경 구성
npm install -g @vue/cli
vue create vue-project2
cd vue-project2
npm run serve

26. 컴포넌트
image: https://ko.vuejs.org/guide/essentials/component-basics.html

27. 컴포넌트
App.vue
HelloWorld.vue
App.vue
HelloWorld.vue

28. 컴포넌트 : props (1/3)
App.vue
HelloWorld.vue
App.vue
HelloWorld.vue

29. 컴포넌트 : props (2/3)
부모 컴포넌트에서 버튼 클릭시,
부모 컴포넌트의 count 값을 자식 컴포넌트에 전달하고,
전달받은 값을 자식 컴포넌트 화면에 출력한다.

30. 컴포넌트 : props (3/3)
App.vue
HelloWorld.vue

31. 컴포넌트 : emit event (1/2)
App.vue
HelloWorld.vue

32. 컴포넌트 : emit event (2/2)
1. Child Component에 버튼 추가하고, 버튼 클릭시 상위 컴포넌트에 메시지 전달

33. 컴포넌트 : Slot
https://ko.vuejs.org/guide/essentials/component-basics.html#content-distribution-with-slots

34. Router

35. Router

36. Router
Kopo 라는 메뉴 만들고, 해당 메뉴 클릭시 Kopo 컴포넌트 호출하게 코드 추가하기

37. Axios

38. axios 설치 및 import

39. vue2 style 준비 (전역 설정)
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
// createApp(App).use(router).mount('#app')
const app = createApp(App)
app.config.globalProperties.axios=axios
app.use(router).mount('#app')
main.js

40. vue2 style (사용)
사용하고자 하는 컴포넌트에서...
HelloWorld.vue
export default {
name: 'HelloWorld',
methods: {
testAxios() {
this.axios.
get('https://api.coindesk.com/v1/bpi/currentprice.json').
then(response => (console.log(response)))
},
btnclicked(){
this.testAxios();
}
}
}

41. vue3 style 준비 (전역 설정)
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
// createApp(App).use(router).mount('#app')
const app = createApp(App)
app.provide('$axios', axios);
app.use(router).mount('#app')
main.js

42. vue3 style (사용)
사용하고자 하는 컴포넌트에서...
import { inject } from 'vue'
setup(props, ctx) {
const axios = inject('$axios');
function sendmymessage () {
ctx.emit('send-message',childmsg)
axios.
get('https://api.coindesk.com/v1/bpi/currentprice.json').
then(response => (console.log(response)))
}
return{
sendmymessage
}
}
HelloWorld.vue

43. CORS 관찰

44. CORS 관찰
만약에?
아마도, backend 응답 헤더에 아래와 같은 속성이 없을 수도?

45. CORS 조치
Vue 개발을 위한 조치 => Production 환경에서는 BackEnd 에서 조치가 필요
function sendmymessage () {
axios.
get('/v1/bpi/currentprice.json').
then(response => (console.log(response)))
const params = {
name: "morpheus",
job: "leader",
};
axios.post("/api/users",params,{}
).then((res)=>{
//성공했을경우
console.log("성공",res)
}).catch((res)=>{
//실패했을경우
console.error("실패",res)
})
}
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: {
'/v1': {
target: "https://api.coindesk.com",
changeOrigin: true
},
'/api': {
target: "https://reqres.in",
changeOrigin: true
}
}
}
})
vue.config.js

46. async await
Do you know 콜백지옥?
btnclicked(){
this.testAxios();
this.testAsync();
},
async testAsync() {
const resultValue = await this.requestPost();
this.requestGet(resultValue);
},
requestGet(arg) {
console.log(`[START] axios Get,
Call Back From Previos Axios Post = ${arg} `);
this.axios
.get(`https://reqres.in/api/users?/page=1`, {})
.then((res) => {
console.log("[END] axios Get ");
this.getData = res.data;
})
.catch((res) => {
console.error(res);
});
},
requestPost() {
const params = {
name: "morpheus",
job: "leader",
};
console.log("[START] axios Post");
return this.axios
.post(`https://reqres.in/api/users`, params, {})
.then((res) => {
console.log("[END] axios Post");
this.postData = res.data;
return "Success";
})
.catch((res) => {
console.error(res);
return "Failure";
});
},
},

47. Pinia

48. Pinia
Vue의 상태 관리 모듈
npm install pinia --save
https://pinia.vuejs.org/introduction.html
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import { createPinia } from 'pinia'
const app = createApp(App)
const pinia = createPinia()
app.config.globalProperties.axios=axios
app.provide('$axios', axios);
app.use(pinia)
app.use(router).mount('#app')

49. Pinia
폴더와 파일 생성
import { ref } from 'vue'
import { defineStore } from "pinia"
export const useCounterStore = defineStore('counter', () => {
const count = ref(1)
function increment() {
count.value++
console.log("increment called")
}
return { count, increment }
})
counter.js

50. Pinia
HelloWorld.vue

51. Pinia
HelloWorld.vue

52. 실습

53. 실습
https://github.com/wonyongHwang/vue3-todo.git
https://github.com/wonyongHwang/simple-todo-list.git
- localStorage 저장
- backend  database 저장

54. 조별 실습 과제
Vue Project
- 화면 정의
- R&R, WBS, ...

55. 설치
https://www.creative-tim.com/product/vue-material-kit
App.vue
router > index.js

56. 로그인 예제 (준비)
setup() {
const myemail = ref('a@a.com')
const mypwd = ref('1234')
const refmyemail = ref(null);
function func_signin() {
console.log("sign in ",myemail,mypwd)
console.log(refmyemail._value.value)
}
onMounted(() => {
setMaterialInput();
})
return{
myemail,
mypwd,
func_signin,
refmyemail
}
},

57. 로그인 예제 (v-model)
<div class="card-body">
<!-- submit.prevent added by hwy -->
<form role="form" class="text-start" @submit.prevent>
<!-- code modified by hwy -->
<div class="input-group input-group-outline my-3">
<input v-model="myemail" id="email" class="form-control form-control-md" type="email" ref="refmyemail"/>
</div>
<div class="input-group input-group-outline my-3">
<input v-model="mypwd" id="password" class="form-control form-control-md" type="password"/>
</div>
<div class="text-center">
<MaterialButton
class="my-4 mb-2"
variant="gradient"
color="success"
@click="func_signin"
fullWidth
>Sign in</MaterialButton>
</div>

58. 로그인 예제 (결과확인)

59. 로그인 예제 (ref 살펴보기)
setup() {
const refmyemail = ref(null);
function func_signin() {
console.log(refmyemail._value.value)
}
return{
func_signin,
refmyemail
}
<div class="input-group input-group-outline my-3">
<input v-model="myemail" id="email" class="form-control form-control-md"
type="email" ref="refmyemail"/>
</div>

60. 로그인 예제 (axios 및 router 적용)
import { ref, inject } from 'vue'
import { useRouter } from 'vue-router'
setup() {
const $client = inject("$axios");
const router = useRouter()
async function func_signin() {
const resp = await $client.get("/api/delayHello");
if(resp.status == 200){
router.push('/')
}else{
}
}
rest call 정상 응답시 최상위 경로로 이동
 로그인 관련 Backend에서 응답 받은 정보의 저장 및 관리는?

61. 분석
컴포넌트 배치 확인
그리드 시스템(부트스트랩)
https://getbootstrap.kr/docs/5.0/layout/grid/
PresentationView.vue

62. 분석

63. 분석

64. 분석
PresentationView.vue

65. 분석
PresentationView.vue
PresentationCounter.vue
DefaultCounterCard.vue

66. 진행 방향
컴포넌트 구성도 작성
기획 & 화면 정의, R&R, WBS (교수와 협의)
* axios, pinia, mitt 등 활용
형상관리(Git)
빌드 및 실서버 배포

67. mitt

68. 컴포넌트간 이벤트 전달
Vue2 : EventBus
Vue3 : mitt
npm install --save mitt
main.js

69. 이벤트 발송
AboutView.vue

70. 이벤트 수신
PresentationView.vue

71. 결과 확인
AboutView.vue를 호출  이벤트 발송 (mount)  이벤트 수신

72. mock

73. 준비
npm install axios-mock-adapter --save
npm install axios --save
main.js

74. mock 코드 준비
import MockAdapter from "axios-mock-adapter";
function parseQueryString(url) {
const queryString = url.replace(/.*?/, "");
const result = {};
if (queryString === url || !queryString) {
return result;
}
const urlParams = new URLSearchParams(queryString);
urlParams.forEach((val, key) => {
if (Object.prototype.hasOwnProperty.call(result, key)) {
result[key] = [result[key], val];
} else {
result[key] = val;
}
});
return result;
}
export default {
mocked(axiosClient) {
const mock = new MockAdapter(axiosClient, { onNoMatch: "passthrough" });
mock.onGet("/api/hello").reply(200, { hello: "world" });
mock.onGet(//api/hello2?.*/).reply((config) => {
const params = parseQueryString(config.url);
return [200, { config, params }];
});
mock.onPost("/api/formPost").reply((config) => {
//const formData = config.data;
const name = config.data.get("name");
return [200, { config, name: name }];
});
mock.onPost("/api/postJson").reply((config) => {
const data = JSON.parse(config.data);
return [200, { data }];
});
mock.onGet("/api/delayHello").reply((config) => {
const delay = 5000;
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([200, { hello: "world" }]);
}, delay);
});
});
}
};
mock.js

75. 테스트
// mock
import { inject, reactive } from "vue";
const $client = inject("$axios");
const myModel = reactive({});
const btnClick1 = async () => {
const resp = await $client.get("/api/hello");
myModel.respCode = resp.status;
myModel.respBody = resp.data;
};
const btnClick2 = async () => {
const resp = await $client.get("https://httpbin.org/get");
//const resp = await $client.get("https://ifconfig.io/all.json");
myModel.respCode = resp.status;
myModel.respBody = resp.data;
};
const btnClick3 = async () => {
const resp = await $client.get("/api/hello2?name=taro"); // &name=taro
myModel.respCode = resp.status;
myModel.respBody = resp.data;
console.log(resp.data)
};
const postFormData = async () => {
const formData = new FormData();
formData.append("name", "taro");
formData.append("flag1", "true");
const resp = await $client.post("/api/formPost", formData, {});
myModel.respCode = resp.status;
myModel.respBody = resp.data;
};
<template>
<div class="container position-sticky z-index-sticky top-0">
<div class="row">
<!-- <div class="col-12">
<NavbarDefault :sticky="true" />
</div> -->
<button @click="btnClick1">Call API(Mock)</button>
<button @click="btnClick2">Call API</button>
<button @click="btnClick3">Call (Hello2)</button>
<button @click="postFormData">Call (postFormData)</button>
<button @click="postJson">Call (postJson)</button>
<button @click="delayHello">delayHello</button>
</div>
<div>
<dl>
<dt>code</dt>
<dd>{{ myModel.respCode }}</dd>
<dt>body</dt>
<dd>
<pre>{{ myModel.respBody }}</pre>
</dd>
</dl>
</div>
</div>
PresentationView.vue

76. 테스트
source : https://github.com/ctimmerm/axios-mock-adapter

77. 테스트
mock.js

78. 빌드 및 배포
node

79. npm run build

80. copy dist folder to server directory

81. app.js
const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const cors = require('cors');
const app = express();
var request = require('request');
app.use(bodyParser.json()); // json을 parse하도록 함
app.use(cors());
app.use(express.static("."));
// configuration =========================
app.set('port', process.env.PORT || 8030);
app.use( '/', express.static( path.join(__dirname, './dist') ));
app.get('/', function (req,res) {
res.sendFile(path.join(__dirname, './dist', 'index.html'));
});
app.listen(app.get('port'), () => {
console.log('Express server listening on port ' + app.get('port'));
});
npm install express
npm install cors
npm install request

82. node app.js

83. forever - nodeJS의 무중단 관리도구
○ forever 설치
npm install forever -g
○ forever 시작
forever start app.js
○ forever 종료
forever stop app.js (또는 forever list에서 확인한 pid)
○ forever 목록
forever list