[Bloc 응용] 실전 앱 만들기 (책 리뷰 앱) : SNS 로그인, Firebase 적용, Bloc 상태 관리, GoRouter

단순 따라하기식 클론코딩 NO! Flutter Bloc을 통한 상태관리
Naver Book API를 활용한 책 리뷰 앱 만들기!

이번 강의는?

• 실무에서 사용할 수 있는 다양한 기능들을 담아 함께 개발하며 학습할 수 있도록 만들었습니다.
• 단순히 코드 입력하고 따라하는 방식이 아닌 구조 설명 및 flow 등을 설명하여 앱을 만들어가면서 생길 수 있는 궁금한 사항들을 다뤘습니다.
• Naver open API를 신청하여 활용하는 방법과 파이어베이스를 활용하여 데이터베이스 인증시스템 및 파일 업로드 등 실전에서 활용할 수 있는 기능들을 학습할 수 있도록 정리되었습니다.

1. 프로젝트 세팅

• 프로젝트 생성 및 Github 연동
• 초기 플러터 프로젝트 의존성
• 기본적 프로젝트 프레임 세팅
  • 폴더 구조 설명 
  • 앱 실행 Flow 설명
  • 기본 route 설정

2. 외부 연동

• Naver Open API 책 api 신청 및 Post Man을 활용 api 사용
• 파이어베이스 프로젝트 연동 및 설정
• Naver Open API 와 파이어베이스 데이터 flow 설명
• Dio를 통한 Naver Open API 세팅

3. Splash 페이지 / 앱 소개 페이지

• 앱 실행 시 항상 마주하는 페이지 및 앱 최초 실행 시 앱을 소개하는 페이지를 간단히 만들어봅니다.

4. SNS 로그인 및 회원가입

• 파이어베이스 SNS 로그인 Google과 Apple을 설정해봅니다.
• GoRouter를 통해 로그인 및 회원가입 상태에 따라 자동 Routing하는 방법을 학습합니다.
• 간단한 정보로 회원가입을 진행하지만 프로필 이미지도 입력받아 파일업로드하는 방법도 알아봅니다.

5. 검색

• 네이버 책 API를 통해 데이터를 받아와 화면을 만들어줍니다. 
• 네이버 Open API의 Pagination을 살펴보고 페이징 처리를 하는 방법을 학습합니다.

6. 책 상세페이지 및 리뷰 작성 페이지

• 네이버 책 API를 바탕으로 상세 페이지를 만들어봅니다.
• 리뷰 정보가 있을 때와 없을 때의 화면을 구성한 다음, 리뷰 작성 기능까지 적용해봅니다.

7. 리뷰 상세페이지

• 회원 리뷰를 확인할 수 있는 페이지를 만들어봅니다.
• 다른 사람의 공감을 얻을 수 있도록 좋아요 기능을 적용해봅니다.

8. 회원 페이지 

• 회원 페이지에서 어떤 작품들을 리뷰했는지 확인할 수 있도록 만들어봅니다.
• 리뷰 정보가 마음에 드는 회원의 정보를 앞으로도 확인할 수 있도록 즐겨찾기 기능을 통해 팔로우/팔로잉 기능을 구현해봅니다.

9. 홈 화면

• 최신 리뷰어 정보 / 인기있는 리뷰어 Top 10 정보로 홈 화면을 구성하고 만들어봅니다.
• PageView를 통해 가로로 나열하는 위젯을 만들어봅니다.

번외편 - 1편

• 번외편으로 즐겨찾는 리뷰어들의 소식만을 확인할 수 있는 페이지를 만들어볼 것입니다. 
• 홈화면에서 최신리뷰 TOP10만 볼 수 있던 부분을 더보기 메뉴를 통해 더 많은 리뷰를 최신 순서로 확인할 수 있도록 구성을 합니다. 

번외편 - 2편

• 리뷰어 페이지에서 마이페이지로 접근할 때 즐겨찾기 메뉴 대신 설정 메뉴를 통해 닉네임, 한줄 소개, 프로필 이미지를 변경할 수 있도록 개선합니다.
• 로그아웃 버튼을 통해 다른 계정으로도 접근할 수 있도록 개선합니다.

Q. 플러터 최신 버전이 호환되나요?

강의 준비 시점에서 플러터 최신 버전 3.10.0 버전으로 작업되었습니다. 메이저 버전이 바뀌지 않는 한 호환에 문제는 없을 것입니다.

Q. 플러터 입문자도 이해할 수 있을까요?

프로젝트 생성부터 폴더 구성, 화면 구성하는 기초적인 부분도 다루긴 하지만 앱 만들기의 핵심이 되는 상태관리 및 API 활용 등에 다루기 때문에 다소 어렵게 느껴지실 수는 있습니다. 하지만 입문자라도 [Bloc 마스터 코스 기초부터 응용까지]의 영상을 통해 학습을 마치셨다면 충분히 이 강의를 통해 실력을 상승시킬 수 있을 것입니다. 단지 입문자라면 한 번 영상 보는 것만으로는 내용이 마스터되지는 않으실 테니 반복해서 학습하시는 것을 추천드립니다. 

Q. 상태 관리를 Bloc으로 선택하신 이유가 있을까요? 

앱 개발에 있어서 상태관리는 필수입니다. 상태관리를 도와주는 라이브러리가 많이 존재합니다. 어떤 걸 사용하더라도 앱은 개발할 수 있습니다. 하지만 Bloc을 통해 강의를 만든 이유는 국내/해외 커뮤니티에서 대규모 프로젝트의 경우 가장 적합한 상태관리로 단연 Bloc을 선택하고 있기 때문입니다. 저 역시 Bloc으로도, Getx으로도 프로젝트를 진행해 보았지만 유지보수 측면에서 Bloc에 장점이 많았습니다. 하여 이번 강의에서는 Bloc을 선택하였고 무료강의 [Bloc 마스터 코스 기초부터 응용까지]도 Bloc 기반으로 제작하였습니다. Bloc을 실전으로 응용해보면서 직접 Bloc을 활용하게 하여 더욱 학습에 도움이 되고자 선택한 이유도 있습니다. 

Q. Bloc을 잘 몰라도 이번 강의를 통해 배울 수 있나요?

이번 강의는 Bloc 사용에 익숙해지기 위한 목적의 프로젝트입니다. 하여 Bloc에 대한 설명은 생략합니다. 반드시 Bloc을 학습하시고 시청하는 것을 권장드리며, 제가 오픈한 무료강의 [Bloc 마스터 코스 기초부터 응용까지]를 바탕으로 학습하시는 것을 추천드립니다. 

Q. 번외편은 무엇인가요?

번외편은 기존 계획했던 기능이 아니었지만 강의를 준비하면서 번외편의 기능까지 포함하여 공부하면 수강하시는 분들에게 도움이 될 것 같아 추가할 영상들입니다. 즉, 번외편은 추후 업데이트되는 수업 영상이 되겠습니다. 이 강의를 수강하시면 추가 비용 없이 업데이트되는 수업 역시 학습하실 수 있습니다.  

Q. 사용된 소스는 제공되나요?

앱을 만들기 위해 디자인 리소스 및 완성된 풀소스 역시 제공됩니다. 풀소스만으로 소스 분석하셔도 도움이 되겠지만, 아무래도 처음부터 함께 만들어가면서 학습하면 좀 더 이해가 될 것입니다.