어드민에서 유저 정보와 게시글 정보를 한 개의 CSV 파일로 export하여 다운로드 가능하게 해야했다. react-csv 와 react-query를 활용하여 다운로드 버튼 클릭시 CSV 파일이 지정한 형식대로 생성되어 다운로드하는 방식으로 하였다. react-csv Build CSV files on the fly basing on Array/literal object of data www.npmjs.com DownloadButton.tsx를 아래와 같이 함수형 컴포넌트로 구성하였다. export const DownloadButton = () => { const { data: users } = useQuery('/admin/users', fetcher); // admin api에서 유저 정보를 가져옵니다..
가로로 스크롤이 되는 Elements에서 내부 element를 클릭 시, 클릭한 element를 중앙으로 정렬시키려했다. 해당 로직을 element.scrollIntoView( )함수를 활용하였다. element.scrollIntoView - Web API | MDN Element 인터페이스의 scrollIntoView() 메소드는 scrollIntoView()가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤합니다. developer.mozilla.org // behavior: 전환 애니메이션 // inline: 수평 정렬 onClick={() => element.scrollToView({behavior:"smooth", inline:"center")};
개발/ReactJS 2021. 10. 6. 08:20
어드민에서 유저 정보와 게시글 정보를 한 개의 CSV 파일로 export하여 다운로드 가능하게 해야했다. react-csv 와 react-query를 활용하여 다운로드 버튼 클릭시 CSV 파일이 지정한 형식대로 생성되어 다운로드하는 방식으로 하였다. react-csv Build CSV files on the fly basing on Array/literal object of data www.npmjs.com DownloadButton.tsx를 아래와 같이 함수형 컴포넌트로 구성하였다. export const DownloadButton = () => { const { data: users } = useQuery('/admin/users', fetcher); // admin api에서 유저 정보를 가져옵니다..
개발/ReactJS 2021. 9. 25. 08:20
가로로 스크롤이 되는 Elements에서 내부 element를 클릭 시, 클릭한 element를 중앙으로 정렬시키려했다. 해당 로직을 element.scrollIntoView( )함수를 활용하였다. element.scrollIntoView - Web API | MDN Element 인터페이스의 scrollIntoView() 메소드는 scrollIntoView()가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤합니다. developer.mozilla.org // behavior: 전환 애니메이션 // inline: 수평 정렬 onClick={() => element.scrollToView({behavior:"smooth", inline:"center")};