Vue(46)
-
Vue Router - prefetch, Lazy Loading(지연된 로딩)
SPA(Single Page Aapplication)의 큰 특징은 처음 페이지 진입 시 리소스를 한번에 다운받아 이후 페이지 전환이 매우 빠르다는 이점을 갖고 있다. 하지만 프로젝트의 규모가 큰 경우 처음 초기 랜더링 시간이 오래 걸리게 되는 단점을 초래할 수 있음. 이러한 단점을 보완하기 위해 Angular, React, Vue 에서는 지연된 로딩(Lazy Loading)을 활용한다. 1.prefetch 기능이란? 나중에 사용될 리소스를 캐시에 저장함으로써, 사용자가 접속했을 때 빠르게 리소스를 내려줄 수 있는 기능 - webpack 4.6.0 부터 지원 - Vue CLI3가 webpack4를 탑재하면서 사용된 기능 - 기본값 true(prefetch 기능이 사용되도록 설정되어있음) - 첫 화면 접..
2022.04.07 -
[Vue-Project] Todo-App
1. index.html getbootstrap.com 들어가서 css link 복사해서 연결해준다. 2.컴포넌트 연결하기 / v-for문 돌리기 components 파일에서 Todo.vue 컴포넌트 만들고 연결해준다. // App.vue 부모 Todo App // Todo.vue 자식 Buy a car :todo="todo" 로 하고 props에 todo로 받아와도 되는데 구분을 하기 위해 나는 :todoList로 바인딩을 해주었다. App.vue 에서 v-for문을 도는데 Todo.vue (자식) 컴포넌트에 데이터를 넘겨 줘야한다. 그래서 props로 데이터를 전달받아서 뿌려줌 ! 체크 박스도 전달 받아야겠지???? => :checked="todoList.checked" 해주고 true면 체킹이 되어..
2022.04.01 -
[Vue] Props Emit 부모 자식 간에 데이터 주고 받기
1. Props : 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용 부모 컴포넌트(Compo.vue 5번 줄)에는 자식 컴포넌트(Button.vue 6번 줄)에게 print 라는 키 값을 통해 값을 보내고 있다. 여기서 print은 key가 되고 parentText 는 value 값이 된다. print를 키로 설정했다면 자식 컴포넌트에 등록 props { }을 해줘야 한다. props: { print: String, }, // 자식 컴포넌트에서는 props: { }라는 곳에 해당 키를 등록하고 사용하면 된다. 2. Emit : 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 때 사용 Emit은 @setInput이라는 키를 등록하고 함수를 보내고 있다. Emit은 내가 사용하고 싶은 부분에 t..
2022.03.18 -
[Vue] Slot
1. Slot 컴포넌트의 재사용성을 높여주는 기능 특정 컴포넌트에 등록된 하위 컴포넌트의 마크업을 확장하거나 재정의할 수 있다. 2. Slot의 기초 태그는 부모가 자식이 들어오기를 기대하는 위치에, 자리를 만들어놓는 것이다. 안녕 3. 이름이 있는 Slot 주의 사항 >> v-slot 디렉티브의 경우, 기존에 사용되던 slot 디렉티브와 다르게 반드시 태그에 추가되어야 한다. 2.6.0 버전에서 새로 추가된 Slot관련 내용 Dynamic Slot Names : Dynamic directive arguments를 v-slot에서 사용할 수 있다. ... Named Slots Shorthand : v-slot: 대신 #기호를 사용해서 간단하게 사용 할 수 있다. 제목 {{ user.firstName }}..
2022.03.17 -
[Vue] 인코딩 / 디코딩
1. 문자열 BASE64 인코딩/디코딩 인코딩 디코딩 인코딩 버튼 디코딩 버튼 data() { return { memo: '', encode: '', decode: '' }; }, methods: { encoding() { this.encode = window.btoa(encodeURIComponent(this.memo)) }, decoding() { this.decode = decodeURIComponent(window.atob(this.memo)) }, } 단체오픈카톡방에서 백엔드분이 input값에 text를 쳐서 클릭 버튼을 누르면 또 다른 input값에 인코딩한 글씨가 보이게 어떻게 하냐고 해서 몇일 전 공부한 v-model 양방향에 대해 설명하다가 디코딩하는 부분은 구글링으로 통해 찾고, :va..
2022.03.15 -
v-for
1. v-for로 엘리먼트 배열에 매핑하기 items는 원본 데이터 배열이고 item은 반복되는 배열 엘리먼트의 별칭 이다. key에 대한 이상적인 값은 각 항목을 식별할 수 있는 고유한 ID이다. v-for를 쓴다면 :key 키값을 넣어주자! >> 코지코더 강의 듣는데 :key값에 index 넣는걸 별로 추천하지 않는다고 한다. 왜냐하면 3번째 index값을 만약에 삭제하면 4번째가 3번째로 되기 때문에 key로 가지기가 애매하다고 하셨다. {{ index + 1}} : {{ item.fruit }} data() { return { array: [ { fruit: 'apple' }, { fruit: 'banana' }, { fruit: 'mango' } ] }; }, 2. v-for와 객체 {{ val..
2022.03.14 -
[Vue] Computed 속성
도대체 Computed 속성은 언제 써야 하고 methods랑 같은 기능을 하는 것이 아닌가? 생각했었는데 코지 코더라는 유튜브 슨생님 강의를 듣고 이해하게 되었다. 딱 내가 원하는 강의 스타일... 어렵지 않고 기본에 충실하게 가르쳐 주신다!! 1. computed 속성 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성이다. 2. computed 속성의 장점 뷰 템플릿 코드의 가독성을 높여줌 컴퓨티드 속성의 대상으로 정한 data 속성이 변했을 때 이를 감지하고 자동으로 다시 연산해준다. 중복제거 Computed 속성 {{ message.split('').reverse().join('') }} {{ message.split('').reverse().join('') }} {{ message.s..
2022.03.12 -
[Vue] 클래스와 스타일 바인딩
1. 클래스 바인딩 - 객체구문 :class="{ '적용될 클래스명': true 또는 false의 조건식 }" v-bind:class="클래스명" v-bind:class="{ 클래스명: 조건 }" 조건식을 사용하여 boolean값이 true인 경우에만 해당하는 클래스명이 적용됨 위와 같이 앞에는 적용될 클래스명 위치하고 뒤에는 true, false의 boolean이 위치 v-bind:class는 문자열과 객체 또는 배열을 둘 다 받을 수 있다. 만약 class명에 "-"가 존재한다면, 그 class명을 string으로 묶어주어야한다. www.naver.com class의 객체가 복잡할 때 classObject라는 객체를 data에 따로 만들고 각각의 class명에 값을 준 후 => 이를 class명에 써..
2022.03.12 -
URL뒤에 붙는 #
localhost:8080 을 치는데 계속 뒤에 /#/ 이 따라 붙는거당..... 메뉴를 클릭해도 localhost:8080/#/menu 로 넘어가서 중간에 #이 되게 거슬려서 없애는 방법을 찾다가!! 1. src/router/index.js const router = new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] }) export default router Vue.js는 mode설정을 하지않으면 기본적으로 hash모드로 동작한다. (이 경우 ’http://example.com/#/’ 과 같이 URL 뒤에 #이 붙는다.) const router = new Router({ mode: 'history', ro..
2022.03.10 -
[Vue] 디렉터리 구조
vue cli를 설치한 후 그다음 중요한 것이 디렉터리 구조였다. 프레임 워크를 쓰기전에는 그냥 index.html / css폴더 / js 폴더 / img 폴더만 있으면 했던 것이 이제는 좀 더 역할 별로 관리하기 위해 폴더들이 많아 짐에 따라 분리되어 있고 그것들이 의미하는 게 뭔지 알아야 한다. 제일 먼저 디렉터리 구조를 공부하지 않은 나를 반성하자.. 1. 디렉토리 구조 vue-login ├── src │ ├── main.js │ ├── App.vue │ └── models │ └── user.js │ └── router │ └── index.js │ └── services │ └── auth-header.js │ ├── auth.service.js │ └── user.service.js │ └──..
2022.03.09 -
[Vue] loading indicator 로딩 인디케이터
1. 스피너란? 웹 페이지의 로딩 상태를 나타내는 컴포넌트를 의미 2. npm 설치 https://www.npmjs.com/package/vue-full-loading npm i vue-full-loading 모듈 npm으로 쓰지 않고 직접 코드로 만든 블로그내용 https://blog.naver.com/PostView.nhn?blogId=pjok1122&logNo=221644786721&parentCategoryNo=&categoryNo=&viewDate=&isShowPopularPosts=false&from=postView [Vue-CLI] Spinner Component 사용하기, vue router 라우터 네비게이션 가드 1. 스피너란? 웹 페이지의 로딩 상태를 나타내는 컴포넌트를 의미합니다. 2..
2022.03.08 -
[Vue] Component 생성 및 변수 메서드 활용
1. Components 폴더안에 button.vue 파일 생성 변수는 data() 항목에 정의할 수 있다. 메서드는 methods 항목에 정의할 수 있다. name이라는 변수와 onClick() 메서드를 만들었다. 그리고 @click를 통해 이벤트를 등록하고 {{ name }} 두 개에 중괄호 안에 변수를 적용 2. 컴포넌트 사용할 곳에 연결 태그로 연결해주고 import 불러오고 components 이름 써주기 한 컴포넌트를 만들어 놓으면 어디서나 갖다 쓸 수 있다.
2022.03.07 -
★[Vue-CLI] 프로젝트 생성하기
cd 폴더명(vue) : vue 폴더로 이동해! // 폴더 디렉토리로 이동 cd.. : 한 단계 위 디렉토리 ls : 너 위치 어디니? // 현재 위치한 경로 안의 내용 출력 ** 폴더 위치 정한 뒤, vue create 폴더명 으로 vue cli 환경을 셋팅해주자 여기서 tip > git 에서 repositories 에서 webstorm이랑 연결하지 말고 먼저 셋팅 후 깃이랑 연결해주자 그래야지 vue 오른쪽 클릭하면 Git > Pull, Push 이 뜬다! webstrom에서 Repository 를 만들어 주는 거다 1) vue 프로젝트를 만들기 위해 다음과 같은 명령어를 실행한다. vue create vue-study 2) Please pick a preset: [ ] Default ([Vue 2]..
2022.02.14 -
[Vue] v-model
1. 사용법 폼 엘리먼트(input, textarea, select 엘리먼트)에 양방향 데이터 바인딩 가능. (Vue 인스턴스 ⇄ Template 과 같이 두 방향 모두 데이터에 접근 할 수 있도록 하는 것을 양방향 데이터 바인딩) 모든 폼 엘리먼트의 초기 value와 checked, selected 속성을 무시. 컴포넌트의 `data` 옵션 안에 있는 JavaScript에서 초기값을 선언해야 한다. (붸리베리중요!!! 까먹지말자) 2. 작동원리 v-model 속성은 v-bind와 v-on의 기능의 조합으로 동작한다. HTML 입력 요소의 종류에 따라 v-model 속성이 각각 다음과 같이 구성된다. input, textarea 태그에는 value / input checkbox, radio에는 check..
2022.01.13 -
[Vue] 절대경로 상대경로
1. 절대 경로 @ : src(루트)부터 시작 2. 상대 경로 ../ : 상위 폴더로 올라갈 때 ./ : 현재 같은 폴더에 있을 때 import 단축키 html 안에 컴포넌트 파일 이름을 적다 보면 아래 굵은 글씨와 같이
2022.01.13