Vue & Vuex Convention

Vue 프로젝트를 진행하면서 만든 Convention들을 정리해본다. Vue2와 관련된 설정이니 (나중에 이 글을 보게된) Vue3의 사용자들은 감안해주시길. Project Structure vue-cli를 쓰지 않을 이유가 없다. 심지어 create-react-app보다 더 완성도 있다고 생각한다. 물론, React 진영은 워낙 스택이 중구난방이라 모든 옵션을 다 넣어준다는 것도 이상하긴 하다만… 아무튼 이 상황에서 우리가 신경써야하는 structure는 다음과 같다. 손쉬운 이해를 위하여 User가 Post에 […]

Vuex-ORM 소개

최근에 리팩토링을 진행하면서 Vuex-ORM을 사용해봤다. 좋다. 추천해본다. 장점 별 수고없이(생각없이) Immutability를 높인다. Nested된 데이터를 다룰 때 매우 좋다. Query를 유연하게 짤 수 있다. 작성자 -> 게시글 -> 댓글 -> 대댓글을 JOIN으로 불러오면서 각 단계에서 orderBy를 다르게 먹일 수 있다. 어려움 없이 JSON object를 Vuex-ORM에 로딩할 수 있다. Vuex getter의 부족함을 많이 메꿔준다. getter를 getter에서 호출하지 […]

Front-end Test

1) Why Should We Test 개인이 혼자서 작성한 소규모 프로젝트이거나 개인이 한 프로젝트에 대한 지속적이고 충분한 이해가 가능한 상황이라면, 테스트의 중요도는 현저히 낮아진다. 하지만, 여러 사람이 파트를 나누어 중간 규모 이상의 프로젝트를 개발하는 상황에 테스트가 없으면 상위자의 “잘 돌아가?” 라는 질문에 쉽사리 대답할 수 없게 되며, 작게는 개발자 개개인을 불안과 불행에 빠지게 하고, 크게는 프로젝트 […]

@vue/cli v3.0.0-beta.6 TypeScript Support

이번에 vue-cli 가 3.0.0 버전의 베타로 올라가면서, 각각의 vue project template을 유지하는 것이 아니라 위 스크린샷에서 보이는 것과 같이 옵션을 선택해가면서 프로젝트를 만들 수 있게 된 것 같다. 물론, 아직 베타이니만큼 이런 저런 문제가 있을 수 있겠지만, 일단 TypeScript를 지원하게 됐다는 점에서 넘나 좋다. 버전3과 같이 소개되는 @vue/cli-service도 있다. vue-cli-service라는 명령어로 serve, build, inspect 할 […]

Vuex watches only inital property

다음과 같은 Vuex store가 있다고 하자. 이 user를 Vue Component의 computed에 …mapState를 이용해서 주입해서 사용하고 있는 상황. 이 때 mutation을 통해서 user의 id나 email을 바꾸면 그것이 실시간으로 Vue Component에 반영되는 것을 확인할 수 있으나, user에 새로운 key를 추가하면 Vuex는 그 key가 생겨났다는 사실을 인지하지 못한다. 예를 들어서 user: { id: ‘adoji’, email: ‘[email protected]’ }가 어떤 Mutation에 […]