스페이스맥스에서 둠이맥스로 갈아탐

ES6+ 기반의 컴포넌트를 작성하는 것 뿐이었는데 WebStorm, VSCode, Spacemacs… 모두 사용할 수 없을 정도로 느려진다. 프로젝트 구성 파일의 사이즈가 제법 큰 사이즈이지만 따로 콤포넌트 루트는 고작해야 파일 6개 뿐인데 이해할 수 없는 반응이었다. 

 

JVM 기반 WebStorm은 느려지는 원인을 잡아내기란 또 하나의 ‘프로젝트’에 가깝다. 짜증나는 클릭질, 어디에서 뭐가 영향을 주는건지 도무지 알수도 없고 알고싶지도 않다.  VSCode는 왜 또 그런데… 덩달아서 느려진다.  브라우저 기반이라 어쩔 수 없나보다 하고 포기하고 Spacemacs로 코딩하려니 이건 뭐.. 셋다 모두 태업을 하는건지 도무지 이해할 수 없는 현상… 결국 급한김에 vim으로 마무리했지만 받쳐오르는 짜증때문에 그동안 손도대지 않으려했던 Doom Emacs1https://github.com/hlissner/doom-emacs를 건드려 보기로 했다.

 

Spacemacs에 길들여진 후라서 Doom Emacs의 단축키 호출 설정은 가장 큰 장애물이었다. SPC f e d  대신에 SPC f p , treemacs 설정도 모르겠고, SPC SPC 두번 호출에 의해 명령어로 검색하는게 아니라 M-x 로 호출한다. 반응이 돌에 걸려 넝어졌다가 일어나는 꼴 모냥스럽게 느리다. 뭔가 맘에 안든다. 

 

React 코딩을 위한 환경으로 설정했는데도, 일단 어플 자체가 뜨는 시간은 아주 빠르다. 일단 기동 후에 지연된 로딩을 하기 때문에 동작한 직후에는 반응이 더디다. 그래도 Spacemacs에 비하면 개인택시로 미터기 내린상태에서 총알택시 코스탄 정도로 빠르다.  ~/.spacemacs 파일을 고치던 것과 달리 총 3개의 파일로 나눠져 설정한다.

  • ~/.doom.d/init.el  — spacemacs의 layer에 해당한다
  • ~/.doom.d/config.el — spacemacs의 user-config 함수에 해당한다
  • ~/.doom.d/package.el — addtional-packages 함수에 해당한다

 

부팅하기전에 설정에 따른 필요한 사항을 미리 컴파일시켜둬야 한다.  설정을 변경한 경우는 Emacs를 재시작 하기만 하면 된다. 패키지를 추가했다면 반드시 설정을 동기화 해야한다. Emacs 어플 자체의 버전이 바뀐경우에도 doom sync를 해줘야 한다. develop 브랜치를 사용중인데 git pull 로 변경사항을 적용한 후 doom sync 또는 upgrade를 통해 변경사항을 적용하는걸 잊지 말자:

  • ~/.emacs.d/bin/doom sync 

 

 

설정에 따른 로딩하는 패키지의 수는 Spacemacs에 비해 3배정도 차이가 난다.  도대체 Spacemacs는 뭘 그리도 많이 읽어들이는지… 하지만 결국 주된 사용처는 React/ESLint/TypeScript 코딩이라서 설정은 별반 다를게 없다. 대신 eslint_d 를 적용하고 Tide 대신 LSP로 대동단결하는 분위기다. 

 

Emacs는 27버전을 사용한다. 28은 언제 릴리즈될지 알수없고, 26은 JSX 지원이 내장되어 있지 않다.  js2-mode 가 아닌 rjsx-mode를 쓰라고 하는데, 빌어먹을 모드 구분은 아직도 힘들다. Flycheck에다 flycheck-inline-mode를 반드시 써주자. 그렇지 않으면 발랄하게 팝업창이 죽어라 뜬다. 

 

ESLint에 auto-fix는 껐다. 내가 알아서 고칠께, 넌 조언만 해라는 설정이다.  TypeScript Hint는 어지간하면 필요할 때 뜨게한다. 스토커마냥 커서 지나가는 길목마다 나타나지 말란말이다.   혹시라도 맛이갈 경우를 대비해 VSCode Insider에도 적절히 설정해준다. 패키지를 모두 없애버리고 VIM + ESLint 만 동작하게 해두었다.  그러고선 비상대피용으로 vim-plug를 사용해서 VIM 도 새단장을 해주었네. (근데 왜 expandtab이 자꾸 풀리냐고!!!)      이걸 윈도우쪽에도 적용해야하는데,,,

