개발 환경 세팅

IDE 설치하기
- Visual Studio Code
  - 코딩을 주로 한다면 추천
- 그외 플랫폼
node.js 설치 (for window)
- Node란?
  - javaScript는 브라우저(크롬, 엣지, 오페라 등)에서 동작되는 코딩 언어. 로컬 컴퓨터에서도 실행될 수 있게끔 해주는 런타임 프로그램
- Node.js
- 설치 후 powershell 에서 node가 잘 설치되어있는지 확인하기
  - node -v
  - in window
    - Set-ExecutionPolicy Bypass -Scope Process
  - npm -v
git 설치
- Git

기본 프로젝트 만들기

IDE에서 프로젝트 시작할 폴더 열기
기본 뼈대 만들기
- ```
  npx create-next-app@latest . --yes
```
  - CLI: create-next-app | Next.js
내 컴퓨터에 임시 서버 띄우기
- ```
  npm run dev
```

명세사항 작성하기

개발하고자 하는 명세사항 작성하기
- What
- How

vibe

00 주제로 웹사이트 만들고 싶어. 주 기능은 00이야.
유저가 00한 동작을 하고 00한 결과를 볼 수 있으면 좋겠어. 현재 디렉토리 구성을 바탕으로 웹사이트 제작하고 싶어.
2000자 이내로 간략한 개발명세사항 작성해줘

바이브 코딩

명세사항 기반으로 제작
- 작성된 명세사항 프롬프트에 붙여넣기
vibe
- 00화면에서 버튼을 ~~하게 만들어줘

github에 코드 올리기 (연동)

github 가입(로그인)
repository 생성
- or push an existing repository from the command line
- vibe
  - 깃헙 연동해줘~

DB 연결, 로그인(Oauth)

supabase
- 새 프로젝트 생성
- supabase mcp 연결
  - Model context protocol (MCP) | Supabase Docs
  - cmd + k , type connect via MCP
- vibe
  - supabase mcp 연결이 되었니?~
- 로그인 설정
  - Authentication → Sign In / Providers →google …
google oauth
- https://console.cloud.google.com/auth/clients
  - new project
  - api service → user auth info → oauth client ID → create
  - clients → select current project → Authorized JavaScript origins, Authorized redirect URIs
- Clients Ids, Clients Secret

디자인

reference
vibe
- 다음 코드로 XX화면 디자인해줘

배포하기

vercel
- add new → select our repository → deploy
  - set env variable
DNS
- buy some domain
- in vercel add domain
  - Learn more
- in dns service, configure record
- update the domain for each service
  - supabase → URL Configuration → Site URL
  - google cloud console → client → Authorized JS origins
  - vercel → env variable (NEXT_PUBLIC_APP_URL)

Reference