ai studio 에서 파일 받아 로컬에서 npm run build 하는 방법

스티치 -> ai studio에서 세부 작업을 한 후 Export > Download a .zip file 을 해본다.

그럼 C:\Users\사용자명\Downloads\여성장학클럽-홀씨 로 zip 으로 된 파일이 다운로드 되어져 있다.

압축을 풀고 VS code로 읽어가지고 vs code에서 터미널 메뉴로 가서 터미널을 연다.

npm -version 을 했을때 11.9.0 이런게 나왔다면 npm이 설치되어 있는것이고, 없다면 설치하면 된다.

npm install을 하면 해당 폴더에 관련 파일이 다운로드 받아진다.

npm warn deprecated node-domexception@1.0.0: Use your platform's native DOMException instead

added 214 packages, and audited 215 packages in 22s

34 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

. npm install (필요한 부품/라이브러리 자동 다운로드)

• 무슨 뜻인가요? 이 프로젝트를 만든 개발자가 쓴 온갖 외부 도구와 코드 부품들(React, Tailwind CSS, Gemini SDK 등)을 내 컴퓨터로 한 번에 다운로드받는 명령어입니다.

 

그런 다음 npm run build 하면 dist 폴더가 새로 생긴다. 들어가보면 아래 처럼 생겼다. 이것은 카페24 호스팅 루트에 올리면 된다.

로컬에서 확인해보려면 npm run dev 하면 된다.

npm run dev (내 컴퓨터에서 웹사이트 켜기)

• 무슨 뜻인가요? 모든 준비가 끝났으니 "개발용 로컬 웹 서버를 구동해라"라는 명령어입니다.
• 어떻게 하면 되나요? 터미널에 아래 명령어를 치고 Enter를 칩니다.명령어를 치면 터미널에 http://localhost:5173 또는 http://localhost:3000 같은 인터넷 주소가 뜹니다. 이 주소를 키보드의 Ctrl을 누른 채 클릭하거나 브라우저 주소창에 치고 들어가면 내 컴퓨터에서 구동되는 웹사이트를 눈으로 확인할 수 있습니다!
• Bash

   

  npm run dev
  

npm run dev

> react-example@0.0.0 dev
> vite --port=3000 --host=0.0.0.0


  VITE v6.4.3  ready in 571 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: http://172.16.0.76:3000/
  ➜  Network: http://172.20.32.1:3000/
  ➜  press h + enter to show help

README.md 파일을 열어서 참고해도 된다.