ONLINE CLASS

AI 풀스택

?

수강 전 꼭 확인하세요

수강 전 자주 묻는 내용을 간단히 안내드립니다.

Q초보자도 교재 없이 수강 가능한가요? 프로그램 정보는?
A

네, 영상과 실습자료로 쉽게 학습할 수 있습니다. 알지오는 원격평생교육원으로 프로그램 관련 정보는 제공하지 않습니다.

◆
기업이 선택한 신뢰 강의

검증된 커리큘럼과 전문 강사진으로 높은 만족도를 제공합니다.

자세히 보기  >
♥
수강료 일부는 사회환원에 사용됩니다.

작은 나눔이 더 나은 내일을 만듭니다.

자세히 보기  >
REAL REVIEW

수강생 리얼후기!

실제 수강생의 학습 경험을 확인해 보세요.

수강후기를 불러오는 중입니다.

RECENT Q&A

최근 수강질문

최근 등록된 수강질문을 작성순서대로 확인해 보세요.

AI 풀스택 AI 풀스택
  • AI 풀스택

  • 강의구성
  • (40강) 전체 : 7시간 12분|평균 : 10분48초
  • 이용기간/강사
  • 2개월
    알지오 R&D [AI]
  • 증빙가능
  • 수료증, 수강증, 학습진도
  • 수강료
  • 330,000원할인165,000원
?

수강 전 꼭 확인하세요

수강 전 자주 묻는 내용을 간단히 안내드립니다.

Q 초보자도 교재 없이 수강 가능한가요? 프로그램 정보는?
A

