Webpack config > resolve.extensions

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

Callback naming convention for Front-end

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

내가 생각을 정리하는 방법

이전에도 비슷한 글을 썼다. 나의 할 일 & 메모 처리 방법 (이때는 잠깐 존댓말로 블로그를 했던 시절) 최근에 이런 저런 변화가 생겨서 2021년 9월 기준으로 “내가 생각을 정리하는 방법” 최.신.판.을 정리해서 공개해본다. 물론, 앞으로도 개선이 있을 것이고, 이것이 최선이 아니라는 생각을 항상 갖고 있으며, 중요한 것은 다른 시스템으로 전환하기 쉬운 시스템과 태도가 더 중요하다는 사족을 […]

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