[Vuejs] Enterprise Project 진행시 알아야 할 4가지

cactus

Vuejs를 이용해서 프로젝트 진행시 중요하게 여기는 4가지에 대한 내용입니다. 개인적으로 공감하는 바가 커서 글로 남깁니다. 원글은 아래 링크로 남깁니다. 약간의 개인적 의견이 추가된 부분도 있습니다.

4 Best Practices for Large Scale Vue.js Projects

1. Vue slot

Slots - Vue.js

일반적으로 프로젝트를 parent — child 컴포넌트로만 구성하여 진행 할 수 있습니다. 하지만 props와 event의 전달이 많아지고, 여러 경우의 수를 대응하기 위해 많은 component를 import 하여 구성하게 되면 여러므로 프로젝트를 유지, 확장하기가 어렵습니다. 이럴 때는 slot을 이용하여 원하는 위치에 컴포넌트와 값들을 전달해보면 도움이 됩니다. 코드의 가독성 증대와 간결한 처리로 규모가 커지는 상황에서도 유연하게 대처할 수 있습니다.

2. 독립적인 컴포넌트

F.I.R.S.T 원리를 따라 컴포넌트를 생성해봅시다.

“[..] 효율적으로 큰 프로젝트를 만드는 비밀은 그것들을 하나로 만드는 것을 피하면 됩니다. 대신에, 작고 더 집중할 수 있는 조각들로 프로젝트를 구성하세요. 큰 프로젝트의 넓은 범위 안에서 작은 것들이 맞춰지는 것을 더 쉽게 알아 볼 수 있게 할 것 입니다. -Addy Osmani

Bit (Github)같은 툴을 이용해서 당신의 프로젝트의 컴포넌트들을 독립적으로 관리하고 공유할 수도 있습니다.

Bit’s 컴포넌트 허브는 문서와 예제를 자동으로 생성해줍니다. 이는 컴포넌트들의 사용, 유지를 쉽게 해줍니다. 다음을 참고하세요.

How to Easily Share Vue Components Between Applications

3. Vuex store

다음의 vuex 구성 요소 4개를 먼저 학습합니다.

States: Used to keep data of your application

Getters: Used to access these state objects outside the store.

Mutations: Used to modify state object.

Actions: Used to commit mutations.

그리고 다음을 따라 vuex store를 구성합니다.

a. 애플리케이션 레벨의 state를 store에 유지합니다.

b. state는 항상 변이 기능을 통해 변이 해야 합니다. (mutation: 변이)

c. 비동기 로직은 actions를 통해서만 사용하도록 캡슐화 되야 합니다.

만약 store가 커지면 다음과 같이 나눌 수 있습니다.

├── index.html
├── main.js
├── api
├── components
└── store
    ├── index.js          
    ├── actions.js
    ├── mutations.js
    └── modules

Vuex store 모듈화

store가 너무 커지면 모듈화를 시도해야 합니다.

feature 단위로 할수도 있고, 데이터 단위로도 할 수 있는데 프로젝트 특성에 맞게 판단해서 결정하면 됩니다.

helper methods 사용

helper methods (mapState, mapGetters, mapMutations and mapActions)를 사용함으로써 코드를 간결하게 유지 할 수 있습니다.

4. Unit Tests

테스트 코드는 버그를 줄여줄 뿐만 아니라 유지보수를 하면서 사이드 이펙트를 줄여 개발의 자신감을 불어넣어 줍니다.

test 작성시 다음을 참고하세요.

a. Test 는 명확한 에러 메세지를 전달해야 합니다.

b. 좋은 assertion library 를 사용하세요. (eg. jest 와 함께 사용하는 library나 chai)

c. 각각의 Vue 컴포넌트를 위한 unit test를 작성하세요.

5. 개인적으로 선호하는 것

이벤트 버스의 사용을 최소화합니다. 컴포넌트간의 통신을 여러개의 이벤트 버스로 구현한 프로젝트를 경험한 적이 있습니다. 이벤트 버스를 통해 여러 컴포넌트에 메세지를 전달하다보니 당연히 성능 이슈가 생겨 느려지는 결과가 나왔습니다.
굳이 이벤트 버스를 통하지 않고도 특정 컴포넌트의 이벤트를 trigger 할 수 있습니다.
컴포넌트에는 computed나 watch와 같이 값의 변화를 감지하는 요소들이 있습니다. 전역에서 접근할 수 있는 store나 url query에 변화를 주게 되면 원하는 component에 해당 값에 의한 이벤트 trigger하게 됩니다.

불특정 다수에 메세지를 전달하는 이벤트 버스보다 목표가 분명한 메세지 전달이기 때문에 성능상에서 훨씬 이득이고, 코드의 관리도 보다 명확해집니다.

Conclusion

vue를 이용해서 큰 프로젝트를 얼마든지 진행 할 수 있습니다.