네, 영상과 실습자료로 쉽게 학습할 수 있습니다. 알지오는 원격평생교육원으로 프로그램 관련 정보는 제공하지 않습니다.

  • 01.12분 AI 풀스택 개발 시작하기
    AI와 함께 웹서비스가 완성되는 전체 개발 과정 이해하기
    프론트엔드·백엔드·데이터베이스·AI API 역할, 최종 완성 서비스 미리보기, 개발 단계 확인, 로컬·운영 환경 구분, 실습 목표 정하기
  • 02.11분 Windows 개발 환경 완성하기
    필수 개발 도구를 설치하고 첫 프로젝트 실행하기
    Node.js LTS·npm·VS Code·Git 설치, Windows 터미널 사용, 브라우저 개발자 도구, 프로젝트 폴더 만들기, 예제 서버 실행하기
  • 03.12분 AI 코딩 도구 실무 사용법
    Cursor 또는 Claude Code로 코드 작성과 수정 작업 진행하기
    AI 코딩 도구 설정, 프로젝트 규칙과 작업 지시 작성, 기능 단위 코드 생성, 변경 사항 확인, 에러 원인 분석, 수정 결과 테스트하기
  • 04.11분 Git·GitHub 버전 관리 시작하기
    실습 파일을 안전하게 저장하고 이전 코드로 복구하기
    Git 초기화, .gitignore와 비밀정보 제외, GitHub 저장소 생성, commit·push·pull, 브랜치 작업, 오류 발생 시 변경 내용 되돌리기
  • 05.11분 서비스 기획과 AI 개발 명세 만들기
    업무관리 SaaS의 화면과 기능을 직접 설계하기
    사용자 시나리오, 기능 요구사항 분리, 화면 목록·와이어프레임, 데이터 항목 정의, AI 개발 작업 계획, 기능별 완료 조건 만들기
  • 06.10분 HTML로 첫 서비스 화면 만들기
    실제 랜딩페이지 구조를 작성하고 브라우저에 표시하기
    header·nav·main·section·footer 구성, 제목·버튼·카드 배치, 입력 폼, 시맨틱 HTML, 접근성 기본, 첫 페이지 완성하기
  • 07.10분 CSS와 반응형 디자인 완성하기
    PC와 모바일에서 보기 좋은 웹사이트 제작하기
    CSS 선택자·박스 모델, Flexbox·Grid 배치, 색상·타이포그래피, 미디어 쿼리, 모바일 반응형, 랜딩페이지 스타일 완성하기
  • 08.11분 JavaScript로 화면 움직이기
    버튼·입력값·목록을 직접 제어하는 기능 만들기
    변수·조건문·함수, 배열·객체, DOM 선택과 변경, 클릭 이벤트, 입력값 처리, 할 일 추가 버튼 동작시키기
  • 09.10분 JavaScript 비동기 통신 실습
    데이터 요청과 응답을 화면에 연결하기
    JSON 데이터 구조, fetch·async/await, HTTP GET·POST 이해, 연습용 데이터 요청, 오류 메시지, 로딩 상태 표시하기
  • 10.12분 TypeScript로 안전한 코드 작성하기
    타입 오류를 줄이며 업무 데이터 모델 만들기
    기본 타입, 객체·배열 타입, interface·type, 함수 인자·반환값, 선택 필드, 업무 데이터 타입 직접 정의하기
  • 11.12분 React·Next.js 프로젝트 생성하기
    실제 풀스택 개발에 사용할 웹앱 기반 완성하기
    Next.js App Router 설치, TypeScript·Lint 설정, npm scripts, 폴더 구조 이해, 첫 개발 서버 실행, GitHub 초기 버전 저장하기
  • 12.11분 페이지 이동과 공통 레이아웃 만들기
    여러 화면이 연결되는 업무관리 서비스 구성하기
    App Router의 page·layout, Link 이동, 대시보드·프로젝트·설정 페이지, 공통 헤더·사이드바, 없는 페이지 처리하기
  • 13.12분 Tailwind CSS와 UI 컴포넌트 적용하기
    완성도 높은 대시보드 디자인 제작하기
    Tailwind 유틸리티, shadcn/ui, 버튼·카드·모달·탭 배치, 반응형 간격, 색상 테마, 모바일 UI 확인하기
  • 14.12분 React 컴포넌트와 데이터 전달하기
    재사용 가능한 업무관리 화면 구조 만들기
    컴포넌트 분리, Props 전달, 배열 반복 렌더링, key 사용, 공통 카드·목록 제작, 중복 화면 코드 정리하기
  • 15.12분 React 상태와 입력 이벤트 처리하기
    사용자 조작에 따라 화면이 바뀌도록 만들기
    useState, 입력값 연결, 체크박스·선택창, 모달 열기·닫기, 목록 실시간 갱신, 컴포넌트 상태 관리하기
  • 16.12분 목록·상세 화면과 데이터 표시하기
    업무 데이터를 불러와 사용자 화면에 출력하기
    Server·Client Component 활용, 연습용 데이터 연결, 로딩·빈 목록·오류 화면, 상세 페이지, 데이터 갱신 확인하기
  • 17.10분 입력 폼과 유효성 검사 적용하기
    잘못된 데이터가 등록되지 않도록 폼 만들기
    React Hook Form·Zod, 필수값·글자 수 검증, 필드별 오류 메시지, 중복 제출 방지, 업무 등록 폼 완성하기
  • 18.12분 첫 미니 프로젝트 완성하기
    브라우저에서 동작하는 개인 할 일 관리 앱 만들기
    할 일 등록·수정·삭제, 완료 상태 변경, localStorage 저장, 상태별 필터, 새로고침 복구, AI 생성 코드 검토하기
  • 19.11분 프론트엔드와 서버 코드 분리하기
    브라우저와 서버가 처리할 작업을 정확히 구분하기
    Server·Client Component 차이, 서버 전용 코드, 환경변수, API 키 노출 위험, 데이터 요청 흐름, 서버 실행 확인하기
  • 20.11분 Next.js API 서버 만들기
    웹화면의 요청을 처리하는 백엔드 API 구현하기
    Route Handlers, GET·POST·PATCH·DELETE, JSON 요청·응답, HTTP 상태코드, 서버 오류 처리, API 요청 테스트하기
  • 21.10분 Server Actions로 데이터 처리하기
    입력 폼에서 서버 변경 작업까지 연결하기
    Server Actions 작성, 서버 입력값 재검증, 연습용 저장 함수 연결, 처리 결과 반환, 오류 복구, 화면 갱신 동작 확인하기
  • 22.11분 Supabase 데이터베이스 준비하기
    실제 데이터가 저장되는 PostgreSQL 환경 구성하기
    Supabase 프로젝트 생성, Database·Table Editor, SQL Editor 사용, 테이블·행·열 이해, 연결 정보 확인, 테스트 데이터 저장하기
  • 23.9분 SQL로 데이터 직접 관리하기
    등록된 업무 데이터를 검색하고 수정하기
    SELECT·INSERT·UPDATE·DELETE, WHERE·ORDER BY, COUNT·GROUP BY, 조건 검색, SQL 실행 결과 검증하기
  • 24.10분 관계형 데이터베이스 설계하기
    사용자·프로젝트·업무의 연결 구조 만들기
    ERD 작성, 기본키·외래키, profiles·projects·tasks 설계, 사용자 참조 관계, 제약조건·인덱스, 테스트 데이터 구성하기
  • 25.11분 Next.js와 Supabase 연결하기
    웹앱과 데이터베이스를 안전하게 연동하기
    Supabase SDK 설치, 환경변수 작성, 서버·브라우저 클라이언트 설정, 데이터 조회, 연결 오류 해결, 로컬 연동 검사하기
  • 26.10분 회원가입과 로그인 구현하기
    사용자 계정을 만들고 실제 인증 기능 연결하기
    Supabase Auth, 이메일 회원가입·로그인, 로그아웃, 비밀번호 재설정, 오류 안내, 서로 다른 계정으로 로그인 테스트하기
  • 27.9분 로그인 상태와 보호된 화면 만들기
    인증되지 않은 사용자의 접근을 차단하기
    세션 확인, 서버 측 사용자 검증, 비공개 페이지 보호, 로그인 후 이동, 로그아웃 뒤 접근 차단, 인증 오류 테스트하기
  • 28.9분 RLS로 회원별 데이터 보호하기
    다른 회원의 정보가 보이지 않도록 권한 설정하기
    Row Level Security 활성화, 최소 권한 부여, SELECT·INSERT·UPDATE·DELETE 정책, 소유권 검사, 두 계정으로 차단 테스트하기
  • 29.9분 실제 DB 기반 업무 CRUD 완성하기
    미니 프로젝트를 온라인 업무관리 서비스로 확장하기
    업무 등록·조회·수정·삭제, Supabase 데이터 저장, Server Actions 연결, 회원별 데이터 분리, 화면 갱신, 새로고침 검증하기
  • 30.10분 검색·필터·페이지네이션 구현하기
    업무가 많아도 원하는 내용을 빠르게 찾기
    키워드 검색, 상태·날짜별 필터, 정렬, 페이지 단위 조회, URL 검색 조건 유지, 검색 결과 없음 처리하기
  • 31.10분 파일 업로드와 자료 관리 만들기
    업무에 이미지와 문서를 첨부하는 기능 구현하기
    Supabase Storage, 파일 선택·업로드, 확장자·크기 검사, 비공개 버킷 권한, 첨부파일 목록, 다운로드·삭제 확인하기
  • 32.11분 업무 통계 대시보드 제작하기
    프로젝트 진행 현황을 차트로 확인하기
    전체·완료·진행 중 업무 집계, SQL 그룹화, 통계 카드·차트, 기간별 조회, 사용자별 접근 제한, 반응형 대시보드 완성하기
  • 33.11분 AI API를 백엔드에 연결하기
    서비스에 생성형 AI 기능을 안전하게 추가하기
    AI API 계정·키 준비, 서버 환경변수, 요청·응답 처리, 사용량·비용 확인, 백엔드 API 연결, 기본 답변 화면 만들기
  • 34.10분 AI 업무 요약·자동 분류 기능 만들기
    등록된 업무를 AI가 요약하고 분류하게 만들기
    프로젝트 데이터 불러오기, 프롬프트 템플릿, 요약 생성, 우선순위·카테고리 추천, 결과 검토·저장, 실패 처리하기
  • 35.11분 대화형 AI 도우미 만들기
    사용자 질문을 연속해서 처리하는 채팅 화면 완성하기
    채팅 UI, 메시지 상태·대화 기록, 서버 기반 AI 호출, 스트리밍 응답, 재시도 처리, 토큰 사용량 관리하기
  • 36.12분 문서 임베딩과 벡터 검색 구성하기
    첨부된 텍스트 자료에서 의미가 비슷한 정보 찾기
    텍스트 추출·분할, Embedding 생성, pgvector 테이블 설정, 벡터 저장, 유사도 검색, 사용자별 검색 권한 검사하기
  • 37.12분 RAG 문서 질문답변 서비스 구현하기
    내 문서를 근거로 답변하는 AI 기능 완성하기
    질문 벡터 생성, 관련 문서 검색, 검색 문맥을 넣은 AI 응답, 출처 표시, 근거 없는 답변 제한, 실제 문서 질의 검증하기
  • 38.12분 결제 테스트와 요금제 화면 제작하기
    AI SaaS의 무료·유료 이용 흐름 구현하기
    무료·유료 요금제 화면, 결제 테스트 환경, 결제 요청·서버 승인 확인, 성공·실패 처리, 이용 권한 변경, 중복 결제 방지 점검하기
  • 39.10분 보안 검사와 자동 테스트 진행하기
    서비스 공개 전에 오류와 접근 권한 문제 해결하기
    서버 입력 검증, 비밀키 노출 점검, RLS 차단 테스트, 기본 단위 테스트, Playwright E2E 시나리오, AI 생성 코드 오류 수정하기
  • 40.10분 Vercel 배포와 AI 풀스택 서비스 완성
    완성한 웹서비스를 공개하고 운영 환경까지 점검하기
    GitHub 배포 연결, 운영 환경변수·도메인·HTTPS, 빌드 오류 해결, 로그·사용량 모니터링, 모바일 최종 검사, 포트폴리오 시연하기

강의목록 다운로드                        1:1 강의 질문&답변






도움이 필요하신가요?
💬
알지오 학습·수강 도우미
운영진이 확인한 안내를 자세히 보고, 필요하면 바로 상담하세요.
상담 상태 확인 중