npm link 에 대한 개념은 이전 글에서 정리하여 생략하였습니다!
2023.10.17 - [Backend/Etc : Setting | Git] - [Setting] 내부 서버로부터 파일 clone | npm link | build
문제 인식
- 1번째 작업 : GUI의 develop 브랜치(root)와 VM의 feature/tfjs-handpose 브랜치에서는 빌드 성공 + 내가 작성한 코드가 반영 잘 됨
- 그러나 2번째 작업 : face-detection을 적용하기 위한 feature/tfjs-face 브랜치에서 작업 후, 다시 feature/tfjs-handpose로 돌아와 빌드하면 빌드 실패
- 오류 내용
node:internal/modules/cjs/loader:1084 Uncaught Error: Cannot find module '@mediapipe/hands'
Require stack:
C:\Workspace\AI\Handpose\ai_roborobo\node_modules@tensorflow-models\hand-pose-detection\dist\mediapipe\detector.js
C:\Workspace\AI\Handpose\ai_roborobo\node_modules@tensorflow-models\hand-pose-detection\dist\create_detector.js
C:\Workspace\AI\Handpose\ai_roborobo\node_modules@tensorflow-models\hand-pose-detection\dist\index.js
C:\Workspace\AI\Handpose\ai_roborobo\index.html at node:internal/modules/cjs/loader:1084:15 at Function._resolveFilename (node:electron/js2c/renderer_init:2:5527) at node:internal/modules/cjs/loader:929:27 at Function.<anonymous> (node:electron/js2c/asar_bundle:2:13327) at Function._load (node:electron/js2c/renderer_init:2:4757) at Module.require (node:internal/modules/cjs/loader:1150:19) at require (node:internal/modules/cjs/helpers:121:18) at Object.<anonymous> (C:\Workspace\AI\Handpose\ai_roborobo\node_modules@tensorflow-models\face-detection\dist\mediapipe\detector.js:56:21) at Object.<anonymous> (C:\Workspace\AI\Handpose\ai_roborobo\node_modules@tensorflow-models\face-detection\dist\mediapipe\detector.js:210:3) at Module._compile (node:internal/modules/cjs/loader:1271:14)- GUI에서 최종 빌드를 진행하기 때문에, 위 오류는 결국 GUI에서 @mediapipe/hands 모듈을 인식하지 못한다는 소리가 됨
- GUI는 ①node_modules/@tensorflow-models 에서 hand-pose-detection 모델을 인식하고, ②node_modules/scratch-vm/~ 에서 VM과 관련된 코드를 인식함. 이 때 둘은 npm link로 이어져 있음
- 그러나 나는 VM에 @mediapipe/hands 모듈을 설치해놓은 상태였음에도 GUI가 인식하지 못함
- 따라서 npm link의 문제라고 생각함
1. npm link 의미(용도)
- Symbolic link ( 줄여서 Symlink) = 바로가기 파일
- GUI에서 npm link VM 을 실행하면, 외부 모듈(VM)이 현재 프로젝트(GUI)의 node_modules 디렉토리에 설치된 것처럼(npm install한 것처럼) 사용될 수 있게 해줌
- 즉 해당 모듈(GUI)에 VM에 대한 전역 심볼릭 링크를 설정하는 것
2. npm link 사용법
- 위 오류 해결 방법 후보
- 프로젝트 변경될 때마다 (VM에 브랜치 생성할 때마다), GUI의 develop 브랜치에 npm link
- 프로젝트 변경될 때마다 (VM에 브랜치 생성할 때마다), GUI에 브랜치 생성하여 npm link
- 내 생각 1: GUI root 디렉토리를 계속 건드리는게 좋지 않아 보임, 따라서 후보2를 실행해보려고 함
- 그러나 npm link는 브랜치 단위가 아닌 프로젝트 단위(디렉토리 단위)로 생성됨
- 따라서 후보2를 실행해도 브랜치별로 다른 npm link가 걸리는 것이 아니라, 설정된 npm link가 계속 변경됨
- 따라서 후보1 실행하기로 함
- 핵심 코드
// blocks
npm link l10n
// l10n
npm link l10n
// VM
npm link l10n blocks --force // peer dependency conflict 방지
// GUI
npm link l10n blocks VM- npm link를 프로젝트가 작은 것 → 큰 것 순서로 진행하는 느낌
- --force 또는 --legacy-peer-deps 는 peer dependency conflict 를 방지하기 위해 실행
- Tensorflow-models - 모델 버전 관리 - 2. peer dependency 충돌 글 보러가기
- knn-classifier | hand-pose-detection 같은 Tensorflow-models의 권장되는 peer dependency를 설치하지 않고 코드 실행 또는 빌드 실행하여 conflict 발생 가능성
- 그러나 conflict 발생 여부와 코드 실행 또는 빌드 실행 가능 여부는 별도의 문제이므로 실행 가능
해결법
프로젝트 변경될 때마다 (VM에 브랜치 생성할 때마다), GUI의 develop 브랜치에 npm link 하고 build
'Backend > Node.js' 카테고리의 다른 글
| [Coding-Practice] 코드 최적화 - 2. 유효성 검사 (0) | 2023.11.30 |
|---|---|
| [Coding-Practice] 코드 최적화 - 1. this.~ (1) | 2023.11.30 |
| [Function] 프로젝트 내에서 함수 구분 (1) | 2023.11.30 |
| [Class] 클래스 상속 (0) | 2023.11.30 |
| [Setting] Node.js, npm 버전 업데이트 (0) | 2023.10.18 |
