Merry's Dev. Blog

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 사용법

• 위 오류 해결 방법 후보
  1. 프로젝트 변경될 때마다 (VM에 브랜치 생성할 때마다), GUI의 develop 브랜치에 npm link
  2. 프로젝트 변경될 때마다 (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

문제 인식

• 나는 지금까지 항상 git commit -m “커밋 메시지” → git push origin 브랜치명 을 모두 실행하여 내 코드를 공유했었음
• 그래서 commit과 push의 의미를 구별하지 못 함, 왜 2가지 단어가 있는지 의문이었음. 따라서 나는 항상 ‘push 했다’ 라고 표현해왔음
• 그러나 내가 하나의 프로젝트 작업을 완료하자, 사수께서 서버에 올려 달라고 하심
• 나는 지금까지 commit, push만 있는줄 알았는데 또 무엇인가 해야 하나 고심하였음. 그러나 알고보니 작업한 코드를 서버에 올리는 것 = push 라는 것이었음
• 따라서 양자의 차이를 알게 됨

1. commit과 push 의 차이점

• origin : 저장소 명; 따라서 각 프로젝트에서 설정한 서버 저장소 명으로 origin 대신 설정 가능. 그러나 대부분 origin으로 설정되어 있음

문제 인식

• 기능별로 브랜치를 만들어서 작업해야 한다고 하심 ( ex. handpose / face / pose | 각 경우에서 구체적으로 model / detect / draw )
  • 공통 사용할 npm 모듈 설치하여 feature/tfjs → 그 브랜치에서 feature/tfjs-handpose, feature/tfjs-face, feature/tfjs-pose로 뻗어나가기

• 그러나 이미 작업 중인 파일이 있다면, 브랜치 생성하여 checkout 해도 계속 수정된 파일이 남아있다는 문제 + commit은 부담스러움
• git stash를 사용하면 됨!

의미 (용도)

• 임시 저장소
• commit은 부담스럽고 checkout 해서 다른 브랜치에서 새로 작업하고 싶을 때, stash라는 임시 저장소에 저장하였다가 불러와서 사용하면 됨

사용법

• stash 생성(임시 저장) : git stash (save)
  • save 적어도 되고 안 적어도 됨
  • 위 명령어 사용하여 stash 생성하고, 작업할 브랜치로 checkout 하면 됨
  • Node.js의 경우 package.json (내가 설치, 삭제한 npm 모듈 기록)까지 임시 저장됨
• stash 저장 목록 확인 : git stash list
  • 임시 저장한 파일을 현재 내가 있는 브랜치로 불러오는 것임
  • stash 이름을 생략하면 가장 최근에 저장된 stash가 나옴 → LIFO: 후입선출, 스택의 자료 구조
• stash 삭제: git stash drop (@stash{0})
  • stash 이름을 생략하면 가장 최근에 저장된 stash가 삭제됨

개요

심볼릭 링크에 대해서는 '파이썬 2개 버전 동시 사용하기' 글에서 이미 다루었다. 해당 글을 작성하고 최근까지도 나는 이 경우에만 심볼릭 링크를 사용하는 줄 알았다. 그러나 자사 제품의 로컬 실행을 위해 빌드하며 다른 메시지의 오류 2개를 심볼릭 링크로 해결해보며, 이것이 다양한 경우에서 사용될 수 있음을 깨달았다. 요약하자면 심볼릭 링크는 파일 A와 B가 멀리 떨어진 위치에 있을 때, A 파일을 실행하며 종속적으로 B 파일 실행이 필요한 경우 A에 B 파일의 위치를 알려주는 느낌이다.

Windows에서의 Symbolic Link

Symbolic Link 란?

• 링크를 연결하여 원본 파일을 직접 사용하는 것과 같은 효과를 내는 링크이다.
• 윈도우의 바로가기와 비슷한 개념이다.
• 특정 폴더에 링크를 걸어 NAS, library 원본 파일을 사용하기 위해 심볼릭 링크를 사용한다.
• 소프트 링크라고도 한다.
• 리눅스 용어이지만 자사에서는 윈도우로 개발하는 바, 이하에서는 윈도우 명령어와 오류로 설명한다. 

명령어 및 결과

1. 링크 생성

• 파일에 대한 링크 생성 : mklink 생성파일 실행파일 

mklink C:\Workspace\Rogic\scratch-blocks\python.exe C:\Python27\python.exe

// cmd 결과
C:\Workspace\Rogic\scratch-blocks\python.exe <<===>> C:\Python27\python.exe에 대한 기호화된 링크를 만들었습니다.

// 파일탐색기 결과

• 디렉토리에 대한 링크 생성 : mklink 생성디렉토리 실행디렉토리
  -> 파일에서 디렉토리로만 변경되고, 로직 및 결과는 동일하게 확인 가능하다.

2. 링크 삭제 

• 파일에 대한 링크 삭제 
  • cmd 창을 이용 : (생성파일이 있는 디렉토리로 이동하여) del 생성파일
  • 파일탐색기 이용 : 위 사진에 있는 심볼릭 링크 파일 삭제
• 디렉토리에 대한 링크 삭제
  • cmd 창을 이용 : (생성 디렉토리로 이동하여) rmdir 생성디렉토리 
  • 파일탐색기 이용 : 상동

Trouble Shooting

오류 내용

• scratch-blocks에서 npm run prepublish 실행 시 아래 오류 발생 

// 파이썬에서 site-packages를 찾을 수 없는 오류
ImportError: No module named site

// 자바가 path에 없다는 오류
Could not find "java" in your PATH.
Using remote compiler: closure-compiler.appspot.com ...

Error: Closure not found.

오류 원인(내 생각)

• 파이썬의 경우 2개 버전을 함께 사용하므로 설치한 후부터 지금까지 경로가 꼬였을 수 있겠다고 생각했다. 따라서 완전 삭제 후 재설치하고 오류를 해결하기로 했다.
• 그러나 재설치해도 위 오류는 동일하게 발생했다. 따라서 scratch-blocks에서 실행되는 파이썬(ver 2.7.18)에게 site-packages를 찾을 수 있도록 알려주어야 겠다고 생각했다. 
• 자바의 경우에도 고급 시스템 설정-환경변수-Path에 올바른 경로를 추가해도 위와 같은 오류가 발생했다. 따라서 scratch-blocks에서 실행되는 자바가 어디 있는지 알려주어야 겠다고 생각했다. 
• 즉 위의 두 문제 모두 메시지는 다르지만 '알려준다' 라는 요점이 같고, 이것이 곧 심볼릭 링크라고 생각했다!

해결 

// 파이썬은 두 버전의 명령어를 구분하여 심볼릭 링크 만들기
mklink C:\Workspace\Rogic\scratch-blocks\python.exe C:\Python27\python.exe  // 빌드 명령어 : python
C:\Workspace\Rogic\scratch-blocks\python.exe <<===>> C:\Python27\python.exe에 대한 기호화된 링크를 만들었습니다.

mklink C:\Workspace\Rogic\scratch-blocks\py.exe C:\Users\KHR\AppData\Local\Programs\Python\Python312\python.exe  // ai 개발 명령어 : py
C:\Workspace\Rogic\scratch-blocks\py.exe <<===>> C:\Users\KHR\AppData\Local\Programs\Python\Python312\python.exe에 대한 기호화된 링크를 만들었습니다.


// 자바
mklink "C:\Workspace\Rogic\scratch-blocks\java.exe" "C:\Program Files (x86)\Java\jre-1.8\bin\java.exe"
C:\Workspace\Rogic\scratch-blocks\java.exe <<===>> C:\Program Files (x86)\Java\jre-1.8\bin\java.exe에 대한 기호화된 링크를 만들었습니다.

• 주의할 점
  • 빌드하는 디렉토리 위치에서 심볼릭링크를 생성해야한다! 처음 cmd 창을 열었을 때 설정 되어있는 기본 디렉토리에서 링크 생성해봤자 소용 없다!
  • cmd 창을 관리자 권한으로 열어야한다! 관리자 권한으로 열지 않으면 명령어가 권한이 없어 작동하지 않는다!

참고 자료

https://bluedrim.tistory.com/entry/%EC%9C%88%EB%8F%847-%EC%8B%AC%EB%B3%BC%EB%A6%AD-%EB%A7%81%ED%81%AC-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EB%B0%8F-%EC%82%AD%EC%A0%9C%ED%95%98%EA%B8%B0

231031 7번째 완료