npm link를 통해 심볼릭 링크 활용하기 (feat. 실시간 테스트)

2022. 4. 20

현재 회사에서 디자인 시스템을 구축 중이다.

간단한 환경 구성을 완료하고 빌드된 프로젝트가 잘 동작하는지 테스트를 하려고 하는데 한 가지 이슈에 막혔다.

바로 배포할 수 없는 환경이었다.

원래 예정으로는 npm에 배포하여 배포된 프로젝트를 사용 예정이었지만, 현재 디자인 시스템을 public하게 풀 수 있는 상황이 아니었다. 그러면 private로 배포를 해야하지만 알아보니 private plan이 따로 존재했다.

현재는 아직 너무 초기단계이기 때문에 초반부터 비용까지 써가며 npm을 활용해 작업하는 것은 너무 이른감이 없지않아 있었다. 그래서 개발 단계에서는 npm의 꿈은 접어두기로 하고 다른 방법을 찾아보기로 했다.

여러 방법을 찾던 중 가장 솔깃했던 방법은 심볼릭 링크를 통한 방법이었다.

심볼릭 링크는 특정 디렉토리를 참조하는 특별한 종류의 파일인데, 쉽게 말하면 바로가기 폴더라고 보면 된다. 바로가기 폴더는 원본 내용물이 수정되면 바로가기로 만든 폴더 내부의 내용물도 동일하게 변경된다.

이 원리를 이용하여 굳이 배포 혹은 로컬에 사용할 코드를 두지 않아도 테스트할 프로젝트를 바로가기 폴더 역할을 하도록 만들어 즉석에서 수정하며 바로 결과물을 볼 수 있는 방법이 바로 심볼릭 링크다. (이하 심링크)

이 심링크를 활용할 수 있도록 npm에서는 npm link 라는 명령어를 통해 손쉽게 심링크를 다룰 수 있도록 도와준다.

심링크 생성

심링크를 만드는 방법은 간단하다.

npm link

위 명령어를 통해 심링크를 만들 수 있는데 만들 심링크는 바로 바로가기 폴더로 만들고 싶은 프로젝트다.

현재 나의 상황으로 따지면 디자인 시스템 프로젝트라고 보면 된다.

만들었다면 이제 사용할 일만 남았다.

심링크 사용은 생성했던 프로젝트명을 지정하여 사용해야한다.

npm link {생성한 심링크 프로젝트명}

이전에 npm link 명령어를 통해 생성했던 프로젝트명을 명시해주면 심링크를 사용하게 된다.

이렇게 되면 두 프로젝트간에 심링크가 연결된 것으로 이제 로컬에서 실시간으로 수정된 사항이 바로 반영되며 테스트를 할 수 있는 환경이 마련된다.

심링크를 이상없이 가져왔다면 이제 직접 실시간으로 수정시 잘 반영되는지 테스트를 해봐야한다.

수정을 하고 프로젝트를 build를 하면 심링크를 사용한 프로젝트에 바로 반영이 되는 모습을 볼 수 있다.

이처럼 다른 프로젝트를 바로가기 폴더 형태처럼 사용하여 즉각적으로 테스트 하는 부분에서 굉장히 이점을 볼 수 있다.

테스트가 끝나고 바로가기를 제거해야하는 상황이 온다면 심링크를 제거해주어야한다.

제거는 앞서 진행했던 생성과 사용 이 두가지의 경우 모두를 제거해주어야 심링크 관련된 모든 설정이 제거된다.

사용한 심링크를 먼저 제거해준다.

// 심링크를 사용한 프로젝트
npm uninstall --no-save {생성한 심링크 프로젝트명}

사용했던 심링크를 제거했다면 생성했던 심링크를 제거하면 끝!

// 심링크를 생성한 프로젝트
npm uninstall {생성한 심링크 프로젝트명}

심링크를 통해 배포하지 않고도 로컬에서 실시간 테스트를 하는 방법을 알아보았다.

실제로 사용하면서 나름의 번거로움이 있지만 배포하는 번거로움 보다는 훨씬 나은 방법이어서 초기 개발 단계에서 사용하기 굉장히 편리한 기능이라고 생각된다.