window desktop 개발시 wsl 환경 충돌 문제

소개

• pc에 있는 이미지 체계적으로 관리 할 목적으로 데스크탑 프로그램 개발을 해보고 싶었습니다.

  • 찾아 보니, Electron + React 기반의 Platform이 있어서 개발을 해보기로 했습니다.

진행 방법

• 전체 프로세스

  • 사용자 password 입력 -> PC에 있는 이미지 검색 등록 -> LLM을 이용해 이미지설명 Caption 추가 -> 이미지 보기 및 download 기능제공

  • 

    ALT

    개 사진이있는 파일 관리자의 스크린 샷

ALT

한국 데이터 관리자의 스크린 샷

결과와 배운 점

• 작업의 시작은 아마존의 Kira AI에서 시작을 했으나, 프로그램 구현이 않되어 중간에 Claude Code로 변경

• Window에 설치하는 Claude Code는 wsl이라는 linux os 위에서 수행되는 관계로 개발이 완료 되었으나, window에서 수행시 npm이 정상 동작 하지 않음

• Chat GPT에 error message를 주고 해결책을 문의 하니, 아래와 같은 script를 작성해줌, 수행후 환경 문제 해결 됨.

  [cross-install.js]

  사본

  const { execSync } = require("child_process");
  const fs = require("fs");
  const os = require("os");
  
  function run(cmd) {
    console.log(`\n> ${cmd}`);
    execSync(cmd, { stdio: "inherit" });
  }
  
  // 1. node_modules & package-lock.json 삭제
  if (fs.existsSync("node_modules")) {
    console.log("Deleting node_modules...");
    run(process.platform === "win32" ? "rmdir /s /q node_modules" : "rm -rf node_modules");
  }
  if (fs.existsSync("package-lock.json")) {
    console.log("Deleting package-lock.json...");
    fs.unlinkSync("package-lock.json");
  }
  
  // 2. npm cache clean
  console.log("Cleaning npm cache...");
  run("npm cache clean --force");
  
  // 3. OS 감지 후 rollup 설치
  const platform = os.platform();
  console.log(`Detected platform: ${platform}`);
  
  try {
    console.log("Uninstalling any previous Rollup binaries...");
    run("npm uninstall @rollup/rollup-linux-x64-gnu @rollup/rollup-win32-x64-msvc || true");
  } catch (e) {
    console.log("No rollup binaries found.");
  }
  
  console.log("Installing platform-specific rollup...");
  if (platform === "win32") {
    run("npm install --save-dev @rollup/rollup-win32-x64-msvc");
  } else if (platform === "linux") {
    run("npm install --save-dev @rollup/rollup-linux-x64-gnu");
  } else {
    console.log("Unsupported platform. Installing default rollup...");
    run("npm install --save-dev rollup");
  }
  
  // 4. npm install 실행
  console.log("Installing dependencies...");
  run("npm install");
  
  console.log("\n✅ Cross-platform setup completed!");
  

도움 받은 글 (옵션)

• 데스크탑 프로그램을 Claude code에서 개발 하는 경우 npm / node 환경 문제 발생

• 프로그램 수행 자체가 않되고, npm start에서 계속 error 발생

• GPT에서 환경 문제 해결을 위한 script을 제공후 해결