NicoDora의 블로그

[Biome] Prettier보다 35배 더 빠르다는 Biome을 써보자

NicoDora — Fri, 11 Apr 2025 22:35:28 +0900

[Biome] Prettier보다 35배 더 빠르다는 Biome을 써보자

Prettier와 ESLint를 사용중인 프로젝트에서 Biome을 설치하고 마이그레이션하여 성능 차이가 얼마나 나는지 확인해 볼 예정이다.

Biome이란?

Biome는 웹 개발을 위한 통합 툴체인으로, 코드 포매팅과 린팅을 빠르고 효율적으로 처리하는 도구이다. JavaScript, TypeScript, JSX, TSX, JSON, CSS, GraphQL 등 다양한 언어를 지원하며, 기존의 여러 도구들을 하나로 통합하여 개발자 경험을 향상시킨다.

지금까지는 포매터는 Prettier, 린터는 ESLint 조합이 거의 국룰로 쓰였는데 하는 일이 비슷한데 패키지를 따로 관리해줘야 한다는 점은 개발자에게 귀찮음과 유지보수를 하기 어렵게 만들었고, 이러한 단점을 해결하기 위해서 Biome이 만들어졌다.

Biome은 Prettier와 97% 호환되며, Rust 언어로 개발되어 Prettier 대비 최대 35배 빠른 속도로 포매팅 할 수 있다고 한다.

Biome과 Prettier 속도 비교

ESLint 및 TypeScript ESLint에서 270개 이상의 린팅 규칙을 포함하고 있기 때문에 거의 대부분의 린팅 규칙이 호한된다고 할 수 있다.

아직 안정된 프로젝트가 아니고 커뮤니티가 작은 단점이 있긴 하지만

속도가 매우 빠르고 지금 개발중인 프로젝트에 린터, 포매터 규칙이 복잡하지 않아서 Biome으로 마이그레이션 할만 하다고 판단했다.

Biome 설치하기

작업 디렉토리에 Biome을 설치하는 방법은 매우 쉽다.

https://biomejs.dev/guides/getting-started/

Getting Started

Learn how to set up a new project with Biome.

biomejs.dev

Biome에서 제공하는 공식 문서를 참고해서 설치해 보려 한다.

위 공식 문서에서 각 패키지 매니저에 따라 명령어를 제공하고 있으므로 다른 패키지 매니저를 사용한다면 반드시 공식 문서를 참고해서 설치하기 바란다. 필자는 npm을 쓰고 있어서 npm을 기준으로 설명할 예정이다.

일단 Biome을 설치할 디렉터리로 이동하고 아래 명령어를 입력해서 설치를 진행하자.

npm install --save-dev --save-exact @biomejs/biome

설치가 완료되면 devDependencies에 @biomejs/biome 패키지가 추가된 것을 확인할 수 있다.

그 다음 init 명령어를 통해 Biome 설정 파일을 만들어주자.

npx @biomejs/biome init

그러면 biome.json 이름의 파일이 생성된다.

새 프로젝트에 적용시킨다면 이제 해당 파일 내부에 formatter 필드와 linter 필드에 규칙을 추가해서 사용하면 되지만, 필자는 이미 Prettier와 ESLint를 사용중인 프로젝트에서 Biome으로 변경하는 것 이므로 마이그레이션 작업이 필요하다.

Prettier, ESLint에서 Biome으로 마이그레이션하기

Prettier, ESLint에서 Biome으로 마이그레이션 하는 것도 설치하는 것 처럼 명령어 딸깍으로 간편하게 마이그레이션이 가능하다.

마이그레이션 하는 방법도 공식문서에 잘 작성되어 있으므로 참고해서 진행하면 된다.

https://biomejs.dev/guides/migrate-eslint-prettier/

Migrate from ESLint and Prettier

Learn how you can ease your migration from ESLint and Prettier

biomejs.dev

아래 명령어를 입력해서 마이그레이션을 해보자.

npx @biomejs/biome migrate eslint --write
npx @biomejs/biome migrate prettier --write

마이그레이션을 진행하고 나면 기존에 Prettier와 ESLint에 저장된 설정들이 불러와지는 것을 볼 수 있다.

Biome vs Prettier, ESLint 성능 비교

Biome 설치 및 마이그레이션이 완료되었으므로 과연 Prettier, ESLint와 성능차이가 얼마나 날지 테스트 해보자.

/src 폴더 내부에 코드가 총 19,357 라인인 프로젝트에서 테스트를 진행하려 한다.

먼저 ESLint와 Biome을 비교해보자.

ESLint :

time npx eslint src

Biome :

time npx @biomejs/biome lint src

ESLint 5.293초, Biome 0.754초가 걸렸다.

그다음 Prettier와 Biome을 비교해보자.

Prettier :

time npx prettier src

Biome :

time npx @biomejs/biome format src

Prettier 1.718초, Biome 0.773초가 걸렸다.

로컬 환경에서 테스트 해보면 각각 ESLint보다 약 7배, Prettier보다 약 2배 더 빨랐다.

추가로 Biome에서는 lint와 format 명령어를 check 명령어를 통해서 한번에 실행할 수 있는데, 해당 명령어를 사용하면 0.772초가 걸렸다.

time npx @biomejs/biome check src

두 명령어를 전부 실행하는 속도를 비교해보면,

ESLint(5.293초) + Prettier(1.718초) = 7.011초

Biome = 0.772초

Biome이 약 9배 더 빠르다.

vscode extension 설치하기

마지막으로 코드 에디터에서 포매팅을 사용하기 위해서 Biome extension을 설치해주면 된다.

extension을 설치하면 아래처럼 에디터에서도 에러가 표시되게 된다.

장단점

장점:

1. 속도가 빠르다.

확실히 Prettier, ESLint 조합보다 속도가 빨라 시원시원하다.

로컬에서도 그렇지만 github actions로 CI 작업할 때 그 차이를 실감할 수 있었다.

평균적으로 40~50초가 걸리던 CI가 Biome으로 바꾸고 4초밖에 걸리지 않았다.

기존 ESLint :

Biome으로 바꾼 후 :

2. 에러를 매우 친절하게 띄워준다.

에러가 어디서 발생했는지, 원인이 뭔지, 어떻게 수정해야 하는지 수정 예시까지 보여주는 모습에 감동했다...

색상도 알록달록 넣어줘서 개인적으론 ESLint보다 Biome이 더 가독성이 좋았다.

단점:

1. ESLint에는 없는 규칙이 Biome에는 존재한다.

ESLint에는 없거나 기본적으로 사용하지 않는 규칙이 Biome에서는 기본값으로 사용하도록 되어 있다.

(반대로 ESLint에 있는 규칙이 Biome에선 없을 수도 있다.)

noForEach 규칙이 기본값으로 들어가 있어서 forEach() 함수를 썼더니 혼났다...

분명 ESLint에서는 명시조차 하지 않았던 규칙이다.

이 외에도 Biome에서 기본값으로 설정되어 있는 규칙들이 있어서 많은 파일들이 빨개지는 매직을 볼 수 있었다.

마이그레이션 시에는 사용하지 않는 규칙들을 풀어줘야 하는 번거로움이 존재했다.

2. 아직 지원하지 않는 언어가 존재한다.

웹개발에 쓰이는 대부분의 언어는 지원하지만 몇몇 언어는 아직 작업중이거나 지원하지 않는 언어들이 존재한다.

따라서 프로젝트에서 자주 사용되는 언어가 지원되지 않는다면 사용하기 어려울 수 있다.

3. 커뮤니티가 작다.

아무래도 비교적 최근에 시작된 프로젝트 이므로 커뮤니티가 상대적으로 작은건 사실이다.

ESLint 같은 경우 JS 기반이기 때문에 패키지를 사용하다가 버그를 발견하면 개발자가 직접 컨트리뷰트 하기 쉽지만, Biome은 Rust 기반이라 웹개발자 분들이 생태계 참여에 비교적 어려워 해 커뮤니티가 커지기 힘들다는 글을 봤던거 같다.

커뮤니티가 작다보니 초보자 입장에서 구글링을 통해 정보를 얻기 어렵기 때문에 단점이라고 생각된다.

그래도 공식문서가 잘 정리되어 있어 버그에 마주하지 않는 한 사용하는데 크게 어려움은 없어보인다.

정리

기존에 Prettier, ESLint 조합을 사용하던 프로젝트에서 Biome으로 마이그레이션 해보고 간단히 사용해보는 시간을 가져봤다.

분명히 Biome 만의 장점도 존재하지만, 장점만 보고 무턱대고 도입하기 보다는 단점에 대해서 생각해보고 신중히 결정하는 것이 좋아보인다.

Biome이 지원하는 언어를 사용중이고 작은 프로젝트거나 새로 시작하는 프로젝트라면 한번 맛보는 것도 좋은 경험이 될 것 같다.

그리고 필자는 속도가 빠르고 에러가 친절하다는 장점이 크게 느껴져서 큰 문제점이 없는 한 계속 Biome을 쓸 거 같다.

Xcode로 만든 앱 실제 내 아이폰에서 실행하기

NicoDora — Thu, 10 Apr 2025 21:08:38 +0900

Xcode로 만든 앱 실제 내 아이폰에서 실행하기

지금까지 우리가 만든 앱들을 모두 맥 컴퓨터 안에서 에뮬레이터로 실행해보고 있었다.

그런데 에뮬레이터로는 실행할 수 없는 기능들(GPS, 자이로 센서 등)이 있어서 추후에 앱을 만들고 테스트 할 때 어려움을 겪을 수 있다.

그래서 오늘은 Xcode로 만든 앱들을 실제로 내가 가지고 있는 아이폰에서 실행하는 방법을 소개하려고 한다.

개발자 계정 추가하기

Xcode로 만든 앱을 실제 아이폰에서 실행시키기 위해선 먼저 개발자 계정을 추가하는 과정을 거쳐야 한다.

보통 애플의 개발자 계정은 돈을 내고 권한을 얻을 수 있는데 우리가 해 볼 것은 앱스토어에 앱을 출시하는게 아니라 내 아이폰에만 테스트 할 예정이므로 Apple ID로 설정해줘도 된다.

Xcode를 실행시키고 실제 아이폰에서 테스트 하고 싶은 프로젝트를 하나 선택하자.

필자는 저번주 실습에서 만든 Web 프로젝트를 실행하겠다.