References   [ + ]

1. https://github.com/hlissner/doom-emacs

local static variable using TNG-Hooks

I personally have prefered to use React Hooks over React, since the lifecycle functions were quite boring me and were the place where codes are mixed around each other.  I think the situation was quite far from ‘Reusability’ and made me to look for another solution. It was inevitable under the React’s convention then. And later, the React Team solved several problems with React Hooks.  I enjoyed them too like other fellow programmers. 

 

Recently I’ve rolled out shine bright Keyboard-Shortcut Handler based on Finite State Machine. Everything works as I designed. BUT when it turned to be failed to make clean and simple module(non-React component), I realized the class instance variable acts like global variable.  The instance variable has to be passed or referenced from/to related functions in any way.

 

Suddenly I came up the idea that I could use TNG-Hooks1https://github.com/getify/TNG-Hooks to make my functions act like Class whose local static variables !!!

import {TNG, useState} from "tng-hooks";
const drawMousePath = TNG(function(offsetX, offsetY){

   // previousX, previousY act like static varaible in this function!
   const [previousX, setX ] = useState(0);
   const [previousY, setY ] = useState(0);

   // do some works using these values
   console.log(previousX, previousY, offsetX, offsetY);

   // update
   setX(offsetX);
   setY(offsetY);
});
drawMousePath(1,2);  // 0, 0, 1, 2
drawMousePath(3,4);  // 1, 2, 3, 4
drawMousePath(5,6);  // 3, 4, 5, 6

 

Yes, the underline concept and fundamentals are well know by React Hooks.  But the thing is that we can elaborate a function to ‘class instance like’ one!

Not only each TNG-ed function has its own stack, but we can share ‘the stack’ between/among some functions if they are TNG-ed together. 


const [f1, f2, ...] = TNG(f1, f2, ...);

 

Isn’t it cool?? lol~

 

Even if you are using React Hooks, no problem at all to use TNG-Hooks together. Because you can rename useState (of TNG) to whatever you want. 

And also this pattern could be applied to the place where you want to hide class instance and give instance methods as API

 

My friends were excited when they were told this from me. Some were excited, some were unimpressed at all. But I believe that every one who knows React Hooks would be inspired by this idea for their own projects. Hope this helps you.

 

 

References   [ + ]

1. https://github.com/getify/TNG-Hooks

충전용 드러멜을 이용한 포터블 자성제거기

시중에 파는 1만원대 중국산 탈자기 제품은 어느정도 동작은 한다. 내게 있어 가장 문제가 되는 건 교류전력이 필요하다는 것. 

교류전류 없이도 자성을 제거하기위해 유튭에서 빌려온 아이디어를 변형해서 충전용 드러멜 드릴에다 강력 자석 4개를 N/S극 교대로 나열해서 붙여 회전시키는 방식을 써보기로 했다.

 

결과는, 1단 회전에는 버티지만 2단 이상의 회전이 걸리면 약하게 붙은 자석이 날아가 버린다. 양면 고릴라테이프와 투명 고릴라테이프를 너무 신뢰했던것.

 

 

 

 

 

 

두번째 시도에서는 튀어나가지 않도록 페트병 뚜껑에 EZ-Lock을 연결하는 방식으로 실험했다. 

어떤 회전에서도 자석이 튀어나갈수 없기때문에 첫번째 시도에서의 문제는 없으나, 무게 중심이 미묘하게 틀어져 있는지 3단 이상으로 회전시키면 엄청난 진동이 발생해서 도저히 사용 불가능했다. 

 

그러나 1단으로 회전시키면 약한 진동만 발생하므로 여러번 탈자기 과정을 반복하면 자성이 제거되는 걸 확인했다. 어차피 자성제거 원리는 같기 때문.  시중에 판매하는 중국산은 교류 주파수만큼60Hz 자기장이 변동하고 자기장 세기도 만만찮다. 내가 만든 것도 자기장 세기에서 밀리지는 않는것 같은데 자기장 변화율은 50% 정도. 오토매틱와치에 심하게 자성이 측정되면 사용해볼 예정이다.