[npm] 모듈 자체를 수정하고 싶을 때! npm 모듈 수정방법

Npm 모듈 수정방법

 

모듈 수정의 필요성

 

 

npm install을 사용하면 node_modules 폴더 안에 모듈이 설치됩니다.

 

 

 

 

 

이 때 모듈 속 style이나 기능을 더 보완해서 사용하고 싶을 때가 있어요!

 

위 사진에서 calendar모듈의 스타일을 바꾼다고 가정할게요.

 

보통 npm link를 이용해서 해당 모듈을 로컬과 연결해서 사용하는데 (node_modules 속 파일을 수정해요)

npm install을 통해 업데이트 하면 다시 본래 모듈파일로 업데이트 됩니다.

 

 

 

 

 

예를 들어 위 사진처럼 style.js에 marginBottem을 추가했다고 하면,

 

front에서 새로운 모듈이 필요하면 npm install을 사용하게 되죠.

이렇게 npm install을 통해 업데이트 하는 순간

 

 

 

 

 

위처럼 본래 파일로 돌아가게 됩니다. 즉 본래 파일로 덮어씌여져요.

 

 

 

해결방법

 

- 요약

1) npm module의 git 저장소로 들어간다.

2) 해당 저장소를 fork 해 내 저장소로 가져온다.

3) npm install git+"fork한 저장소 주소" (==> package.json에서 버전이 수정된 것을 확인할 수 있다.)

-------------------------------------------------------------------

4) node_modules 속 해당 모듈을 원하는 대로 수정

5) fork한 저장소로 commit & push

 

 

 

해결방법은 간단해요!

기존 모듈의 저장소를 내 저장소로 fork해서 사용하는 방법입니다.

 

 

 

 

1) npm module의 git 저장소로 들어갑니다.

 

 

 

보통 npm module 이름을 검색하면 공식 git 저장소가 함께 나와요.

 

잘 안나오면 npm module 페이지에서

 

 

라이센스 부분을 클릭하면 보통 깃저장소 연결됩니다.

 

 

2) 해당 저장소를 fork한다.

 

 

 

오른쪽 상단에 Fork가 있어요.

Fork버튼을 통해 내 저장소로 가져옵니다.

 

 

 

 

이렇게 내 저장소로 가져온 모습을 확인할 수 있습니다.

이제 이 저장소는 내가 마음대로 수정하고 반영할 수 있어요!

(보통 fork를 통해 수정하고 pull Request를 통해 공식 모듈에 반영하고 싶은 내용을 요청해요)

 

 

 

 3) npm install git+"fork한 저장소 주소"

• 해당 저장소에서 주소를 clone하고,
• npm install git+"주소"를 실행합니다.

 

 

4) package.json 파일 확인

 

 

 

 

위처럼 본래 공식버전이 기입된 부분이 내 저장소로 바뀌어져 있으면

내 모듈로 변경된 것입니다.

 

 

 

 

 

 

5) 마음껏 수정한다.

 

이제 해당 모듈을 마음껏 수정하고

수정파일을 복사해서 내 저장소로 commit&push하면 됩니다.

npm install을 해도 수정된 내용으로 반영돼요.

 

해당 모듈을 사용해서 새로운 기능을 만들거나 기존 기능을 수정해서 사용하시면 됩니다.

 

 

 

처음엔 내용을 복붙해서 해당 저장소로 push한다는게 번거롭다고 생각했는데요!

이렇게 fork저장소를 이용하면 좋은 점이 한 가지 더 있어요.

괜찮게 수정된 건 pull Request를 통해 공식 모듈에 반영요청할 수 있어요.

간단한 수정이라도 공식모듈에서 필요하다고 판단하면 요청을 받아줍니다.

그럼 나도 공식모듈에 기여한 사람이 되는거죠..!

 

 

 

 

 

저는 로컬 라이브러리만 수정해서 사용하다가

처음으로 npm 모듈을 사용해서 방법을 찾는데 좀 걸렸어요.

저 같은 분 계실 수 있어서 포스팅으로 남깁니다:)

부족한 점은 언제든 말해주세요!