프로젝트 창에 들어온 후 좌측 상단에 Xcode -> Settings... 를 클릭하자.

설정창 상단에서 Accounts를 클릭하자.

계정을 추가한 적이 없으면 아래 사진처럼 아무런 계정도 보이지 않을 것이다.

우측 하단에 + 버튼을 눌러 계정을 추가해보자.

Apple ID를 선택하고 Continue를 클릭하자.

본인이 사용중인 Apple ID의 이메일 혹은 휴대폰 번호를 입력하고 Next를 클릭하면 패스워드를 입력하는 창이 나온다.

패스워드를 입력하고 Next 버튼을 클릭하자.

아래 화면처럼 Apple ID가 뜨면 성공적으로 Apple ID가 추가된 것이다.

이제 설정창을 닫고 아래 사진처럼 프로젝트 -> Signing & Capabilities 으로 들어오면 Team이 None으로 되어 있을텐데 Team을 Personal Team으로 변경해주자.

아이폰 연결하기

이제 아이폰을 맥 컴퓨터와 연결해야 한다.

필자는 맥북과 아이폰 14 Pro를 사용중이라 c to lightning 케이블을 사용하여 컴퓨터와 아이폰을 연결했다.

본인의 하드웨어 환경에 맞춰서 맥 컴퓨터와 아이폰을 유선으로 연결시키면 된다.

연결중에 아이폰이나 컴퓨터에 아래와 같은 알람이 뜰텐데 여기서 반드시 신뢰를 클릭해서 접근을 허용해야 한다.

연결한 후에 Xcode로 돌아와서 상단에 있는 디바이스 선택버튼을 클릭해보면 iOS Device에 본인의 아이폰이 추가된 것을 확인할 수 있다.

해당 아이폰을 클릭하여 빌드 디바이스로 선택해주자.

앱 빌드하기

이제 모든 설정이 완료되었다.

Xcode 좌측 상단에 빌드버튼을 클릭하여 앱을 빌드해보자.

(앱을 빌드할 때는 아이폰이 잠금해제된 상태여야 한다.)

만약 빌드중에 아래 사진처럼 에러가 발생한다면 아이폰에서 개발자 모드를 켜지 않았기 때문에 발생하는 것이다.

아이폰에서 설정 -> 개인정보 보호 및 보안 -> 개발자 모드 에서 개발자 모드를 켜 주어야 한다.

개발자 모드를 키고 재부팅되면 개발자 모드를 켤지 확인하는 알람창이 뜨는데 '켜기'를 클릭하자.

다시 빌드해보면 이번엔 또 다른 에러가 뜨게 될텐데 아이폰에서 내 Apple ID로 된 개발자의 앱을 신뢰하지 않는다고 기본 설정되어 있기 때문이다.

아이폰에서 설정 -> 일반 -> VPN 및 기기 관리 에 들어가면 개발자 앱에 내 Apple ID로 된 개발자가 추가되어 있다.

해당 개발자를 클릭한다.

그리고 'Apple Developpment: (계정 ID) 신뢰'를 클릭하여 해당 개발자를 신뢰하도록 설정하자.

이제 다시 빌드를 해보면 정상적으로 앱이 실행될 것이다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

[Github Copilot] 학생인증 받았는데 Copilot Pro 무료로 쓸 수 없을 때 해결법

NicoDora — Thu, 10 Apr 2025 20:55:09 +0900

[Github Copilot] 학생인증 받았는데 Copilot Pro 무료로 쓸 수 없을 때 해결법

Github 학생인증을 받았는데 Copilot Pro 액세스가 안됨

필자는 작년부터 깃허브 학생인증을 받아 Github Copilot Pro를 무료로 사용중이였다.

그런데 저번 달에 학생인증 유효기간이 지나서 코파일럿 프로를 사용할 수 없었다. (깃허브 학생인증은 1년마다 재인증 받아야 한다.)

깃허브에서 일반인에게도 코파일럿을 제한적으로 사용할 수 있도록 풀어줬지만 사용량에 제한이 있어서 결국 재인증을 받아야 하긴 했다.

그래서 처음에 인증받았던 것 처럼 다시 깃허브 학생인증을 완료했는데...

원래라면 3~5일 내에 코파일럿 프로를 사용할 수 있어야 하는데 시간이 지나도 프로 적용이 안됐다.

깃허브 홈페이지 -> 우측 상단 메뉴 바 -> Your Copilot 에 들어가보면 내 코파일럿 설정을 확인할 수 있는데

지금은 위처럼 코파일럿 프로가 활성화되었다고 뜨는데 해결하기 전에는 계속 플랜을 업그레이드 하라는 문구만 보였다.

해결 방법

계속 구글링을 해보니 뭐 학생 혜택 받기를 눌르라는 말이 보여서 github education 쪽을 다 뒤져보다가 해결 방법을 발견했다.

아래 링크를 클릭하고 github education 홈 -> 좌측 상단 메뉴 바 -> Student Developer Pack 으로 들어간다.

https://education.github.com/learner/learn

GitHub · Build and ship software on a single, collaborative platform

Join the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source community build software that advances humanity.

github.com

그러면 이런 페이지로 이동되게 되는데 아래로 스크롤을 좀 더 내려보면은

그러면 All offers 라는 탭이 보일텐데 여기서 About Github Copilot을 찾아서 Get direct access on the website GitHub Copilot을 클릭한다.

그러면 아래처럼 깃허브 코파일럿을 무료로 사용할 수 있다고 뜨는데 여기서 Get access to GitHub Copilot을 클릭하면 된다.

그리고 다시 깃허브 코파일럿 설정에 들어가서 아래처럼 코파일럿 프로가 활성화되었다고 뜨면 성공이다!

한줄 요약

https://github.com/github-copilot/free_signup

GitHub · Build and ship software on a single, collaborative platform

Join the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source community build software that advances humanity.

github.com

여기 들어가서 Get access to GitHub Copilot을 클릭하면 된다.

Flutter 기말 프로젝트 - 인덕 부동산

NicoDora — Thu, 19 Dec 2024 18:31:02 +0900

인덕 부동산 앱 시연 영상

https://youtu.be/mZ7mjVLEZV8

주요 기능

디렉터리 구조

소스코드

main.dart

import 'dart:ui';

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_crashlytics/firebase_crashlytics.dart';
import 'package:flutter/material.dart';
import '../firebase_options.dart';

import 'intro/intro_page.dart';

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

  FlutterError.onError = (errorDetails) {
    FirebaseCrashlytics.instance.recordFlutterError(errorDetails);
  };

  PlatformDispatcher.instance.onError = (error , stack) {
    FirebaseCrashlytics.instance.recordError(error, stack , fatal: true);
    return true;
  };
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '마이 부동산',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const IntroPage(),
    );
  }
}

intro/intro_page.dart

import 'package:flutter/material.dart';
import '../map/map_page.dart';

class IntroPage extends StatefulWidget {
  const IntroPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _IntroPage();
  }
}

class _IntroPage extends State<IntroPage> {
  @override
  void initState() {
    super.initState();
    // 2초 후에 MapPage로 이동
    Future.delayed(const Duration(seconds: 2), () {
      Navigator.of(context).pushReplacement(MaterialPageRoute(
        builder: (context) => const MapPage(),
      ));
    });
  }

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '인덕 부동산',
              style: TextStyle(fontSize: 50),
            ),
            SizedBox(
              height: 20,
            ),
            Icon(
              Icons.apartment_rounded,
              size: 100,
            ),
          ],
        ),
      ),
    );
  }
}

map/apt_page.dart

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_ui_firestore/firebase_ui_firestore.dart';
import 'package:flutter/material.dart';

class AptPage extends StatefulWidget {
  final String aptHash;
  final Map<String, dynamic> aptInfo;

  const AptPage({super.key, required this.aptHash, required this.aptInfo});

  @override
  State<StatefulWidget> createState() {
    return _AptPage();
  }
}

class _AptPage extends State<AptPage> {
  late CollectionReference aptRef;

  @override
  void initState() {
    super.initState();
    aptRef = FirebaseFirestore.instance.collection('wydmu17me');
  }
  int startYear = 2006;
  Icon favoriteIcon = const Icon(Icons.favorite_border);

  @override
  Widget build(BuildContext context) {
    final usersQuery =
    aptRef.orderBy('deal_ymd').where('deal_ymd' , isGreaterThanOrEqualTo: '${startYear}0000') as Query<Map<String, dynamic>>;
    return Scaffold(
      appBar: AppBar(title: Text(widget.aptInfo['name']), actions: [IconButton(onPressed: (){
        FirebaseFirestore.instance.collection('rollcake').doc('favorite').set(widget.aptInfo);
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('나의 아파트로 등록되었습니다')));
      }, icon: favoriteIcon)]),
      body:  Column(
        children: [
          Column(children: [
            SizedBox(width: MediaQuery.of(context).size.width ,child:  Text('아파트 이름 : ${widget.aptInfo['name']}'),),
            SizedBox(width: MediaQuery.of(context).size.width ,child:   Text('아파트 주소 : ${widget.aptInfo['address']}'),),
            SizedBox(width: MediaQuery.of(context).size.width ,child:   Text('아파트 동 수 : ${widget.aptInfo['ALL_DONG_CO']}'),),
            SizedBox(width: MediaQuery.of(context).size.width ,child:   Text("아파트 세대 수 : ${widget.aptInfo['ALL_HSHLD_CO']}"),),
            SizedBox(width: MediaQuery.of(context).size.width ,child:   Text('아파트 주차 대수 : ${widget.aptInfo['CNT_PA']}'),),
            SizedBox(width: MediaQuery.of(context).size.width ,child:   Text('60m2 이하 평형 세대수 : ${widget.aptInfo['KAPTMPAREA60']}'),),
            SizedBox(width: MediaQuery.of(context).size.width ,child:   Text('60m2 - 85m2 이하 평형 세대수 : ${widget.aptInfo['KAPTMPAREA85']}'),),
          ],)
          ,Container(color: Colors.black,height: 1, margin: const EdgeInsets.only(top: 5 ,bottom: 5),),
          Text('검색 시작 년도 : $startYear년'),
          Slider(value: startYear.toDouble(), onChanged: (value){
            setState(() {
              startYear = value.toInt();
            });
          } , min: 2006, max: 2023,),
          Expanded(
              child: FirestoreListView<Map<String, dynamic>>(
                query: usersQuery,
                pageSize: 20,
                itemBuilder: (context, snapshot) {
                  Map<String, dynamic> apt = snapshot.data();
                  return Card(
                    child: Row(
                      children: [
                        Column(
                          children: [
                            Text('계약 일시 : ${apt['deal_ymd'].toString()}'),
                            Text('계약 층 : ${apt['floor'].toString()}층'),
                            Text(
                                '계약 가격 : ${double.parse(apt['obj_amt']) / 10000}억'),
                            Text('전용 면적 : ${apt['bldg_area']}m2')
                          ],
                        ),
                        Expanded(child: Container())
                      ],
                    ),
                  );
                },
                emptyBuilder: (context) {
                  return const Text('매매 데이터가 없습니다');
                },
                errorBuilder: (context, err, stack) {
                  return const Text('데이터가 없습니다');
                },
              ))
        ],
      ),
    );
  }
}

