AI

ACE AI Startup Bootcamp

프론트엔드 개발 & API 연동과 AI

Day 6 프론트엔드 개발 & API 연동과 AI 영상 + AI 챗봇 학습

프론트엔드 개발 & API 연동과 AI 학습도우미

Figma UI를 실제 서비스 화면으로 구현하고, fetch/AJAX 기반 API 연동을 통해 서버 데이터를 화면에 바인딩하며 로딩·에러·빈 상태까지 처리하는 6일차 학습 콘텐츠입니다. 특히 본 세션에서는 Codex Client Workspace를 활용하여 화면 초안을 빠르게 만들고, 디버깅을 의뢰하며, 코드 리팩토링 및 다차원 코드 품질 감사를 수행하는 AI 페어 프로그래밍 협업 방식을 학습합니다.

대상: UI/UX 고해상도 디자인을 완료한 학생
준비물: 노트북, VS Code, 웹 브라우저
구성: 2시간 이론 / 3시간 실습 / 1시간 공유
📖 Session 6 교안 바로가기

🚀 Day 6 실습 MVP Tasks 로드맵

전체 Task 보드 가기 →
🚀
Interactive Board

실습 Task 체크리스트

필수 태스크의 진척도를 기록하고 상세 실습 가이드라인을 확인해보세요.

👉 상세 Task 보드 이동
TASK 1
Prototype

Task 1. 화면 초안 빠르게 만들기

요구사항 명세를 기반으로 가동 가능한 반응형 대시보드 화면 초안 코드를 빌드합니다.

Task 1 실습실 입장
TASK 2
AI Debug

Task 2. 오류 해결 도우미

TypeError 등 비동기 바인딩 에러의 발생 라인 분석 및 방어 조치 방안을 학습합니다.

Task 2 실습실 입장
TASK 3
Refactoring

Task 3. 코드 개선하기

중복 HTML 조작과 모호한 임시 변수명을 실무 명명법 규칙에 맞춰 리팩토링합니다.

Task 3 실습실 입장
MISSION 1
Troubleshooting

Mission 1. AI와 함께 오류 해결하기

CORS/JSON 가비지 해석 오류 배경 진단을 받고 문제 방지 대책 리포트를 작성합니다.

Mission 1 실습실 입장
MISSION 2
Code Review

Mission 2. AI 코드 리뷰 받기

작성 코드를 다차원 지표로 평가받아 최적 캡슐화 및 가독성 개선안을 도출합니다.

Mission 2 실습실 입장

Day 6 강의 영상

유튜브 추천 강의
Day 6 커리큘럼 핵심 주제(HTML/CSS/JS 구현, API 연동, 데이터 바인딩, 비동기 프로그래밍, 에러 핸들링)에 해당하는 유튜브 추천 강의 리스트입니다. (외부 퍼가기 및 재생이 허용된 무료 강의 영상으로 구성되었습니다.)
📚 전체 강의 목록 (5개)
  • 1. Learn JavaScript - Full Course for Beginners (freeCodeCamp)
    3:26:42
  • 2. WEB3 - Ajax 수업 소개 (생활코딩)
    6:20
  • 3. WEB3 - Ajax fetch API 사용법 (생활코딩)
    8:10
  • 4. JavaScript - jQuery Ajax 소개 (생활코딩)
    7:45
  • 5. JavaScript DOM Manipulation – Full Course for Beginners (freeCodeCamp)
    2:15:30

핵심 요약 노트

Day 6 Summary

오늘의 핵심 목표

Day 6에서는 Figma UI를 실제 서비스 화면으로 구현하고, fetch/AJAX 기반 API 연동을 통해 서버 데이터를 화면에 바인딩하며 로딩·에러·빈 상태까지 처리합니다.

  • HTML/CSS/JS 웹 화면 구현: Figma 디자인을 시맨틱 HTML 태그와 CSS 스타일로 구현
  • 반응형 레이아웃 설계: 미디어 쿼리(Media Query) 및 Flexbox/Grid 활용
  • fetch API 기반 데이터 요청: fetch 및 async-await를 사용한 GET/POST API 호출
  • 화면 데이터 바인딩 (Data Binding): 서버에서 받은 JSON 데이터를 DOM 요소에 적용
  • 상태 처리 및 에러 핸들링: 데이터 로딩 중, 에러 발생, 빈 데이터 상태에 따른 화면 처리
학습 팁: 오른쪽 AI 챗봇에게 “async/await 문법을 사용해 fetch API 호출할 때 에러 처리는 어떻게 해?” 또는 “서버에서 받아온 JSON 리스트 데이터를 HTML 화면에 동적으로 뿌리는 방법은?” 같은 질문을 해보세요.