들어가며
최근 프로젝트에서 구글 맵을 사용하였습니다.
다른 프로젝트에서도 구글 맵을 사용할 일이 있었습니다.
기존 코드를 복사 붙여넣기 해도 되지만,
구글 맵과 관련된 프로젝트를 시작할 때
npm 으로 설치해서 빠르게 시작하면 좋을 것 같다고 생각하였습니다.
구글 맵을 프레임워크에 쉽게 붙여 쓸 수 있는 다양한 라이브러리가 있지만,
내게 딱 필요한 기능만 제작하여 npm 으로 배포해두고
언제든 가져와 쓸 수 있으면 좋을 것 같아서 시도하였습니다.
프로젝트 생성
$ npx create-react-app react-google-map-test --template typescript
프로젝트 생성부터 오류가 발생하였습니다.
react 19 와 test 라이브러리가 충돌이 난 것 같은데,
우선 template 를 생략하고 다시 생성해보았습니다.
$ npx create-react-app react-google-map-test여전히 같은 오류가 나서,
우선 생성된 프로젝트에 들어가서 npm start 로 실행해보았습니다.
web-vitals 이 없다는 오류가 나서 npm i web-vitals 를 설치해준 뒤 다시 실행하니,
드디어 정상적으로 실행되었습니다.
프로젝트 생성부터 쉽지 않았습니다.
타입스크립트 세팅
타입스크립트를 지원하는 라이브러리를 제작하기 위해
타입스크립트를 사용하기 위해 필요한 모듈들을 설치합니다.
$ npm install --save typescript @types/react @types/react-dom다음 명령어를 통하여 tsconfig.json 파일을 생성합니다.
$ npx tsc --init초기 tsconfig.json 파일은 모든 옵션이 나열되어 있어서,
기본적인 옵션과,
npm 배포를 위한 몇가지 옵션을 추가한 버전으로 수정합니다.
npm 배포를 위한 몇가지 옵션들을 소개합니다.
noEmit
"noEmit": false출력을 내보내지 않는다는 설정이며,
npm 배포를 위해 파일들이 출력으로 나와야 하므로 false 로 설정합니다.
declaration
"declaration": true.d.ts 파일을 생성할 것인지에 대한 옵션이며,
라이브러리가 타입스크립트를 지원하기 위해서 true 로 설정합니다.
outDir
"outDir": "./dist"tsc 명령어로 컴파일된 파일들을 어느 디렉토리에 위치시킬지에 대한 옵션이며,
dist 로 지정합니다.
완성된 tsconfig.json 옵션
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"noEmit": false,
"declaration": true,
"outDir": "./dist"
},
"include": ["src"]
}
package.json 세팅
라이브러리를 설치하거나, scripts 를 추가하는 정도로 사용해왔던 package.json 파일이
npm 배포 시에는 중요한 정보들을 담는 역할이 됩니다.
몇가지 중요한 설정들을 소개하겠습니다.
name
"name": "react-google-map-test",npm 배포될 패키지 명입니다.
private
"private": false,npm 에 배포하기 위해 false 로 설정합니다.
main
"main": "dist/index.js",라이브러리의 진입점입니다.
types
"types": "dist/index.d.ts"타입스크립트에서 타입 추론을 도와주는 진입점입니다.
browser
"browser": "./browser/specific/main.js"브라우저에서 구동되는 라이브러리를 제공하기 위해 설정합니다.
scripts.prepare
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"prepare": "rm -rf dist && mkdir dist && tsc"
},npm 이 배포되기 전에 실행되는 명령어입니다.
dist 폴더를 삭제,
dist 폴더를 생성,
tsc 로 타입스크립트 컴파일을 실행하라는 명령어입니다.
완성된 package.json 옵션
{
"name": "react-google-map-test",
"version": "0.1.0",
"private": false,
"main": "dist/index.js",
"types": "dist/index.d.ts",
"browser": "./browser/specific/main.js",
"dependencies": {
"@types/react": "^19.0.2",
"@types/react-dom": "^19.0.2",
"cra-template": "1.2.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-scripts": "5.0.1",
"typescript": "^5.7.2",
"web-vitals": "^4.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"prepare": "rm -rf dist && mkdir dist && tsc"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
npm 로그인
npm login명령어를 통하여 npm 에 로그인합니다.
npm 배포
npm publish명령어를 통하여 npm 에 배포합니다.
npm 배포 완료
npm 에 배포가 된 것을 확인할 수 있습니다.
현재는 npm 으로 올라간 것만 확인되었고,
어떤 컴포넌트를,
어떤 진입점으로 배포할 것인지,
어떻게 설치해서 사용할 것인지에 대한 내용이 준비되지 않았습니다.
2부에서 계속 작성해보려고 합니다.
참고 자료
리액트 컴포넌트 NPM 배포하기 (with TypeScript)