map/map_filter.dart

class MapFilter{
  String? buildingString = '1';
  String? peopleString = '0';
  String? carString = '1';
}

map/map_filter_dialog.dart

import 'package:flutter/material.dart';

import 'map_filter.dart';

class MapFilterDialog extends StatefulWidget {
  final MapFilter mapFilter;
  const MapFilterDialog(this.mapFilter, {super.key});

  @override
  State<StatefulWidget> createState() {
    return _MapFilterDialog();
  }
}

class _MapFilterDialog extends State<MapFilterDialog> {

  late MapFilter mapFilter ;

  final List<DropdownMenuItem<String>> _buildingDownMenuItems = [
    const DropdownMenuItem<String>(
      value: '1',
      child: Text('1동'),
    ),
    const DropdownMenuItem<String>(value: '2', child: Text('2동')),
    const DropdownMenuItem<String>(value: '3', child: Text('3동이상'))
  ];
  final List<DropdownMenuItem<String>> _peopleDownMenuItems = [
    const DropdownMenuItem<String>(
      value: '0',
      child: Text('전부'),
    ),
    const DropdownMenuItem<String>(
      value: '100',
      child: Text('100세대 이상'),
    ),
    const DropdownMenuItem<String>(
      value: '300',
      child: Text('300세대 이상'),
    ),
    const DropdownMenuItem<String>(
      value: '500',
      child: Text('500세대 이상'),
    )
  ];
  final List<DropdownMenuItem<String>> _carDownMenuItems = [
    const DropdownMenuItem<String>(
      value: '1',
      child: Text('세대별 1대 미만'),
    ),
    const DropdownMenuItem<String>(
      value: '2',
      child: Text('세대별 1대 이상'),
    )
  ];

  @override
  void initState() {
    super.initState();
    mapFilter = widget.mapFilter;
    mapFilter.buildingString = _buildingDownMenuItems.first.value;
    mapFilter.peopleString = _peopleDownMenuItems.first.value;
    mapFilter.carString = _carDownMenuItems.first.value;
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text('My 부동산'),
      content: SizedBox(
        height: 300,
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(10),
              child: DropdownButton(
                items: _buildingDownMenuItems,
                onChanged: (value) {
                  setState(() {
                    mapFilter.buildingString = value!;
                  });
                },
                value: mapFilter.buildingString,
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(10),
              child: DropdownButton(
                items: _peopleDownMenuItems,
                onChanged: (value) {
                  setState(() {
                    mapFilter.peopleString = value!;
                  });
                },
                value: mapFilter.peopleString,
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(10),
              child: DropdownButton(
                items: _carDownMenuItems,
                onChanged: (value) {
                  setState(() {
                    mapFilter.carString = value!;
                  });
                },
                value: mapFilter.carString,
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center
              ,children: [
              ElevatedButton(onPressed: (){
                Navigator.of(context).pop(mapFilter);
              }, child: Text('확인')),
              ElevatedButton(onPressed: (){
                Navigator.of(context).pop();
              }, child: Text('취소')),
            ],)
          ],
        ),),
    );
  }
}

map/map_page.dart

import 'dart:async';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:dart_geohash/dart_geohash.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'map_filter.dart';
import 'map_filter_dialog.dart';
import '../myFavorite/my_favorite_page.dart';
import '../settings/setting_page.dart';
import 'package:shared_preferences/shared_preferences.dart';

import '../geoFire/geoflutterfire.dart';
import '../geoFire/models/point.dart';

import 'apt_page.dart';

class MapPage extends StatefulWidget {
  const MapPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _MapPage();
  }
}

class _MapPage extends State<MapPage> {
  Completer<GoogleMapController> _controller =
  Completer<GoogleMapController>();
  Map<MarkerId, Marker> markers = <MarkerId, Marker>{};
  MarkerId? selectedMarker;
  BitmapDescriptor markerIcon = BitmapDescriptor.defaultMarker;

  LatLng? markerPosition;
  var geoHasher = GeoHasher();
  final geo = Geoflutterfire();

  int currentItem = 0;

  MapType mapType = MapType.normal;

  late List<DocumentSnapshot> documentList =
  List<DocumentSnapshot>.empty(growable: true);

  MapFilter mapFilter = MapFilter();



  static const CameraPosition _googleMapCamera = CameraPosition(
    target: LatLng(37.571320, 127.029403),
    zoom: 15,
  );

  @override
  void initState() {
    super.initState();
    addCustomIcon();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('인덕 부동산'),
        actions: [IconButton(onPressed: () async{
          var result = await Navigator.of(context).push(MaterialPageRoute(builder: (context){
            return MapFilterDialog(mapFilter);
          }));
          if(result != null){
            mapFilter = result as MapFilter;
          }
        }, icon: const Icon(Icons.search))],
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            DrawerHeader(child: Text('박준혁 님 환영합니다')),
            ListTile(
              title: const Text('내가 선택한 아파트'),
              onTap: () {
                Navigator.of(context)
                    .push(MaterialPageRoute(builder: (context) {
                  return const MyFavoritePage();
                }));
              },
            ),
            ListTile(
              title: const Text('설정'),
              onTap: () async {
                Navigator.of(context)
                    .push(MaterialPageRoute(builder: (context) {
                  return SettingPage();
                })).then((value) async {
                  final SharedPreferences prefs = await SharedPreferences.getInstance();
                  final int? type = prefs.getInt('mapType');
                  setState(() {
                    switch(type){
                      case 0:
                        mapType = MapType.terrain;
                        break;
                      case 1:
                        mapType = MapType.satellite;
                        break;
                      case 2:
                        mapType = MapType.hybrid;
                        break;
                    }
                  });
                });
              },
            ),
          ],
        ),
      ),
      body: currentItem == 0 ? GoogleMap(
        mapType: mapType,
        initialCameraPosition: _googleMapCamera,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
        markers: Set<Marker>.of(markers.values),
      ) : ListView.builder(itemBuilder: (context, value){
        Map<String, dynamic> item = documentList[value].data() as Map<String , dynamic>;
        return InkWell(child: Card(
          child: ListTile(
            leading: const Icon(Icons.apartment),
            title: Text(item['name']),
            subtitle: Text(item['address']),
            trailing: const Icon(Icons.arrow_circle_right_sharp),
          ),
        ),onTap: (){
          Navigator.of(context)
              .push(MaterialPageRoute(builder: (context) {
            return AptPage(
              aptHash: item['position']['geohash'],
              aptInfo: item,
            );
          }));
        },);
      } , itemCount: documentList.length,)
      ,
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentItem,
        onTap: (value) {
          if (value == 0){
            _controller =
                Completer<GoogleMapController>();
          }
          setState(() {
            currentItem = value;
          });
        },
        items: const [
          BottomNavigationBarItem(
            label: 'map',
            icon: Icon((Icons.map)),
          ),
          BottomNavigationBarItem(
            label: 'list',
            icon: Icon((Icons.list)),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _searchApt,
        label: const Text('이 위치로 검색하기'),
      ),
    );
  }

  void addCustomIcon() async {
    try {
      markerIcon = await BitmapDescriptor.fromAssetImage(
          const ImageConfiguration(), "res/images/apartment.png");
      setState(() {});
    } catch (e) {
      debugPrint("Error loading marker icon: $e");
    }
  }

  Future<void> _searchApt() async {
    final GoogleMapController controller = await _controller.future;
    final bounds = await controller.getVisibleRegion();
    LatLng centerBounds = LatLng(
      (bounds.southwest.latitude + bounds.northeast.latitude) / 2,
      (bounds.southwest.longitude + bounds.northeast.longitude) / 2,
    );

    final aptRef = FirebaseFirestore.instance.collection('cities');
    final geo = Geoflutterfire();
    GeoFirePoint center = geo.point(
        latitude: centerBounds.latitude, longitude: centerBounds.longitude);

    double radius = 1;
    String field = 'position';

    Stream<List<DocumentSnapshot>> stream = geo
        .collection(collectionRef: aptRef)
        .within(center: center, radius: radius, field: field);

    // 스트림 중복 구독 방지
    stream.listen((List<DocumentSnapshot> documents) {
      setState(() {
        documentList = documents;
      });
      drawMarker(documents);
    }).onError((error) {
      debugPrint("Stream error: $error");
    });
  }

  void drawMarker(List<DocumentSnapshot> documentList) {
    // 마커 클리어
    markers.clear();

    for (var element in documentList) {
      var info = element.data()! as Map<String, dynamic>;
      if (selectedCheck(info, mapFilter.peopleString, mapFilter.carString, mapFilter.buildingString)) {
        MarkerId markerId = MarkerId(info['position']['geohash']);
        Marker marker = Marker(
          markerId: markerId,
          infoWindow: InfoWindow(
              title: info['name'],
              snippet: '${info['address']}',
              onTap: () {
                Navigator.of(context)
                    .push(MaterialPageRoute(builder: (context) {
                  return AptPage(
                    aptHash: info['position']['geohash'],
                    aptInfo: info,
                  );
                }));
              }),
          position: LatLng(
              (info['position']['geopoint'] as GeoPoint).latitude,
              (info['position']['geopoint'] as GeoPoint).longitude),
          icon: markerIcon,
        );
        markers[markerId] = marker;
      }
    }
    setState(() {});
  }


  bool selectedCheck(Map<String, dynamic> info, String? peopleString,
      String? carString, String? buildingString) {
    final dong = info['ALL_DONG_CO'];
    final people = info['ALL_HSHLD_CO'];
    final parking = people / info['CNT_PA'];
    if (dong >= int.parse(buildingString!)) {
      if (people >= int.parse(peopleString!)) {
        if (carString == '1') {
          if (parking < 1) {
            return true;
          } else {
            return false;
          }
        } else {
          if (parking >= 1) {
            return true;
          } else {
            return false;
          }
        }
      } else {
        return false;
      }
    } else {
      return false;
    }
  }
}

