커리큘럼 폴더

기초~중급 · 주 1회 3시간 · 총 12시간 · 프로젝트 중심

AI와 함께하는 풀스택 웹개발

Next.js와 데이터베이스로 실제 서비스를 만들되, 전 과정을 AI와 페어코딩으로 진행합니다. 화면·API·인증·배포를 연결하며 AI에게 맡기는 법과 검증하는 법을 함께 익힙니다.

  • Next.js
  • Database
  • Auth
  • Deploy
  • Pair
4주

주 1회 진행

12시간

총 학습 시간

60%

실습 비중

1개

풀스택 서비스

Overview

과정 개요

누구를 위한 과정인지, 무엇을 배우고 무엇을 남기는지 먼저 확인하세요.

01

교육 대상

  • 프론트만 알던 개발자
  • 풀스택으로 넓히려는 주니어
  • AI 페어코딩을 제대로 배우려는 사람
02

학습 목표

  • Next.js로 앱 구조 세우기
  • DB와 인증 연결
  • AI에게 작업을 맡기고 검증
  • 실제 도메인 배포
03

운영 방식

  • 4주 / 주 1회 / 회당 3시간
  • 강의 30% · 프로젝트 60% · 리뷰 10%
  • 하나의 서비스를 4주간 완성
04

최종 산출물

  • 인증·DB가 연결된 서비스
  • 코드 리뷰 기록
  • 배포된 도메인

Roadmap

4주 학습 로드맵

구조 → 데이터 → 인증 → 배포 순서로 완성도를 높입니다.

  1. Week 01구조

    제품 뼈대 세우기

    여러 화면이 연결된 앱 구조를 AI와 함께 만듭니다.

  2. Week 02데이터

    데이터 연결

    데이터베이스를 붙여 저장·조회를 구현합니다.

  3. Week 03인증

    인증과 권한

    로그인과 본인만 접근하는 영역을 만듭니다.

  4. Week 04배포

    배포와 점검

    실제 주소로 배포하고 보안·성능을 점검합니다.

Week01

제품 뼈대 세우기

여러 화면이 연결된 앱 구조를 AI와 함께 만듭니다.

  • Next.js
  • Pair
  • 실습
1교시

라우팅과 컴포넌트

  • App Router 구조
  • 서버·클라이언트 컴포넌트
  • 재사용 UI 설계
2교시

AI 페어코딩

  • 작업을 단위로 쪼개기
  • 생성 코드 읽기
  • 차이 검토와 반영
3교시

실습: 화면 3개

  • 목록·상세·작성
  • 라우팅 연결
  • 폼 검증

결과물라우팅이 연결된 앱 골격

Week02

데이터 연결

데이터베이스를 붙여 저장·조회를 구현합니다.

  • Database
  • CRUD
  • 실습
1교시

스키마 설계

  • 테이블과 관계
  • 마이그레이션
  • 타입 안전 쿼리
2교시

CRUD

  • 생성·조회·수정·삭제
  • 검증과 에러
  • 로딩·빈 상태
3교시

실습: 데이터 화면

  • 목록에 DB 연결
  • 작성 저장
  • 상세 조회

결과물DB에 저장되는 기능 한 세트

Week03

인증과 권한

로그인과 본인만 접근하는 영역을 만듭니다.

  • Auth
  • 권한
  • 실습
1교시

세션과 인증

  • 회원가입·로그인
  • 세션 관리
  • 보호된 라우트
2교시

권한 제어

  • 내 데이터만 접근
  • 역할 구분
  • 서버 검증
3교시

실습: 개인 공간

  • 로그인 흐름
  • 권한 적용
  • 예외 처리

결과물인증 기반 개인 영역

Week04

배포와 점검

실제 주소로 배포하고 보안·성능을 점검합니다.

  • Deploy
  • Review
  • Present
1교시

배포 파이프라인

  • 환경 변수
  • 빌드와 배포
  • 도메인·HTTPS
2교시

점검

  • 보안 체크
  • 성능·접근성
  • 에러 모니터링
3교시

완성 & 발표

  • 기능 마무리
  • 리뷰 반영
  • 최종 발표

결과물실제 도메인으로 접속되는 서비스

Core practice

AI 페어코딩 4원칙

쪼개기 → 맡기기 → 읽기 → 검증. AI를 잘 쓰는 개발자는 결과를 검증합니다.

Split01

작업 단위 분해

예: 작은 PR 단위

Delegate02

명확히 맡기기

예: 완료 조건 명시

Read03

생성 코드 이해

예: diff 설명하기

Verify04

테스트로 확인

예: 동작 고정

Before

“AI가 준 코드를 그냥 붙여넣어요”

After

“쪼개 맡기고 읽고 테스트로 검증”

Result

최종 산출물과 평가 기준

배포자료, 실습자료, 발표자료까지 한 번에 완성합니다.

최종 산출물

  • 인증·DB가 연결된 서비스
  • 코드 리뷰 기록
  • 배포된 도메인

평가 기준

  • 기능이 끝까지 연결되는가
  • 생성 코드를 이해하는가
  • 인증·권한이 안전한가
  • 실제로 배포됐는가

활용 예시

  • 예약 서비스
  • 커뮤니티 게시판
  • 사내 요청 관리
  • 1인 커머스

코드를 받는 개발자에서, 맡기고 검증하는 개발자로.

Join this course

AI와 함께하는 풀스택 웹개발, 지금 바로 시작해 보세요.

수강 상담