Thumbnail
개발 · 프로그래밍 모바일 앱 개발

Flutter + Firebase로 넷플릭스 UI 클론 코딩하기 [무작정 플러터] 대시보드

(4.7)
153개의 수강평 ∙  7,937명의 수강생

무료

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

초급자를 위해 준비한
[풀스택, 모바일 앱 개발] 강의입니다.

본 강의는 Flutter와 Firebase로 넷플릭스 UI를 클론 코딩하는 강의입니다! 가장 빠르게 앱 개발을 공부할 수 있는 Flutter를 시작하세요:)

✍️
이런 걸
배워요!
무작정 따라하며 Flutter로 UI를 구성하기
넷플릭스 찜하기 기능까지 포함한 클론 코딩
Flutter와 Firebase를 연동하여 데이터 가져오기
다양한 Flutter 패키지 사용법

 

넷플릭스 클론 코딩!
플러터(Flutter)로 빠르고 탁월한 네이티브 앱을 만들어보세요.

 

가장 빠르게 앱 개발을 시작하는 방법, Flutter

Flutter는 구글이 개발한 앱/웹/데스크탑앱 개발 프레임워크입니다.
초창기에는 Dart라는 생소한 언어로 인한 어려움이 있었지만, React Native를 가뿐히 뛰어넘는 앱 성능과 개발 속도를 자랑하며 큰 인기를 끌고 있습니다.

Flutter를 접해본 많은 개발자들은 네이티브 앱 개발을 Flutter가 충분히 대체할 수 있을 거라고 판단하였습니다.

지금, 넷플릭스 UI를 따라 만들며 Flutter를 빠르게 배워보세요!

💡 강의 특징

전체 강의 FULL 자막! 빠른 코드 진행!

(초반 4개의 강의의 편집 퀄이나 속도가 좋지 않습니다ㅠㅠ 이후 강의는 원활합니다..!!)

"무작정 플러터" 강의는 각 코드에 대한 설명을 최소화하여 일단 코드를 따라해보고, 각자 고민하며 공부하는 형태의 강의입니다.

강의에 설명이 부족할 수 있어, 추후에 본 강의에 나오는 위젯이나 로직에 대한 강의를 따로 업로드할 예정이며 기본적인 개념에 대한 이해가 먼저 필요하신 분들에겐 잘 맞지 않을 수 있습니다.

나중에 "뽕뽑는 플러터" 강의에서 더 자세하고, 친절한 설명을 진행드릴게요!

✏️ 이 강의에서 배우는 것들

강의에서는 다음과 같은 내용을 배우실 수 있습니다!

☑️ Flutter로 UI를 구성하는 방법
☑️ Flutter와 Firebase Firestore를 연동하여 데이터를 주고받는 방법
☑️ 하단 탭 바 구조의 Flutter 앱을 만드는 방법

📖 이 강의가 끝나면 완성될 넷플릭스 UI

강의가 끝나면, 아래의 넷플릭스 UI를 완성하실 수 있습니다:)
(로고 이미지는 Guinness가 만들어주었습니다! 감사합니다ㅎㅎ)

🛠 필요한 개발 환경

Flutter로 개발할 수 있는 환경이면 무엇이든 괜찮습니다!
따로 설명 강의가 없으니, 미리 준비 부탁드립니다:)

플러터 개발환경 세팅하기 

제 개발환경은 다음과 같습니다.

OS: Mac OS Mojave / iOS Simulator
SDK: Flutter SDK 1.12.13+hotfix.8
Editor: VS code
VS code extensions: Dart / Flutter / Rainbow Brackets

🛠 강의 자료실

전체 소스 코드 레포: https://github.com/TaeBbong/netflix-clone-lecture

강의 회차 별 소스 코드: https://taebbong.github.io

(유튜브로도 볼 수 있어요!) 무료 강의 유튜브 링크: https://bit.ly/33BYAlD

🙋🏻‍♂️ 예상되는 질문 QnA

Q. 꼭 강의에서 나오는 대로 만들어야 하나요?
A. 강의자도 개발을 잘 하는 사람이 아니라, 좋지 않은 코드가 작성되어 있을 수 있습니다. 또한 Flutter 경력이 길지 않아 때때로 필요 없는 코드 등이 있을 수 있습니다ㅠㅠ 더 공부해서 앞으로 발전된 코드와 강의를 보여드리겠습니다:)

Q. Flutter의 Widget이 궁금해요!
A. Flutter에서는 모든 것이 Widget 입니다! 크게는 화면 단위부터, 작게는 하나의 텍스트 조차 Flutter는 Widget으로 간주합니다. 다른 개발 프레임워크에서의 컴포넌트 정도로 이해하시면 좋을 것 같아요.

