과거 PHP
SSR
서버에서 페이지를 렌더링 해줌
서버의 부담 증가
속도가 서버에 종속됨
당시 Apache 문제로 사용자가 늘어나면 접속이 안됨
현재 React, Vue.js
CSR
클라이언트 사이드에서 렌더링
서버에서 데이만 보내줌
서버의 부담이 감소
Nginx -> 병렬적 시스템을 구축 함
SPA
한 개의 페이지를 가진 어플리케이션
가상 돔을 만들고 변화만 반영
Apache 서버는 요청 하나 당 프로세스(또는 스레드)가 처리하는 구조
Nginx는 보안과 속도를 최적화 시키려는 노력에서 탄생한 웹서버이며, 사용이 매우 심플하고 규모가 작은 서비스이면서 정적 데이터 처리가 많은 서비스에 적합하다.
최신 Next.Js, Nuxt.js
CSR의 가장 큰 문제는 로딩속도가 느림 + SEO(검색엔진 최적화)에서 불리
과거보다 구조적으로 백엔드와 프론트가 나니워서 이전의 단점을 보완
실습 - 웹페이지에 사진 앨범을 만들며 사진을 추가하고 제거하는 기능을 넣는다.
Windows Terminal
npm
vue create gallay
npx @vue/cli create gallay
Manually select features 선택
Router와 Vuex를 space를 눌러 선택 후 쭉 엔터
cd album
npm run serve
Visual Code 실행 후 file -> open folder -> 내가 만든 gallay 클릭
Ctrl + ~을 눌러 터미널 생성 후 npm run serve
Home.vue에서
<img @click="test" alt ~~> // 이미지 클릭 시 test가 나온다.
methods:{
test(){
console.log('HELLO;);
}
}
이미지를 클릭 시 HELLO 값이 출력된다.
src -> components -> HelloWorld.vue
<h1 @click="test"> 삽입 시 h1을 누르면 test의 값이 출력되지 않는다.
상속을 못받기 때문 따라서 <h1 @click="$emit('text_click')">
Home.vue에서 <HelloWorld @text_click="test" msg ~>
아래와 같이 그림과 글자 모두 클릭 했을 때 HELLO를 출력한다.
* Plugin에서 vetur와 beautify 설치
vetur
vue 파일에 대한 코드들을 만들어주는 기능을 비롯해 디버깅, 자동완성 등을 지원
beautify
설치 후 Commands에 HookyQR.beautify 를 복사한다.
파일 - 기본설정 - 바로가기 키를 클릭 후 메뉴창에 HookyQR.beautify 를 붙여넣는다.
Beautify selection을 눌러 원하는 키 조합을 누른다. (Ctrl + Shift + L)
src -> components에 새로운 파일을 만든다. HiWorld.vue
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
기초 작성
src -> views -> About.vue
<template>
<div class="about">
<h1>This is an about page</h1>
<hi-world></hi-world>
</div>
</template>
<script>
import HiWorld from '../components/HiWorld.vue'
export default{
components:{HiWorld},
}
</script>
| | | | HiWorld
이미지를 클릭 시 HELLO 값이 출력된다.
<template>
<div>
hi text<br>
text:{{data}}
<br>
<button @click="response">click</button> <!-- 버튼을 만들고 response를 누르면 출력 -->
</div>
</template>
<script>
export default {
data(){ // data 생성
return{
data:'',
}
},
created(){ // 데이터는 안녕이라고 출력 console에는 created 출력
console.log('created');
this.data = "안녕!"
},
methods:{
response(){ // 이벤트 response 시 아래와 같이 출력
this.data = '새해 복 많이 받으세요'
}
}
}
</script>
<style>
</style>
클릭을 누를 시 텍스트가 바뀐다.
<template>
<div>
hi text<br>
text:{{data}}<br>
msg:{{msg}}
<br>
<button @click="response">click</button> <!-- 버튼을 만들고 response를 누르면 출력 -->
<br>
<input v-model="msg" type="text"> <!-- input 사용시 입력 칸 사용 -->
</div>
</template>
<script>
export default {
data(){ // data 생성
return{
data:'',
msg:'',
}
},
created(){ // 데이터는 안녕이라고 출력 console에는 created 출력
console.log('created');
this.data = "안녕!"
},
methods:{
response(){ // 이벤트 response 시 아래와 같이 출력
this.data = '새해 복 많이 받으세요'
}
}
}
</script>
<style>
</style>
input에 값을 넣고 클릭 시 msg에 값이 출력된다.
<template>
<div>
hi text<br>
text:{{data}}<br>
msg:{{msg}}
<br>
<button @click="response">click</button> <!-- 버튼을 만들고 response를 누르면 출력 -->
<br>
<input v-model="msg" type="text"> <!-- input 사용시 입력 칸 사용 -->
</div>
</template>
<script>
export default {
data(){ // data 생성
return{
data:'',
msg:'',
}
},
created(){ // 데이터는 안녕이라고 출력 console에는 created 출력
console.log('created');
this.data = "안녕!"
},
methods:{
response(){ // 이벤트 response 시 아래와 같이 출력
this.data = '새해 복 많이 받으세요'
this.data = this.msg; // msg랑 data랑 같게 나온다
this.msg =''; // msg를 다시 초기화한다.
}
}
}
</script>
<style>
</style>
input에 값을 넣고 클릭 시 msg에 값이 출력되며 text와 같이 나오고 msg는 초기화한다.
<template>
<div>
hi text<br>
text:{{data}}<br>
msg:{{msg}}<br>
list:{{list}}<br>
vif:{{vif}}
<br>
<button @click="response">click</button> <!-- 버튼을 만들고 response를 누르면 출력 -->
<br>
<input v-model="msg" type="text"> <!-- input 사용시 입력 칸 사용 -->
<br>
<div v-for="(item,id) in list" :key="id"> <!-- list 만들기 -->
{{item}},{{id}}
</div>
<br>
</template>
<script>
export default {
data(){ // data 생성
return{
data:'',
msg:'',
list:[1,2,3,4,5,6],
}
},
created(){ // 데이터는 안녕이라고 출력 console에는 created 출력
console.log('created');
this.data = "안녕!"
},
updated(){
console.log('updated');
},
methods:{
response(){ // 이벤트 response 시 아래와 같이 출력
this.data = '새해 복 많이 받으세요'
this.data = this.msg; // msg랑 data랑 같게 나온다
this.msg =''; // msg를 다시 초기화한다.
}
}
}
</script>
<style>
</style>
리스트 함수를 사용한다.
<template>
<div>
hi text<br>
text:{{data}}<br>
msg:{{msg}}<br>
list:{{list}}<br>
vif:{{vif}}
<br>
<button @click="response">click</button> <!-- 버튼을 만들고 response를 누르면 출력 -->
<br>
<input v-model="msg" type="text"> <!-- input 사용시 입력 칸 사용 -->
<br>
<div v-for="(item,id) in list" :key="id"> <!-- list 만들기 -->
{{item}},{{id}}
</div>
<br>
<button @click="vif++">click</button> <!-- 클릭 시 vif 값이 1 증가한다 -->
<div v-if="vif==0"> <!-- if 값 -->
보이는 내용1
</div>
<div v-else-if="vif==1"> <!-- else if 값 -->
보이는 내용2
</div>
<div v-else> <!-- else 값 -->
보이는 내용3
</div>
</div>
</template>
<script>
export default {
data(){ // data 생성
return{
data:'',
msg:'',
list:[1,2,3,4,5,6],
vif:0
}
},
created(){ // 데이터는 안녕이라고 출력 console에는 created 출력
console.log('created');
this.data = "안녕!"
},
updated(){
console.log('updated');
},
methods:{
response(){ // 이벤트 response 시 아래와 같이 출력
this.data = '새해 복 많이 받으세요'
this.data = this.msg; // msg랑 data랑 같게 나온다
this.msg =''; // msg를 다시 초기화한다.
}
}
}
</script>
<style>
</style>
vif의 값이 1이면 보이는 내용1이며 클릭버튼을 누를 시 vif값이 1증가한다. 그러면 vif값이 변경되므로 보이는 내용이 달라진다.
<template>
<div>
hi text<br>
text:{{data}}<br>
msg:{{msg}}<br>
list:{{list}}<br>
vif:{{vif}}
<br>
<button @click="response">click</button> <!-- 버튼을 만들고 response를 누르면 출력 -->
<br>
<input v-model="msg" type="text"> <!-- input 사용시 입력 칸 사용 -->
<br>
<div v-for="(item,id) in list" :key="id"> <!-- list 만들기 -->
{{item}},{{id}}
</div>
<br>
<button @click="vif++">click</button> <!-- 클릭 시 vif 값이 1 증가한다 -->
<div v-if="vif==0"> <!-- if 값 -->
보이는 내용1
</div>
<div v-else-if="vif==1"> <!-- else if 값 -->
보이는 내용2
</div>
<div v-else> <!-- else 값 -->
보이는 내용3
</div>
<div v-show="vif==2"> <!-- vif 값이 2이면 보이는 내용 4가 출력 된다 아닐 시 사라짐 -->
보이는 내용4
</div>
</div>
</template>
<script>
export default {
data(){ // data 생성
return{
data:'',
msg:'',
list:[1,2,3,4,5,6],
vif:0
}
},
created(){ // 데이터는 안녕이라고 출력 console에는 created 출력
console.log('created');
this.data = "안녕!"
},
updated(){
console.log('updated');
},
methods:{
response(){ // 이벤트 response 시 아래와 같이 출력
this.data = '새해 복 많이 받으세요'
this.data = this.msg; // msg랑 data랑 같게 나온다
this.msg =''; // msg를 다시 초기화한다.
}
}
}
</script>
<style>
</style>
https://vuetifyjs.com/en/
Vuetify — A Material Design Framework for Vue.js
Vuetify is a Material Design component framework for Vue.js. It aims to provide all the tools necessary to create be...
vuetifyjs.com
Vue.js 프레임워크인 Vuetify를 시작하기
터미널에서 Ctrl + C를 눌러 일괄 작업을 끝낸 후 vue add vuetify
오류가 나서 구글링을 해보니 실행 정책 관련한 문제로 PowerShell에서 악의적인 스크립트 실행을 방지하기 위해 설정한 안전기능 때문이라고 한다.
그래서 Set-ExecutionPolicy -Execution
Policy Unrestricted를 했는데도 안됐다.
LocalMachine이 아직 잠긴모습
다른 구글링을 해볼까하다가 오류를 유심히 봤다.
차분히 읽으니 Set-ExecutionPolicy -Scope CurrentUser 를 입력했다.
ExecutionPolicy : 에 뭘 넣어야할까 하다가 Unrestricted를 넣어봤다.
그리고 나서 vue add vuetify를 입력했는데 정상적으로 작동 했다.
npx @vue/cli add vuetify
npm run serve
적용 완료
