자바스크립트 채팅방 스크롤

[vanillaJS] 채팅창 컴포넌트의 스크롤을 다뤄보자.

채팅창 문제의 시작점 프로젝트에서 채팅 컴포넌트와 관련된 코드 중 일부분이다. chats 이라는 state가 업데이트 될 때 마다, 새로운 채팅요소를 생성하게 될 것인데 채팅방 엘리먼트에 채팅들이 넘치기 시작하면 문제가 발생한다. 문제가 발생한 프로젝트는 리액트였지만, 바닐라로 차근차근 정복해보자. 바닐라를 이해하면 리액트는 effect, ref 정도만 고려해서 그대로 적용하면 된다. 👍👍 HTML을 통한 문제 소개 // index.html chat 0 채팅추가 2. 유저가 스크롤을 조절하여 특정 채팅을 보고 있다면, 새로운 채팅을 추가하지만 스크롤은 건드리지 않는다. 1번 기능에 의하면, 새로운 채팅이 추가되면 항상 스크롤이 내려가게 된다. 그렇다면 사용자는 이미 지나가버린 채팅을 보기가 쉽지 않다. ..