본문 바로가기

Library-Framework/React23

[React] Google Map default zoom 바로 안 먹힘 문제 상황 처음 페이지가 렌더될 때는 내가 명시해 준 zoom level을 무시하고 최대 줌이 땡겨졌다. 한 번 더 렌더를 해주면 그때서야 명시해 준 알맞은 zoom level로 지도가 로딩되었다. 문제가 있던 코드 import React from 'react' import { GoogleMap, useJsApiLoader } from '@react-google-maps/api'; const DrawMap = () => { // API 키 const { isLoaded } = useJsApiLoader({ id: "google-map-script", googleMapsApiKey: process.env.REACT_APP_GOOGLEMAP_API_KEY, }); // 지도 크기 const container.. 2023. 4. 3.
[React] React에서 Google Map API 사용하기 & Polygon 그리기 구현해야 했던 기능 사용자로부터 입력받은 4개의 지점 값에 해당하는 지역의 위성 지도를 보여주고, 그 경계를 표시해주기 Google Maps API 사용하기 Google Maps API를 사용하면 손쉽게 지도를 불러올 수 있다. 한 달에 28,500번 정도는 무료로 호출 가능하다. https://developers.google.com/maps?hl=ko Google Maps Platform | Google Developers Google Maps Platform 설명 developers.google.com 위 사이트에 들어가서 시작하기 버튼을 누른 후, 가입하여 API 키를 받으면 된다. Docs에서 여러 가지 API에 대한 정보 및 사용 방법들을 확인할 수 있다. React Google Maps 라이브.. 2023. 2. 19.
[React] 그래프 라이브러리 쓰기 (ApexChart) 사용한 라이브러리 https://apexcharts.com/docs/react-charts/ React-ApexChart - A React Chart wrapper for ApexCharts.js Create React Charts using a React Chart component for ApexCharts. Build beautiful and interactive visualizations in your react applications. apexcharts.com https://apexcharts.com/javascript-chart-demos/column-charts/column-with-markers/ JavaScript Column Chart with Markers – ApexCharts.j.. 2023. 2. 19.
[React] MVC 아키텍처, 리액트의 특징 2023. 1. 5.