※그림 출처: Fast campus - 한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online. / 박영웅 강사님 강의
App.vue를 기준으로 여러 컴포넌트를 활용하는데 부모 형제가 아닌 특정한 관계가 여러가지 컴포넌트에서 같은 데이터를 활용할 때 Store라는 개념 즉, Vuex패키지를 plugin으로 연결해서 활용할 수 있다.
Store에는 기능을 구분해서 관리하는 모듈이라는 개념으로 연결하여 사용을 했다.
Store에는 모듈을 위해 사용하는 namespaced 옵션을 제외하고 state, getters, mutataions, actions로 나뉘게 된다.
state: vue.js의 컴포넌트에서 알고 있는 하나의 data처럼 이해하면 된다.
getters: 계산된 데이터인 computed와 유사하다. state의 data를 가져와서 활용하기만 한다.
mutations: state를 변경할 수 있는 권한을 가지고 있어 state를 변경하는 용도의 로직만 사용한다.
methods로 활용할 수 있으며 getters와 다르게 state와 mutations 서로가 영향을 끼칠 수 있다(수정).
actions: 일반적으로 mutations대신 대부분의 로직을 actions에 작성하여 사용한다.
state, getters, mutations모두 가져와서 활용 할 수 있다. 이때 action의 첫 번째 인수로 context를 사용한다.
context 내부에서는 state, getters, mutations, actions를 가져올 수 있는데 이때 객체 구조 분해로 가져올 경우 순서대로
[context.state
, context.getters
, context.commit
, context.dispatch
]로 가져올 수 있다.
methods 뿐만 아니라 비동기도 활용 할 수 있다.
Vue 컴포넌트에서 Store를 가져오기 위해서는 this
키워드를 붙힌 상태에서 가져온다.
ex) this.$stor.state.about.name
ex) this.$store.getters['about/count']
Vuex의 헬퍼를 사용할 경우는 다음과 같다.
1. computed에 작성
<RouterView>
: 변경하는 페이지가 출력(rendering)되는 영역 컴포넌트
<RouterLink>
: 페이지 이동을 위한 링크 컴포넌트
$route: Route(페이지) 정보를 가지는 객체, 여러 속성들이 들어있다.
속성들을 이용하여 데이터들을 조회하는 용도로 쓰인다.
ex) fullPath: 접근된 페이지의 전체 경로
params: 접근된 페이지의 파라미터 정보
$router: Route(페이지) 조작을 위한 객체, 여러 메소드들이 들어있다.
함수를 실행하여 동작을 일으키는 용도로 쓰인다.
ex) push
+) 주소 예시를 통한 용어 정리
https://google.com/blog/123?apikey=abcd0987&name=HUN
Traditional Web Application: 전통적인 웹 애플리케이션이며 특정 데이터를 요청할 때 마다(새로운 페이지) 페이지를 로드한다.
Single Page Application: 페이지 로드 없이 데이터를 요청한다. 이는 기존 페이지에서 다른 부분을 서버에 요청한다(AJAX).
Unit Test
단위(unit) 테스트란 데이터(상태), 함수(메소드), 컴포넌트 등의 정의된 프로그램 최소 단위들이 독립적으로 정상 작동하는지 확인하는 방법.
ex) Jest, Vue Test Utils
E2E Test
E2E(End to End) 테스트란 애플리케이션의 처음부터 끝까지의 실제 사용자의 관점에서 사용 흐름을 테스트하는 방법.
ex) Cypress
Vue에서 unit test를 진행해보자!
먼저 Vscode에서 터미널을 열고 npm i -D jest @vue/test-utils@next vue-jest@mext babel-jest
로 필요한 패키지들을 설정해준다.
이후 jest.config.js 파일을 root경로에 설치하여 안의 내용을 작성해준다.
module.exports = {
// 파일 확장자를 지정하지 않은 경우, Jest가 검색할 확장자 목록입니다.
// 일반적으로 많이 사용되는 모듈의 확장자를 지정합니다.
moduleFileExtensions: [
'js',
'vue'
],
// `~` 같은 경로 별칭을 매핑합니다.
// E.g. `import HelloWorld from '~/components/HelloWorld.vue';`
// `<rootDir>` 토큰을 사용해 루트 경로를 참조할 수 있습니다. src에 있는 모든 경로를 의미한다.
// 현재 webpack.config.js에서 설정한 별칭을 이용한 경로입니다.
moduleNameMapper: {
'^~/(.*)$': '<rootDir>/src/$1'
},
// // 일치하는 경로에서는 모듈을 가져오지 않습니다. 테스트를 진행하지 않습니다.
// // `<rootDir>` 토큰을 사용해 루트 경로를 참조할 수 있습니다.
modulePathIgnorePatterns: [
'<rootDir>/node_modules',
'<rootDir>/dist',
'<rootDir>/cypress'
],
// jsdom 환경에 대한 URL을 설정합니다.
// https://github.com/facebook/jest/issues/6766
testURL: 'http://localhost/',
// 정규식과 일치하는 파일의 변환 모듈을 지정합니다.
transform: {
'^.+\\.vue$': 'vue-jest',
'^.+\\.js$': 'babel-jest'
}
}
이후 tests 폴더를 생성한 뒤 example.js, example.test.js 두 파일을 그 안에 만들어 준다.
example.js에서는 테스트 해볼 코드를 export, example.test.js에서는 example.js의 코드를 import하여 test()
를 통해 테스트를 진행하면 된다.
이때 실행시키기 위해 package.json파일에서 "scripts"부분에 "test:unit": "jest --watchAll"
를 추가 시켜주고 npm run test:unit
을 터미널을 열어 실행시켜주면 테스트가 실행된다.
아래는 테스트를 하는 예시이다.
// example.js
export function double(num) {
return num * 2
}
// example.test.js
import {double} from './example'
test('인수가 숫자 데이터입니다.', () => {
expect(double(3)).toBe(7)
expect(double(10)).toBe(20)
})
성공 시 passed, 실패 시 failed가 나온다.