※그림 출처: Fast campus - 한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online. / 박영웅 강사님 강의
1. Vuex
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키워드를 붙힌 상태에서 가져온다.
- state: this.$store.state.모듈.상태
ex) this.$stor.state.about.name
- getters: this.$store.getters['모듈/게터']
ex) this.$store.getters['about/count']
- mutations: this.$store.commit('모듈/변이메소드이름')
- actions: this.$store.dispatch('모듈/액션')
Vuex의 헬퍼를 사용할 경우는 다음과 같다.
1. computed에 작성
- state: ...mapState('모듈',['상태1', '상태2'])
- getters: ...mapGetters('모듈',['게터1', '게터2'])
- methods에 작성
- mutations: ...mapMutations('모듈',['변이1', '변이2'])
- actions: ...mapActions('모듈',['액션1', '액션2'])
2. Vue Router
-
<RouterView>: 변경하는 페이지가 출력(rendering)되는 영역 컴포넌트 -
<RouterLink>: 페이지 이동을 위한 링크 컴포넌트 -
$route: Route(페이지) 정보를 가지는 객체, 여러 속성들이 들어있다.
속성들을 이용하여 데이터들을 조회하는 용도로 쓰인다.
ex) fullPath: 접근된 페이지의 전체 경로
params: 접근된 페이지의 파라미터 정보 -
$router: Route(페이지) 조작을 위한 객체, 여러 메소드들이 들어있다.
함수를 실행하여 동작을 일으키는 용도로 쓰인다.
ex) push
+) 주소 예시를 통한 용어 정리
https://google.com/blog/123?apikey=abcd0987&name=HUN
- 도메인(domain): https://google.com
- fullPath: "/blog/123?apikey=abcd0987&name=HUN", $route에 fullPath로 조회가 가능한 속성이다.
- params: "/blog/123", 경로, $route에 params로 조회가 가능한 속성이다.
- 쿼리(query): "?apikey=abcd0987&name=HUN", 데이터들을 주소부분에 포함시켜 작성하는 것을 쿼리스트링(쿼리문자열)이라 한다.
$route에서 query로 조회가 가능한 속성이다.
&와 key와 value로 구분이 가능하다.
3. SPA
-
Traditional Web Application: 전통적인 웹 애플리케이션이며 특정 데이터를 요청할 때 마다(새로운 페이지) 페이지를 로드한다.
-
Single Page Application: 페이지 로드 없이 데이터를 요청한다. 이는 기존 페이지에서 다른 부분을 서버에 요청한다(AJAX).
- SPA의 장점
- 빠르고 자연스러운 전환으로 훌륭한 사용자 경험 제공
- 서버에 더 적게 요청하여 빠르게 렌더링 가능
- 컴포넌트 단위 개발로 생산성 향상
- 쉬운 분업화
- SPA의 단점
- 느린 최초 로드 => 보완 방법: Lazy loading, 브라우저 캐싱
- 여려운 검색 엔진 최적화(SEO) => 보완 방법: SSR(Server Side Rendering),
Serverless Functions(서버 없이 동작할 수 있는 특정 함수, 명령, 별도의 서버 구축 없이 backend api를 만들어 낼 수 있는 기능을 제공한다.) - 모든 데이터 노출 => 보완 방법: 비즈니스 로직 최소화
4. 단위 테스트
-
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가 나온다.