myFavorite/my_favorite_page.dart

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';

import '../map/apt_page.dart';

class MyFavoritePage extends StatefulWidget {
  const MyFavoritePage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _MyFavoritePage();
  }
}

class _MyFavoritePage extends State<MyFavoritePage> {
  List<Map<String, dynamic>> favoriteList = List.empty(growable: true);

  @override
  void initState() {
    super.initState();
    FirebaseFirestore.instance
        .collection('rollcake')
        .doc('favorite')
        .get()
        .then((value) => {
      setState(() {
        favoriteList.add(value.data()!);
      })
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('나의 추천 리스트'),
      ),
      body: ListView.builder(
        itemBuilder: (context, snapshot) {
          return Card(
            child: InkWell(child: SizedBox(
              height: 50,
              child: Column(
                children: [Text(favoriteList[snapshot]['name'])],
              ),
            ), onTap: (){
              Navigator.of(context)
                  .push(MaterialPageRoute(builder: (context) {
                return AptPage(
                  aptHash: favoriteList[snapshot]['position']['geohash'], aptInfo: favoriteList[snapshot],
                );
              }));
            },),
          );
        },
        itemCount: favoriteList.length,
      ),
    );
  }
}

settings/setting_page.dart

import 'package:flutter/material.dart';
import '../intro/intro_page.dart';
import 'package:shared_preferences/shared_preferences.dart';

class SettingPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _SettingPage();
  }
}

class _SettingPage extends State<SettingPage> {
  int mapType = 0;
  late SharedPreferences prefs;

  @override
  void initState() {
    super.initState();
    initShared();
  }

  void initShared() async {
    prefs = await SharedPreferences.getInstance();
    var type = prefs.getInt("mapType");
    if (type != null) {
      setState(() {
        mapType = type;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('설정'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context).pushAndRemoveUntil(
                      MaterialPageRoute(builder: (context) {
                        return const IntroPage();
                      }), (route) => false);
                },
                child: Text('로그 아웃 하기')),
            SizedBox(
              height: 30,
            ),
            Text('지도 타입'),
            SizedBox(
              height: 200,
              child: ListView(
                children: [
                  RadioListTile<int>(
                    title: const Text('terrain'),
                    value: 0,
                    groupValue: mapType,
                    onChanged: (value) async {
                      await prefs.setInt('mapType', value!);
                      setState(() {
                        mapType = value!;
                      });
                    },
                  ),
                  RadioListTile<int>(
                    title: const Text('satellite'),
                    value: 1,
                    groupValue: mapType,
                    onChanged: (value) async {
                      await prefs.setInt('mapType', value!);
                      setState(() {
                        mapType = value!;
                      });
                    },
                  ),
                  RadioListTile<int>(
                    title: const Text('hybrid'),
                    value: 2,
                    groupValue: mapType,
                    onChanged: (value) async {
                      await prefs.setInt('mapType', value!);
                      setState(() {
                        mapType = value!;
                      });
                    },
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

소스코드 설명

안녕하세요. 202316035 박준혁입니다.

모바일프로그래밍(2) 기말 프로젝트인 ‘인덕 부동산' 앱에 대해서 설명하겠습니다.

제가 개발한 앱은 '인덕 부동산'으로 지도 API를 활용하여 부동산 정보를 보여주는 앱 입니다.

부동산 정보를 보여주기 위해선 부동산에 대한 데이터가 필요합니다.

부동산 데이터를 가져오는 방법은 공공데이터 포털의 부동산 정보 API를 활용하는 방법과 데이터베이스를 직접 구축하고 정보를 저장해놓은 후 가져오는 방법이 있습니다.

API를 활용하면 실시간으로 정보를 받을 수 있지만 상황에 따라 API가 작동하지 않을 수 있고 받은 데이터를 한번 더 가공해야 하기 때문에 본 앱에서는 데이터베이스를 직접 구축하고 가공된 데이터를 저장해서 불러오는 방법으로 구현했습니다.

데이터베이스는 Firebase의 Storage와 Firestore Database를 사용했습니다.

데이터 중에 geohash 라는 값이 있는데 이는 부동산 위치의 위도와 경도를 해시값으로 변환한 것으로 이 데이터를 사용하면 빠르게 원하는 지역의 부동산 정보를 가져올 수 있습니다.

main.dart 파일입니다.

앱의 시작점이고 앱을 실행하면 인트로 페이지로 넘어갑니다.

intro_page.dart 파일에선 인트로 페이지를 구현했습니다.

Future.delayed를 통해 2초 후에 MapPage로 넘어가도록 구현했습니다. 인트로 페이지에선 간단하게 텍스트와 아파트 아이콘을 보여줍니다.

그 다음은 map_page.dart 파일입니다. 이 파일의 주요 기능은 구글 지도 API를 사용하여 지도를 표시하고 파이어베이스에서 데이터를 가져와서 보여주는 것 입니다.

GoogleMapController를 사용하여 구글 지도 API를 통해서 지도를 표시합니다.

MapType은 지도의 표시형태를 변경할 수 있는 기능을 제공합니다.

_searchApt 함수에서는 현재 지도 화면의 중심 좌표를 계산하고 반경 1Km 이내의 데이터를 Firestore에서 검색합니다.

그리고 검색된 데이터를 drawMarker를 사용하여 지도에 표시하게 됩니다.

selectedCheck 함수를 사용해서 조건에 따라 아파트 데이터를 필터링 할 수 있습니다.

bottomNavigationBar를 통해서 지도로 보기와 리스트로 보기 간 전환이 가능합니다.

map_filter.dart 파일에서는 데이터를 필터링 할 수 있도록 맵 필터를 클래스로 정의했습니다.

map_filter_dialog.dart 파일에서는 사용자가 필터를 설정할 수 있도록 dialog를 구현하였습니다.

apt_page.dart 파일에서는 사용자가 아파트를 클릭했을 때 해당 아파트에 대한 상세 정보(이름, 주소, 면적, 매매 정보 등)를 표시하기 위한 페이지를 정의합니다.

my_favorite_page.dart 파일에서는 사용자가 즐겨찾기에 저장한 아파트를 보여주는 리스트 페이지를 구현했습니다.

즐겨찾기 리스트는 Firestore에 저장하여 앱을 종료해도 다시 불러올 수 있도록 구현했습니다.

setting_page.dart 파일에서는 설정 페이지를 구현했습니다.

설정 페이지에선 지도의 타입을 변경할 수 있는 기능을 추가했습니다.

Flutter 14주차 (2) - 파이어베이스 인증하기

NicoDora — Fri, 13 Dec 2024 17:30:36 +0900

Flutter 14주차 (2) - 파이어베이스 인증하기

이번 주차에서는 파이어베이스의 인증 기능을 이용해 이메일과 비밀번호로 회원가입하고 로그인하는 앱을 만들어 볼 예정이다.

파이어베이스 이메일 비밀번호 인증 설정하기

파이어베이스의 이메일 비밀번호 인증 기능을 사용하기 위해선 파이어베이스 콘솔에서 해당 기능을 활성화해줘야 한다.

먼저 파이어베이스 콘솔에 접속하여 저번시간에 만든 프로젝트를 클릭하자.

그리고 왼쪽 빌드 목록에서 Authentication을 클릭하자.

인증 방법 중에서 이메일/비밀번호를 클릭하고 사용 설정을 활성화하고 저장을 누르자.

템플릿 탭으로 넘어와서 이메일 주소 인증으로 들어가자.

아래 템플릿 언어를 한국어로 바꾸자.

패키지 등록하기

pubspec.yaml 파일을 열고 파이어베이스 인증과 토스트를 출력하기 위한 패키지를 등록한 후 Pub get을 눌러 패키지를 등록하자.

패키지를 등록하기 전에 항상 pub.dev에 들어가서 패키지의 최신버전을 확인하고 등록하자.

코드 작성하기

// Firebase와 Flutter의 주요 패키지를 가져옵니다.
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import '../firebase_options.dart';
import 'package:fluttertoast/fluttertoast.dart';

showToast(String msg) {      // 토스트 메시지를 화면에 표시하는 함수
  Fluttertoast.showToast(
      msg: msg, // 출력할 메시지
      toastLength: Toast.LENGTH_SHORT, // 짧은 시간 동안 표시
      gravity: ToastGravity.CENTER, // 화면 중앙에 표시
      timeInSecForIosWeb: 1, // iOS 및 웹에서 표시 시간
      backgroundColor: Colors.red, // 배경색: 빨간색
      textColor: Colors.white, // 글자색: 흰색
      fontSize: 16.0 // 글자 크기
  );
}

// 앱의 진입점(Main 함수)
void main() async {
  WidgetsFlutterBinding.ensureInitialized(); // Flutter 엔진 초기화
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform, // 플랫폼별 Firebase 설정 적용
  );
  runApp(MyApp()); // 앱 실행
}

// 전체 앱을 정의하는 MyApp 클래스
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo', // 앱 제목
      theme: ThemeData(
        primarySwatch: Colors.blue, // 기본 색상 테마
      ),
      home: AuthWidget(), // 첫 화면으로 AuthWidget 지정
    );
  }
}

// 인증 화면을 담당하는 StatefulWidget
class AuthWidget extends StatefulWidget {
  @override
  AuthWidgetState createState() => AuthWidgetState(); // 상태 생성
}

// 인증 로직 및 UI 상태를 관리하는 State 클래스
class AuthWidgetState extends State<AuthWidget> {
  final _formKey = GlobalKey<FormState>(); // 폼 유효성 검사용 키

  late String email; // 사용자 이메일
  late String password; // 사용자 비밀번호
  bool isInput = true; // 입력 화면 여부(true: 입력, false: 결과)
  bool isSignIn = true; // 로그인 여부(true: 로그인, false: 회원가입)

  // 로그인 처리 함수
  signIn() async {
    try {
      await FirebaseAuth.instance
          .signInWithEmailAndPassword(email: email, password: password)
          .then((value) {
        print(value); // 성공 결과 출력
        if (value.user!.emailVerified) { // 이메일 인증 여부 확인
          setState(() {
            isInput = false; // 결과 화면으로 전환
          });
        } else {
          showToast('emailVerified error'); // 이메일 인증 실패 메시지
        }
        return value; // 결과 반환
      });
    } on FirebaseAuthException catch (e) {
      // Firebase 인증 에러 처리
      if (e.code == 'user-not-found') {
        showToast('user-not-found'); // 사용자 없음 메시지
      } else if (e.code == 'wrong-password') {
        showToast('wrong-password'); // 비밀번호 오류 메시지
      } else {
        print(e.code); // 기타 오류 코드 출력
      }
    }
  }

  // 로그아웃 처리 함수
  signOut() async {
    await FirebaseAuth.instance.signOut(); // Firebase 로그아웃
    setState(() {
      isInput = true; // 입력 화면으로 전환
    });
  }

  // 회원가입 처리 함수
  signUp() async {
    try {
      await FirebaseAuth.instance
          .createUserWithEmailAndPassword(email: email, password: password)
          .then((value) {
        if (value.user!.email != null) { // 계정 생성 성공 여부 확인
          FirebaseAuth.instance.currentUser?.sendEmailVerification(); // 이메일 인증 요청
          setState(() {
            isInput = false; // 결과 화면으로 전환
          });
        }
        return value; // 결과 반환
      });
    } on FirebaseAuthException catch (e) {
      // Firebase 회원가입 에러 처리
      if (e.code == 'weak-password') {
        showToast('weak-password'); // 비밀번호 보안 약함 메시지
      } else if (e.code == 'email-already-in-use') {
        showToast('email-already-in-use'); // 이메일 중복 메시지
      } else {
        showToast('other error'); // 기타 오류 메시지
        print(e.code); // 오류 코드 출력
      }
    } catch (e) {
      print(e.toString()); // 기타 예외 출력
    }
  }

  // 입력 화면 UI 생성
  List<Widget> getInputWidget() {
    return [
      // 로그인 또는 회원가입 제목
      Text(
        isSignIn ? "SignIn" : "SignUp", // 현재 상태에 따라 제목 변경
        style: const TextStyle(
          color: Colors.indigo, // 텍스트 색상
          fontWeight: FontWeight.bold, // 굵은 글씨
          fontSize: 20, // 글씨 크기
        ),
        textAlign: TextAlign.center, // 중앙 정렬
      ),
      // 이메일 및 비밀번호 입력 폼
      Form(
        key: _formKey, // 유효성 검사를 위한 키
        child: Column(
          children: [
            // 이메일 입력 필드
            TextFormField(
              decoration: InputDecoration(labelText: 'email'), // 라벨
              validator: (value) {
                if (value?.isEmpty ?? false) {
                  return 'Please enter email'; // 빈 입력 시 메시지
                }
                return null; // 유효성 통과
              },
              onSaved: (String? value) {
                email = value ?? ""; // 이메일 저장
              },
            ),
            // 비밀번호 입력 필드
            TextFormField(
              decoration: const InputDecoration(
                labelText: 'password', // 라벨
              ),
              obscureText: true, // 비밀번호 입력 시 숨김
              validator: (value) {
                if (value?.isEmpty ?? false) {
                  return 'Please enter password'; // 빈 입력 시 메시지
                }
                return null; // 유효성 통과
              },
              onSaved: (String? value) {
                password = value ?? ""; // 비밀번호 저장
              },
            ),
          ],
        ),
      ),

      // 로그인/회원가입 버튼
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState?.validate() ?? false) { // 유효성 검사 통과 시
            _formKey.currentState?.save(); // 폼 데이터 저장
            print('email: $email, password : $password'); // 디버깅용 출력
            if (isSignIn) {
              signIn(); // 로그인 호출
            } else {
              signUp(); // 회원가입 호출
            }
          }
        },
        child: Text(isSignIn ? "SignIn" : "SignUp"), // 버튼 텍스트
      ),

      // 상태 전환 링크 (로그인 <-> 회원가입)
      RichText(
        textAlign: TextAlign.right, // 오른쪽 정렬
        text: TextSpan(
          text: 'Go ', // 설명 텍스트
          // style: Theme.of(context).textTheme.bodyText1, // 기본 텍스트 스타일
          style: Theme.of(context).textTheme.bodyLarge, // 변경된 코드
          children: <TextSpan>[
            TextSpan(
                text: isSignIn ? "SignUp" : "SignIn", // 현재 상태에 따라 텍스트 변경
                style: const TextStyle(
                  color: Colors.blue, // 색상
                  fontWeight: FontWeight.bold, // 굵은 글씨
                  decoration: TextDecoration.underline, // 밑줄
                ),
                recognizer: TapGestureRecognizer()
                  ..onTap = () {
                    setState(() {
                      isSignIn = !isSignIn; // 상태 전환
                    });
                  }),
          ],
        ),
      ),
    ];
  }

