'Front-end/React.js' 카테고리의 글 목록

Front-end/React.js 5

Toast UI Editor (TUI Editor) 에서 이미지 업로드시 base64 문자열 제거하기

Toast UI Editor는 이미지 업로드 시 이미지가 base64의 형태로 자동 변환되어 업로드된다. base64는 엄청 긴 문자열이기 때문에 이를 데이터 베이스에 업로드시 여러분의 데이터 베이스는 살아남지 못할 것 그래서 이미지 업로드시 콜백 함수로 서버의 어떤 위치에 저장을 한 후에 해당 사진의 url을 리턴 값으로 받아서 에디터에 출력시켜주어야 한다. TUI Editor가 요즘 뜨는 신흥강자라고 해서 나도 이번 프로젝트에 적용하며 사용해보다가 저 부분을 개선하기 위해 인터넷을 서칭해보고 addImageBlobHook을 이용하면 된다는 걸 보고 적용하려 했는데 base64랑 url이 두 개 다 삽입이 되는 것이다...ㅠㅠㅠㅠ 개선하기 위해 해당 깃 헙의 이슈를 뒤졌는데 해결한 분이 있긴 했다. h..

Front-end/React.js 2021.06.29

[React] Ag-grid 를 이용한 floating header 제작하기

css 에서 position:sticky; 하고 top:0;으로 화면 상단에 요소가 붙게 하는 거나 화면에서 절대위치로 버튼등을 넣는 것을 floating button 이나 floating header라고 하더라. 완성본은 이런 모양이다 이전 앵귤러 테이블을 쓸 때에는 ng data table 자체적으로 위 옆으로 붙는 기능이 있었지만 모바일에서 스크롤 값을 못 읽었고 리액트에서는 전부 하드코딩으로 구현을 하면서 그런 것에 대한 버그는 많이 줄었다. 계속 이 테이블 구현을 위한 디벨롭을 하면서 이전에도 API를 이용하기도 하고, 아예 API를 쓰지 않기도 했었는데 개발자 분이 UI를 찾고 찾아 발견한 ag-grid가 넘 좋았다. 처음부터 cell의 width값, 테이블의 column수, 높이값, 등을 입..

Front-end/React.js 2020.01.21

React 에서 SetInterval 로 state 변화주기

리액트에서 setinterval로 state값을 변경해서 렌더링시 componentdidmount, componentwill~~에도 함수와 감지하는 소스를 만들어주어야함 useEffect내부에 setinterval 을 넣고 두 번째 인자로 빈배열을 넣어주고 return () => { clearInterval} 필요치 않을 때 없애준다. const [adsImg, setadsImg ] = React.useState(false) //상단에 state 변수 하나 만들어 놓음 React.useEffect(() => { //data관련 함수~ let id = setInterval((e) => { setadsImg(adsImg => !adsImg) },8000); return () => { fetching = fa..

Front-end/React.js 2020.01.21

React material UI를 이용해 커스텀 툴팁 만들기

React material UI 의 문서를 읽어보고 툴팁 내부에 html로 삽입이 가능한 tooltip UI를 제작했다. https://material-ui.com/components/tooltips/#customized-tooltips 를 이용했다. clickawaylistener를 이용하면 요소의 바깥쪽 클릭 감지가 매우 깔끔하게 되는 점이 좋아서 구글링+ API문서를 참고하여 제작함 툴팁 요구사항이 내부의 요소가 a태그도 들어가야했고, 모바일에서 마우스오버한다고 길게 클릭하면 깔끔하게 작동하지 않게 되므로 마우스오버가 아닌 버튼으로 제작했고 문서를 참고해 마우스오버 툴팁으로도 제작이 가능하다. 뜯어보면 open 변수 토글로 간단히 제어되는 툴팁임 *** 툴팁사용법 *** title: 툴팁 내부의 텍..

Front-end/React.js 2020.01.21

React material UI 를 이용해 커스텀 드롭다운 만들기

React material UI에서 제공하는 기본적인 UI에서 필요한 기능만 갖고 와서 custom dropdown을 만들어 보았다. 평소에 clickaway listener를 이용하면 요소가 어느 위치에 있던지 외부 클릭 감지가 잘 된다는 것을 깨닫고 구글링 + 필요한 코드 발췌로 만듬! 참고자료 : https://material-ui.com/components/menus/ Menu React component - Material-UI Menus display a list of choices on temporary surfaces. material-ui.com 사용법 buttonText : 보여지는 버튼 내부의 텍스트 dropdownitem : 드롭다운 내부의 아이템 으로 감싼 후 안에서 for문 돌려..

Front-end/React.js 2020.01.21