전체 글1231 2026년도 초보자가 꼭 배워야 할 AI 14일 교육과정 9일차 AI 홈페이지 초보자 14일 과정 — 9일차Supabase + 데이터베이스 이해하기8일차까지는 TMDB에서 데이터를 가져와 보여주는 홈페이지를 만들었습니다. 오늘부터는 반대 방향도 배웁니다.오늘 목표: 사용자가 입력한 데이터를 Supabase에 저장하고 다시 가져오는 원리를 이해한다.핵심 차이는 이것입니다.8일차TMDB → 내 홈페이지 데이터 가져오기9일차사용자 → 내 홈페이지 → Supabase 데이터 저장Supabase → 내 홈페이지 데이터 가져오기Supabase 공식 사이트1. 데이터베이스가 왜 필요할까?영화 홈페이지에 사용자가 들어왔다고 해보겠습니다.사용자가 영화 ❤️ 버튼을 눌렀습니다.그런데 데이터베이스가 없다면 새로고침 후 찜 정보를.. 2026. 10. 5. 2026년도 초보자가 꼭 배워야 할 AI 14일 교육과정 8일차 AI 홈페이지 초보자 14일 과정 — 8일차실제 API 프로젝트: 영화 홈페이지7일차에는 API → fetch → JSON → 화면 원리를 배웠습니다. 오늘은 실제 TMDB 영화 데이터를 가져와 작은 영화 홈페이지를 만들어봅니다.오늘 목표: 실제 API → 환경변수 → 영화 데이터 → MovieCard → 화면 출력오늘 완성할 구조입니다.TMDB ↓API ↓Next.js ↓영화 데이터 ↓MovieCard ↓🎬 영화 홈페이지TMDB API는 TMDB 공식 개발자 사이트에서 발급·문서를 확인할 수 있습니다.1. 오늘 만들 화면복잡하게 만들지 않습니다.┌───────────────────────────────────┐│ 🎬 MOVIE PICK ││ .. 2026. 10. 4. 2026년도 초보자가 꼭 배워야 할 AI 14일 교육과정 7일차 AI 홈페이지 초보자 14일 과정 — 7일차: API 이해하기오늘부터 홈페이지가 한 단계 달라집니다. 지금까지는 우리가 직접 입력한 내용을 보여줬다면, 이제 외부 서비스의 실제 데이터를 가져와 화면에 보여주는 방법을 이해합니다.오늘 목표: API → fetch → JSON → 데이터 → Component → 화면 흐름을 이해한다.1. API를 아주 쉽게 이해하기API는 다른 서비스에 데이터를 요청하는 창구라고 생각하면 됩니다.예를 들어 영화 홈페이지를 만든다고 해보겠습니다.내 홈페이지 │ │ "인기 영화 알려줘" ↓TMDB API │ │ 영화 데이터 전달 ↓내 홈페이지 │ ↓영화 카드 표시우리가 영화 제목, 평점, 포스터를 일일이 입력할 필요가 없습니다.API에서 가져옵니다... 2026. 10. 4. 2026년도 초보자가 꼭 배워야 할 AI 14일 교육과정 6일차 AI 홈페이지 초보자 14일 과정 — 6일차오늘은 Vercel 배포입니다. 5일차까지 만든 Next.js 홈페이지를 실제 인터넷에서 접속할 수 있게 만들어봅니다.오늘 반드시 이해할 핵심은 이것입니다.내 PC에서 만든 소스 → GitHub에 저장 → Vercel이 가져가서 빌드 → 인터넷 홈페이지가 된다.1. 배포가 무엇인가?지금까지는 내 컴퓨터에서 이렇게 확인했습니다.http://localhost:3000localhost는 내 컴퓨터에서만 볼 수 있는 개발용 주소입니다.오늘부터는:https://내프로젝트.vercel.app형태의 주소를 만들어 다른 사람도 볼 수 있게 합니다.전체 구조는 이렇습니다.내 PC │ │ git push ↓GitHub │ │ 소스 연결 ↓Vercel │ │ Buil.. 2026. 10. 3. 2026년도 초보자가 꼭 배워야 할 AI 14일 교육과정 5일차 AI 홈페이지 초보자 14일 과정 — 5일차오늘은 Git + GitHub입니다. 지금까지 만든 홈페이지를 인터넷에 공개하는 게 아니라, 먼저 소스코드를 안전하게 저장하고 변경 이력을 관리하는 방법을 이해합니다.오늘 목표: 내 PC → Git → GitHub 흐름을 이해하고 직접 Push까지 성공하기1. Git과 GitHub부터 구분하기처음에는 이 둘을 같은 것으로 생각하기 쉽습니다.Git= 내 컴퓨터에서 작업 기록 관리GitHub= 그 Git 저장소를 인터넷에 보관게임에 비유하면:코딩 ↓Git= 세이브 ↓GitHub= 클라우드에 세이브 파일 보관GitHub는 GitHub 공식 사이트에서 저장소를 만들고 관리할 수 있습니다.2. 지금까지 만든 프로젝트우리는 이런 프로젝트를 만들었습니다.ai-home-bas.. 2026. 10. 3. 2026년도 초보자가 꼭 배워야 할 AI 14일 교육과정 4일차 AI 홈페이지 초보자 14일 과정 — 4일차오늘은 여러 페이지와 메뉴 이동을 이해합니다.3일차까지는 홈페이지가 사실상 page.tsx 한 장이었습니다. 오늘부터 진짜 홈페이지처럼 만들어봅니다.오늘 목표: 홈 → 회사소개 → 서비스 → 문의 페이지를 만들고 메뉴로 이동한다.1. 가장 먼저 이해할 개념 — URL과 페이지일반적인 회사 홈페이지를 생각해보겠습니다.홈https://사이트주소.com/회사소개https://사이트주소.com/about서비스https://사이트주소.com/services문의https://사이트주소.com/contactNext.js에서는 폴더가 URL이 된다고 생각하면 이해하기 쉽습니다.src/app/│├─ page.tsx│├─ about/│ └─ page.tsx│├─ service.. 2026. 10. 2. 이전 1 2 3 4 ··· 206 다음
