WOWVote 데모

🤔 "터미널이 뭐예요? 어디서 열어요?"

터미널은 컴퓨터에 명령어를 입력하는 창입니다. 검은색 또는 흰색 글자만 있는 화면이에요.

• Windows: 시작 → "Git Bash" 검색 → 실행 (Git for Windows 설치되어 있어야 함)
• Mac: Cmd + Space → "터미널" 검색 → 엔터
• 가장 편한 방법: VS Code 안에서 터미널 열기 → 상단 메뉴 Terminal → New Terminal

🤔 "cd가 뭐예요?"

cd는 "Change Directory" — 폴더를 이동하는 명령어입니다.

• cd WOWVote — 현재 위치의 WOWVote 폴더로 들어가기
• cd .. — 부모 폴더로 한 단계 올라가기
• pwd — 지금 내가 어디 있는지 확인 (Mac/Linux)

🤔 "GitHub Desktop으로 클론했는데 그 폴더로 가는 법?"

GitHub Desktop은 보통 Documents/GitHub/WOWVote에 저장합니다.

가장 쉬운 방법: GitHub Desktop 화면 상단 메뉴 Repository → Open in Terminal 또는 Open in Visual Studio Code 클릭. 자동으로 그 폴더에서 터미널이 열림.

🤔 "터미널에서 명령어 쳤는데 에러가 나요"

• command not found → 도구가 설치 안 됐거나, 다른 터미널이 필요 (Windows는 Git Bash 사용)
• No such file or directory → 지금 폴더에 그 파일이 없음. ls로 확인
• Permission denied → 권한 문제. Mac은 sudo는 쓰지 말고 강사 호출

방법 A. 터미널 (Git Bash 또는 Terminal)

방법 B. GitHub Desktop (클릭만)

1. 브라우저에서 github.com/TeddyChoi-wow/WOWVote 열기
2. 오른쪽 위 초록 버튼 "Code" 클릭
3. 드롭다운에서 "Open with GitHub Desktop" 클릭
4. GitHub Desktop이 자동으로 열림 → "Clone" 클릭
5. 저장 위치 확인 → "Clone"

받은 후 — VS Code에서 열기

1. VS Code 실행 → File → Open Folder
2. 방금 받은 WOWVote 폴더 선택
3. 좌측 파일 탐색기에서 다음이 보이면 OK:
   • index.html, present.html — 페이지 파일
   • supabase-schema.sql — DB 셋업용 SQL ⭐
   • SUPABASE_SETUP.md — 클릭 위치까지 짚어주는 셋업 가이드 ⭐
   • WORKSHOP_GUIDE.md — 워크숍 진행 가이드
   • js/config.example.js — 키 설정 템플릿

🤔 "Supabase 화면이 가이드 설명과 좀 달라요"

Supabase가 UI를 자주 업데이트해서 메뉴 위치가 살짝 다를 수 있어요. 핵심 메뉴 4개의 아이콘 모양으로 찾는 게 더 안전합니다:

• SQL Editor: </> 아이콘 (꺾쇠 두 개)
• Table Editor: 표 또는 격자 아이콘
• Settings: 톱니바퀴(⚙️) 아이콘 — 보통 사이드바 맨 아래
• API: Settings 안의 하위 메뉴 (열쇠 아이콘일 수도)

🤔 "프로젝트가 'Provisioning' 상태에서 안 끝나요"

처음 만들 때 2~3분 걸립니다. 5분 이상 안 끝나면 페이지 새로고침. 그래도 안 되면 새 프로젝트 생성.

🤔 "키 복사가 잘 안 돼요 / 키가 너무 길어요"

anon public 키는 매우 깁니다 (보통 200자 이상, eyJhbGc...로 시작). 복사할 때 함정:

• 드래그로 선택하면 앞·뒤가 잘릴 수 있음 → 화면의 "Copy" 버튼을 꼭 사용
• 붙여넣은 후 앞·뒤 공백·줄바꿈 확인 (있으면 인식 안 됨)
• 키에 점(.)이 중간에 2~3번 있는 게 정상 — 지우지 마세요

🤔 "SQL 실행했더니 에러가 빨갛게 떠요"

흔한 원인:

