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

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

(4개의 수강평)

307명의 수강생
무료
지식공유자 · 권태뽕
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. 강의자는 지금 훈련소에 있습니다ㅎㅎ,, 4월 ~ 6월초까지 질의응답이 어려우니 양해 바랍니다ㅠㅠ

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 개발하기
7 강의 55 : 01
네비게이션 탭이 있는 앱 프로젝트 구조 설정하기
11 : 02
홈 화면에 상단 바 추가하기
05 : 55
영화 모델 만들고 더미 데이터 생성하기
02 : 45
홈 화면에 이미지 캐로셀 슬라이더 위젯 추가하기
11 : 03
홈 화면에 원형 이미지 / 사각형 이미지 슬라이더 위젯 추가하기
06 : 22
상세 보기 화면 만들기
12 : 29
프로필 화면 만들기
05 : 25
섹션 1. 파이어베이스와 넷플릭스 UI 연동하기
4 강의 27 : 55
플러터와 파이어베이스 연동하기 - 1) 파이어베이스 콘솔 설정
03 : 43
플러터와 파이어베이스 연동하기 - 2) 플러터 코드 작성하기
09 : 17
검색 화면 / 기능 만들기
10 : 12
찜한 콘텐츠 화면 / 기능 만들기
04 : 43
섹션 2. 넷플릭스 UI 클론 코딩 마무리하기
2 강의 02 : 12
마치며
00 : 32
(TIP) 앱 아이콘 변경하기
01 : 40

공개 일자

2020년 3월 24일 (마지막 업데이트 일자 : 2020년 3월 24일)

수강 후기

5.0
4개의 수강평
default_profile.png
Clark 8일 전
대충 보았는데 실습하기에 아주 좋은 강의 같아보여 공부해보기로 했습니다 건강하게 군생활하시기 바랍니다
default_profile.png
sori park 2일 전
감사합니다
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스