용어 정리
NPM
- 전 세계에 있는 js 패키지 관리자
npm run build
- build가 되면 용량이 작아짐
- 타인에게 vue 보여줄 수 있음
SPA(Single Page Application)
- HTML은 페이지가 하나밖에 없다.
- vue 파일은 ? -> 하나가 아님 ( 여러개 )
but) 하나의 html이 된다.
CSR, SSR
CSR : Client Side Rendering (Vue.js)
SPA : Single Page Application
SSR : Server Side Rendering (장고)
MPA : Mutiple Page Application (HTML이 여러개)
- CSR 과 SPA
클라이언트 측에서 그리는것은 CSR
페이지가 하나인 것에 집중하면 SPA
특징은 똑같이 가져가지만 강조하는 point가 다르다.
Vue.js는 CSR, SSR 둘 다 사용가능 ? (가능 : Nuxt.js) -> 이를 보완하기 위해 새로운 프레임워크 나옴
- Nuxt.js (vue.js 를 SSR로 사용하기 위해서 만든 웹 개발 프레임워크)
- Next.jx (React 를 SSR로 사용하기 위해 만든 웹 개발 프레임워크)
CDN(Content Delivery Network)
<div id="app"></div>el:"#app"
app 영역을 vue.js로 사용하겠다는 의미
시간되면 typescript 꼭 보기!!!!!!!!!!!!!!
mounted()
어떤 시점이 되면 자동 실행 (화면에 붙이고 나서 DOM 조작할 때 사용)
ref로 간접적으로 써야 함
created()
화면에 붙여지지 않았을 때 자동실행(컴포넌트 생성되었는데 화면 생성 x 일 때)
computed()
자동실행 o, 화면에 직접 쓸 수도 있음(자바스크립트를) 그러나 화면서 자바스크립트를 바로 넣으면 보기 안 좋음, and 화면에 연산 많이들어가면 화면 성능 감소. -> 전처리를 목적으로 사용
methods()
함수들 모아놓음 (v-on:click 등)
computed와 methods의 차이 :
methods -> 실행을 시켜야 동작
computed -> 자동 실행 (데이터 변경 감지 시)v-bind
v-if
v-else
v-on
v-model
v-for
바인딩
양방향 바인딩
- 유저가 변경할 수 있는 것
v-model <input>단방향 바인딩
- 유저가 클릭해도 바꿀 수 없는 것
v-on,
v-bind -> 태그의 속성 바꿀때 사용 -> 변수지정, props
{{ data }} 컴포넌트
- 자식컴포넌트 부모 컴포넌트에 붙이는 법
- import (자식컴포넌트)
- components에 등록
- 화면에 태그 형식으로 붙이기
:abd(자식) = "movie"(부모) -> 줄 데이터
- 컴포넌트 안에 컴포넌트 가능
- 루트 컴포넌트 가능
img v-bind 다는 법
<img v-bind:src='imgUrl'>
computed : {
imgUrl() {
return url 주소 넣기
}this
- template 에 붙일때는 this가 없음 -> templates는 html의 영역
{{data}}
$emit
- 자식 -> 부모 (단, 특별한것임)
watch
감시할 데이터를 지정하고 데이터가 변경되면 실행할 자동실행함수 설정 영역, 테스트할 때 사용
emit
templates 안 구문
<input @keyup.enter="onInput"> -> 사용자가 enter키를 눌렀다 떼면 실행됨
script 안 구문
methods : {
onInput(event) { #이벤트가 발생될 때 작동할 함수 onInput- 자식꺼)
this.$emit('oninput') # 부모에 있는 함수(oninput)
}
}router
template에서 사용할때,
templates 안 구문
<router-link to="/movies"> 전체 영화 출력 </router-link> # router-link => a태그와 유사
# to에 해당하는 링크를 찾아서 해당하면 라우터 뷰에 그린다.
<router-view/>
/views/
/components/javascript에서 사용할 때
this.$router.push()
방법1
this.$router.push('/movies'); #경로 직접 가기
방법2
this.$router.push({name:"Movies"}); #네임스페이스 달아서 경로 찾기router params 알아보기
배열안의 객체
const routes =[
{
path: '/movies/id',
name : 'movieDetail',
component : MovieDetail,
}
]
localhost:8080/movies/13000 -> 13000번째 영화 뜰거임
this.$route.params.id -> 사용자가 접근한 13000번을 아이디로 받아서 해당하는 값을 호출
호출되면 axios 로 해당 Id에 대한 detail 가져옴navigation guard
- 방법 1
특정 url에 접근할때 , 다른 url로 리다이렉트, 또는 해당 url로의 접근 제한
(404페이지 띄울 때)
to, from, next
next() 여러번 못 씀, 딱 한 번 사용
- 방법 2
const routes = [
{
path: "*",
redirect : "/404"
}
]
사용자가 지정한 라우트 값을 찾을 수 없는 경우 *로 이동vuex 는 필수인가?
- nono( vuex는 선택사항 )
- 컴퓨터의 갯수와는 상관없이 component에서 남의 컴퓨터에 얼마나 영향을 끼치는가에 따라 vuex 고려
new Vuex.Store({
state:{}, # 데이터
mutations: {}, # state를 바꿀 때 씀. 아예 갈아엎거나
actions: {}, # 함수 들어감 , vue.js에서 component를 변경할 일이 있을때 사용, 들어가면 좋은게 axios(비동기 작업은 action에 들어가면 좋다)
getters: {},
})
hello velog :)