  // 결과 화면 UI 생성
  List<Widget> getResultWidget() {
    String resultEmail = FirebaseAuth.instance.currentUser!.email!; // 현재 사용자 이메일
    return [
      Text(
        isSignIn
            ? "$resultEmail 로 로그인 하셨습니다.!" // 로그인 결과 메시지
            : "$resultEmail 로 회원가입 하셨습니다.! 이메일 인증을 거쳐야 로그인이 가능합니다.", // 회원가입 결과 메시지
        style: const TextStyle(
          color: Colors.black54, // 텍스트 색상
          fontWeight: FontWeight.bold, // 굵은 글씨
        ),
      ),
      // 로그아웃/다시 로그인 버튼
      ElevatedButton(
        onPressed: () {
          if (isSignIn) {
            signOut(); // 로그아웃 호출
          } else {
            setState(() {
              isInput = true; // 입력 화면으로 전환
              isSignIn = true; // 로그인 상태로 전환
            });
          }
        },
        child: Text(isSignIn ? "SignOut" : "SignIn"), // 버튼 텍스트
      ),
    ];
  }

  // 화면 빌드
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("인증테스트 인덕대 202316035 박준혁"), // 앱 제목
      ),
      body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch, // 너비 최대 확장
          children: isInput ? getInputWidget() : getResultWidget()), // 상태에 따라 화면 선택
    );
  }
}

앱을 실행시키면 SignIn 페이지가 먼저 뜨는데 일단 로그인을 하기 위해선 회원가입을 해야 하므로 SignUp 페이지로 이동하여 이메일과 비밀번호를 입력하고 SignUp 버튼을 누르자.

그러면 오른쪽 사진과 같이 이메일 인증을 거쳐야 한다고 메시지가 나온다.

실제로 이메일을 확인해보면 아래와 같은 메일이 하나 와 있을 것이다.

메일을 통해 받은 링크를 클릭하면 자동으로 인증이 완료된다.

다시 앱으로 돌아와서 이번엔 SignIn 페이지로 이동해서 이메일과 비밀번호를 입력하고 SignIn 버튼을 누르자.

그러면 아래와 같이 로그인이 성공적으로 완료된 모습을 볼 수 있다.

파이어베이스 콘솔에 들어가보면 아까 가입했던 이메일로 사용자가 생성된 것을 확인할 수 있다.

Flutter 14주차 (1) - 이미지 피커(image_picker) 활용하기

NicoDora — Fri, 13 Dec 2024 16:17:38 +0900

Flutter 14주차 (1) - 이미지 피커(image_picker) 활용하기

이번 주차에서는 이미지 피커를 활용하여 갤러리나 카메라와 연동하는 앱을 만들어 볼 예정이다.

갤러리에서 선택하거나 카메라로 찍은 사진을 화면에 출력하는 간단한 앱이다.

image_picker 패키지 등록하기

이미지 피커를 사용하기 위해선 다음처럼 이미지 피커 패키지를 pubspec.yaml 파일의 dependencies 항목에 등록해야 한다.

pub.dev 사이트에 들어가서 image_picker를 검색한 후 dependencies 항목에 등록하자.

Flutter 패키지는 버전 업데이트가 자주 일어나는데 이전 버전이면 다른 패키지와 충돌이 발생할 수도 있으므로 가능하면 pub.dev에서 검색해서 최신 버전의 패키지를 다운받는 것을 추천한다.

코드 작성하기

lib 폴더 아래에 ch23_2 디렉터리를 만들고 안에 test.dart 파일을 만든 후 코드를 작성하자.

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: NativePluginWidget(),
    );
  }
}

class NativePluginWidget extends StatefulWidget {
  const NativePluginWidget({super.key});

  @override
  State<NativePluginWidget> createState() => _NativePluginWidgetState();
}

class _NativePluginWidgetState extends State<NativePluginWidget> {
  XFile? _image;

  Future getGalleryImage() async {
    var image = await ImagePicker().pickImage(source: ImageSource.gallery);
    setState(() {
      _image = image;
    });
  }

  Future getCameraImage() async {
    var image = await ImagePicker().pickImage(source: ImageSource.camera);
    setState(() {
      _image = image;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Image Picker'),),
      body: Container(
        color: Colors.indigo,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: (<Widget>[
              ElevatedButton(onPressed: getGalleryImage, child: Text('gallery')),
              Center(
                child: _image == null
                ? Text(
                  'No image selected',
                  style: TextStyle(color: Colors.white),
                ) : CircleAvatar(
                  backgroundImage: FileImage(File(_image!.path)),
                  radius: 100,
                ),
              ),
              ElevatedButton(onPressed: getCameraImage, child: Text('camera')),
            ]),
          ),
        ),
      ),
    );
  }
}

코드를 작성하고 앱을 실행시키면 아래와 같이 gallery 버튼과 camera 버튼이 나타나게 된다.

camera 버튼을 누르면 아래와 같이 실제 카메라를 실행시켜 사진을 찍고 그 사진을 앱 가운데에 출력하게 된다.

gallery 버튼을 누르면 휴대폰 내의 사진을 가져올 수 있다.

그런데 에뮬레이터에는 사진이 없어 임시로 사진을 에뮬레이터 안에 넣어줘야 한다.

우측의 디바이스 매니저 창을 열고 사용하는 디바이스의 오른쪽에 점을 누르고 'Open in Device Explorer'를 클릭하자.

