- React map library - Control various map with one interface - Google, Naver, Kakao map supported now - Typescript supported - Canvas marker supported
npm install @mint-ui/map- React map library
- Control various map with one interface
- Google, Naver, Kakao map supported now
- Typescript supported
- Canvas marker supported
`` bash
yarn add @mint-ui/map
npm install @mint-ui/map
`
` javascript
...
...
import { MapMarkerWrapper, MintMap, Position } from '@mint-ui/map'
const root = ReactDOM.createRoot(
document.getElementById('root')
)
function MyMapComponent(){
return
mapKey={'YOUR_GOOGLE_MAP_KEY'}
mapId='YOUR_GOOGLE_MAP_ID' //Use advanced markers in Google maps
base={{center:new Position(-25.344, 131.031), zoomLevel:12}}
>
{/ Your marker /}
{/ Your marker elements /}
{/ Canvas marker /} / Canvas renderer / // rect // rect outline // font } root.render(( `
renderer={({ context, offset, payload }) => {
context.beginPath();
context.rect(offset[0].x, offset[0].y, 20, 20);
context.fillStyle = 'orange';
context.fill();
context.strokeStyle = 'red';
context.strokeRect(offset[0].x, offset[0].y, 20, 20);
context.fillStyle = 'white';
context.font = '10px caption';
context.fillText(String(payload?.no), offset[0].x + 2, offset[0].y + 14);
context.closePath();
}}
zIndex={2}
data={markers}
/>
Document / Reference Site
https://dev-rsquare.github.io/mint-ui-map-guide
#### 1. NPM 계정 로그인 확인
먼저 NPM에 로그인되어 있는지 확인합니다.
`bash`
npm whoami`
만약 로그인이 안되어 있다면:bash`
npm login
#### 2. 프로젝트 빌드
배포하기 전에 반드시 프로젝트를 빌드해야 합니다.
`bash`
npm run builddist/
이 명령어는 폴더에 배포용 파일들을 생성합니다.
#### 3. 버전 업데이트 (필요한 경우)
새로운 기능이나 버그 수정이 있다면 버전을 올려야 합니다.
- 버그 수정: 1.1.2 → 1.1.3 (patch)`bash`
npm version patch
- 새로운 기능 추가: 1.1.2 → 1.2.0 (minor)`bash`
npm version minor
- 호환성이 깨지는 변경: 1.1.2 → 2.0.0 (major)`bash`
npm version major
#### 4. 배포 전 확인 (권장)
실제 배포하기 전에 어떤 파일들이 배포될지 확인해보세요.
`bash`
npm pack.tgz
이 명령어는 파일을 생성하고, 배포될 파일 목록을 보여줍니다.
#### 5. NPM에 배포
스코프 패키지(@mint-ui/map)는 기본적으로 private이므로 public으로 배포해야 합니다.`bash`
npm publish
#### 6. 배포 완료 확인
배포가 성공했는지 NPM 웹사이트에서 확인하거나:
`bash`
npm view @mint-ui/map
`bash1단계: 로그인 확인
npm whoami
$3
- 패키지명: @mint-ui/map
- 현재 버전: 1.1.2
- 패키지 타입: 스코프 패키지 (@mint-ui 네임스페이스 사용)$3
새로운 기능을 개발 중이거나 테스트가 필요한 경우,
test tag를 사용하여 배포할 수 있습니다.#### 테스트 버전 배포 방법
1. 새로운 브랜치 생성 및 이동
- main 브랜치에서 분리하여 작업
`bash
# 새로운 브랜치 생성 및 체크아웃
git checkout -b 1.2.0-test.1
`2. 개발 중인 버전의 pre-release 버전 생성
- 예: 1.2.0을 개발 중이라면
1.2.0-test.1 형식 사용
`bash
# 버전 변경 (git tag 생성하지 않음)
npm version 1.2.0-test.1 --no-git-tag-version # 빌드
npm run build
# test tag로 배포
npm publish --tag test
`3. 변경사항 커밋 및 푸시
`bash
git add .
git commit -m "chore: release 1.2.0-test.1"
git push origin 1.2.0-test.1
`4. 수정 후 재배포 (같은 브랜치에서)
`bash
# 버전 업데이트
npm version 1.2.0-test.2 --no-git-tag-version # 빌드 및 배포
npm run build
npm publish --tag test
# 커밋 및 푸시
git add .
git commit -m "chore: release 1.2.0-test.2"
git push origin 1.2.0-test.1
` 또는 새로운 테스트 브랜치를 만들 수도 있습니다:
`bash
git checkout -b 1.2.0-test.2
npm version 1.2.0-test.2 --no-git-tag-version
npm run build
npm publish --tag test
git add .
git commit -m "chore: release 1.2.0-test.2"
git push origin 1.2.0-test.2
`5. 테스트 완료 후 정식 배포
`bash
# main 브랜치로 이동
git checkout main # 테스트 브랜치 병합 (또는 PR 생성)
git merge 1.2.0-test.1
# 정식 버전으로 업데이트
npm version 1.2.0
# 빌드 및 배포
npm run build
npm publish
# main에 푸시
git push origin main
git push origin 1.2.0 # version 명령어로 생성된 태그도 푸시
`#### 테스트 버전 설치 방법
`bash
test tag로 설치
npm install @mint-ui/map@test특정 test 버전으로 설치
npm install @mint-ui/map@1.2.0-test.1
`#### 버전 네이밍 규칙
- 현재 버전 기반 테스트:
1.1.2-test.1 (현재 버전 1.1.2를 테스트하는 경우)
- 신규 버전 개발 테스트: 1.2.0-test.1 (새로운 기능으로 1.2.0을 만드는 경우)
- 테스트 버전 증가: 1.2.0-test.2, 1.2.0-test.3 ...#### Tag별 버전 관리
- latest tag (기본): 안정적인 정식 버전 (예:
1.1.2)
- test tag: 테스트 중인 버전 (예: 1.2.0-test.1)npm install @mint-ui/map 명령어는 항상 latest tag의 버전을 설치하므로, test 버전은 명시적으로 @test를 붙여야만 설치됩니다.$3
- 배포하기 전에 반드시 npm run build를 실행해야 합니다
- 버전은 한 번 배포하면 되돌릴 수 없으니 신중하게 결정하세요
- 스코프 패키지는 옵션을 반드시 붙여야 합니다
- test tag로 배포할 때는 --no-git-tag-version` 옵션을 사용하여 git tag 생성을 방지합니다