sm 기술 블로그

scrollIntoView() element 기반으로 사용되며, 특정 element를 기준으로 스크롤을 이동 시킨다. 상단 혹은 하단 element.scrollIntoView(true); element.scrollIntoView(false); 애니메이션 - behavior : 전환 에니메이션 정의 (auto || smooth) - block : 수직 정렬 (start || center || end || nearest) - inline : 수평 정렬 (start || center || end || nearest) element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"}); FrameWork import { useRef, use..

useCallBack 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용하는 함수이다. useCallBack 사용법 const callback = useCallback(function, deps); function을 deps값이 변경될 때까지 재사용할 수 있게 해준다. useCallBack 사용 이유 리렌더링 될 때 마다 함수가 새로 만들어지는데 그것을 방지하고 재사용하는 것이다. (cpu나 메모리를 소모를 줄이고자 라고도 하지만 현재는 큰 의미 없어보인다.)

문제 발생 [ { A { "id" : "1", "content" : "안녕하세요" } B { "createData" : 2022-09-27" } } , { A { "id" : "2", "content" : "감사해요" } B { "createData" : 2022-09-27" } } ] 예를 들어 다음과 같은 구조에서 id가 1인 A의 content 값을 바꾸고 싶다. 구상 1. map과 삼항 연산자를 이용한다 => 해결 해결 내용 // newMsg {"id":"1", "content":"잘있어요"} 위와 같은 새로운 메시지가 들어왔다고 하자. setContent( content.map(msg) => msg.A.id === newMsg.id ? {...msg, A:{content : newMsg.cont..

문제 발생 useEffect(() => { client.connet({}, () => { ... 연결 내용 ... }); }, [chatroomId]); 구조는 다음과 같다. 채팅방 아이디가 바뀌면 useEffect을 실행시켜 연결을 다시 진행하여 채팅내역을 그려주는 방식이다. 하지만 채팅방이 바뀔때마다 연결이 중첩되어 같은 방을 n번 누르면 메시지를 n번 받는 버그가 발생한 것이다. 구상 1. 연결 상태에 따라 연결을 새로하고 안하고 한다. => 가능은 하지만 메모리 낭비가 심하고 코드가 길어진다. 2. client 를 전역변수로 빼본다 => 해당 client가 연결을 지속하고 있어 새로운 연결을 받지 않는다. 3. 웹소캣 내역을 지우고 다시 그려준다 => 이걸로 해결 해결 내용 useEffect(()..