인스타그램 클론 코딩 (1)

오늘부터 인스타그램 어플을 따라 만들어 보기로 했다.

개발 기간을 짧게 잡았기 때문에 Flutter와 Firebase로 구현하기로 했다. 개발은 맥북과 VS Code를 사용했다.

Flutter는 코드를 수정한 뒤 변경 사항을 바로 확인할 수 있는 Hot Reload를 제공한다. 짧은 시간 안에 화면을 계속 확인하며 작업하기에 좋다고 생각했다. Firebase도 Dart 환경에서 인증을 빠르게 붙일 수 있고, 데이터베이스를 간단하게 시작할 수 있어서 두 도구를 선택했다.

먼저 홈 화면에 게시물이 뜨는 기준부터 생각했다. 실제 인스타그램의 추천 알고리즘은 복잡하고 공개되어 있지 않다. 그래서 처음에는 내가 팔로우한 사람의 게시물을 시간순으로 보여 주는 흐름으로 단순하게 구현하기로 했다.

이 글에서는 프로젝트와 Firebase의 기본 연결까지만 진행한다.

Flutter 프로젝트 생성

원하는 폴더에서 프로젝트를 만든다.

mkdir instagram
cd instagram
flutter create --platform android,ios instagramclone

Android와 iOS만 만들 것이므로 두 플랫폼을 대상으로 생성했다.

Firebase 프로젝트 생성 및 연결

Firebase Console에서 프로젝트를 만든 뒤 Flutter 앱을 연결한다.

앱이 연결되면 main에서 Firebase 초기화를 먼저 해 준다.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

여기까지 하면 기본 설정은 끝이다. 다음에는 회원가입과 로그인 흐름을 구현해 볼 생각이었다.

원문: Velog에서 보기