128,700원
월 25,740원
5개월 할부 시
초급자를 위해 준비한
[풀스택, 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. 강의 미션 소개
3 강
∙ 9분
섹션 1. 전체적인 프로젝트 틀 잡기
3 강
∙ 20분
Lecture 1-1 - AWS API 키, SES 자격 증명 받기
05:24
Lecture 1-2 - Node 설치(18이상), VSCode 설치, SST 프로젝트 만들기
09:54
Lecture 1-3 - 프론트 프로젝트 추가
04:51
섹션 2. React 프로젝트 생성 & 페이지 라우팅
1 강
∙ 7분
Lecture 2-1 - 프론트 페이지 기본 구조 구현
07:33
섹션 3. Home 화면 기능 & 디자인 구현하기
1 강
∙ 12분
Lecture 3-1 - 메인 페이지 구현하기
12:14
섹션 4. Start 화면 기능 구현 Part 1 - 이미지 파일 업로드하기
2 강
∙ 13분
Lecture 4-1 - Start 화면 기능 소개, Upload 버튼 추가, CSS 수정 방법 소개
07:22
Lecture 4-2 - 업로드 기능 구현, UseState, OnChange 설명
미리보기
06:26
섹션 5. Start 화면 기능 구현 Part 2 - 이미지 크롭 기능 구현하기
3 강
∙ 23분
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 - 크롭된 이미지를 수정할 수 있는 모달 띄우기
4 강
∙ 46분
Lecture 6-1 - 크롭 위치 수정해야하는 이유 소개, ImageCropModal 컴포넌트 만들기
06:39
Lecture 6-2 - useEffect 훅이란?
04:31
Lecture 6-3 - useRef 훅이란?
05:15
Lecture 6-4 (심화) - 이미지 크롭 위치를 수정하기 위한 함수들
30:17
섹션 7. 백엔드 이메일 보내기, 컬렉션 데이터 만들기
3 강
∙ 20분
Lecture 7-1 - 이메일 보내는 API 함수
07:44
Lecture 7-2 - 컬렉션 데이터베이스 생성
06:10
Lecture 7-3 - Postman으로 API 테스트하기
06:32
섹션 8. Start 화면 기능 구현 Part 4 - 생성할 이미지 컬렉션 데이터를 서버에 전송하기
2 강
∙ 18분
Lecture 8-1 - 여러 인풋 핸들링하는 CollectionInfo 컴포넌트 만들기
09:38
Lecture 8-2 - axios로 데이터 전송하기, env 변수 정리하기
08:28
섹션 9. Start 화면 기능 구현 Part 5 - Loading 추가하기
1 강
∙ 5분
Lecture 9-1 - Loading 컴포넌트 만들어 로딩창 구현하기
05:44
섹션 10. 컬렉션 데이터 불러오기
1 강
∙ 5분
Lecture 10-1 - 컬렉션 데이터 불러오는 API 함수
05:27
섹션 11. Order 화면 디자인 구현하기
1 강
∙ 12분
Lecture 11-1 - Order 페이지 기본 구성, Table 컴포넌트
12:30
섹션 12. 백엔드 토스페이먼트 결제 승인하기, AI 서버 더미로 실행하기
1 강
∙ 14분
Lecture 12-1 - PG사 결제 승인 방식 설명, 토스페이먼츠 결제 승인하기, AI 서버 실행하는 API
14:18
섹션 13. 토스페이먼츠 결제 구현
1 강
∙ 14분
Lecture 13-1 - 토스페이먼츠 프론트엔드 구축
14:38
섹션 14. Status 페이지 구현하기
1 강
∙ 9분
Lecture 14-1 - Status 페이지 구현하기, ProgressBar 컴포넌트 작성하기
09:55
섹션 15. 백엔드 AI 서버리스 서비스 구축
5 강
∙ 46분
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 페이지 구현하기
1 강
∙ 5분
Lecture 16-1 - See 페이지 구현하기
05:17
섹션 17. 배포 및 도메인 설정, 프로젝트 삭제하기
4 강
∙ 28분
Lecture 17-1 - 커스텀 도메인 설정, cloudwatch 로그 확인, SES 샌드박스 해제
11:16
Lecture 17-2 - 배포에 필요한 코드 수정
08:26
Lecture 17-3 - 프로젝트 삭제
04:50
Lecture 17-4 - 커스텀 도메인으로 배포하기
04:13
섹션 18. 프로젝트 고도화하기
2 강
∙ 19분
Lecture 18-1 - 오류 해결 과정 Part.1
08:47
Lecture 18-2 - 오류 해결 과정 Part.2
10:20
강의 게시일 : 2024년 02월 07일
(마지막 업데이트일 : 2024년 02월 15일)
수강평
총 3개
수강생분들이 직접 작성하신 수강평입니다.
5
3개의 수강평
5점
4점
3점
2점
1점
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
1. 영상을 보고 코드를 따라 쓰느라 시간을 많이 허비하는 경우가 많았는데, 따로 복붙할 수 있는 강의자료를 제공해주셔서 영상에서는 코드가 어떻게 돌아가는지 설명을 해주셔서 이해하기 수월해서 좋았습니다.
2. 템포가 빠른 느낌은 있습니다. 아는 부분은 바로 넘어가고 몰랐거나 이해가 잘 되지 않는 부분은 돌아가서 다시 들으며 강의를 들었습니다.
3. 저는 리액트를 어느정도 공부를 한 상태여서 수월하게 들었으나 자바스크립트가 익숙하지 않으신 분이라면 따라가기 힘들 수 있을 것 같습니다.
4. 아무래도 풀스택이다보니 모두 디테일하게 들어가지는 않지만 프로젝트를 완성하는 데에는 부족함은 없었습니다.
5. 다른 강의에 비해 비싼 감이 있다고 느꼈는데, AI 프로젝트를 진행할 때 기반 코드를 얻었다는 느낌과 다른 강의에서는 찾을 수 없는 주제인 만큼 그 값어치를 한다고 생각합니다.
2024-03-11
사이드 프로젝트로 하기엔 서버 비용이 조금 부담스러웠는데 비용 효율적으로 할 수 있다는 걸 알게 되어서 좋은 강의였습니다!
2024-03-11
구현해보고 싶은 AI 이미지 생성 아이디어가 있었는데 딱 시의적절한 강의가 되어주었습니다! 좋은 서비스 만들어볼게요!
2024-03-10