728x90 반응형 Dev/Vue.js49 [Vue.js] Today I Learned - 프런트엔드 테스팅 테스팅 테스팅이란 작성한 코드가 예상한 결과가 나오는지 또는 어떠한 결과가 나오는지를 확인하는 것으로 개발 과정에 있어 매우 중요한 과정이다. 테스팅의 장점으로는 제품의 안정성 향상 기능 추가 및 수정으로 인한 부작용 감소 생산성 향상 디버깅 용이 및 반복작업 감소 재사용성이 좋고 깔끔한 코드 작성 가능 이 있다. 많은 장점을 가지고 있는 만큼 꼭 수행해야 하는 과정이라 생각한다. 기본 환경 구성 기본적인 테스팅을 위한 환경 구성으로 1. 테스트 파일 생성 (src/components/LoginForm.spec.js) 2. 터미널에서 테스트모드 실행 npm test Jest 페이스북에서 만든 간편함에 중점을 둔 자바스크립트 테스팅 프레임워크 자바스크립트 테스트 파일 소개 및 파일 경로 테스트 파일은 주로.. 2020. 10. 29. [Vue.js] Today I Learned - 라우터 심화 라우터 네비게이션 가드 뷰 라우터를 이용하여 특정 URL에 접근할 때 해당 URL의 접근을 막는것 라우터 네비게이션 가드 기초 코드 라우터 네비게이션 가드의 기초 코드를 알아보자 // src/route/index.js import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const router = new VueRouter({ mode: 'history', routes: [ ... ], }); // to: 이동할 페이지 // from: 현재 페이지 // next: 다음 페이지로 넘어갈 수 있게 호출하는 API router.beforeEach((to, from, next) => { console.log(to); // ne.. 2020. 10. 28. [Vue.js] Today I Learned - 데이터 포맷팅 데이터 포맷팅 뷰의 Filters 속성을 이용하여 서버에서 받아온 데이터의 형식을 지정할 수 있다. 지역 필터 해당 컴포넌트 내에서만 동작하는 필터를 구현한다. {{ postItem.title }} {{ postItem.contents }} {{ postItem.createdAt | formatDate }} 전역 필터 전역 변수처럼 여러 컴포넌트에서 사용 가능하도록 필터를 구현한다. // src/utils/filters.js // 필터 관련 함수가 존재하는 파일 export function formatDate(value) { const date = new Date(value); const year = date.getFullYear(); let month = date.getMonth() + 1; month.. 2020. 10. 28. [Vue.js] Today I Learned - 학습 노트 수정 학습 노트 수정 Today I Learned의 학습 노트를 수정할 수 있는 기능을 구현한다. 학습 노트 수정을 위한 페이지 연결 학습 노트 수정은 수정 페이지에서 진행하려고 한다. 따라서 수정 페이지 진입 시 해당 학습 노트의 고유 ID 값을 가지고 진입을 해야하는데 이 과정에서 Dynamic Routing이 사용된다. {{ postItem.title }} {{ postItem.contents }} {{ postItem.createdAt }} 학습 노트 수정 기능 구현 조회한 특정 학습 노트 데이터를 수정하는 기능을 구현한다. 2020. 10. 28. [Vue.js] Today I Learned - 학습 노트 삭제 학습 노트 삭제 Today I Learned의 학습 노트를 삭제할 수 있는 기능을 구현한다. 삭제기능 마크업 및 이벤트 연결 삭제버튼을 구성하고 해당 버튼 클릭 시 이벤트가 발생하도록 연결한다. {{ postItem.title }} {{ postItem.contents }} {{ postItem.createdAt }} 삭제기능 구현 버튼 클릭 시 발생하는 이벤트를 구현한다. 추가적으로 삭제시 확인창과 삭제완료 후 목록 새로고침도 구현한다. Today I Learned 학습 노트 생성 시 UX 개선 지금까지 학습 노트를 생성하고 계속 등록 페이지에 머물러 있는데 router.push()를 통해 생성 후 메인페이지로 이동하도록 구현하여 UX를 개선할 수 있다. 2020. 10. 28. 이전 1 2 3 4 ··· 10 다음