나도 오픈소스 개발자? (NPM 배포기)
안녕하세요. 프론트엔드 팀의 배성현 입니다.
이번 프로젝트에서 '백카사전'이라는 기획이 있어 이 부분을 어떻게 라이브러리화 했는지 과정에 대해 적어보려고 합니다.
백카사전은 특정 단어를 필터링하며 클릭 시 부가 설명이 나오는 기능입니다.
배포에 들어가기에 앞서 백카사전을 어떻게 구현했는지 보여드리겠습니다.
고민했던 부분은 우리 프로젝트 뿐 아니라 다른 유저들도 사용하기 위해선 어떻게 구현할까?? 입니다. 현재 저희 프로젝트에서는 react,ts,tailwind css를 사용하여 구현하고 있습니다. 모든사람들이 이러한 환경세팅을 가지지 않을거라고 생각했기에 의존성을 낮추어 css는 기본 css를 사용하였습니다. ts의 경우 배포 시 js로 translate할 예정입니다. (현재는 적용하다 Invalid hook 문제로 해결 중).
로직의 경우에는 글자들을 컴포넌트로 감싸고 개발자로부터 사전 객체를 받아 word 값들을 태그로 감싸고 있습니다. React 에서는 innerHtml를 넣어 변경시켜주는 방식을 구현하고 있습니다.(공식문서를 보면 innerHTML 사용 시 XSS 공격에 주의해야합니다.)
css 부분에서는 현재 fixed 오른쪽 위로 글자 아래에 Modal이 등장 합니다.
기본적으로 NPM에 배포를 하기위해서는 로그인이 필요합니다!
{
"name": "react-dictionary",
"version": "1.1.10",
"type": "module",
"main": "lib/index.ts",
"author": "bae-sh <hyeon1293@gmail.com>",
"license": "MIT",
"devDependencies": {
"@types/node": "^20.4.9",
"@types/react": "^18.2.19",
"typescript": "^4.9.5"
},
"peerDependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"repository": {
"type": "git",
"url": "https://github.com/bae-sh/react-dictionary"
},
"keywords": [
"dictionary",
"highlight",
"description",
"parser"
]
}
Npm은 package.json 파일을 기반으로 배포가 진행됩니다.
여기서 중요하게 볼 부분은 version과 dependencies 입니다.
version의 경우 major.minor.patch 로 구성되어 있습니다.
- major의 경우 호환성이 문제가 발생할 수 있는 대규모 버전
- minor의 경우 호환성에 문제가 발생하지 않지만 규모가 있는 버전
- patch의 경우 사소한 문제 및 버그 수정 등...
라이브러리에는 의존성이 존재할 수 있습니다. 현재 이 라이브러리에는 type, react, react-dom의 의존성이 존재하는데요. 이는 이 라이브러리를 사용하는데 이러한 라이브리러리가 필요합니다! 를 의미합니다.
종류에는 dependencies, peerDependencies, devDependencies가 있습니다.
- dependencie는 라이브러리가 실행될 때 필요한 패키지들을 가리킵니다.
- peerDependencies는 라이브러리가 실행될떄 프로젝트의 패키지 버전을 사용하되, peerDependencies 에 적혀있는 버전이면 상관이 없습니다.
- devDependencies는 개발시에만 설치되는 패키지를 가리킵니다.
위와 같이 작성을 한뒤 터미널에서 npm pulbish 명령어를 사용하면 다음과 같이 배포가 된 것을 확인할 수 있습니다.
