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에 […]

Side-effect-only Vuex Mutation / Action

Vuex의 Mutation과 Action에서는 오직 Side-effect(부수효과)만이 있는 코드를 작성하는 것이 좋다. Side-effect-only라는 단어를 좀 더 자세히 설명해보자. 이는 부수효과가 있어도 된다는 뜻이 아니라, 부수효과만 있어야 한다는 의미이며, 가능한 한 return statement를 쓰지 말아야 한다는 주장이다. 결론: Vuex의 Mutation / Action (이하 M/A)의 기본 설계 철학에서 이미 Side-effect를 종용한다. Mutation은 state를 첫 번째 인자로부터 destructuring으로 가져와 조작한다. 이미 […]