습관적 기록

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..

1. 박스 모양으로 HTML 문서 구조 분석하기 User Story #1, #2, #3, #4, #6는 박스를 확인해주시기 바랍니다. 2. HTML 세부 사항 설명하기 User Story #5: The projects section should contain at least one link to a project. User Story #7: The navbar should contain at least one link that I can click on to navigate to different sections of the page. About ... Hey I am Mimic a web developer a element의 href에 #id를 넣으면 해당 위치로 바로 이동하게 됩니다. 이로서 nav와..

1. 박스 모양으로 HTML 문서 구조 분석하기 User Story #1, #2, #3, #5, #7, #8, #9, #11, #12 는 박스를 확인해주시기 바랍니다. User Story #6: The .main-section elements should contain at least 5 code elements total (not each). 전체를 스크롤링하기에는 너무 양이 커서 이 부분은 생략했습니다. code tag를 이 안에 5개 이상 만들기만 하면 됩니다. 2. HTML 세부 사항 설명하기 User Story #4: Each section element with the class of main-section should also have an id that corresponds with the..

아래에 있는 2개의 글의 내용을 따라하지 않고 한 번에 할 수 있도록 실제 파일 값을 알려드립니다. 그대로 따라하시면 됩니다. https://andrebnassis.medium.com/setting-eslint-on-a-react-typescript-project-2021-1190a43ffba https://tailwindcss.com/docs/guides/create-react-app create-react-app을 typescript template으로 생성 npx create-react-app "your app name" --template typescript package.json 파일 변경 name을 만든 app 이름으로 변경하셔야 합니다. { "name": "Your app name", "ve..

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

이번 프로젝트의 핵심은 반응형 디자인입니다. 보여주는 화면의 크기에 따라서 레이아웃 구성을 변경해야 합니다. 코드펜을 이용하시는 경우에 간단히 해보시는 방법은 다음과 같습니다. (이용하지 않는 경우에는 2번 부터 하시면 됩니다, 단축키는 window/linux 기준입니다) Open Live View in a New Window(단축키 Ctrl + Shift + 0) 크롬 개발자 도구에 들어간다(단축키 F12) Toggle Device Tool Bar(단축키 Ctrl + Shift + M) 여기서 다양한 width로 변경을 하시면 됩니다. Bootstrap의 경우 5개의 break point를 Tailwindcss도 동일하게 5개의 break point를 사용하고 있습니다. break point란 이걸 기..

plantuml을 사용하는 방법은 3가지로 나누어 볼 수 있습니다. 브라우저를 통해 공홈 편집기에 접속해서 plantuml 사용하기 local에서 편집기(vscode)나 ide(intellij 등의 Jetbrain제품: pycharm, webstorm, android studio...)를 사용해서 server rendering으로 plantuml 사용하기 local에서 편집기나 ide를 사용해서 local rendering으로 plantuml 사용하기 먼저 server rendering은 http://www.plantuml.com/plantuml 으로 plantuml code를 보내서 보이는 형태로 컴파일 후 돌려 받아서 로컬 장치에서 보는 것입니다. Plantuml 측이 봐도 되는 자료라면 이렇게 하셔..

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..