WordPress + Gist

Markdown 문법을 지원하는 WordPress에서 code snippet을 본문에 추가하는 것은 매우 쉽다.코드 블럭을 “`로 둘러싸기만 하면 되니까. 하지만 WordPress Parser는 코드로써의 HTML과 본문내용으로써의 HTML을 구분해내는 능력이 아주 나쁘다. 쉽게 말해 병신같이 짜놨다. 에디터에서 Visual과 HTML을 왔다갔다 하다보면 짜놨던 글들이 이상하게 지랄이 나는 것은 순식간이다. 저작툴이 좋아야 글 쓸 맛이 나는 사람이라, 이 이슈로 워드프레스를 버릴까 고민을 했었는데 […]

Use single quotes for Front-End JS

내가 자주 사용하는 airbnb eslint config에서도 single quotes를 사용하는데 이 부분이 단순히 취향의 문제라고 생각하는 사람을 위해 글을 써본다. 당신이 JS를 사용해서 HTML 코드를 건들지 않는 부분만을 코딩하는 프로젝트를 진행 중이라면 이 논쟁은 정말 단순한 취향의 문제일 뿐이다. 하지만, JS로 코딩을 하다 보면 HTML 코드 내부에 JS를 사용하는 경우가 잦다. 애초에, JS가 DOM을 조작하기 위해 […]

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 요청을 […]