Webpack config > resolve.extensions

어이없게 해맨 부분이 있어서 공유한다. extensions: string[] 에 ts, tsx만 넣었더니 에러가 떴다. import 해오는 코드가 모두 typescript가 아니면 webpack이 제대로 일을 안하기 때문. 따라서, default array인 ‘…’ 를 넣어주거나, js와 jsx 등의 extension까지 같이 넣어줘야 말도 안되는 에러를 피할 수 있다.

Callback naming convention for Front-end

들어가기 앞서: 어떤 컨벤션이든 지켜지지 않으면 의미가 없다. 한 번 정한/정해져버린 컨벤션이 있다면 최대한 지키는 것이 좋다. 천천히 마이그레이션 해야지라는 마인드를 절대 적용해선 안된다. 한 번에 싹 바꾸던가, 아니면 기존의 컨벤션을 지키는 것이 맞다. 프론트엔드에서 콜백/리스너 네이밍 컨벤션을 다음과 같이 제안한다. 이는 React의 기본적인 문서만 읽어봐도 알 수 있는 컨벤션이다. 현재 컴포넌트에서 직접 정의하는 콜백은 […]

String.prototype.localeCompare

javascript의 localeCompare는 java의 compareTo와 비슷한 느낌이다. 이제 더 이상 문자열 정렬에서 if (str1 < str2) { return -1; } … 과 같은 장황한 코드를 사용하지 않아도 된다. 꽤나 예전부터 지원된 함수이니, 부담없이 사용해도 되고, 내가 이걸 도대체 왜 몰랐을까 싶을 정도로 후회된다. 특히나 localeCompare 링크를 들어가보면 Do NOT rely on exact return values of -1 or 1! 라고 되어있다. 바닐라 js를 조금 더 믿어보자. 정말 아무것도 없는 언어인 것은 맞다만…

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에서 호출하지 […]