• "relation already exists" → 이미 한 번 실행됐음. 무시 OK, 또는 테이블 삭제 후 재실행
• "syntax error" → 복사할 때 일부가 빠짐. supabase-schema.sql 전체 다시 복사
• "permission denied" → 프로젝트 준비가 안 끝남. 5분 더 기다리기

1. supabase.com 접속 → 우측 상단 "Start your project" 클릭
2. "Sign in with GitHub" 추천 (계정 통합)
3. 대시보드에서 "New project" 클릭

   ※ 처음이면 먼저 Organization 만들기 → 이름 아무거나 (예: wowdlab), Plan은 Free

4. 프로젝트 정보 입력:
   • Name: wowvote
   • Database Password: 자동 생성된 값 옆 Copy 눌러서 어딘가 메모 (다시 못 봐요)
   • Region: Northeast Asia (Seoul) ⭐
5. "Create new project" → 2~3분 대기

이 단계가 DB 학습의 핵심입니다. SQL을 직접 실행해서 테이블·정책을 만듭니다.

1. Supabase 왼쪽 메뉴에서 "SQL Editor" 클릭 (</> 아이콘)
2. "+ New query" 클릭
3. VS Code에서 supabase-schema.sql 파일 열기 → 전체 선택(Cmd/Ctrl+A) → 복사(Cmd/Ctrl+C)
4. Supabase 편집창에 붙여넣기(Cmd/Ctrl+V)
5. 오른쪽 아래 "Run" 버튼 클릭 (또는 Cmd/Ctrl+Enter)
6. 아래에 Success. No rows returned 같은 초록 메시지가 뜨면 성공! ✅

같은 SQL Editor에서 새 쿼리에 이거 한 줄 넣고 Run:

→ 아래에 1줄이 나오고 code 칸에 default, title에 "WOWVote 기본 세션"이 보이면 완벽해요.

추가로 정책이 다 들어갔는지 보려면:

→ 정책 6개가 보이면 OK.

