npm-workspace에 scss를 루트에 설치

[4BFC]

Sass 설치

sass 설치는 루트에 있는 공용 패키지에 설치를 해준다. 설치 방법은 우리가 평소에 알고 있는 방식으로 진행을 하면 된다.

npmrc와 perfix 그리고 환경 변수

가장 많이 알아 보고 의문을 가지며 npm이 동작하는 방식을 이해하는데 시간을 가졌던 부분이다. 우선 nodejs 기반으로 js 언어는 동작을 한다. 그리고 npm은 nodejs를 관리하는 메니저 역할을 한다. nodejs를 설치하고 환경 변수의 path는 보통 C:\Program Files\nodejs\로 지정한다. 반면 npm은 C:\Users\<userName>\AppData\Roaming\npm으로 지정하는데 이곳에 가보면 수많은 node_modules와 패키지들이 들어가 있는 것을 볼 수 있다. 바로 우리가 global로 설치한 패키지들이 담겨 있다. 그렇다면 우리는 .npmrc를 가지고 무엇을 할 수 있을까?

• 환경 변수는 고정된 경로이다.
  • 우리가 만약 global 패키지들을 다양하게 만들어서 관리할 수 있다면 어떨까? 우리가 만약 패키지 충돌로 애먹고 있다면 어떻게 해아할까? 아마 환경 변수의 path를 매번 변경해서 새로 관리할 수 있는 패키지 경로를 변경하고 추가해야할 것이다. 하지만 환경 변수에 직접 들어가서 편집하는 행위는 생각보다 위험하다. 잘 못 삭제 편집 했다간 엉뚱한 경로들을 삭제하거나 수정하는 경우가 발생할 수도 있다. 이를 손쉽고 위험 부담이 덜하게 하기 위한 것이 바로 .npmrc의 역할이다.
• 환경 변수 대신 prefix로 경로를 유동적으로
  • npmrc 설정 중 prefix라는 것이 있다. 이것은 npmrc가 어떤 패키지를 관리하는 디렉토리를 참고할 것인지 지정해주는 역할을 한다. 즉, 직접 환경 변수를 설정하지 않고 prefix에서 필요한 디렉토리를 참고할 수 있게 하는 역할인 것이다.
• npx와 npm
  • npx는 node_modules에 있는 특정 명령어를 찾지 못할 때 사용한다. 예를들면 scss 디렉토리에는 node_modules가 존재하지 않는다. 그렇다보니 scss를 명령어를 찾지 못한다. 그러면 npx를 사용해서 하위디렉토리에서 명령을 수행해야한다. 물론 script를 사용해서 npx를 사용하지 않고 바로 진입할 수도 있지만 환경에 따라 npx를 사용해야할 때가 있다. 따라서 전역 패키지의 실행 파일 경로가 시스템 환경 변수 에 추가되어 있어야 npx 없이 명령을 사용할 수 있다. 따라서 로컬 패키지는 npm scripts나 npx로 실행해야 한다.

Bug

현재 --save-dev로 ts를 루트에 설치하면 ver.1.0.0이 계속해서 설치되는 것을 확인했다. 명확한 원인은 아직 파악하지 못했지만 글로벌에 설치한 ts가 있기 때문에 크게 관여하고 있지 않다. 다른 브런치에서 ts를 설치하면 최신 @Lateset 버전이 잘 설치되는 것을 확인했다.

Summary

환경에 크게 영향을 받는 다는 것을 알았으며 npm이 어떻게 의존하는지 파악할 수 있었던 이슈들이였다. 아직 완전히 내가 생각한 대로 동작하지는 않지만 많은 것을 알 수 있었던 시간이였다.

[4BFC]

🐞Bug Report
--save-dev로 ts를 루트에 설치하면 ver.1.0.0이 계속해서 설치되는 이유는 간단했다. 현재 workspace 하위 디렉토리 이름과 packagName이 typescript, scss, jest와 같은 해당 사용 라이브러리 이름으로 설정이되어 있고 package.json의 version이 1.0.0으로 지정이 되어 있었다. 따라서 install을 수행할 때 해당 패키지를 참조하면서 발생한 문제였던 것이다. 따라 하위 디렉토리 이름과 packagName을 설정할 때 package-와 같이 설정하면 문제가 해결 된다.