REACT34 React Suspense Suspense란?React의 내장 컴포넌트로, 비동기 작업 중에 대체 UI를 표시하는 데 사용된다. 주로 데이터 패칭과 같은 비동기 작업을 수행하는 컴포넌트를 감싸서 데이터가 로드되는 동안 사용자에게 로딩 상태를 보여줄 수 있다. 주요 기능:로딩 상태 관리: 비동기 작업이 완료될 때까지 대체 UI(fallback)를 보여줄 수 있다.비동기 컴포넌트 렌더링: 컴포넌트가 필요한 데이터를 모두 로드한 후에만 해당 컴포넌트를 렌더링한다Loading...}> {/* 데이터 로딩 중에 표시할 UI */} {/* 비동기 작업을 수행하는 컴포넌트 */} 2024. 7. 23. React 부트페이 PG 카드 결제 기능 무료 결제 연동 API 서비스개발자를 위한 PG 연동 서비스로, 빠른 결제 연동, 더 높은 결제성공율, 무료 통계 서비스를 제공합니다.www.bootpay.co.kr PG결제란? 결제 요청을 카드사, 은행과 같은 결제 기관으로 보내서 승인을 받고, 그 결과를 상점에게 전달하는 거래 기능을 말한다. 위에 기능을 통해 직접 결제 기관에 계약 또는 승인을 받지 않고 결제 기능을 구현할 수 있습니다. 저는 그 중에서 부트페이를 사용한 결제 기능을 구현해보았습니다. react의 경우 부트페이 SDK가 있어 편하게 개발하실 수 있습니다.부트페이 개발 문서https://docs.bootpay.co.kr/?front=web&backend=nodejs 코드 및 설명1.CDN에서 스크립트 추가2. 부트페이 초기화exp.. 2024. 6. 21. React Open AI 활용 1. React 파일에 Node.js 환경을 세팅해준다. 아래 파일에 보면 node.js 를 활성화할 수 있는 작동 방법이 들어있다. 2023.10.27 - [코딩/React] - React Google Map으로 지역간 거리 및 이동 시간 계산하기 React Google Map으로 지역간 거리 및 이동 시간 계산하기 1. 구글 맵 API key 받아오기 모든 api가 거의 그러하듯 인증키를 받아와야한다. 아래 링크에 접속하여 API key를 발급받으면 된다. https://console.cloud.google.com/google/maps-apis/start?utm_source=Docs_GS_Button&ref=htt quddkflty.tistory.com 2. Node.js에 Server.js 파일 생.. 2023. 12. 29. React Firebase 웹 호스팅 1. Firebase 공식 페이지 프로젝트 생성 및 연동 2023.12.28 - [코딩/React] - React firebase 연동 React firebase 연동 1. Firebase 프로젝트 생성 구글 어널리틱스 연동의 경우 사용자의 의지에 따라 설정하시면 됩니다. 2. Firebase 웹 key 발급 웹 표시를 클릭 후 앱 등록과 hosting을 원하실 경우 클릭한다. 3. react 폴더에 quddkflty.tistory.com 2. Firebase 호스팅 firebase 연동 후 호시팅 배포를 아래와 같이 설정하면 좋은데, 명령어 순서를 알려드리도록 하겠습니다. - firebase login 후 아래 명령어를 입력하게 되면 아래 사진과 같은 화면이 뜨게 될 것이다. 아래 사진 순서와 같이 입.. 2023. 12. 28. 이전 1 2 3 4 5 ··· 9 다음
