어제 또 하루 건너뛴거에 대해서는 다시는 이런 일이 없도록... 노력하겠습니다. 오늘은 리액트 컴포넌트를 별도의 라이브러리로 만들어보는 방법에 대해 이야기 해보도록 하겠습니다.
사실 리액트를 사용하다보면 라이브러리를 참 많이 사용해볼 수 있었을겁니다. 지금 생각나는 것만 해도 페이지네이션 관련 라이브러리, toast 관련 라이브러리, 드래그앤드롭 라이브러리 등등... 근데 우리도 이런 라이브러리를 만들 수 있습니다.
오늘은 간단하게 별로 기능은 없지만 어떻게 만드는지에 대해 알아보려고 합니다.
사전 조사
만들기 전에 다른 사람들이 어떻게 만들었는지를 보는 것이 좋겠죠? 그래서 저는 react-epub-viewer 라는 라이브러리를 참고했습니다. 제가 요즘 뷰어 만드는 일을 하고 있기 때문에 해당 라이브러리가 눈에 띄었고 또 한국사람이더라고요.ㅎㅎ 아 그리고 쉽게 따라할 수 있어서 참고했습니다.
✨ 참고 : https://www.npmjs.com/package/react-epub-viewer
라이브러리 만들기
구조 정의하기
일단 저는 아래와 같이 만들었는데요. 구조 자체는 심플합니다.
- modules 폴더 : 이 폴더 안에다가 우리가 만들 컴포넌트를 정의해주면 됩니다. 저는 PDFViewer, PDFAuidoViewer라는 가상의 컴포넌트를 만들었어요. 기능은 아직 없습니다.
- types 폴더 : 이 폴더 안에는 타입에 관한 정의를 해줍니다. 그래야 나중에 사용할때 타입스크립트 정의를 볼 수 있을테니까요.
babel 설정하기
경로 설정이나 구형 브라우저 지원 등을 위해 babel로 컴파일 해준다음에 배포하도록 합니다.
{
"presets": [
"@babel/preset-env",
[
"@babel/preset-react",
{
"runtime": "automatic"
}
],
"@babel/preset-typescript"
],
"plugins": [
[
"module-resolver",
{
"root": "./src",
"extensions": [".ts", ".tsx"]
}
]
],
"ignore": [
"src/componets",
"src/types",
"src/index.tsx",
"src/react-app-env.d.ts",
"src/setupTests.ts"
]
}- module-resolver : 이걸 경로 설정을 안해주니까 바벨 돌렸을때 제대로 경로 설정이 안되는 문제가 발생합니다. 이게 typescirpt에서 baseUrl?로 경로 설정을 해줬더니 바벨로 컴파일할때 문제가 되는 모양입니다.
- "@babel/preset-react"에서 "runtime": "automatic" 안해주니까 React is not definde 에러가 납니다.
🎶 이런건 사실 그냥 처음부터 따라해보면 알지 못하고 넘어갈 수 있었던 사실입니다. 따라서 따라하실때는 한번 없이 해보는 것도 나쁘지 않을거 같습니다.
package.json 설정
라이브러리에 대한 정보를 적어주기 위해 package.json을 수정해줍니다.
{
"name": "react-pdf-viewer",
"version": "0.0.3",
"private": false,
"author": {
"name": "ckstn0777",
"email": "ckstn077@naver.com"
},
"description": "PDF (Audio) viewer for React.js by PDF.js",
"license": "MIT",
"keywords": [
"pdf",
"audio",
"viewer",
"React"
],
"main": "lib/modules/index.js",
"files": [
"lib",
"README.md"
],
"devDependencies": {
"@babel/cli": "^7.16.0",
"@babel/preset-env": "^7.16.4",
"@babel/preset-react": "^7.16.0",
"@babel/preset-typescript": "^7.16.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"babel-plugin-module-resolver": "^4.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"peerDependencies": {
"react": ">=17.0.1",
"react-dom": ">=17.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"compile": "babel src --out-dir lib --extensions .ts,.tsx"
},
...
"types": "lib/types/index.d.ts"
}
나머지는 쉽게 이해할 수 있을거라 판단하고 중요한 설정 몇가지를 정리해봤습니다.
- main : 바벨로 컴파일할때 생성되는 폴더안에 처음 경로입니다.
- files : 배포할 폴더 및 파일을 적어줍니다.
- types : 타입을 지원하기 위한 경로를 적어줍니다.
아, 그리고 바벨 컴파일을 위해 scripts안에 아래 명령어를 정의해주세요. 그리고 나서 실행해주세요. lib 폴더가 잘 생성되었으면 성공입니다.
"compile": "babel src --out-dir lib --extensions .ts,.tsx"yalc를 이용한 라이브러리 배포하기
yalc 란?
사실 npm에 그냥 배포하는 방법은 찾아보면 다 나옵니다. 근데 저 같은 경우는 로컬에서 배포해서 제 컴퓨터에서만 사용하고 싶습니다. (하하하...)
이럴때 yalc를 이용하면 제 요구사항에 맞게 로컬에서만 사용할 수 있더군요.
yalc 사용방법
사용법 또한 간단합니다. 먼저 글로벌 설치를 해줍니다.
yarn global add yalc그런 다음 위에서 만든 패키지(프로젝트) 내에서 yalc publish를 해줍니다. 그리고 나서 다른 프로젝트에서 yalc add 패키지명 을 해주면 패키지를 다운받을 수 있습니다. 참 쉽죠?
참고자료
