어제 보다 나은 나

회사에서 페이지 에디터의 신규 기능을 추가해 달라는 요청이 와서 작업에 들어갔다. 간단히 설명하면 우측 에디터에서 값을 입력하면 가운데에 뷰 페이지에 해당 값이 반영되서 보이는 식이다. 근데 예를 들어 input 폼에다가 옵션을 넣어준다 생각해보자. placeholder옵션을 주기 위해서 에디터쪽에서 입력을 하면, 가운데 뷰 페이지에 반영을 해야하니 onChange 이벤트를 걸어줬다. const onChange = (e:React.ChangeEvent)=>{ const value = e.target.value; setState({[target]:value}) } 근데 이러면 어떻게 되냐. 타자를 칠 때마다 상태가 업데이트 된다. 물론 이거가지고 막 느려지거나 하지는 않겠지만, 이런 경우가 점점 많아 진다..

오늘은 next와 씨름을 하며 회사 브랜드 페이지의 신규 기능을 만들어서 개발에 pr을 올려놨다. 우중충했던 날씨도 맑아지고 기분 좋게 코딩을 하다가 순간 뭔가 이상하게 상태 업데이트가 안되는 것이다. 분명 하던대로 했는데 왜 안될까. const [state,setState] = useState([]); const onClick = (e:React.MouseEvent)=>{ ... setState(beforeState=>{ const newData =...; beforeState[index] = newData; return beforeState; }) } 날씨가 좋아졌는데 왜 내 머리 속도 꽃밭이 됐는지.. 여튼 뭐지 뭐지 하다가 앗차차 하면서 스스로의 멍청함에 감탄했다. 자바스크립트의 데이터 타입은 원..

Javascript에는 this가 있다. 이 this라는 것은 사용하는 방식에 따라 뜻하는게 달라 진다. 1. 일반 함수의 this / 일반 함수안의 this는 전역객체를 바라본다. 2. 메소드의 this 메소드안의 this는 메소드를 호출한 객체를 바라본다. 단 메소드를 선언할 때, 일반 함수일 경우에만 호출 객체를 바라보지, 화살표 함수의 경우 상위 스코프의 this를 바라본다. 3. 생성자함수의 this 생성자 함수안의 this는 생성될 인스턴스 객체를 바라본다. 4, this 바인딩 함수 Function.prototype.apply/call/bind 메소드의 첫 번째 인수로 전달한 객체를 바라본다. 엄격 모드에서의 this는 undefined를 값으로 갖는다. 1. 일반 함수의 this funct..

react를 쓰다보면 map과 filter에 심취한 나머지 다른 메소드의 존재를 잊을 때가 있다. 그럴 때 마다 주로 깜빡하는 메소드가 find이다. 배열에서 찾는 요소를 배열로 만들어 가져오는 것에 익숙해져서 내가 무슨 작업을 하는 것인지, 뭘 해야하는지 잊는 것이다. const numArray = [1,2,3,4,5]; const iFoundTargetNum = numArray.filter(num => num === 3)[0]; // 1,2,3,4,5 모두 검사 이렇게 하나의 아이템만을 찾는데 Array.filter를 도는 것은 전기 낭비, 메모리 낭비 이다. 조건에 맞는 아이템 하나만 찾아서 바로 리턴해주면 되는 일을 배열의 모든 요소를 돌아서 찾을 필요는 없다. const numArr = [1,2..