1-1
🏹 Vue 같은 라이브러리들 왜 쓰냐?
- 일단 vue, react, angular 같은 라이브러리들을 왜 쓰는지가 먼저.
- SPA, a.k.a web-app이라고도 한다, single page applicaition 만들려고 쓴다.
- 그게 뭐가 좋냐고? 모바일처럼 새로고침없이 스무스하게 페이지이동한다.
🏹 라이브러리중에 vue가 뭐가 좋냐?
-
- 쉽다. 특히 js 사전필요지식 부분에서 react와 차이가 많이 난다.
-
- Right-way가 있다. 어떤 하나의 기능을 만들때, react는 5~6개의 방법이 있는가 하면 vue는 한가지의 '정도'만이 있다.
-
- 그래서 협업이나 초보가 쓰기에 굉장히 좋다.
-
- 미세하지만 react보다 빠르다고 한다.
-
- 장기적으로 업데이트가 잘 된다.
-
그래서 js 초보일수록, 코딩레벨이 낮을수록 react보다 vue로 입문하는게 조금 더 장벽이 낮을것이다. (필자가 vue를 먼저 수강한 이유이기도 하다)
1-2
🏹 vue 데이터 바인딩(실시간 렌더링)(웹앱)
<script>
export default {
name : 'App',
data(){
return {
price1 : 60
}
}
}
</script>vue는 이렇게 스크립트 태그에 data() 공간에 변수를 관리한다.
그리고 저기 변수를 html에 적용하고싶다면?
<p :style="변수명">{{ price1 }} 만원</p>
저렇게 태그 속성에 변수를 넣을땐 ":"를 통해서
변수값으로 사용할땐 {{}}안에 집어넣어 사용하면된다.
그래서 내가 왜 이런방식으로 해야되냐?
바로바로 vue의 실시간 렌더링을 사용할 수 있기때문이다.
쉽게 설명하면 javascript 영역의 변수 값을 변경하면 해당 변수와 관련된 html 태그들을 자동으로 렌더링해준다. 바닐라js 쓸때처럼 내가 직접 html을 재배치 안해줘도 된다!! 이런 vue의 특성으로 웹앱을(web-app)을 만들 수 있는것이다
1-3
🏹 아주쉬운 vue 반복문
<div class="menu">
<a v-for="작명 in 3" :key="작명">Home</a>
</div>자 이게 끝이다 ~
:key 속성은 반복하는 요소들을 구분짓기위해 꼭 필요하다(없으면 에러띄움)
바닐라js 할때처럼 for each도 가능하다.
<div v-for="name in onerooms" :key="name">
<img :src="name.image" class="room-img" />
<h4 @click="modalOn(name.id)">
{{ name.title }}
</h4>
<p>{{ name.price }}원</p>
</div>실습 코드로 예시를 들면
onerooms 라는 배열 전체를 순회하고, 각각의 인덱스는 name이라는 변수로 대변된다.
저기서 작명 부분을 (name, i) 이렇게 두개까지도 가능하다. 두번째 변수는 현재 돌고있는 index 번호를 나타낸다!
1-4
🏹 vue의 이벤트리스너
위 실습코드에도 있지만
<h4 @click="modalOn(name.id)">요런식으로 @click="js코드" 형식으로 넣어주면 된다~! 당연히 안에 함수를 집어넣어도 된다.
vue에서 함수는
export default {
name: "App",
data() {
return {
onerooms: oneroom,
modal: 0,
id: 0,
declare: [0, 0, 0],
style: "color : blue",
products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
menus: ["Home", "Shop", "About"],
};
},
methods: {
modalOn(i) {
this.modal = 1;
this.id = i;
},요런식으로 data(){} 뒤에 method 공간을 만들어 기입해주면 된다.
이때 주의할 점은 함수에서 data의 변수를 다룰 땐 this를 꼭 붙여줘야 한다.
저기서 this는 export default 라인을 나타낸다.
1-5
🏹 vue로 동적인 UI 만드는 스텝(+vue-if)
2STEP을 잘 기억하자
1. 현재 HTML UI 상태를 데이터로 저장해둔다(현재 보이나 안보이나)
2. 그 상태에 따라 HTML UI를 보여줄지 말지 VUE 문법으로 결정한다.
이거만 기억하면 모든UI기능에 적용해도 무리가 없다.
<div class="black-bg" v-if="modal == 1">
<div class="white-bg">
<img :src="onerooms[id].image" />
<h4>{{ onerooms[id].title }}</h4>
<p>{{ onerooms[id].content }}</p>
<p>가격 : {{ onerooms[id].price }}</p>
<button @click="modal = 0">닫기</button>
</div>
</div>요 모달창을 예시로 들어보겠다.
우선 HTML UI를 만들고(CSS도) STEP을 밟아보자
1. 현재 HTML UI 상태를 데이터로 저장해둔다
data() {
return {
onerooms: oneroom,
modal: 0,
id: 0,
declare: [0, 0, 0],
style: "color : blue",
products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
menus: ["Home", "Shop", "About"],
};
},- 막간 상식 : data() {} 부분을 react에선 state라고 한다.
필자같은 경우엔 modal이라는 데이터로 저장해뒀다(0 == false, 1 == true)
- 그 상태에 따라 HTML UI를 보여줄지 말지 VUE 문법으로 결정한다.
<div class="black-bg" v-if="modal == 1">
<div class="white-bg">
<img :src="onerooms[id].image" />
<h4>{{ onerooms[id].title }}</h4>
<p>{{ onerooms[id].content }}</p>
<p>가격 : {{ onerooms[id].price }}</p>
<button @click="modal = 0">닫기</button>
</div>
</div>vue문법으로 이제 html ui를 보여줄지 말지 결정해주면 된다.
여기선 v-if를 사용하였는데 생각하는 그 if 맞다. 조건식이 true일때만 동작한다.
즉, modal data가 1일때만 modal창을 보여주게 된다.
쉽죠 !? 이 스텝을 기억 잘하자. data 바인딩을 통해 실시간 렌더링이 가능하기에 이 방식이 효과를 발휘한다.
1-6
🏹 import export
위에서 우린 data(){}란에다가 데이터를 저장하여 사용하였다.
근데 엄청 긴 데이터도 저기에 넣어도 될까?
당연히 된다 뭘 안되냐, 근데 보기에 복잡하고, 보기에 복잡하면 후에 찾기도, 수정하기도 힘들다.
그래서 import와 export를 이용해서 데이터를 갖고와보자.
간단하다.
let apple = 5
export default apple;위와같이 꺼내고싶은 데이터를 export 해준다.
그리고 써먹고 싶은 곳으로 가서
import oneroom from "./assets/oneroom.js";이렇게 import + 경로명을 통해 갖고와준다.
- 참고로 뒤에 .js .vue는 생략가능하다.
(oneroom.js)
let apple = 10;
let apple2 = 100;
export { apple, apple2 }
(App.vue)
import { apple, apple2 } from './oneroom.js파일경로'이렇게 여러개의 데이터도 가져올 수 있다. 단 이땐, export 할때 사용했던 변수명 그대로 들고와야한다.
1-7
🏹 컴포넌트
자 컴포넌트 이거 왜 쓰냐? 일단 심미적으로 보기좋고, 재사용 할때 유용하기 때문!
.vue 파일을 하나 만들어서 거기에 html을 집어넣고(script & css도 물론)
3step을 밟으면 된다.
1. import 하고
2. component에 등록하고
3. 쓰면된다
<template>
<div>
<img :src="name.image" class="room-img" />
<h4 @click="openModal">
{{ name.title }}
</h4>
<p>{{ name.price }}원</p>
</div>
</template>
<script>
export default {
name: "ProductList",
props: {
name: Object,
},
methods: {
openModal() {
this.$emit('openModal', this.name.id);
}
},
};
</script>
<style>
</style>이렇게 .vue 파일을 만들고(파일 이름은 ProductList) 3step
import ProductList from "./ProductList.vue";import하고 ~
components: {
Discount: Discount,
Modal: Modal,
ProductList: ProductList,
},component에 등록하고(작명 : 데이터)
<ProductList
@openModal="
modal = 1;
id = $event;
"
:name="onerooms[i]"
v-for="(name, i) in onerooms"
:key="name"
></ProductList>요런식으로 입맛에 맞게 사용해주면 된다.
1-8
🏹 props
근데 부모와 연결되는 자식 컴포넌트들에 data는 어떡하냐?
바로 props를 사용 해 부모한테서 갖고온다.
이런 구조에서 Modal.vue(자식)가 App.vue(부모)의 데이터를 사용하는 과정을 말하는거다.
마찬가지로 3step을 사뿐하게 밟아주면 된다.
1. 보내고
2. 등록하고
3. 사용한다
<Modal
:onerooms="onerooms"
:id="id"
:modal="modal"
></Modal>- 보낸다(:작명="데이터")
props: {
onerooms: Object,
id: Number,
modal: Number,
},- 갖고온걸 등록
<div class="white-bg">
<img :src="onerooms[id].image" />
<h4>{{ onerooms[id].title }}</h4>
<p>{{ onerooms[id].content }}</p>
<p>가격 : {{ onerooms[id].price }}</p>
<button @click="closeModal">닫기</button>
</div>- 알아서 사용하세요~
근데 props 데이터들은 read-only 다. 따라서 props로 갖고 온 데이터를 수정하려하면 에러를 준다
사실 그래서 애초에 데이터는 사용되는 파일 중 최상위에 배치하는것이 국룰이다.
왜냐하면 props로 자식이 갖고가는거보다 자식-> 부모로 주는게 더 어렵기때문이다.
그리고 데이터 공유가 잦아지고 많아지면 복잡해지고 힘들어지니, 애초에 컴포넌트로 분리해야될 파일 아닐 파일을 잘 구분짓자.
1-9
🏹 그래서 자식이 부모한테 어떻게 보내?
어떻게 보내긴 custom event를 통해 메시지를 날린다.
props는 read-only라 수정이 불가하니, 부모에게 수정 해 달라 메시지를 날리는거다.
<template>
<button @click="closeModal">닫기</button>
</template>
<script>
closeModal() {
this.$emit('closeModal')
},
</script>위와같이 $emit을 사용해서 메시지를 보낸다.
참고로 $는 jquery때처럼 vue에서 쓰는 특수한 문법이다.
저렇게 버튼 클릭시 'closeModal'이라는 메시지 보내주세요 ~ 하면
<Modal
@closeModal="modal = 0"
:onerooms="onerooms"
:id="id"
:modal="modal"
></Modal>부모는 그 메시지를 받아(@closeModal) 그에 적당한 대응을 취해주면 된다.
참고로 메시지와 함께 데이터도 보낼 수 있다.
openModal() {
this.$emit('openModal', this.name.id);
}요 놈 같은경우엔 'openModal'과 함께 name.id 를 데이터로 함께 보낸다.
<ProductList
@openModal="
modal = 1;
id = $event;
"
></ProductList>그런 친구같은 경우 $event로 갖고 와 사용하면 되시겠다.
1-10
🏹 사용자 input 받는법
html 하듯이 input 태그 사용하면 된다.
근데 vue에는 몇가지 쓸만한 input 관련 기능들이 있는데
<input v-model="month" placeholder="개월 수를 입력하세요." />자 저렇게 input 태그 속성으로 v-model을 주면
"현재 input 내의 입력 값"을 추출해준다.
1-11
🏹 watch & 정규식
watch가 뭐냐? 감시자다 감시자
음흉하게 input의 입력값을 지켜보고있는거다.
watch: {
/* 감시할 데이터를 함수명으로, 두개의 파라미터 가능(변경 후 데이터, 변경 전 데이터) */
month(a) {}
}watch에 추가할 칸을 따로 만들어준뒤, 감시하고싶은 data를 함수명으로 작성한다.
이때 주석에 달아놨듯이 파라미터는 두개까지 설정가능하다
month(a, b) ==> month라는 변수의 '변경 후 데이터(a)'와 '변경 전 데이터(b)'
그래서 month 데이터가 변경될때마다 month 함수 내부 코드를 한바퀴 돈다.
나 같은 경우엔 이제
이런 상세페이지 뷰에 개월 수를 입력받을껀데
13미만의 숫자만 입력받을 심산이다.
그래서 정규식을 사용했다. 배워봤고 어떻게 쓰는지 알지만, 공백허용이 안돼 가독성 안좋고 읽고 쓰기 힘들다;
const reg = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z]/g;
if (reg.exec(a) !== null) {
alert('숫자만 입력해주세요!');
this.month = 1;
}어쨌든 좀 헤매다가 이런 정규식표현을 사용하여서 검사 코드를 완성했다.
reg에 저 정규식 표현은 or 표현으로 한글or영어중 하나라도 있다면
reg.exec에서 그것을 포함된 배열을 리턴하고, 하나도 없다면 null을 리턴한다.
그래서 저렇게 숫자아닌걸 입력하면?
alert 메시지 출력 후 개월 수가 1로 수정되는 모오습 ~
