Bleeding edge

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

고민한 이유 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에..

리액트? CBD(Component Based Development) 요즘 웹이 다른 프로그램처럼 기능이 많아지면서, 구현해야하는 기능이 많아졌다. 이로 인해서 Javascript가 복잡해지면서 하나의 script.js에 모든 코드를 넣기가 어려워졌다. 이로 인해서 어떤 script 코드가 어떤 element를 제어하는지 파악하기 힘들어지고, 가독성이 떨어졌으며, 변수 선언 시 겹치지 않도록 신경을 써줘야하는 불편함이 생겼다. 해결책 : 여러개의 css와 js 파일로 분리를 하였다. 1) 어떤 element 2)그 element를 꾸미기 위한 style 3) 그 element 동작에 대한 script 1), 2), 3)을 묶음을 Component라고 한다. 리액트의 특징? 프론트엔드에서 하는 제어의 대부분..