Thumbnail
NEW
개발 · 프로그래밍 풀스택

야, 너도 AI 서비스 만들 수 있어. [이미지 AI 서비스 서버리스 풀스택] 대시보드

21명이 수강하고 있어요.
128,700원

월 25,740원

5개월 할부 시
지식공유자: 배울장
총 40개 수업 (5시간 33분)
수강기한: 
12개월
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[풀스택, AI · ChatGPT 활용] 강의입니다.

AI 반려동물 컨셉 이미지 생성 서비스로 배워보는 서버리스 풀스택 개발, 배포

✍️
이런 걸
배워요!
AI 서비스에 특화된 리액트 개발
유지비용이 적은 AWS 서버리스 백엔드
비용 효율적인 AI 서버리스 구축
도메인 적용
토스페이먼츠 결제 연동
AWS DynamoDB, S3, Lambda
Docker를 이용한 AI 서버 구축
CI/CD

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
나만의 AI 서비스를 만들고 싶었던 분
AI 서비스를 만들고 싶은데, 비용이 부담됐던 분
서버리스로 풀스택 개발, 배포를 해보고 싶으신 분
📚
선수 지식,
필요할까요?
HTML, CSS
Javascript(필수, 문법은 알아야 함)
React(필수는 아님)

안녕하세요
배울장 입니다.
배울장의 썸네일

AI 서비스 사이드 프로젝트를 많이 진행합니다.

서버리스로 비용 효율적인 구조를 만드는데 큰 관심이 있습니다.

커리큘럼 총 40 개 ˙ 5시간 33분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 미션 소개
섹션 1. 전체적인 프로젝트 틀 잡기
Lecture 1-1 - AWS API 키, SES 자격 증명 받기 05:24
Lecture 1-2 - Node 설치(18이상), VSCode 설치, SST 프로젝트 만들기 09:54
Lecture 1-3 - 프론트 프로젝트 추가 04:51
섹션 2. React 프로젝트 생성 & 페이지 라우팅
Lecture 2-1 - 프론트 페이지 기본 구조 구현 07:33
섹션 3. Home 화면 기능 & 디자인 구현하기
Lecture 3-1 - 메인 페이지 구현하기 12:14
섹션 4. Start 화면 기능 구현 Part 1 - 이미지 파일 업로드하기
Lecture 4-1 - Start 화면 기능 소개, Upload 버튼 추가, CSS 수정 방법 소개 07:22
Lecture 4-2 - 업로드 기능 구현, UseState, OnChange 설명 미리보기 06:26
섹션 5. Start 화면 기능 구현 Part 2 - 이미지 크롭 기능 구현하기
Lecture 5-1 - 이미지 전처리와 함수 모듈화 04:02
Lecture 5-2 - utils.js 코드 살펴보기, Promise와 비동기 함수 13:19
Lecture 5-3 - utils.js 속 함수를 start.jsx에서 사용하기 05:54
섹션 6. Start 화면 기능 구현 Part 3 - 크롭된 이미지를 수정할 수 있는 모달 띄우기
Lecture 6-1 - 크롭 위치 수정해야하는 이유 소개, ImageCropModal 컴포넌트 만들기 06:39
Lecture 6-2 - useEffect 훅이란? 04:31
Lecture 6-3 - useRef 훅이란? 05:15
Lecture 6-4 (심화) - 이미지 크롭 위치를 수정하기 위한 함수들 30:17
섹션 7. 백엔드 이메일 보내기, 컬렉션 데이터 만들기
Lecture 7-1 - 이메일 보내는 API 함수 07:44
Lecture 7-2 - 컬렉션 데이터베이스 생성 06:10
Lecture 7-3 - Postman으로 API 테스트하기 06:32
섹션 8. Start 화면 기능 구현 Part 4 - 생성할 이미지 컬렉션 데이터를 서버에 전송하기
Lecture 8-1 - 여러 인풋 핸들링하는 CollectionInfo 컴포넌트 만들기 09:38
Lecture 8-2 - axios로 데이터 전송하기, env 변수 정리하기 08:28
섹션 9. Start 화면 기능 구현 Part 5 - Loading 추가하기
Lecture 9-1 - Loading 컴포넌트 만들어 로딩창 구현하기 05:44
섹션 10. 컬렉션 데이터 불러오기
Lecture 10-1 - 컬렉션 데이터 불러오는 API 함수 05:27
섹션 11. Order 화면 디자인 구현하기
Lecture 11-1 - Order 페이지 기본 구성, Table 컴포넌트 12:30
섹션 12. 백엔드 토스페이먼트 결제 승인하기, AI 서버 더미로 실행하기
Lecture 12-1 - PG사 결제 승인 방식 설명, 토스페이먼츠 결제 승인하기, AI 서버 실행하는 API 14:18
섹션 13. 토스페이먼츠 결제 구현
Lecture 13-1 - 토스페이먼츠 프론트엔드 구축 14:38
섹션 14. Status 페이지 구현하기
Lecture 14-1 - Status 페이지 구현하기, ProgressBar 컴포넌트 작성하기 09:55
섹션 15. 백엔드 AI 서버리스 서비스 구축
Lecture 15-1 - 이미지 생성 AI 드림부스, RunPod과 백엔드 구조 이해하기 07:41
Lecture 15-2 - 서버리스 템플릿 Dockerfile 설정 08:30
Lecture 15-3 - Docker 빌드하기 11:54
Lecture 15-4 - RunPod 서버리스 세팅 11:14
Lecture 15-5 - RunPod 테스트 하기, API 작성하기 07:09
섹션 16. See 페이지 구현하기
Lecture 16-1 - See 페이지 구현하기 05:17
섹션 17. 배포 및 도메인 설정, 프로젝트 삭제하기
Lecture 17-1 - 커스텀 도메인 설정, cloudwatch 로그 확인, SES 샌드박스 해제 11:16
Lecture 17-2 - 배포에 필요한 코드 수정 08:26
Lecture 17-3 - 프로젝트 삭제 04:50
Lecture 17-4 - 커스텀 도메인으로 배포하기 04:13
섹션 18. 프로젝트 고도화하기
Lecture 18-1 - 오류 해결 과정 Part.1 08:47
Lecture 18-2 - 오류 해결 과정 Part.2 10:20
강의 게시일 : 2024년 02월 07일 (마지막 업데이트일 : 2024년 02월 15일)
수강평
수강생분들이 직접 작성하신 수강평입니다.
아직 평가를 충분히 받지 못한 강의 입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!😄️️