그러면 아래와 같이 Device Explorer 창이 뜨게 되는데, 여기서 'storage -> emulated -> 0 -> Pictures' 폴더로 이동하여 원하는 사진을 넣고 에뮬레이터를 재실행 하면 된다.

다시 앱을 실행시켜 gallery 버튼을 누르자.

처음에는 Recent 창으로 들어가게 되는데, 왼쪽 메뉴 버튼을 누르고 sdk_gphone64_arm64 으로 들어가자.

거기서 Pictures 로 들어가면 아까 Device Explorer에서 넣었던 사진을 선택할 수 있다.

갤러리 내의 사진도 잘 불러오는 걸 확인할 수 있다.

Flutter 12주차 - 플러터 앱과 파이어베이스 연동하기 (MacOS)

NicoDora — Sat, 23 Nov 2024 18:38:56 +0900

Flutter 12주차 - 플러터 앱과 파이어베이스 연동하기 (MacOS)

이번 주차에서는 파이어베이스를 사용하여 실습을 진행하기 위해 플러터 앱과 파이어베이스를 연동하는 방법에 대해 알아볼 예정이다.

파이어베이스 프로젝트 만들기

Flutter 앱에 Firebase를 추가하는 방법은 아래 공식문서에서 자세히 안내하고 있다.

https://firebase.google.com/docs/flutter/setup?hl=ko&platform=android

위 공식문서를 참고하여 차근차근 연동해보자.

먼저 Firebase Console에 들어가보면 아래와 같이 기본 페이지가 나온다.

필자는 이전에 프로젝트를 만들어 놓은 적이 있어 다른 프로젝트가 보이는데 만약 이번이 처음이라면 프로젝트 만들기만 보일 것이다.

추후에 프로젝트를 생성하고 나면 여기에 생성될 것이다.

먼저 프로젝트를 만들기 위해선 먼저 Firebase CLI를 설치해야 한다.

Firebase CLI를 설치하는 방법은 여기서 확인할 수 있는데, 필자는 npm을 사용하여 설치를 진행할 것이기 때문에 node.js를 설치해줘야한다.

node.js는 node.js 공식 홈페이지에서 다운받을 수 있다.

홈페이지에서 현재 컴퓨터의 운영체제에 맞게 다운로드 파일을 추천해주므로 홈페이지에 들어가서 바로 Download Node.js 버튼을 눌러 설치하면 된다.

참고로 필자는 MacOS 환경에서 실습하고 있다.

설치가 완료되고 나서 터미널에서 아래 명령어를 쳐보자.

node --version

설치가 잘 되었으면 아래와 같이 노드 버전이 출력된다.

그리고 아래 명령어를 통해서 Firebase CLI를 설치하자.

약 1분 내외로 설치가 완료된다.

npm install -g firebase-tools

이제 아래 명령어를 입력하여 파이어베이스에 로그인해보자.

firebase login

필자는 이미 로그인했기 때문에 저렇게 뜨는데 만약 처음 로그인을 진행한다면 브라우저에 구글 로그인 창이 하나 뜰 것이다.

거기서 구글 로그인을 한 후 권한 허용을 눌러주면 로그인이 완료된다.

로그인이 정상적으로 완료되었는지 확인하고 싶다면 firebase login 명령어를 다시 입력해서 이미 로그인되었다고 뜨면 성공이다.

다음으로 아래 명령어를 입력해서 프로젝트를 하나 만들자.

firebase projects:create {프로젝트ID}

필자는 프로젝트 ID 'flutter-pjh1' 으로 지어줬다.

프로젝트 명을 어떻게 설정하겠냐고 하면서 입력을 기다릴텐데 엔터를 누르면 위 명령어에서 입력한 ID가 그대로 들어간다. 그냥 엔터를 누르고 넘어가도 되고, 본인이 원하는 이름이 있다면 입력해줘도 된다.

위와 같이 파이어베이스 프로젝트가 준비되었다고 뜨면 성공이다.

Firebase Console에 들어가서 아래로 스크롤해서 모든 프로젝트 쪽을 보면 방금 만든 프로젝트가 추가된 것을 확인할 수 있다.

이제 pub.dev 로 이동하여 firebase_core를 검색하자.

pubspec.yaml 파일에 dependencies 에 추가하고 Pub get 버튼을 눌러 패키지 설치를 완료하자.

Firebase Console에 들어가서 아까 만든 프로젝트를 클릭해서 들어가자.

프로젝트 개요에서 플러터 아이콘을 클릭하자.

그러면 아래와 같이 플러터 앱에 파이어베이스를 추가하는 가이드 화면이 나타난다.

우리는 1번째 작업공간 준비는 이미 완료했으므로 다음 버튼을 누르자.

FlutterFire CLI 설치 및 실행에 대해서 설명하고 있다.

가이드 대로 터미널에서 아래 명령어를 실행하여 flitterfire cli를 활성화하자.

dart pub global activate flutterfire_cli

처음 flitterfire cli를 활성화하면 PATH 설정을 하라는 안내문구가 나오는데 환경변수를 선언해줘야 다음 명령어를 사용할 수 있다.

아래 명령어를 입력하여 환경변수 편집기에 들어가자.

vi ~/.zshrc

혹시나 이런 창이 뜬다면 E 키를 눌러 수정하면 된다.

원하는 곳에 아래 명령어를 입력하고 Esc 키를 누른 후 :wq 를 입력하여 저장 후 vi editer를 빠져나오자.

export PATH="$PATH":"$HOME/.pub-cache/bin"

마지막으로 아래 명령어를 입력하여 수정한 파일을 적용하면 된다.

source ~/.zshrc

그런 다음 Flutter 프로젝트 디렉터리의 루트 에서 다음 명령어를 실행하자.

여기서 주의할 점은 반드시 프로젝트 데렉터리의 "루트" 경로에서 실행해줘야 한다는 점이다.

MacOS 에서는 Finder에서 프로젝트의 루트 경로까지 이동한 후 해당 폴더를 우클릭하여 '터미널에서 열기'를 클릭하여 해당 경로에서 바로 터미널을 열 수 있다.

그런 다음 아래 명령어를 실행하자.

flutterfire configure --project=flutter-pjh1

명령어는 본인이 만든 프로젝트 명에 따라 달라지므로 가급적이면 가이드에서 제공한 명령어를 그대로 복사하여 사용하는 것을 추천한다.

명령어를 실행하고 나면 아래와 같이 플랫폼을 선택하는 창이 나오는데 여기서 본인이 사용할 플랫폼을 선택하면 된다. 화살표 위, 아래 키로 이동할 수 있으며 스페이스 키를 누르면 선택/해제 할 수 있다.

일단은 안드로이드만 선택하자.

선택이 완료되면 엔터키를 눌러 다음으로 넘어갈 수 있다.

FirebaseCommandException 에러 해결법

만약 아래와 같이 어떤 안드로이드 애플리케이션 ID를 사용할 것이냐고 나타난다면 아마 뭔짓을 해도 다음으로 넘어가면 에러가 뜰 것이다.

FirebaseCommandException: An error occured on the Firebase CLI when attempting to run a command.

ERROR: Package name for Android app cannot be empty

이런 에러가 떴다면 뻘짓하지말고 아래 명령어를 입력하자.

dart pub global activate flutterfire_cli 1.0.1-dev.2

출처: https://github.com/invertase/flutterfire_cli/issues/326

[bug]: flutterfire package name error · Issue #326 · invertase/flutterfire_cli

Is there an existing issue for this? I have searched the existing issues. CLI Version 1.0.0 Firebase Tools version 13.13.0 Flutter Doctor Output [√] Flutter (Channel stable, 3.22.2, on Microsoft Wi...

github.com

대충 에러가 나는 이유가 build.gradle 프로젝트 셋업이 이전 버전이라 이러한 에러가 뜨는거 같다.

다시 아래 명령어를 실행하면 플랫폼을 선택하자마자 바로 설정이 완료되었다고 뜬다.

flutterfire configure --project=flutter-pjh1

정상적으로 설정이 완료되고 나면 프로젝트의 lib 폴더에 firebase_options.dart 파일이 생겨난 것을 확인할 수 있다.

다시 Firebase Console로 돌아와서 2단계 작업이 완료되었으므로 다음 버튼을 누르자.

코드 작성하기

이제 Flutter 프로젝트와 Firebase를 연동하기 위한 마지막 작업이 남았다.

3단계에서 설명하듯 연동을 완료하기 위해선 Firebase.initalizeApp을 호출하여 Firebase를 초기화해줘야 한다.

필자는 간단하게 lib 폴더 밑에 ch24_1 폴더를 생성하고 그 안에 test.dart 파일에 코드를 작성하려고 한다.

아래처럼 코드를 작성하자.

// Firebase와 Flutter 관련 패키지 임포트
import 'package:firebase_core/firebase_core.dart'; // Firebase 초기화 기능
import 'package:flutter/cupertino.dart'; // Cupertino 스타일 위젯을 위한 패키지
import '/firebase_options.dart'; // Firebase 설정 파일 (firebase_options.dart)

// 앱의 진입점 main() 함수
void main() async {
  // Flutter 프레임워크 초기화 작업을 보장하는 코드
  WidgetsFlutterBinding.ensureInitialized();

  // Firebase 초기화
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform, // 플랫폼에 맞는 Firebase 설정을 사용
  );

  // Firebase 초기화가 완료된 후 앱 실행
  runApp(MyApp());
}

// Flutter 앱의 구조를 정의하는 MyApp 클래스
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      title: 'Firebase Flutter App', // 앱의 제목
      home: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text('Firebase 예제 202316035 박준혁'), // 내비게이션 바의 제목
        ),
        child: Center(
          child: Text('Firebase Initialized!'), // 화면 중앙에 텍스트 표시
        ),
      ),
    );
  }
}

아래와 같이 앱이 정상적으로 실행된다면 성공이다.

모든 작업을 마쳤으니 '콘솔로 이동' 버튼을 눌러 가이드를 종료하자.

이제 프로젝트 개요를 보면 내가 만들었던 Flutter 프로젝트와 연동된 모습을 볼 수 있다.

Flutter 11주차 - Youtube API를 이용한 동영상 플레이어 앱

NicoDora — Tue, 19 Nov 2024 21:23:10 +0900

Flutter 11주차 - Youtube API를 이용한 동영상 플레이어 앱