Q. Flutter의 상태관리가 궁금합니다
A. Flutter에서는 StatefulWidget와 createState()로 가장 기초적인 방식의 상태 관리를 진행합니다. 나중에 더 발전시키기 위해서 bloc, provider 등의 방식을 배워봅시다!

 

💡 강의가 마음에 드셨다면..!

본 강의는 무료로 진행되는 강의인만큼 강의 제작자는 여러분들의 응원과 격려 덕분에 열심히 일할 수 있습니다!

강의가 마음에 드셨다면 커피 한 잔(클릭) 부탁드립니다:)

 

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
무작정 따라하며 만들어보는 강의를 좋아하는 사람
Flutter를 처음 접해보는 사람
기초적인 개발 지식을 가지고 있는 사람
일단 시도 해보고 고민하는걸 좋아하는 사람
📚
선수 지식,
필요할까요?
객체지향 프로그래밍 컨셉

안녕하세요
권태뽕 입니다.
권태뽕의 썸네일

프로필

블로그: taebbong.github.io

페이스북: facebook.com/taebbong

깃허브: github.com/TaeBbong

학력

고려대학교 정보보호학부 졸업(2020.02)

한성과학고등학교 조기 졸업(2016.02)

경력

(주) 보이저엑스 인턴, Flutter 앱/백엔드 서버 유지보수 총괄 (2019.07 ~ 2019.09)

소프트웨어 마에스트로 8기 멘티 과정 수료 (2017.08 ~ 2017.12)

유튜브 데이터 분석 스타트업 'Picasso' 공동 창업 (2017.12 ~ 2018.06)

고려대학교 정보보호학부 개발 동아리 DevKor 초대 회장 (2018.12 ~ 2020.02)

오투잡 / 위시켓 프리랜서 개발자 (2018.06 ~ )

소개

'기발자이너'를 꿈꾸는 개발자 권태뽕입니다. 중학교때부터 프로그래밍을 해왔고 이후 창업을 목표로 여러 개발과 관련된 활동을 하고 있습니다. 작년 창업을 경험해보았고 내 아이디어로 창업하는 일을 하고 싶어 그만두고 개발 공부와 강의제작에 몰두하며 지내고 있습니다.

커리큘럼 총 13 개 ˙ 1시간 25분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 넷플릭스 UI 개발하기
네비게이션 탭이 있는 앱 프로젝트 구조 설정하기 미리보기 11:02
홈 화면에 상단 바 추가하기 05:55
영화 모델 만들고 더미 데이터 생성하기 02:45
홈 화면에 이미지 캐로셀 슬라이더 위젯 추가하기 11:03
홈 화면에 원형 이미지 / 사각형 이미지 슬라이더 위젯 추가하기 06:22
상세 보기 화면 만들기 12:29
프로필 화면 만들기 05:25
섹션 1. 파이어베이스와 넷플릭스 UI 연동하기
플러터와 파이어베이스 연동하기 - 1) 파이어베이스 콘솔 설정 03:43
플러터와 파이어베이스 연동하기 - 2) 플러터 코드 작성하기 09:17
검색 화면 / 기능 만들기 10:12
찜한 콘텐츠 화면 / 기능 만들기 04:43
섹션 2. 넷플릭스 UI 클론 코딩 마무리하기
마치며 00:32
(TIP) 앱 아이콘 변경하기 01:40
강의 게시일 : 2020년 03월 24일 (마지막 업데이트일 : 2020년 03월 24일)
수강평 총 153개
수강생분들이 직접 작성하신 수강평입니다.
4.7
153개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
겸식이 thumbnail
5
모든 개념을 파악하기보단, 먼저 따라하기로 무작정해보면 도움이 됩니다. 자세한 위젯 사용법이나 문법은 추가적으로 찾아보면서 하면 될 것 같아요.
2020-07-02
RyanJ.k thumbnail
5
빠르게 플러터를 알 수 있어서 좋았습니다.
2020-08-20
Clark thumbnail
5
대충 보았는데 실습하기에 아주 좋은 강의 같아보여 공부해보기로 했습니다 건강하게 군생활하시기 바랍니다
2020-03-25
Daniel Kim thumbnail
5
따라하면서 먼가 알아가는 느낌이라 좋습니다. 굳이 개념설명없이 만들어가는 과정이 깔끔하네요.
2020-08-15
강예인 thumbnail
3
너무 오래됨ㅁ
2023-06-21