Bleeding edge

개요 최근에 회사에 동료들이 늘어나면서, 이전과 같게 진행하면 문제가 생길 것 같아서, PR 가이드라인을 작성하고 컨벤션을 위하여 자동화를 세팅하기로 했다. PR 작성 가이드 라인 1. 코드 변경은 작게 작성 (LOC(Line of codes)는 400줄 이내로 작성) 2. 버그 하나당 하나의 PR 3. 버전 업데이트 및 리팩토링은 별도의 PR로 관리 4. 규모가 큰 변경 사항은 의미(semantic) 단위로 분리 5. 맥락을 이해할 수 있는 정보를 PR에 담기(내용에는 어떤 코드인지보다 왜 이 코드를 작성했는지가 중요) PR 내용 가이드라인(template를 만드는 것도 좋다) 1. 이 PR은 어떤 PR인지 2. 이게 왜 필요한지(Optional) 3. 어떻게 구현했는지 4. 어떻게 테스트 할 수 있는..

사용하게된 이유 사용자에게 원하는 타입의 값을 받아서 처리를 한다고 하면, 두 가지 방법이 있다. 1. validator를 이용해서 원하는 값이 나오지 않는다면 사용자에게 다시 값을 입력하라고 알린다. 2. 원하지 않는 값이 나온 경우에 input에 값의 입력을 받지 않는다. 이번에 적용해야할 기능은 2번이었다.(물론 1번도 부분 적용..) 이번에 적용해야하는 것은 숫자와 %였다. input vs contentEditable View적인 차이 input은 value의 하나의 textNode에 대한 스타일링을 적용할 수 있지만 contentEditable은 innerHTML을 이용하여 다양한 태그를 감쌀 수 있기에 다양한 스타일링이 가능하다 코드에서의 차이 input은 type을 입력하여 의도되지 않은 타..

서론 회사에서 최근에 애니메이션을 특정 state의 변화에 넣어달라는 요청을 받았다. height를 0%로 하였을 때 height가 0이 되는 것들 혹은 내가 만드는 컴포넌트의 높이가 정해져 있는 경우에는 쉽게 구현할 수 있었지만, height를 0으로 할 수 없는 경우나, height를 특정할 수 없는 경우에는 transition을 정하기 어려웠다. 시도한 방법 맨 처음에는, hiehgt에 0% 0, 100%를 넣어서 시도해봤었지만 모두 실패였다. react-animation에서는 변할 height를 구해서 inline으로 적용하는 방법을 사용하였다. 하지만, 굳이 이 애니메이션 때문에 라이브러리를 설치하고 싶지는 않아서 마지막으로 max-height를 사용하였다. Max-height 텍스트가 있는 경..

onKeyDown, onKeyUp onKeyDown은 키를 누르고 있을 때, onKeyUp은 키를 누르다가 뗐을 때의 키보드 이벤트 함수이다. 이렇게 누르고 있을 때와 누르다가 땠을 때로 구분하니 종종 둘이 언제 사용해야하는지 헷갈리는 경우가 많았다. 그래서 순서로 생각을 해보기로 했다. 순서 키를 누르고 => 키를 뗀다. 즉 onKeyDown 이벤트가 먼저 발생하고, onKeyUp 이벤트가 발생한다. 또 다른 차이점은 onKeyDown은 여러번 발생하고, onKeyUp은 한번 발생한다라는 차이점도 있지만, 이런 횟수적인 차이보다는 순서적이 차이로 구분하는게 기억하기 좋았다. 언제 구분해야할까? 사실 위에서 무시한 횟수 때문에 구분해서 사용되는 경우도 있지만, 이 같은 경우에는 횟수에 따라 둘 중 하나만..