디자이너분으로 부터 채팅창 input영역 높이가 글자 줄 수에 맞춰 높이가 조절되도록 요청을 받았다.

아무생각없이 오늘도 구글에다가 "input 높이 바꾸는 법"을 검색해보았고, 그 결과 "position: absolute"를 활용해보세요!라는 답을 담은 블로그 포스트가 많다는 것을 알아냈다.
물론, '믱 아직도 position을 쓴다고..?!"라고 생가했지만, 21년도에 올라온 블로그에도 position을 활용하고, 당장 시간도 없기에 우선 position을 활용하여 작업을 하였다.

근데 암만 생각해봐도 이게 좀 아닌거 같았다

우려했던대로 position: absolute를 사용하니 아래와 같은 문제가 발생했다.

1. textarea 아래에 있던 버튼이 자기 위치 감을 잡지 못하게 되었다.
2. 뿐만 아니라 DOM을 너무 많이 조작하게 된다. position으로 textarea를 떼어놓게 되니, textarea를 감싸고 있는 div의 높이까지 컨트롤을 해야되었다.
3. 뭣보다 안이쁘다. 코드도 더려워졌지만 수식조차 완벽하지 않기에 화면이 뭔가 바이러스에 걸린 것 처럼..누가 보기에도 허접이가 만든 textarea가 되었다.

그리고 뭣보다 CSS3로 이렇게 개떡같이 스타일링이 나올 리가 없었다.
뭔가 아니다 싶어 position: absolute를 포기하고 다른 길을 찾아 나서게 되었다.

다른 사이트를 뜯어보자!

해당 기능은 엥간한 메신저 기능을 지원하는 서비스에서 볼 수 있기에 숨고를 참고했다.
참고해본 결과 역시position: absolute 따위 사용하지 않고, flex만 활용해서 주변요소들도 함께 크기가 조정되록 하였다.

key event도 미세하게 다르다

기존 코드는 onKeyPress를 사용하여 키 이벤트를 잡았었다.
key event가 거기서 거기라고 생각했었지만, 막상 해당 이벤트를 onKeyUp으로 바꾸니 웬걸..너무 애니메이션이 자연스러워졌다.....

분명 이유없이 만든 이벤트는 없겠지만, 귀차니즘으로 인하여 여러 이벤트를 시도해보는 것을 흐린눈으로 피했었는데..과거의 자신이 원망스러워지는 순간이었다.

onKeyPress의 경우

보다시피 엔터가 참 안먹는다.
그리고 화면도 반응 속도가 한템포 정도 느리다.

onKeyUp의 경우

위에서 본 것처럼 엔터나 백스페이스가 매끄럽게 반영된다.
onKeyDown도 아직 큰 차이는 없어 보이는데..추후에 발견될지도 모르겠다.

결론

구글 검색 결과물은 적당히만 믿자..!

정말 찾다 찾다 안나오면 그때는 어쩔 수 없이 불편한 방법을 택해야겠지만, 내 머릿속에 물음표를 던지는 해답이지만 그런 글이 많다는 이유로 흔들리지 말 것.
특히 CSS나 전통으로 많이 사용되는 DOM control 방식의 경우 최신 블로그글이여도 옛스러운 방법론을 제시하는 경우가 있다.
구글링은 참고용일 뿐, 정답이 아니니 적당히 걸러들을 것...!