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은 한번 발생한다라는 차이점도 있지만, 이런 횟수적인 차이보다는 순서적이 차이로 구분하는게 기억하기 좋았다. 언제 구분해야할까? 사실 위에서 무시한 횟수 때문에 구분해서 사용되는 경우도 있지만, 이 같은 경우에는 횟수에 따라 둘 중 하나만..

고민한 이유 최근에 회사에서 채팅로그를 새로고침을 한 경우에는 저장을 하고, 창을 끄는 경우 없애자는 이야기가 나왔었다. 평소에 이런 비슷한 케이스가 있으면 window addeventlistener에서 beforeunload를 이용해서 해결했는데, 문제는 이 방법은 새로고침과 창을 끄는 경우 모두 포함한다. 검색 결과 reload와 close에 대해 검색하다보면 꺼질 때의 position에 따라 처리해라 이런 다양한 글들이 보였었는데,안될꺼같아서 우선 다 제외하고, 둘의 차이에 대해 검색을 하다가 다음과 같은 글을 보았다 https://stackoverflow.com/questions/568977/identifying-between-refresh-and-close-browser-actions Ident..

고민한 이유 Single Page Application을 만들다가, 서버에서 모든 Single Page Application에 대한 초기 정보를 저장하는 것이 너무 부담되어서, Local Storage에서 초기 State를 관리하기로 하였다. 이 문제를 해결하기 위해 만났던 문제들 nextjs에서 localStorage is not defined 이 문제는 nextjs에서는 window가 undefined인 순간이 있을 수 있는 nextjs에서 나올 수 있는 케이스로 해결 방법은 심플하다(단지 언제 undefined 인지 시점을 지정하는게 타이트할수록 번거로울 수 있다..) function App(){ if(typeof window==="undefined") return //...localStorage에..

문제가 생기는 이유 특히 싱글페이지로 웹을 개발하는 경우에 많이 만날 수 있는데, 100vh를 적용하면 모바일에 알맞지 않게 나오는 현상이 있다. 이 이유는 device의 높이를 잡을 때 주소창과 같은 dynamic한 요소들 때문에 생긴다. 해결책? 사실 인터넷을 검색하면, webkit fill이나 100%를 이용해서 해결하는 방법과 자바스크립트를 이용해서 vh를 지속적으로 변화시키는 방법이 있는데, 이 방법들은 너무 번거로워서 항상 귀찮았었는데, 요번에 검색을 하다가 새로운 방법을 찾게되었다. dvh, svh https://www.terluinwebdesign.nl/en/css/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw/ Incoming: ..

https://allwais.tistory.com/2 로컬에서 npm 패키지 배포하기 서론 react-wai를 보면 이게 배포하면 문제없나? 라고 테스트하기 위해 package.json에서 몇 가지 변경사항만 수정해서 다시 재배포를 한 적이 있다. 사실 이런 설정만 건드리는 것은 publish가 되어서는 allwais.tistory.com (allwais에서 react-wai에 참여한 다른 분들의 개발자 노트도 보실 수있습니다!) 서론 react-wai를 보면 이게 배포하면 문제없나? 라고 테스트하기 위해 package.json에서 몇 가지 변경사항만 수정해서 다시 재배포를 한 적이 있다. 사실 이런 설정만 건드리는 것은 publish가 되어서는 안된다고 생각이 되었지만, 방법을 몰라서 접어두었었다. 최..

효율성을 요구하는 코딩테스트 문제를 풀다보면 키를 지우는 일이 많은 경우 Object를 사용하면 시간 초과가 나오지만 ,Map을 사용하면 시간초과가 안나오는 경우가 있습니다. Map이 성능이 더 좋다인데 왜 그런지와, Map이 Object보다 더 좋은 이유에 대해서 그리고 Object의 기능을 Map에서는 이렇게 사용한다는 것을 보여준다는 글이니 한번 읽어봅시다! https://velog.io/@surim014/use-maps-more-and-objects-less [번역] 객체 대신 Map을 더 사용해보기 이 글에서는 자바스크립트의 객체 대신 Map을 활용하는 대안에 대해 소개하고 있습니다. velog.io