programming study/Vue (70) 썸네일형 리스트형 Vue.js - Vue 테스트 유틸 라이브러리 1. Vue 테스트 유틸 라이브러리란 Vue.js 공식 테스트 라이브러리 유닛 테스트 jest 만으로는 컴포넌트를 테스트하기위해 사용되어야 하는 코드가 많아짐 테스트 유틸 라이브러리로 간단하게 뷰 컴포넌트를 테스트할 수 있음 예시 // 특정 컴포넌트를 마운팅하는 API import { shallowMount } from '@vue/test-utils'; // 이제 vue를 import하지 않아도 됨 // import Vue from 'vue'; import LoginForm from './LoginForm.vue'; // 컴포넌트의 이름이 테스트 최소 단위 describe('LoginForm.vue', () => { test('컴포넌트가 마운팅되면 usename이 존재하고 초기 값으로 설정되어 있어야.. Vue.js - Jest 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 끝장내기 - 실무에 필요한 모든 것 강의를 토대로 작성하였습니다. 1. 테스트 코드 작성 describe: 연관된 테스트 케이스를 그룹화 test: 하나의 테스트를 실행 첫 번째 파라미터 : 테스트 실행시 터미널에 표시할 문자열 두 번째 파라미터 : 테스트를 실행할 콜백 expect: 테스트할 값 toBe: 테스트할 값이 teBe에 전달할 값과 같은지 확인 예시 // math.js export function sum(a, b) { return a + b; } // math.spec.js // 테스트할 함수를 import import { sum } from './math'; sum(10, 20); // 30이 나오는지 테스트 // 연관된 테스트 케.. Vue.js - 테스팅, Jest 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 끝장내기 - 실무에 필요한 모든 것 강의를 토대로 작성하였습니다. 테스팅이란 기능이 잘 동작하는지에 대해 검증 테스트 코드는 작성해놓으면 자동으로 기능을 검증해줌 주로 유닛단위로 테스트 Jest 자바스크립트 테스트 프레임워크 사용성이 좋고 문서화가 잘 되어있음 React.js, Vue.js, Agular에서 사용 가능 jest.config.js jest 설정 파일 테스트 파일을 지정할 수 있음(testMatch 속성) testMatch 속성이 없는 경우 test/unit 디렉토리 아래에 테스트를 만들어야 함 test 파일은 가능하면 관련 파일과 근접해 있는 것이 좋음 module.exports = { preset: '@vue/cli-plugin-unit.. Vue.js - 뷰 필터 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 끝장내기 - 실무에 필요한 모든 것 강의를 토대로 작성하였습니다. 뷰 필터 애플리케이션의 데이터 형식을 일관성있게 적용할 때 유용 데이터 포매팅은 한 컴포넌트보다 여러 컴포넌트에서 사용하기 때문에, 필터를 전역으로 등록 filters에 등록하여 사용 가능 컴포넌트 필터 // 컴포넌트 ... {{ postItem.createdAt | formatDate }} ... ... 전역 필터 src/utils/filters.js 전역에서 필터를 사용하기 위해 별도의 파일로 모듈화 export function formatDate(value) { return new Date(value); } src/main.js 아래와 같이 Vue 인스턴스 생성 시에 필터를 가져.. Vue.js - API 모듈화, 동적 라우팅 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 끝장내기 - 실무에 필요한 모든 것 강의를 토대로 작성하였습니다. 1. API 모듈화 프로젝트의 규모가 커질 수록 하나의 index.js에 API를 정의하는 것은 유지 보수 측면에서 좋지 않음 기능 별로 모듈화를 하여 API를 정리하기 index.js 엑시오스 초기화 관련 함수들을 모으기 기능별로 분류된 각 모듈에서 엑시오스 인스턴스를 import하여 사용 ex) 회원가입 및 로그인 관련 모듈인 auth.js에서 엑시오스 인스턴스인 instance를 import하여 관련 함수들을 정의 import axios from 'axios'; import { setInterceptors } from './common/interceptors'; // 엑시오스 인.. Vue.js - 엑시오스 인터셉터 1. 엑시오스 인터셉터 서버로 요청 또는 서버로부터의 응답을 처리하기 전에 로직을 정의할 수 있음 axios.interceptors.request.use axios.interceptors.response.use 2. 엑시오스 인터셉터를 활용한 HTTP Header Authorization 토큰 설정 엑시오스 인스턴스를 생성할 때 HTTP Header Authorization 토큰을 지정하여도, 처음 초기화 시점에서는 토큰이 없기 때문에 로그인 이후에도 토큰이 Header에 실리지 않음 엑시오스 인터셉터를 활용해서 Vuex에 token이 있을 때 HTTP Header Authorization 지정 api/common/interceptors.js 엑시오스 인터셉터 모듈 부분을 모듈화 // 스토어 가져오기 i.. Vue.js - 토큰 1. 토큰 유저가 유효한 권한을 가지고 있는지를 판별하기 위한 값 401 Error: api를 요청하였을 때, 유저가 유효한 권한이 없을 경우에 발생 주로 로그인 이후에 서버로부터 부여받음 JWT JSON Web Token JSON Object로 표현되는 토큰 HMAC, RSA 등의 알고리즘에의해 암호화될 수 있음 2. HTTP 헤더에 토큰 값을 싣기 axis 인스턴스를 생성할 때, HTTP Header Spec인 Authorization을 지정할 수 있음 token을 지정하여 API 호출 시, 권한을 인증 import axios from 'axios'; const instance = axios.create({ baseURL: process.env.VUE_APP_API_URL, // HTTP Head.. Vue.js - Vuex(mutations, getters) 1. mutations store의 state를 조작하는 역할 1.1 정의 a태그와 같이 특정 요소를 클릭하면 지정한 경로로 이동 import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { username: '', }, // state를 변경하는 역할 mutations: { // 첫 번째 파라미터: store의 state // 두 번째 파라미터: commit 할때의 payload setUsername(state, username) { state.username = username; }, }, }); 1.2 호출 commit으로 정의한 mutations 호출 ... .... 이전 1 2 3 4 ··· 9 다음