Library-Framework31 [React] 폰트 파일 추가하기 1. otf 파일 다운받기 2. woff 또는 eot 파일로 변환하기 다른 브라우저에서도 나오게 하려면 이 과정이 필요하다고 한다. https://anyconv.com/ko/ttf-to-eot-byeonhwangi/ 온라인에서 TTF를 EOT로 변환하십시오 - AnyConv AnyConv는 5 성급 TTF EOT 변환기입니다 ⭐ 온라인에서 ttf를 eot로 몇 초 안에 변환하십시오 👍 소프트웨어 설치가 필요하지 않습니다 👍 무료로 👍 완전히 안전합니다. TTF를 EOT로 쉽게 변경할 수 anyconv.com 3. src 폴더 내에 font 폴더 만들기 4. font 폴더 내에 woff 파일 넣기 5. font 폴더 내에 font.css 파일 만들기 @font-face { font-family: "Noto.. 2023. 4. 8. [React] Google Map Polygon 바로 띄우기 문제 상황 처음 지도가 불러와질 때 Polygon이 뜨지 않는다. 문제 원인 내가 사용 중인 react-google-map api의 functional component는 react strict and/or react@17+에서는 작동하지 않는다고 한다. https://www.npmjs.com/package/@react-google-maps/api 해결 방법 1. react strict 모드 제거하기 2. react 다운그레이드 하기 둘 중 나는 1번 방법을 선택하였다. (다운그레이드하기 귀찮았다) 참고 문헌 https://stackoverflow.com/questions/72229607/markers-not-rendering-using-react-google-maps-api/73769832#737698.. 2023. 4. 3. [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. 이전 1 2 3 4 5 6 ··· 8 다음