Thumbnail
BEST
개발 · 프로그래밍 프론트엔드

Svelte.js SPA 영화 검색 프로젝트 대시보드

(5)
29개의 수강평 ∙  359명의 수강생

42,900원

지식공유자: HEROPY
총 49개 수업 (7시간 46분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

중급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

Svelte 기반의 SPA 영화 검색 사이트를 만들어 배포합니다!

✍️
이런 걸
배워요!
Svelte.js의 SPA(싱글 페이지 애플리케이션)을 구성할 수 있어요!
SPA의 장점을 활용하고 단점을 보완할 수 있어요!
Serverless Functions를 사용해 손쉽게 백엔드 API를 구성할 수 있어요!

스벨트 활용, 직접 만드는 SPA 예제로!

다른 Svelte 강의도 참고하세요!
"Svelte.js Core API 완벽 가이드"
"Svelte.js 입문 가이드"


시작하면서!

Svelte.js를 이용해 SPA(싱글 페이지 애플리케이션) 예제를 만들어보세요!
라우터를 사용해 페이지를 구분하고 전환 효과와 스크롤 복구 등 다양한 기능을 적용할 수 있습니다.

부담스러운 별도의 서버 구축 없이 SF(서버리스 함수)를 사용해,
빠르게 백엔드 API를 만들고 쉽게 관리할 수 있습니다.
SPA의 단점인 보안 이슈를 쉽고 빠르게 해결하세요!

Snowpack은 가장 최신의 빌드 도구로,
개발 빌드 시간을 획기적으로 단축할 수 있습니다.
더 쾌적한 환경에서 개발할 수 있어요!

Netlify의 CD(지속적 배포)를 사용해요.
GitHub 저장소에 업로드하면 바로 사이트가 자동 배포되니,
사이트 배포에 시간을 들이지 않아도 됩니다!


참고하세요!

이번 강의는 선수지식이 필요한 강의이지만, 최대한 쉽게 풀어 설명하고 있습니다.
앞서 출시한 'Svelte.js Core API 완벽 가이드'로 Svelte 기본기를 다진 후
본 강의를 들으시면 더욱 좋습니다.


OMDb API를 활용해 실제 영화를 검색할 수 있는 SPA 사이트를 만들어 봅니다!
Netlify Serverless Functions로 백엔드 API를 구성해,
API Key 노출 없이 사용자에게 검색 기능을 제공할 수 있습니다.

GitHub Repo: https://github.com/HeropCode/Svelte-Movie-app
Demo: https://competent-cori-258206.netlify.app

 


Specs

Svelte
Snowpack
SPA Router
OMDb API
Netlify Hosting with GitHub(CD)
Netlify Serverless Functions


Packages

snowpack
@snowpack/plugin-svelte
@snowpack/plugin-dotenv
@snowpack/plugin-sass
@snowpack/plugin-optimize
@snowpack/plugin-babel
babel-plugin-transform-remove-console
svelte
svelte-spa-router
autoprefixer
postcss
lodash
axios
qs
netlify-cli


질문이 있으면?

수강 중 질문이 생기면 질문 & 답변 페이지를 사용해 주세요.
최대한 빠르게 답변을 드리겠습니다.

수강이 고민되거나 기타 수강 전 궁금한 부분이 있다면,
수강 전 문의 페이지를 사용해 주세요.


Svelte 문서.

Svelte API에 대한 한글 문서가 필요하시면,
'Svelte.js 완벽 가이드(Renew)' 포스트를 확인하세요.
https://heropy.blog/2019/09/29/svelte


공지사항!

2020.12.24
다음 파트를 추가했습니다!
전체 강의 예제를 시작하기 전에 꼭 보세요!
- 2-1. 강의 예제 모듈 버전 일치시키기

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
Svelte.js 활용 예제가 필요하신 분!
SPA 사이트 제작을 준비하시는 분!
Netlify Serverless Functions를 경험하고 싶으신 분!
📚
선수 지식,
필요할까요?
HTML
CSS(SCSS)
JS
Svelte

안녕하세요
HEROPY 입니다.
HEROPY의 썸네일

   

안녕하세요~ 반갑습니다!
저는 현재 작은 스타트업에서 기업 관리 솔루션을 개발하고 있는 프론트엔드 개발자 박영웅입니다.

HEROPY 기술 블로그를 운영하고 있고,
그 외 기업 출강이나 온/오프라인 강의 활동도 하고 있습니다.

Blog: https://heropy.blog
Youtube: https://www.youtube.com/channel/UCcjhMpoaNvyy0StN9KgtF6w

Email: thesecon@gmail.com

    

커리큘럼 총 49 개 ˙ 7시간 46분의 수업
이 강의는 영상이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. Snowpack으로 프로젝트 구성
1. Snowpack 기반으로 시작하기 미리보기 10:26
2. Assets 가져오기 02:33
3. SCSS와 Autoprefixer 구성 12:45
4. Babel로 제품 모드 콘솔 제거 10:36
5. 경로 별칭 및 빌드 최적화 구성 07:58
6. Svelte & Snowpack Template 미리보기 03:07
섹션 3. 영화 검색 프로젝트 기본 구조 작성
1. SPA 라우터 설치 및 구성 미리보기 10:04
2. SPA 라우츠 링크와 하이라이팅(active) 07:58
3. 구글 폰트 적용 및 브라우저 스타일 초기화 05:43
4. 로고 컴포넌트 작성 04:38
5. 전역 메뉴 작성 및 라우츠 파라미터 11:33
6. 경로 와일드카드 04:45
7. 스타일 전역화 07:02
8. Header 컴포넌트 작성 11:41
9. VS Code SCSS 스타일 에러 해결 미리보기 03:17
10. Footer 컴포넌트 작성 03:33
11. Headline 컴포넌트 작성 07:39
12. Search 컴포넌트 이해 14:21
13. Search 컴포넌트 작성 27:22
섹션 4. OMDb API 그리고 SPA Router
1. OMDbAPI.com 개요 06:48
2. 영화 검색 및 추가 검색 구현 26:20
3. 영화 목록에서 ID 중복 제거 09:35
4. 목록으로 출력될 영화 카드 만들기 25:04
5. 이미지 렌더링 전 로딩 애니메이션 추가 13:30
6. 영화 목록 로딩 애니메이션 추가 04:55
7. 스켈레톤 UI 11:33
8. 영화 상세 정보 요청 08:26
9. 영화 상세 정보 페이지 스타일링 14:55
10. 더 높은 해상도의 영화 포스터 가져오기 07:51
11. 응답 에러 출력과 movie.js 리팩토링 17:55
12. About 페이지 작성과 Query String 분석 18:45
13. Router Push와 URL Encoding 07:09
14. 404 Page Not Found 04:34
15. 검색 정보 초기화 및 누락된 코드 수정 04:52
16. 페이지 전환 효과(Fade) 07:17
17. 페이지 전환 스크롤 위치 복구 04:17
18. 반응형 스타일 일괄 적용 18:29
섹션 5. GitHub 그리고 Netlify
1. .gitignore 생성하고 GitHub에 푸쉬 06:40
2. Netlify 배포(CD) 04:15
3. Netlify Serverless Functions 15:47
4. Netlify-CLI 10:48
5. 영화 정보 반환 API 만들기 10:41
6. 로컬 및 서버의 환경 변수 구성 06:36
7. 배포 및 테스트 01:10
8. 추후 관리를 위한 개발 서버 포트 수정 미리보기 04:07
강의 게시일 : 2020년 12월 11일 (마지막 업데이트일 : 2020년 12월 11일)
수강평 총 29개
수강생분들이 직접 작성하신 수강평입니다.
5
29개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
정현진 Jeong thumbnail
5
실제로 도움이 되는 정보가 풍부해서 많이 배웠습니다.
2021-03-13
지식공유자 HEROPY
제 강의가 도움이 돼서 기분이 좋네요! 좋게 봐주셔서 정말 감사합니다. 즐거운 한 주 되세요~😊
2021-03-15
mysend12 thumbnail
5
프론트쪽에 관심이 많았었는데, 진행이 깔끔해서 머릿속에 쏙쏙 박히는 느낌이었고 무엇보다 재밌게 봤습니다!
2021-03-28
지식공유자 HEROPY
제 강의를 좋게 봐주셔서 감사드려요~ 재미있게 보셨다니 다행이네요. 강의가 도움이 되었길 바라요~ 감사합니다.😉
2021-04-01
HAN_MG thumbnail
5
좋은 강의 감사합니다. svelte뿐만 아니라 실습 배포에 필요한 netlify에 대한 정보도 많이 얻을 수 있었습니다.
2021-03-11
지식공유자 HEROPY
제 강의가 HAN_MG 님께 도움이 되었다니 다행입니다. 더 좋은 강의로 찾아뵐 수 있으면 좋겠네요~😆 감사합니다.
2021-03-12
jude thumbnail
5
스벨트로 만드는 영화검색 프로젝트 완강했습니다 :) 사실 이 강의를 구입해놓고 앞부분만 조금 보고나서 시간이 꽤 됐는데, 퇴사 후 본격적으로 프론트 개발 공부 준비를 하면서 다시 찾아보게 됐어요. 강사님을 처음 알게된건 유튜브 스벨트 강의 였는데, 설명이 간단 명료하고, 뭐랄까... 디자이너 출신이셔서 그런지 기초 지식이 거의 없어도 설명만 잘 따라 오면 누구나 이해할 수 있도록 진행하는 것이 정말 탁월했어요. 패스트캠퍼스의 초격차 패키지에서 vue.js로 만든 영화검색 사이트 예제를 진행하고나서 이 강의를 비교해가면서 진행해봤는데 역시 코드량이 많이 줄어든 것을 볼 수 있고, vue의 복잡한 store 개념이 아예 빠져버리니까 프로젝트 설계의 큰 그림을 좀 더 명료하게 잡을 수 있는거 같아요. 그리고 스벨트는 정말 나날이 빠르게 발전해나가는 프레임워크인거 같아요, daum 첫 화면도 이미 스벨트를 쓰고 있어서 실무에 써도 될만큼 부족함이 없다는 것이 앞으로 더욱 기대가 되는거 같아요. 여전히 react나 vue가 많긴 하지만 채용 시장에서 조금씩 스벨트라는 단어가 나오는 것도 보이구요 ㅎㅎ 앞으로 프론트 개발자가 되고 싶은 분들이라면 이 강의 뿐만 아니라 박영웅 강사님의 스벨트 입문, 완벽 가이드 강의도 적극 추천 드립니다 :D 감사합니다.
2022-03-12
Jon thumbnail
5
최고입니다. 매우 깔끔한 강의구성입니다
2021-03-06
지식공유자 HEROPY
Jon 님 안녕하세요~ 힘이 나는 멋진 수강평 감사합니다~👍 즐거운 하루 보내세요!🍀
2021-03-08