이번 주차에서는 간단하게 Youtube API를 이용한 동영상 플레이어 앱을 만들어 볼 예정이다.

구글 API 키 얻기

유튜브 API를 사용하기 위해선 구글의 API 키를 발급받아 사용해야 한다.

아래 링크로 들어가 본인의 구글 아이디로 로그인하면 다음과 같은 화면이 나온다.

https://console.cloud.google.com/

일단 처음 구글 콘솔에 접속하면 아무런 프로젝트가 선택되어 있지 않을텐데, 필자는 이미 이전에 구글 API를 사용한 적이 있어 프로젝트가 자동으로 선택되어 있다.

좌측에 프로젝트 선택창을 클릭하여 프로젝트를 하나 추가해보자.

프로젝트 이름은 YoutubeAPI로 지었다.

(테스트용이기 때문에 이름은 어떻게 써도 상관없다.)

프로젝트가 잘 만들어 졌다면 'Youtube Data API v3'를 검색하여 선택하자.

Youtube API에 대한 정보가 뜨게 되는데 여기서 '사용'을 클릭하자.

'사용'을 클릭한 후에 자동으로 API및 서비스 화면으로 리다이렉션 되는데, 왼쪽 메뉴에서 '사용자 인증 정보'를 클릭하자.

화면 상단에 '사용자 인증 정보 만들기'를 클릭한 후 'API 키'를 눌러 API 키를 생성하자.

API 키 생성이 완료되면 아래와 같이 API 키가 표시된다.

이제 해당 API키를 가지고 요청을 보내야 하므로 복사해서 잘 저장해놓자.

youtube_player_flutter 패키지 가져오기

다음으로 유튜브 영상을 재생하기 위해서 youtube_player_flutter 패키지를 설치해보자.

pub.dev로 이동하여 'youtube_player_flutter'를 검색하고 들어가자.

아래와 같이 Installing 탭에 들어가서 dependencies에 넣을 패키지 정보를 복사하여 붙여넣자.

마지막엔 Pub get 을 눌러 패키지 설치를 완료하자.

코드 작성하기

이번에는 한 파일에 모든 소스코드를 작성하는 것이 아니라 기능별로 파일과 폴더를 구분하여 작성하였다.

main.dart

import 'package:flutter_202316035/youtube_project/screen/home_screen.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: HomeScreen(),
    )
  );
}

coustom_youtube_player.dart

import 'package:flutter/material.dart'; // Flutter의 기본 위젯 및 Material 디자인 라이브러리 임포트
import 'package:flutter_202316035/youtube_project/model/video_model.dart'; // VideoModel 클래스 임포트

// 유튜브 플레이어를 사용하기 위해 패키지 불러오기
import 'package:youtube_player_flutter/youtube_player_flutter.dart'; // 유튜브 플레이어 패키지 임포트

// 유튜브 동영상 플레이어가 될 위젯 클래스
class CustomYoutubePlayer extends StatefulWidget {
  // 상위 위젯에서 입력받을 동영상 정보
  final VideoModel videoModel; // 동영상 모델을 저장할 변수

  const CustomYoutubePlayer({
    required this.videoModel, // 필수 매개변수로 동영상 모델 받기
    super.key // 기본 키 매개변수 사용
  });

  @override
  State<CustomYoutubePlayer> createState() => _CustomYoutubePlayerState(); // 상태 클래스 생성
}

class _CustomYoutubePlayerState extends State<CustomYoutubePlayer> {
  YoutubePlayerController? controller; // 유튜브 플레이어 컨트롤러 변수

  @override
  void initState() {
    super.initState(); // 부모 클래스의 initState 호출

    // 유튜브 플레이어 컨트롤러 초기화
    controller = YoutubePlayerController(
      initialVideoId: widget.videoModel.id, // 처음 실행할 동영상의 ID 설정
      flags: const YoutubePlayerFlags(
        autoPlay: false, // 자동 실행 사용하지 않기
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch, // 자식 위젯을 부모 위젯의 너비에 맞춤
      children: [
        // 유튜브 플레이어 위젯
        YoutubePlayer(
          controller: controller!, // 설정한 컨트롤러를 사용
          showVideoProgressIndicator: true, // 동영상 진행 표시기 표시
        ),
        const SizedBox(height: 16.0), // 위젯 간 간격 설정
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8.0), // 좌우 패딩 설정
          child: Text(
            widget.videoModel.title, // 동영상 제목 표시
            style: const TextStyle(
              color: Colors.white, // 텍스트 색상 흰색
              fontSize: 16.0, // 텍스트 크기 설정
              fontWeight: FontWeight.w700, // 텍스트 굵기 설정
            ),
          ),
        )
      ],
    );
  }
}

video_model.dart

// VideoModel 클래스: 동영상 정보를 저장하는 모델
class VideoModel {
  final String id; // 동영상 ID
  final String title; // 동영상 제목

  // 생성자: VideoModel 인스턴스를 생성할 때 사용
  VideoModel({
    required this.id, // ID는 필수 매개변수
    required this.title // 제목은 필수 매개변수
  });
}

home_screen.dart

import 'package:flutter_202316035/youtube_project/component/custom_youtube_player.dart'; // CustomYoutubePlayer 위젯 임포트
import 'package:flutter_202316035/youtube_project/model/video_model.dart'; // VideoModel 클래스 임포트
import 'package:flutter/material.dart'; // Flutter의 Material 디자인 라이브러리 임포트

// HomeScreen 클래스: 앱의 홈 화면을 구성하는 StatelessWidget
class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key}); // 생성자: 키를 받아 초기화

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('202316035 박준혁'),
      ),
      // 기본 구조인 Scaffold 위젯 반환
      backgroundColor: Colors.black, // 배경색을 검정색으로 설정
      body: CustomYoutubePlayer(
        // CustomYoutubePlayer 위젯 사용
        videoModel: VideoModel(
          // VideoModel 인스턴스 생성
          id: '3Ck42C2ZCb8', // 동영상 ID 설정
          title: '다트언어 기본기 1시간만에 끝내기' // 동영상 제목 설정
        )
      ),
    );
  }
}

앱 실행 결과 아래와 같이 동영상이 잘 플레이 되는 것을 확인할 수 있다.

Flutter 10주차 - dio 패키지를 이용해 reqres.in 사이트에서 API 정보 가져오기

NicoDora — Sun, 10 Nov 2024 19:42:36 +0900

Flutter 10주차 - dio 패키지를 이용해 reqres.in 사이트에서 API 정보 가져오기

이번 주차에서는 reqres.in 사이트에서 제공하는 API를 사용해서 유저 정보 리스트를 구현할 예정이다.

dio 패키지 가져오기

이번 실습에서는 HTTP 요청을 처리할 수 있도록 하는 dio 패키지를 사용해서 구현할 예정이므로 pub.dev 에 들어가 dio 패키지를 설치하자.

설치 방법대로 dependencies 에 dio를 추가한 후

Pub get를 눌러 패키지를 설치하자.

reqres.in 유저 리스트 API 확인하기

https://reqres.in/api-docs/#/ 사이트에 들어가보면 reqres.in에서 제공하는 API들의 문서를 볼 수 있다.

우리가 사용할 유저 리스트 API에 대한 문서를 살펴보자.

해당 정보를 통해서 /users 의 경로로 page나 per_page param값을 담아 GET 요청을 보내면 사진과 같이 JSON 형식으로 유저들의 정보가 담겨온다는 것을 알 수 있다.

이제 이 정보를 통해서 코드를 작성해보자.

코드 작성하기

import 'package:flutter/material.dart'; // Flutter의 Material 디자인 패키지 가져오기
import 'package:dio/dio.dart'; // dio 패키지를 가져와서 HTTP 요청을 처리할 수 있도록 함

void main() {
  runApp(MyApp()); // MyApp 위젯을 실행하여 앱 시작
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'User List', // 앱의 제목 설정
      theme: ThemeData(
        primarySwatch: Colors.blue, // 기본 색상 테마 설정
      ),
      home: UserListScreen(), // 홈 화면으로 UserListScreen 위젯을 설정
    );
  }
}

class UserListScreen extends StatefulWidget {
  const UserListScreen({super.key});

  @override
  State<UserListScreen> createState() => _UserListScreenState(); // 상태를 관리하는 클래스 생성
}

class _UserListScreenState extends State<UserListScreen> {
  final Dio _dio = Dio(); // Dio 인스턴스를 생성하여 API 요청을 수행할 준비
  List<dynamic> _users = []; // 사용자 데이터를 저장할 리스트
  bool _isLoading = true; // 로딩 상태를 나타내는 변수
  bool _isLoadingMore = false; // 추가 데이터 로딩 상태 변수
  String _errorMessage = ''; // 오류 메시지를 저장할 변수
  int _currentPage = 1; // 현재 페이지 번호
  final ScrollController _scrollController = ScrollController(); // 스크롤 컨트롤러

  @override
  void initState() {
    super.initState();
    _fetchUsers(); // 초기 데이터를 불러오기
    _scrollController.addListener(_scrollListener); // 스크롤 이벤트 리스너 추가
  }

  @override
  void dispose() {
    _scrollController.dispose(); // 위젯이 사라질 때 컨트롤러 해제
    super.dispose();
  }

