stitch + aistudio + vscode + node + npm 으로 1분 만에 홈페이지 만들어 호스팅에 올리는 방법

Google AI Studio(또는 Antigravity/Project IDX)에서 다운로드받은 압축 파일(.zip)을 해제하고, VS Code에서 프로젝트를 실행/개발하기 위해 설치해야 하는 기본 프로그램과 VS Code 확장 프로그램 목록입니다.

1. 내 컴퓨터(PC)에 설치해야 하는 프로그램 (필수 2가지)

① Node.js (필수)

React, Vite, Next.js 등 최신 프론트엔드 프로젝트를 실행하고 npm 명령어를 사용하기 위한 핵심 엔진입니다.

• 설치 방법: Node.js 공식 홈페이지(nodejs.org)에 접속해 LTS (Long Term Support) 버전을 다운로드받아 설치합니다.
• 설치 확인: 설치 완료 후 VS Code 터미널에서 아래 명령어를 입력해 버전 숫자가 뜨면 정상 설치된 것입니다.
• Bash

   

  node -v
  npm -v
  

② Git (선택/권장)

버전 관리 및 코드 이력을 관리하기 위한 도구입니다. Node.js 패키지 설치 중 일부 라이브러리가 Git을 필요로 할 때가 있습니다.

• 설치 방법: git-scm.com에서 다운로드 후 기본 옵션으로 설치합니다.

2. VS Code 내부 설치 (확장 프로그램 / Extensions)

VS Code 왼쪽 아이콘 메뉴 중 [블록 모양 아이콘 (Ctrl + Shift + X)]을 누르고 아래 키워드를 검색해서 설치하면 개발이 훨씬 편해집니다.

1. ES7+ React/Redux/React-Native snippets
   • React 컴포넌트(tsx, jsx) 코드를 작성할 때 자동완성 기능을 제공합니다.
2. Tailwind CSS IntelliSense
   • AI Studio 프로젝트에서 많이 쓰는 Tailwind CSS 스타일링 클래스 이름을 자동완성 해줍니다.
3. Prettier - Code formatter
   • 코드를 줄바꿈하고 깔끔하게 정렬해 줍니다.
4. Env auto-complete / dotenv
   • .env.local 파일에 API 키(GEMINI_API_KEY)를 적을 때 가독성을 높여줍니다.

3. 압축 푼 뒤 VS Code에서 실행하는 순서

프로그램 설치가 끝났다면 아래 단계대로 진행하시면 됩니다.

1. 압축 해제: .zip 파일의 압축을 풉니다.
2. 폴더 열기: VS Code 실행 $\rightarrow$ [File] $\rightarrow$ [Open Folder...] 클릭 $\rightarrow$ package.json 파일이 들어있는 압축 해제된 폴더 선택.
3. 터미널 열기: 단축키 Ctrl + ~ (Mac: Cmd + ~) 로 VS Code 내부 터미널을 엽니다.
4. 패키지 설치 명령어 입력:(프로젝트에 정의된 라이브러리들이 node_modules 폴더로 다운로드됩니다.)
5. Bash

    

   npm install
   

6. API Key 설정:
   코드 스니펫

    

   GEMINI_API_KEY=AIzaSy...본인_API_KEY...
   

7. 폴더 내 .env.local (또는 .env) 파일이 있다면 열어서 구글 API Key를 작성합니다.
8. 개발 서버 실행:터미널에 뜬 주소(http://localhost:5173 등)를 Ctrl 키를 누른 채 클릭하면 브라우저에서 화면이 켜집니다!
9. Bash

    

   npm run dev
   

10. 호스팅에 올릴려면 npm run build 하면 dist 폴더가 생성되고, 그 하위 전부를 cafe24 호스팅에 올리면 된다