본문 바로가기

Today I Learn/프론트엔드

(26)
[리액트] requestAnimationFrame으로 custom hook 만들기 2020. 3. 3. 17:33 feat. 결론은 뻘짓이었습니다. 글을 읽는 게 어떤 분께는 시간낭비일 수 있습니다. reactjs에서 css로 애니메이션을 거는 부분에서 늘 고민인 부분은 처음 랜더링이 시작되었을 땐 애니메이션이 의도한 대로 동작하지않고 무시되는 경우였다. 아마 데이터를 불러오고 처음 마운트 될 때의 느린 SPA의 특징 때문인거 같았다. 최근에 웹챗 배포 스크립트를 작성하면서 자식 iframe과 부모 간의 postMessage 통신으로 부모에서 해당 챗봇 버튼을 display할 수 있도록 하는 로직을 구현했던 적이 있는데 이것을 커스텀 훅으로 바꿔서 적용하면 어떨까!라는 생각이 들었다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 var l..
[리액트] 모바일 웹 브라우저에서 가상 키보드 오픈 시 스크롤 내리기 2020. 2. 25. 17:11 웹챗을 데스크탑 브라우저로만 보다가 모바일 웹으로 보니까 모바일 가상 키보드가 메세지 리스트를 가리면서 나타나는 현상이 있었다. (매우 부자연스럽...) 입력창에 포커스될 때 메세지 리스트 div를 스크롤 다운 해줘야 할 필요가 생겼다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 import classNames from "classnames/bind"; import React, { useRef, useLayoutEffect } from "react"; import { MessageList } from "../../organisms"; import { MessageInput..