AI

ACE AI Startup Bootcamp

개발 (AI와 함께 기능 완성하기)

Day 7 개발 (AI와 함께 기능 완성하기) 영상 + AI 챗봇 학습

개발 (AI와 함께 기능 완성하기) 학습도우미

화면만 만들어져 있다고 서비스가 동작하는 것은 아닙니다. 사용자가 버튼을 누르면 데이터가 저장되고, 조회되고, 수정되는 기능이 함께 동작해야 합니다. 특히 본 세션에서는 Codex Client Workspace를 활용하여 정적 마크업에 이벤트를 매핑하고(Task 01), 필터가 유실되는 등 단절되는 유저 동선을 세션 스토리지를 활용하여 검증·보완하며(Task 02), 버튼 연타와 날짜 경계선 오류를 차단하는 기능 검증(Task 03)을 통해 온전히 가동되는 서비스를 조립합니다.

대상: 화면 뼈대 설계를 완료한 학생
준비물: 노트북, VS Code, 웹 브라우저
구성: 2시간 이론 / 3시간 실습 / 1시간 공유
📖 Session 7 교안 바로가기

🚀 Day 7 실습 MVP Tasks 로드맵

전체 Task 보드 가기 →
🚀
Interactive Board

실습 Task 체크리스트

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

👉 상세 Task 보드 이동
TASK 1
Integration

Task 1. 기능 연결하기

회원가입 폼 전송 액션을 차단하고 로컬 스토리지 적재 및 화면 전환을 구현합니다.

Task 1 실습실 입장
TASK 2
Scenario

Task 2. 사용자 시나리오 검증하기

검색 목록 복귀 시 필터 리셋 단절을 해결하는 임시 세션 백업 가드를 설정합니다.

Task 2 실습실 입장
TASK 3
Validation

Task 3. 기능 오류 찾기

연타 클릭 중복 데이터 삽입과 과거 시점 시간 등록 이상 입력 결함을 차단합니다.

Task 3 실습실 입장
MISSION 1
Review

Mission 1. AI와 서비스 완성도 점검

로딩 피드백(Spinner) 누락 및 스토리지 예외 처리를 담은 종합 품질 진단을 받습니다.

Mission 1 실습실 입장
MISSION 2
E2E Scenario

Mission 2. 처음부터 끝까지 사용해보기

초보 사용자 페르소나의 동선 피드백을 반영해 완주 가능한 E2E 시나리오를 입증합니다.

Mission 2 실습실 입장

Day 7 강의 영상

유튜브 추천 강의
Day 7 커리큘럼 핵심 주제(MVC, 계층형 아키텍처, Express.js, CRUD API, DB 연동)에 해당하는 유튜브 추천 강의 리스트입니다. (외부 퍼가기 및 재생이 허용된 무료 강의 영상으로 구성되었습니다.)
📚 전체 강의 목록 (5개)
  • 1. WEB3 - Express - 1. 수업소개 (생활코딩)
    5:12
  • 2. WEB3 - Express - 5.1. 상세페이지구현 1 - Route Parameter (생활코딩)
    6:45
  • 3. WEB3 - Express - 6. 페이지 생성 구현 (생활코딩)
    8:30
  • 4. WEB3 - Express - 7. 페이지 수정 구현 (생활코딩)
    7:15
  • 5. WEB3 - Express - 8. 페이지 삭제 구현 (생활코딩)
    6:20

핵심 요약 노트

Day 7 Summary

오늘의 핵심 목표

Day 7에서는 프론트엔드에서 호출한 API가 서버에서 어떻게 처리되는지 이해하고, Express.js 기반의 MVC 및 4계층 구조를 바탕으로 실제 CRUD API를 구현합니다.

  • Express.js 프로젝트 구성: RESTful API 설정을 위한 서버 환경 및 라우팅 설정
  • 계층형 아키텍처 설계: Route -> Controller -> Service -> Repository 구조 분리
  • 데이터베이스 CRUD 구현: ORM 또는 raw SQL을 이용한 데이터 CRUD 로직 작성
  • RESTful API 엔드포인트 개발: URI 설계 가이드라인에 부합하는 REST API 완성
  • 예외 처리 및 미들웨어 적용: 비즈니스 에러 및 전역 에러 핸들러 구성
학습 팁: 오른쪽 AI 챗봇에게 “계층형 아키텍처에서 Controller와 Service의 역할 분담을 어떻게 해?” 또는 “Express.js에서 전역 에러 핸들러 미들웨어를 어떻게 설정해?” 같은 질문을 해보세요.