1. 왼쪽 세로 메뉴 맨 아래 "Settings" (⚙️ 톱니바퀴) 클릭
2. 설정 하위 메뉴에서 "API" 클릭
3. 이 화면에서 두 가지를 복사:
   • Project URL (맨 위, https://....supabase.co 형태) → 옆 Copy
   • Project API keys 섹션의 anon public 키 → 옆 Copy

🤔 "cp가 뭐예요?"

cp는 "Copy" — 파일 복사 명령어입니다.

위 명령은 js/config.example.js 파일을 복사해서 js/config.js라는 새 파일을 만들어요. 원본은 그대로 두고요.

💡 명령어 대신 마우스로 하기:

1. VS Code 좌측 탐색기에서 js/config.example.js 마우스 우클릭 → "Copy"
2. js/ 폴더 우클릭 → "Paste"
3. 복사된 파일 우클릭 → "Rename" → config.js로 변경

🤔 "VS Code에서 config.js가 회색으로 흐릿하게 보여요"

정상입니다. config.js는 .gitignore에 등록되어 있어서 git이 무시하는 파일이에요. 그래서 VS Code 탐색기에서:

• 회색·흐릿하게 표시 — 정상 (git이 추적 안 함)
• 옆에 'I' 표시 — Ignored (무시) 의미

이게 정상이에요. 파일이 사라진 게 아닙니다. 클릭하면 정상적으로 열려요.

🤔 "config.js가 아예 안 보여요"

• VS Code 좌측 탐색기 새로고침: 폴더 옆 새로고침 아이콘 클릭
• 파일이 진짜 안 만들어진 거라면 cp 명령어 다시 실행
• 혹시 다른 폴더에 만들어졌나 — js/ 폴더 안에 있는지 확인 (루트 아님)

🤔 "키 붙여넣었는데 따옴표가 이상해 보여요"

가장 흔한 함정입니다. 두 종류의 따옴표가 있어요:

• 일반 따옴표: " ' — 코드에서 사용 OK ✅
• 스마트(곱슬) 따옴표: " " ' ' — 코드에서 안 됨 ❌

스마트 따옴표는 워드 같은 곳에서 자동 변환되는 모양이에요. VS Code에서는 그대로 입력하면 일반 따옴표가 나오니까 걱정 마세요. 다만 다른 곳에서 복사해 왔다면 확인:

• 의심되면 따옴표 부분만 직접 다시 타이핑
• 또는 VS Code에서 Ctrl+H (찾아 바꾸기)로 " → "로 교체

🤔 "키에 공백·줄바꿈이 끼었어요"

붙여넣을 때 의도치 않게 들어갈 수 있어요. 확인 방법:

키 시작 따옴표 바로 옆에 키 문자가 붙어있어야 해요. 사이에 빈칸·줄바꿈 있으면 제거.

VS Code의 터미널(또는 시스템 터미널)을 열어서:

그다음 js/config.js 파일을 VS Code에서 열어 복사한 값을 채워주세요:

🤔 "npx serve . 했더니 뭐가 잔뜩 나와요"

정상이에요. npx는 Node.js 도구 실행 명령어입니다. 처음 쓰면 자동으로 다운로드해서 살짝 오래 걸려요.

정상 출력 예시:

이런 게 나오면 성공. 이 창은 그대로 켜두세요 (닫으면 사이트도 같이 꺼짐).

🤔 "터미널을 끄면 어떻게 되나요?"

사이트가 멈춥니다. 워크숍 동안엔 터미널 창을 그대로 켜두세요. 다 끝나면 터미널 창에서 Ctrl+C로 멈출 수 있어요.

🤔 "주소를 어디에 입력해요?"

크롬·사파리·엣지 같은 브라우저의 주소창에 http://localhost:3000 입력 후 엔터.

🤔 "화면 떴는데 질문 작성이 안 돼요. 에러도 없어요"

가장 어려운 상황입니다. 브라우저 콘솔을 봐야 해요.

1. 브라우저에서 F12 누르기 (Mac: Cmd + Option + I)
2. 상단 탭에서 "Console" 클릭
3. 빨간 글씨(에러)가 있는지 확인
4. 빨간 글씨 있으면 → 그대로 복사해서 Claude에게

이게 진짜 중요해요. "에러 없는 것 같은데"라고 느껴도 콘솔에 거의 항상 단서가 있어요.

🤔 "콘솔에 뭐가 너무 많아요. 어디가 에러예요?"

• 빨간색: 에러 (Error) — 이게 문제
• 노란색: 경고 (Warning) — 보통 무시 OK
• 회색·흰색: 일반 로그 — 무시 OK

빨간 글씨만 골라서 보세요. 보통 1~3줄 정도예요.

🤔 "WOWVOTE_CONFIG 미설정 알림이 떠요"

가장 흔한 시작 에러입니다. 원인 3가지:

1. js/config.js 파일을 안 만들었음 → Step 3 다시
2. 파일은 만들었는데 키가 비어있음 (예시 그대로 둠) → 본인 키로 교체
3. 파일을 다른 폴더에 만들었음 → 반드시 js/ 폴더 안에 있어야 함

🤔 "기본 세션을 찾지 못했어요 에러"

Supabase 스키마 실행이 안 됐거나 일부만 실행된 경우.

1. Supabase SQL Editor 열기
2. SELECT * FROM sessions; 실행
3. 결과가 비어있음 → supabase-schema.sql 다시 전체 복사·실행

🤔 "동작은 안 하는데 에러도 없어요"

가장 막막한 상황. 진단 순서:

1. config.js 다시 확인 — URL과 키가 정확한지, 따옴표·쉼표 모양 OK인지
2. 브라우저 콘솔 F12 — 정말 에러가 없는지 한 번 더
3. Supabase 대시보드 — Table Editor에서 데이터가 실제 들어가는지 확인
4. 시크릿 모드로 다시 열기 — 캐시 문제 가능성
5. 여기까지 다 했는데도 안 되면 강사 호출

정적 사이트라 빌드 없이 바로 실행됩니다.

방법 A. 터미널 명령어 (추천)

터미널에 뜬 주소(예: http://localhost:3000)를 브라우저에서 열기.

방법 B. VS Code Live Server

1. VS Code 확장에 "Live Server" 설치 (없으면)
2. 좌측 탐색기에서 index.html 우클릭
3. "Open with Live Server" 클릭