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으로 가져와 조작한다. 이미 […]

Vuex Mutation / Action Naming Convention

Vuex에서 코드를 짜다보니 Vuex의 Muation과 Action의 함수명이 중복 되면서 Vue Component에서 사용할 때 마지막에 매핑해준 method가 호출되는 것을 확인했다. 그래서 비슷한 행위를 하는 3가지 계층이 있다고 판단되어 다음과 같은 표를 만들어서 지키기로 했다. 읽기 생성 수정 삭제 Service get post put delete Action get post put delete Mutation read create update remove Service는 back-end에 Http 요청을 […]