  // 스크롤 리스너 메서드
  void _scrollListener() {
    // 현재 스크롤 위치가 최하단일 경우 다음 페이지 데이터 불러오기
    if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
      _fetchMoreUsers();
    }
  }

  // 사용자 데이터를 가져오는 비동기 메서드
  Future<void> _fetchUsers() async {
    try {
      final response = await _dio.get('https://reqres.in/api/users?page=$_currentPage');

      if (response.statusCode == 200) {
        setState(() {
          _users = response.data['data'];
          _isLoading = false;
        });
      } else {
        setState(() {
          _errorMessage = '오류 발생: ${response.statusCode}';
          _isLoading = false;
        });
      }
    } on DioException catch (e) {
      setState(() {
        _errorMessage = '요청 중 오류 발생: $e';
        _isLoading = false;
      });
    }
  }

  // 다음 페이지의 사용자 데이터를 추가로 가져오는 메서드
  Future<void> _fetchMoreUsers() async {
    if (_isLoadingMore) return; // 이미 추가 데이터를 로딩 중이면 실행하지 않음

    setState(() {
      _isLoadingMore = true; // 추가 데이터 로딩 상태를 true로 설정
    });

    try {
      final response = await _dio.get('https://reqres.in/api/users?page=${_currentPage + 1}');

      if (response.statusCode == 200) {
        setState(() {
          _currentPage++; // 페이지 번호 증가
          _users.addAll(response.data['data']); // 새로운 데이터를 기존 리스트에 추가
          _isLoadingMore = false; // 추가 데이터 로딩 상태를 false로 설정
        });
      } else {
        setState(() {
          _errorMessage = '오류 발생: ${response.statusCode}';
          _isLoadingMore = false;
        });
      }
    } on DioException catch (e) {
      setState(() {
        _errorMessage = '요청 중 오류 발생: $e';
        _isLoadingMore = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('사용자 목록'),
      ),
      body: _isLoading
          ? Center(child: CircularProgressIndicator())
          : _errorMessage.isNotEmpty
          ? Center(child: Text(_errorMessage))
          : Column(
        children: [
          Expanded(
            child: ListView.separated(
              controller: _scrollController, // 스크롤 컨트롤러 설정
              itemCount: _users.length,
              separatorBuilder: (context, index) => Divider(),
              itemBuilder: (context, index) {
                final user = _users[index];
                return ListTile(
                  contentPadding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 16.0),
                  title: Text(user['first_name'] + ' ' + user['last_name']),
                  leading: CircleAvatar(
                    backgroundImage: NetworkImage(user['avatar']),
                  ),
                );
              },
            ),
          ),
          if (_isLoadingMore)
            Padding(
              padding: EdgeInsets.symmetric(vertical: 10),
              child: CircularProgressIndicator(), // 추가 데이터를 로딩 중일 때 로딩 인디케이터 표시
            ),
        ],
      ),
    );
  }
}

실행 결과는 아래와 같다.

reqres.in에서 유저 정보 리스트를 불러와서 유저의 이름과 성, 아바타를 표시해주고 있다.

추가로 스크롤하면 다음 페이지의 유저 리스트 API 요청을 보내 계속해서 유저 정보가 보이도록 수정하였다.

Flutter 9주차 - 카카오 API를 이용해 도서 정보 가져오기

NicoDora — Tue, 5 Nov 2024 19:48:22 +0900

Flutter 9주차 - 카카오 API를 이용해 도서 정보 가져오기

이번 주차에서는 카카오 API를 이용해 도서 정보를 가져오는 실습을 진행할 예정이다.

주요 기능은 다음과 같다.

입력 : 사용자가 원하는 검색어를 입력할 수 있는 TextField 제공.
스크롤 감지 : 사용자가 리스트를 아래로 스크롤 할 때 데이터 로드.
API 호출 : 카카오의 도서 정보 API로 데이터를 가져옴.
결과 표시 : 가져온 데이터를 리스트 형태로 표시.

http 패키지 가져오기

먼저 HTTP 통신을 통해 카카오 API에 요청할 예정이므로 HTTP 패키지가 필요하다.

pub.dev 로 이동하여 패키지 설치를 진행하자.

예시대로 dependencies에 http 패키지를 추가한 후, 우측 상단에 Pub get를 눌러 패키지를 설치하자.

카카오에서 API 키 얻기

카카오 API를 사용하기 위해선 API키가 필요한데, 키를 얻기 위해선 카카오 개발자 사이트에 로그인하고 애플리케이션을 추가해줘야 한다.

https://developers.kakao.com 에 접속하면 아래와 같은 화면이 나올 것이다.

먼저 우측 상단 로그인을 클릭해서 로그인하자. 로그인은 본인의 카카오 아이디로 진행하면 된다.

로그인이 완료되면 상단의 '내 애플리케이션'을 클릭하자.

'애플리케이션 추가하기'를 눌러 테스트용 애플리케이션을 추가해보자.

앱 이름은 'httpBook'

회사명은 본인의 학교 이름 혹은 일단 아무거나 적어도 괜찮다. (실제로 서비스에 사용하지는 않으므로)

카테고리는 API를 사용하려는 애플리케이션의 카테고리를 선택하면 되는데 일단 교육으로 선택했다.

애플리케이션이 추가되고 나면, 방금 만든 httpBook을 클릭하여 들어가보자.

좌측 메뉴에서 '앱 키'를 선택하고 'REST API 키' 를 잘 복사하여 저장해놓자. 도서 정보 API를 사용하기 위해선 이 키가 필요하다.

앱 키는 각 애플리케이션마다 고유한 값을 가지므로 절대 유출되지 않도록 보안에 신경써서 보관해야 한다.

만약 앱 키가 유출되었으면 재발급해야 한다.

카카오 도서 정보 API 사용법 확인하기

https://developers.kakao.com/docs/latest/ko/daum-search/dev-guide#search-book

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

위 문서에 들어가보면 책 검색 API의 기본 정보를 확인할 수 있다.

여기서 우리가 사용할 응답값은 title(도서 제목), contents(도서 소개), url(도서 상세 url), authors(도서 저자 리스트), price(도서 정가), sale_price(도서 판매가), thumbnail(도서 표지 미리보기 URL), status(도서 판매 상태 정보) 이다.

조금 더 내려보면 해당 응답값들이 실제로 어떻게 오는지 예시를 확인할 수 있다.

코드 작성하기

import 'package:flutter/material.dart'; // Flutter의 Material 디자인 라이브러리
import 'package:flutter_202316035/http/test.dart';
import 'package:http/http.dart' as http; // HTTP 요청을 위한 라이브러리
import 'dart:convert'; // JSON 변환을 위한 라이브러리

// 앱의 진입점
void main() {
  runApp(MyApp()); // MyApp 위젯 실행
}

// MyApp 클래스는 애플리케이션의 루트 위젯을 정의
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // MaterialApp을 사용하여 앱의 구조를 설정
    return const MaterialApp(
      home: HttpApp(), // HttpApp을 홈 화면으로 설정
    );
  }
}

// HttpApp 클래스는 StatefulWidget으로 상태를 관리
class HttpApp extends StatefulWidget {
  const HttpApp({super.key});

  @override
  State<HttpApp> createState() => _HttpAppState(); // 상태 객체 생성
}

// _HttpApp 클래스는 HttpApp의 상태를 정의
class _HttpAppState extends State<HttpApp> {
  List<dynamic>? data; // API에서 가져온 데이터를 저장할 리스트
  TextEditingController _editingController = TextEditingController(); // 검색어 입력을 위한 컨트롤러
  ScrollController _scrollController = ScrollController(); // 스크롤 이벤트를 처리하기 위한 컨트롤러
  int page = 1; // 현재 페이지 번호

  @override
  void initState() {
    super.initState();
    data = []; // 데이터 리스트 초기화
    // 스크롤 리스너 추가: 스크롤이 끝에 도달하면 다음 페이지 데이터 요청
    _scrollController.addListener(() {
      if (_scrollController.offset >= _scrollController.position.maxScrollExtent && !_scrollController.position.outOfRange) {
        page++; // 페이지 번호 증가
        getJSONData(); // 다음 페이지 데이터 요청
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // AppBar에 검색 입력 필드를 추가
        title: TextField(
          controller: _editingController, // 입력 컨트롤러 설정
          style: const TextStyle(color: Colors.blue), // 텍스트 색상 설정
          decoration: const InputDecoration(hintText: "검색어를 입력하세요."), // 힌트 텍스트
        ),
      ),
      body: Container(
        padding: const EdgeInsets.all(16.0), // 컨테이너에 패딩 추가
        child: Center(
          child: data!.isEmpty // 데이터가 없을 경우
            ? const Text(
            '데이터가 없습니다.', // 데이터가 없다는 메시지
            style:  TextStyle(fontSize: 20),
            textAlign: TextAlign.center,
          )
          : ListView.builder(
            itemCount: data!.length, // 데이터 개수
            itemBuilder: (context, index) {
              // ListView.builder를 사용하여 데이터 리스트 생성
              return Card(
                child: Row(
                  children: <Widget>[
                    // 책의 썸네일 이미지를 표시
                    Image.network(
                      data![index]['thumbnail'],
                      height: 100,
                      width: 100,
                      fit: BoxFit.contain,
                    ),
                    Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start, // 좌측 정렬
                          children: <Widget>[
                            // 책 제목
                            Text(data![index]['title'].toString(),
                            textAlign: TextAlign.center),
                            // 저자, 가격, 판매 상태 표시
                            Text('저자: ${data![index]['authors'].toString()}'),
                            Text('가격: ${data![index]['sale_price'].toString()}'),
                            Text('판매중: ${data![index]['status'].toString()}'),
                          ],
                        ))
                  ],
                ),
              );
            },
            controller: _scrollController, // 스크롤 컨트롤러 설정
          )
        ),
      ),
      floatingActionButton: FloatingActionButton(
          onPressed: () {
            // FAB 클릭 시 페이지 초기화 및 데이터 새로고침
            page = 1; // 페이지 번호 초기화
            data!.clear(); // 데이터 리스트 초기화
            getJSONData(); // 새로운 데이터 요청
          },
        child: const Icon(Icons.file_download), // 다운로드 아이콘
      ),
    );
  }

  // JSON 데이터를 가져오는 비동기 함수
  Future<void> getJSONData() async {
    // Kakao API에서 데이터 요청
    var url = 'https://dapi.kakao.com/v3/search/book?target=title&page=$page&query=${Uri.encodeQueryComponent(_editingController.text)}';
    try {
      // HTTP GET 요청
      var response = await http.get(Uri.parse(url),
          headers: {'Authorization': "KakaoAK 44144042718c0c1a63399dbc8e0e08cd"});

      // 응답 상태 코드가 200일 경우
      if (response.statusCode == 200) {
        setState(() {
          var dataConvertedToJSON = json.decode(response.body); // JSON 변환
          List<dynamic> result = dataConvertedToJSON['documents']; // 책 데이터
          data!.addAll(result); // 기존 테이터에 추가
        });
      } else {
        throw Exception('Failed to load data'); // 오류 처리
      }
    } catch (e) {
      print('Error: $e'); // 오류 메시지 출력
    }
  }
}

실행한 결과는 아래와 같다.

검색어를 입력하고 다운로드 아이콘을 클릭하면 검색어가 포함된 책들의 정보를 불러오게 된다.

리스트를 아래로 스크롤하면 추가 정보를 가져오게 된다.