Dev/react16 자동 스크롤 문제 해결 / scrollTop = scrollHeight 적용 안됨 문제 발생 채팅창을 구현하며 채팅을 입력했을 때 자동으로 채팅창 가장 하단으로 스크롤이 내려가도록 하는 기능을 구현하게 됨 document.getElementsByClassName('class').scrollTop = document.getElementsByClassName('class').scrollHeight 스크롤 높이를 사용하여 조작하려고 시도했지만 가장 최신 채팅이 아닌 아래서 두번째 채팅을 기준으로 스크롤링됨 → 콘솔을 찍어봤을 때 scrollTop 과 scrollHeight 의 값이 같게 적용되지 않았음. 하지만 이게 정확한 원인인지 파악할 수 없음 해결 과정 DOM 을 직접 수정하는 방법을 적용할 수 없기 때문에, ref 를 사용하여 적용해보기로 함 전채 채팅을 감싸고 있는 ‘chat-li.. 2022. 9. 22. onPressEnter 한글 중복 입력 이슈 해결 문제 발생 CustomInput 컴포넌트를 사용하는 데 onPressEnter 액션으로 채팅을 보내는 로직에서 한글을 작성하면 두번 입력되는 현상 발생 → 엔터 액션은 두번 실행됨 해결 과정 KeyboardEvent 속성 중 isComposing 속성을 활용 영어를 제외한 다른 언어들은 한 글자에 알파벳 한 개보다 많은 정보를 담고있어, 글자가 처리되기 전에 함수가 실행되고 모두 처리된 후 함수가 다시 실행되어 중복되는 현상이 발생하는 것 isComposing 속성을 활용하여 모든 글자가 처리된 후 함수가 실행되도록 한다 // CustomInput.tsx // before const onKeyDown = (event: KeyboardEvent) => { if (event.key === 'Enter' &&.. 2022. 9. 22. ChartJS를 뚝딱거려보자 / react-chartjs-2 그리드 숨기기 / tooltip 커스텀하기 / 리사이징 / callback 함수 사용 오늘 작업한 페이지에 차트가 사용된당. 통계 페이지인데, 날짜별 데이터 변화를 꺾은선 그래프로 나타내고있다 그래서 react 로 차트를 그릴 수 있는 라이브러리를 생각해보다가, (일단 내가 사용해봤던 라이브러리는 Apexchart !) 내가 작업하는 페이지가 이전에 진행되던 프로젝트의 기능과 합쳐진다는 기획이 있어서 이전 프로젝트를 작업하신 다른 프론트엔드 개발자분께 어떤 라이브러리를 쓰셨는지 여쭤보고 같은 라이브러리를 사용하기로 했다! 그건 바로 ChartJS ! 리액트에서 쉽게 사용하려면 react-chartjs-2 라는 라이브러리를 함께 설치해줘야 한다고 해서, 같이 설치했다 같이 사용해보고, 상세한 config 를 어떻게 했는지 포스팅해보게따 가장 기본적인 차트를 그리면서 사용법을 알아보자 imp.. 2022. 9. 5. Custom Modal 컴포넌트와 appear-disappear 애니메이션 / 모달 컴포넌트 깜빡임 해결 / 컴포넌트 깎는 노인 / 생명주기는 중요하니까 새 프로젝트를 들어가면서 받은 미션! ant design 을 쓰지 않고 최대한 컴포넌트를 직접 만들어보는거였다. 본격적으로 프로젝트를 시작하기 전에 여러가지 공통 컴포넌트들을 만들었는데(버튼, 체크박스, 셀렉트박스 … ) 그 중 모달 컴포넌트를 만들면서 생긴 문제와 해결 방법에 대해 적어보려고 한다 일단 내가 만든 모달 컴포넌트의 전체적인 구조를 보자! // CustomModal.tsx // ... return ReactDOM.createPortal(_Modal, modalElement!); 일단 createPortal 을 사용해서 root DOM 외부에 모달 노드를 생성했다. 이렇게 root 노드 외부에 모달 노드를 생성하면 모달의 z-index와 같이 다른 컴포넌트와 상호작용을 고려해야 하는 점이 많.. 2022. 9. 1. webRTC 찍먹해보기 / 1:1 영상채팅 실습 / 전세계를 떠도는 개발미아 지금까지 진행해오던 프로젝트 중 몇가지는 끝나고, 몇가지는 중단된 상태에서 다음 들어갈 프로젝트에 대해 미리 공부해보고있다! 그 중 webRTC 에 대해 공부한 내용을 정리해보려고 한당 WebRTC 웹을 위한 실시간 커뮤니케이션, 통신기능을 애플리케이션에 추가할 수 있음. Real-Time Communication 동영상, 음성, 일반 데이터를 동종 앱 간에 전송할 수 있음 socket.io 와 다르게 사용자 간 통신이 가능. (소켓은 사용자와 서버간 통신) 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림 할 뿐만 아니라, 임의의 데이터도 교환할 수 있도록 하는 기술. 드라이버나 플러그인 설치 없이 웹 브라우저 간 P2P 연결을 통해 데이터 교환을 가.. 2022. 8. 14. antd 문제는 해결되었는가? 그렇다 / antd description 과 form 사이 / 여담으로 react-to-print 까지 나는 입사 후 주로 서비스의 관리자 페이지를 작업하고 있어서, 디자인이나 퍼블리싱에 큰 중점을 두고있지 않다. 그래서 ant design 컴포넌트를 자주 사용하는데, 워낙 사용법이 간단하고 공식 문서에 예시도 다양하게 확인할 수 있어서 바로바로 가져다 쓰거나 직접 커스텀 해서 사용하기도 한다! https://ant.design/ Ant Design - The world's second most popular React UI framework ant.design (누가 그랬다...antd 의 유일한 단점은 그 나라에서 개발됐다는 점 뿐이라고...) 아무튼 이 쉽고 간단한 antd 에서도 그나마 복잡한 기능을 가지고 있으면서 자주 사용하게 되는게 Form 인데, 큰 form 태그 안에서 각각의 item 들의.. 2022. 7. 19. 이전 1 2 3 다음
