[✍️ Dev Log] 최우철 / 2021-12-11

### 오늘은 어떻게 프로젝트에 기여했나요?
- 오늘은 마이페이지의 정보수정과 관련한 전반적인 로직을 작성하였다
- 또한 리엑트 훅을 이용하여 리펙토링을 진행하여 객체 지향적인 개발을 조금 더 추구하는 방향으로 연습을 해 보았다

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
- 개발을 하다가 중간에 form에 input으로 "Number"타입만 넣게 만들고싶은 욕구가 생겼었다

- 사실 그 자체는 어려운 건 아니었다. 그냥 type="number" 로 하기만 하면 됬었으니까.

- 그런데, 문제는 input의 type이 "number"일 경우, maxLength의 속성이 적용되지를 않아 무한정 쓰게 만드는 상황이 왔었다.

- 유저가 악의적으로 수조억의 숫자를 집어넣으면 레이아웃이 다 깨져버릴 것은 자명한 일일것이므로 이 단위를 한정해야했는데 옵션은 못넣는다고 하니...

- 그래서 조금 생각해보다가, 어차피 이 input 역시 Dom 안에 있는 객체인 element node일것이고, 각 prop에 접근하면 쉽게 해결될 일이라고 생각하였다

- 따라서 element를 직접 건들기 위하여 useRef로 담아 처리하였다

- 그 후, 해당 current 객체의 prop에 존재하는 value와, maxLength 프로퍼티를 활용하여 일정 단위 이상으로는 더이상 입력을 못하도록 설정하였다

- 해당 input을 감지하기 위해 사용한 옵션은 onInput으로, 사실 onChange가 이미 있어서 다른게 없나하고 뒤적거리다가 써본건데
- 혹시나 둘에 차이가 있나 하고 스텍오버플로우를 뒤적뒤적해봤다

> 별반 차이는 없다고 한다. 아래 글을 더 읽어보면 사실상 차이는 없는데 없애자니 온갖 혼돈 파괴 망가를 일으킬 수 있을거같아서 남기는거 아니냐는 추론도 보인다.