습관적 기록

React를 프론트엔드로, Firebase를 백엔드로 사용(정확히는 firestore)하는 경우 무한 스크롤(Infinite Scroll)을 하는 방식에 대해 설명하겠습니다. 화면 최하단으로 스크롤을 내리는 이벤트 리스너 스크롤이 화면 최하단에 닿는 것은 react-bottom-scroll-listener library를 통해 간편하게 할 수 있습니다. (자세한 사용법은 링크를 타고 들어가 확인하시길 바랍니다) useBottomScrollListener(callback)사용법이 간단합니다. npm install react-bottom-scroll-listner 를 하신 후에 위와 같이 callback 을 전달해주면 됩니다. callback으로 page를 채울 대상을 받아오면 됩니다. console.log..

react-csv는 주어진 데이터를 csv 파일로 만들어주는 라이브러리입니다.(https://www.npmjs.com/package/react-csv) array의 array 형태나 object의 array 형태의 데이터 등을 손쉽게 파일로 만들어서 다운로드 받을 수 있게 해줍니다. 그러나, 이 라이브러리의 단점이 있습니다. 데이터가 생성되는 시점에 데이터를 가지고 다운로드 하게 된다는 점입니다. Download me; 이런 방식으로 컴포넌트를 만들고 csvData로 데이터를 집어 넣습니다. 위의 npm 링크를 들어가보면, import { CSVLink } from "react-csv"; { axios.post("/spy/user").then(() => { done(); // REQUIRED to inv..

이 글은 벨로퍼트와 함께하는 모던 리액트 9. 여러개의 input 상태 관리하기 를 ant design 버전으로 변경시킨 것입니다. 추가적으로 타입스크립트도 함께 적용되어 있는데 타입 스크립트를 사용하지 않는다면 그 부분은 없다고 생각하고 보시면 됩니다. ant design은 form에 자체 component를 사용하고 event도 다른 걸 쓰기 때문에 9. 여러개의 input 상태 관리하기 의 방식을 그대로 사용할 수가 없습니다. 그래서 저도 처음에는 각각의 input state를 따로 관리했었다가 고민 끝에 이렇게 바꾸었습니다. 예시는 세팅값을 변경하는 상황이라 보시면 됩니다. 코인 거래에 사용되는 심볼들을 변경하거나 한번에 보여지는 테이블의 크기를 정하거나, 거래 전에 alert를 보낼지 말지 결정..

useContext hook의 return 값은 useState와는 달리 context로 등록된 value 하나뿐입니다. 따라서 Provider에게 전달해준 value 자체를 수정할 방법은 없습니다. 그래서 리액트 공식 문서를 찾아보면 하위 컴포넌트에서 상위 컴포넌트에서 정의한 context를 수정하는 예시를 보여주고 있는데 예시의 핵심은 value안에 state와 setState를 모두 전달하는 것입니다. Context 선언 하는 방법 export const ThemeContext = React.createContext({ theme: themes.dark, toggleTheme: () => {}, }); 상위 컴포넌트가 클래스형일 때 context를 제공하는 방식 class App extends Re..

npx create-next-app my-test-app --ts위의 명령문을 이용하여 타입스크립트로 next.js 프로젝트를 만들게 되면 프로젝트 내에 jest와 react testing library를 사용할 환경이 마련되어 있지 않습니다. (create-react-app을 사용하는 경우 다 설정되어 있지만..) 그래서 따로 설정을 해주어야 하는데 언어를 TypeScript로 하셨다면 조금 더 복잡한 과정을 거치게 됩니다. 필수적인 내용만으로 최대한 간결하게 정리하였습니다. jest의 다양한 기능을 활용하시고자 한다면 jest 공식 홈페이지를 참조하시길 바랍니다. 아, 타입스크립트를 언어로 선택했으나, root위치에 *.config.ts 파일로 놓으면 컴파일 옵션을 변경해주어야 하여 부득이하게 *.c..