chore/#634 : 디버깅모드에서 analysis-engine의 변경을 감지하도록 변경

[mdgarden]

Related issue

#634
상기 이슈에 적힌내용을 반영하여, 작업환경을 개선합니다.

Result

개선 내용

analysis-engine폴더에서 작업시, 별도의 빌드 없이 확장 프로그램의 리로드만으로 변경내용을 확인 가능합니다.
다음과 같은 화면 구성으로 작업이 가능합니다.
(좌측 : analysis-engine 폴더, 우상단:vscode 디버그 터미널, 우하단: 확장 디버깅모드 창)

Work list

• vscode 폴더의 웹팩 watch옵션 활성화
• analysis-engine의 watch 및 빌드 옵션 활성화

Discussion

이 리포지토리의 기본적인 동작 구조

이 리포지토리는 다음과 같이 세가지 패키지를 가지고 있는 모노레포의 구조입니다.

packages
├── analysis-engine
├── view
└── vscode

최초 실행시 필요한 루트의 npm run build:all 설정으로 각 패키지의 내용을 빌드합니다. vscode패키지의 빌드 과정에서 다른 패키지들의 빌드 결과물들을 통합합니다.
최종적으로, Visual Studio Code가 확장 프로그램을 실행(혹은 디버깅 모드에 진입)할때는 vscode 패키지의 빌드 결과물인 ./dist/extension.js 하나만 보게 됩니다.

해결 방법 및 사용 방법

상기의 동작구조를 밑바탕으로 원래 문제( analysis-engine 폴더의 코드 변경 내용을 바로 알 수 있게 한다)를 해결하기 위해서 여러 방법들을 검토했으나, 최종적으로 다음과 같은 구조가 되었습니다.

• analysis-engine의 터미널과 vscode 터미널을 열어, 각각의 터미널에서 npn run watch 커맨드를 실행합니다.
• 이는 analysis-engine 폴더를 감시하여, 해당 폴더의 변경사항이 있을 시 즉시 새로 빌드하여 해당 폴더 및 ./dist/extension.js 파일을 새로 빌드할 수 있게 합니다.
  • vscode 터미널에서만 명령어를 실행해도 상술한 핫리로드 기능이 가능하도록 concurrently 등의 라이버리를 검토하였으나, 코드 전체에 있어서 변경사항이나 라이브러리의 추가는 최소한으로 유지하고 싶어서 이번 PR 에서는 제외했습니다.
• 빌드 이후 확장 디버깅 모드 창의 재시작은 수동(디버깅 창에서 컨트롤+r로 가능)으로 진행해야합니다. 이 부분은 env 등 다른 설정들이 많아질 것 같아 다음 PR에서 추가하려고 합니다.
• view 패키지의 경우 현재 독립적으로 dev모드 실행이 가능하기에 이번 PR에서 제외하였습니다.

[ytaek]

간단한 코드로 1차적 해결해주신 것도 좋고,
분석해주신 PR description도 매우 도움이 되는 것 같아요!!! 💯💯💯💯💯

[choisohyun]

👍👍👍 이제 좀 더 빠르게 할 수 있겠군요!

[ytaek]

리뷰 커멘트들 반영됐다면 merge 부탁드립니다!!
혹시 빠진게 있다면 다음 PR에 올려주세용~

[ytaek]

@mdgarden 님, PR description 내용 중에서 추후 해결할 것들 이슈로 등록 부탁드리고,
해당 PR은 close 부탁드리겠습니다!