FrontEnd/React 5

[React] 웹 에서 Toast를 띄워보기 (react-toastify)

안드로이드는 개발환경에서 Toast 라는 작은 메세지 박스를 자체적으로 구현이 가능합니다. 하지만 웹 어플리케이션에서는 custom 을 해주거나 별도로 라이브러리를 사용해야합니다. 사용하려면? react에서 지원되는 react-toastify라는 라이브러리를 통해 쉽게 toast 메세지 박스를 구현가능합니다. react-toastify 사용법 이 글은 react(nextjs) 를 기반으로 작성되었습니다. 공식문서 https://www.npmjs.com/package/react-toastify react-toastify React notification made easy. Latest version: 10.0.4, last published: 24 days ago. Start using react-toas..

FrontEnd/React 2024.02.14

[React] React-Query 의 status 종류 정리

fresh - 기본적으로 서버에서 데이터를 불러왔을때 갓 가져온 데이터 react-query는 기본적으로 모든 값이 fresh가 아니다 라고 정의한다. 언제까지 fresh인지 개발자가 설정해야함 stale - 기회가 되면 항상 데이터를 새로 가져와라. RQProvider에 있는 refetch~~ 를 통해서 다시 받아온다. refetchOnWindowFocus - 다른 탭 갔다가 다시 돌아왔을때 t/f refetchOmMount - 페이지를 이동했다던가 컴포넌트가 다시 리액트에 올라갈때 t/f refetchOnReconnect - 인터넷 연결이 끊겼다가 다시 시작될 때 t/f retry - 실패시에 몇번정도 더 시도할지 useQuery에서 따로 부여도 가능함 staleTime 옵션으로 fresh의 기한을 ..

FrontEnd/React 2023.12.20

[React] useState에 ReactComponent가 들어있을때 어떤 Type을 부여하면 될까?

기존에 이렇게 설정된 react state의 타입은 any배열로 줬기때문에 컴파일 오류를 일으켰을때 문제가 생길 수 있다. 실제로 set 함수를 통해 직접적인 state에 변화를 주지 않아서 굳이 useState를 사용 할 필요가 없지만 추후 유지보수시에 리스트가 추가될 것을 염려하여 State로 관리 하였고, 또한 후에 서버에서 받아온 값으로 리스트업 될 수도 있을것이라는 생각이 들어서 리스트로 만들었다. 이런식으로 any배열 대신 ReactElement 배열로 타입을 주어서 다른 타입 int,string 등등 컴포넌트가 아닌 타입이 위치했을때 컴파일 에러를 만든다 - 컴파일 에러는 좋은 에러이다, 개발자가 조기에 에러를 파악하고 고칠 수 있기 때문

FrontEnd/React 2023.12.07

[React] React 앱에서 firebase DB 조회 하기 CRUD

제작중인 개인 프로젝트 앱에서 커뮤니티 페이지가 필요하여 DB 구성을 해야되는데 직접 서버만들어서 배포할 만큼의 사이즈가 아니라고 판단이 되어서 db를 firebase로 사용하기로 했다. Firebase의 장점과 단점 이 글을 요약 설명하자면, 결론적으로 엄청나게 빠르게 DB를 구축할 수 있으며, 실시간으로 작동한다. 우리가 서버를 만들고 배포하는 것이 쉽지많은 않다 클라우드 서버를 만들어서 서버를 배포한다고 가정했을때, 서버를 구성하고 DB를 구축하고 (이미 여기서 시간 너무 듬) 이후에 클라우드 서버 AWS 혹은 NCP(Naver Cloud Platform) 등등.. 여러 클라우드 서비스를 사용했을때 들어가는 시간이 너무 많이 들어간다.. 하지만 이번에 firebase 만들어 보면서 너무 간단하고 쉽..

FrontEnd/React 2023.10.24

SRT 자동 예매 프로그램 만들기 - 기술선점 ( React + Flask )

SRT 자동 예매 프로그램 저는 평소 지방에 살면서 서울에 올라올 일이 종종 있었습니다. 서울에 오려면 항상 기차를 타고오는데요 그런데 저는 P의 성향을 가지고있는 사람이라 기차를 미리 예매안한적이 몇번 있었습니다. 그럴때마다 기차 예매 사이트 및 어플에는 항상 매진이더라구요,,😢 이러한 불편함을 해소하고자 저는 매진표를 예매하던법을 찾던중 Python으로 예매를 할 수 있도록 누군가가 오픈소스로 풀어놨더라구요 그래서 묘안을 생각해냅니다. 어쨌든 오픈소스는 python환경에서 동작한다는 것을 알게되었습니다. https://github.com/ryanking13/SRT 오픈소스 링크 이런식으로 지원을 합니다. 제가 python cli로 실행해본 결과 가능했습니다. 이것을 응용하여 웹에서 간단하게 input..

FrontEnd/React 2023.10.10