Front

1. LoginFrom.spec.js - idinput.html() import loginFrom from './LoginForm.vue'; // import Vue from 'vue'; import { shallowMount } from '@vue/test-utils'; describe('loginFrom.vue', () => { test('컴포넌트가 마운팅되면 username이 존재하고 초기 값으로 설정되어 있어야한다.', () => { const wrapper = shallowMount(loginFrom); // vm = 인스턴스 expect(wrapper.vm.username).toBe(''); }); test('ID는 email 형식이어야 한다', () => { const wrapper = sh..

https://v1.test-utils.vuejs.org/guides/ Guides | Vue Test Utils Guides Getting Started What is Vue Test Utils? Vue Test Utils (VTU) is a set of utility functions aimed to simplify testing Vue.js components. It provides some methods to mount and interact with Vue components in an isolated manner. Let's see an example: M v1.test-utils.vuejs.org 1. LoginFrom.spec.js import loginFrom from './LoginFo..

1. LoginFrom.spec.js import loginFrom from './LoginForm.vue'; import Vue from 'vue'; describe('loginFrom.vue', () => { test('컴포넌트가 마운팅되면 username이 존재하고 초기 값으로 설정되어 있어야한다.', () => { const instance = new Vue(loginFrom).$mount(); console.log(instance.username); expect(instance.username).toBe(''); }); });

.spec, .test 를 넣어주면 자바스크립트 테스트 파일로 인식된다. 자바스크립트 테스트 파일 경로 관련 1. 테스트할려는 코드랑 테스트 파일이 가까이 있어야한다고 가까이에 test 폴더를 만들거나, 파일을 만든다 (이걸 많이 사용) 2. test 폴더를 따로 분리하는 방법도 있다. 1. 테스트 코드 사용방법 ( LoginFrom.spec.js | math.js) - math.js function sum(a, b) { return a + b; } export { sum }; - LoginFrom.spec.js import { sum } from './math'; // sum(10, 20); // 테스트 코드 시작 describe('math.js', () => { // test() : 하나의 테스트 케..

테스트 코드가 필요한 이유 - 개발자가 직접 브라우저로 가서 값을 넣어보며 테스트를 하지않아도 기능이 잘 돌아간다는 보장을 테스트 코드를 통해 할 수있다. - 테스트 코드는 일일이 기능을 손으로 확인하는 시간을 줄여준다 Jest - Javascript Testing Framework - 페이스북이 개발해서 높은 사용률을 가지고 있으며 문서화가 잘 되어있다. - 실제로 테스팅을 할때 필요한 기능을 잘 제공해주고 있어서 많이 사용되고 있다. https://joshua1988.github.io/vue-camp/testing/jest-testing.html Unit Testing with Jest | Cracking Vue.js Jest 소개 제스트(Jest)는 페이스북에서 만든 자바스크립트 테스팅 라이브러리입..

1. utils/cookie.js function saveAuthToCookie(value) { document.cookie = `til_auth=${value}`; } function saveUserToCookie(value) { document.cookie = `til_user=${value}`; } function getAuthFromCookie() { return document.cookie.replace( /(?:(?:^|.*;\s*)til_auth\s*=\s*([^;]*).*$)|^.*$/, '$1', ); } function getUserFromCookie() { return document.cookie.replace( /(?:(?:^|.*;\s*)til_user\s*=\s*([^;]*).*..

https://router.vuejs.org/guide/advanced/navigation-guards.html Vue Router | The official Router for Vue.js The official Router for Vue.js router.vuejs.org 라우터 네비게이션 가드는 데이터를 먼저 호출하고 받아왔을때만 이동되게 특정 URL에 들어가는것을 막는것을 구현할수있다. 1. 라우터 네비게이션 가드 기초 코드 (routre/index.js) - export default new Vuerouter에서 const router로 변경 - router.beforeEach 사용 to, form, next 3가지 콜백이 들어온다. to → 이동하려는 페이지 form → (현재페이지) 어디서부..

https://v2.vuejs.org/v2/guide/filters.html?redirect=true#ad Filters — Vue.js Vue.js - The Progressive JavaScript Framework v2.vuejs.org 1. PostListItem.vue (지역 Filters 로 사용시) - 필터는 파이프를 ( | ) 를 이용해여 콧수염괄호 안에 필터 함수의 이름을 넣어주면 Data에 필터함수의 결과를 결합하여 나온 결과가 화면에 뿌려진다 {{ postItem.title }} {{ postItem.contents }} {{ postItem.createdAt | formatDate }} 2. filters.js (전역 Filters 로 사용시) - 특정 텍스트롤 형식화 할 일이 있다..

0. router에 path: '/post/:id' 추가 import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); export default new VueRouter({ mode: 'history', routes: [ { path: '/', redirect: '/login', }, { path: '/login', component: () => import('@/views/LoginPage.vue'), }, { path: '/signup', component: () => import('@/views/SignupPage.vue'), }, { path: '/main', component: () => import('@/views..

1. api/index.js에 delete API 함수 추가 // 학습 노트 조작과 관련된 CRUD API 함수 파일 import { posts } from './index'; // 학습 노트 데이터를 조회하는 API function fetchPosts() { return posts.get('/'); } // 학습 노트 데이터를 생성하는 API function createPost(postData) { return posts.post('/', postData); } // 학습 노트 데이터를 삭제하는 API function deletePost(postId) { return posts.delete(postId); } export { fetchPosts, createPost, deletePost }; 2. Po..