Library-Framework/Next.js3 [Next.js] Google Maps API로 지도에 원 그리기 (당근마켓 내 동네 설정 따라해보기) 당근마켓의 내 동네 설정 기능을 보면, 하단 바를 움직일 때마다 지도에 표시된 영역의 넓이와 지도 스케일이 변하는 것을 볼 수 있다. 당근마켓처럼 지역 특성에 맞추어 자세한 다각형으로 표현하는 것은 무리고, 지역별로 중심 좌표를 정하고, 이를 중심으로 한 원을 그리는 것을 한 번 해보기로 했다. 0. Google Maps API 키 받기 가입해서 키를 발급 받으면 된다. https://developers.google.com/maps?hl=ko Google Maps Platform | Google for Developers Google Maps Platform 설명 developers.google.com 1. 설치하기 Google Maps API Docs는 순수 javascript로 설명을 해주고 있기 때.. 2023. 6. 28. [Next.js] 번역 기능 (다국어) 적용하기 (i18next) 한국에서 운영 중인 서비스를 향후 외국까지 확장한다면, 해당 국가의 언어 적용이 필요하다. 그럴때마다 모든 페이지의 텍스트를 일일히 바꾸는 것은 매우 비효율적이므로 next-i8next라는 모듈을 사용하기로 했다. 소스코드의 깃허브 리드미에 문서가 상세히 작성되어 있어 이를 참고하며 진행했다. https://github.com/i18next/next-i18next GitHub - i18next/next-i18next: The easiest way to translate your NextJs apps. The easiest way to translate your NextJs apps. Contribute to i18next/next-i18next development by creating an accoun.. 2023. 5. 16. [Next.js] 프로젝트 생성하기 1. 프로젝트 생성하기 - 타입스크립트 X npx create-next-app@latest # or yarn create next-app # or pnpm create next-app - 타입스크립트 O npx create-next-app@latest --typescript # or yarn create next-app --typescript # or pnpm create next-app --typescript 2. next, react, react-dom 설치하기 npm install next react react-dom # or yarn add next react react-dom # or pnpm add next react react-dom 3. npm 설치하기 - 안하면 script 실행 시, ".. 2022. 12. 7. 이전 1 다음
