[Vue.js] 프론트엔드 테스트 Jest
프론트엔드 테스트가 필요한 이유 예로 로그인페이지만 하더라도 일일히 화면에서 치고 확인하며 테스트를 해야한다. 그 수고를 덜기위해 테스팅을 활용하는 것이다. * id input 박스에 이메일을 입력했을 때 이메일이 맞는지 확인 *...
[Vue.js] vue filters 적용
vue filters vue filter 공식문서 Vue는 텍스트 형식화를 적용할 수 있는 필터를 지원한다. mustache 문법이나 v-bind때 쓸 수 있다. <!-- in mustaches --> {{ message | capitalize }} <!-- in...
[Vue.js] router navigation guard 적용
router navigation guard router naviagion guard 공식 문서 vue-router가 제공하는 navigation guards는 주로 리디렉션하거나 취소하여 네비게이션을 보호하는 데 사용한다. 흔히 login 후 접속할 수 있는 페이지를 주소만으로 접속할 때 막아줄때...
[Vue.js] Post Edit function 추가
게시글 수정 기능 추가 1. 게시물들 밑에 각각 수정버튼 생성 2. 수정버튼에 routeEditPage methods 정의, 연결 3. routeEditPage에서 postItem id를 인자담어 postsEditPage로 넘기기 4. PostEditPage.vue 생성, PostEditForm 생성해서 components로 연결...
[Vue.js] Post delete 기능 추가
Post delete 버튼 생성 components/posts/PostListItem.vue에 시간표시해주는 div안 밑에 삭제 icon을 추가한다. 삭제 icon을 클릭했을 때 실행되는 deleteItem함수를 생성해서 v-on click으로 연결한다 components/posts/PostListItem.vue <template> <li> <div class="post-title"> </div> <div class="post-contents"> </div>...