해솔 | 해처럼 밝고 소나무처럼 바르게

[Flutter] 쉽게 배우는 플러터 앱 개발 실무 08강

shlee1990 — Sat, 8 Feb 2025 09:43:33 +0900

정보

업무명 : [Flutter] 쉽게 배우는 플러터 앱 개발 실무 08강
작성자 : 이상호
작성일 : 2025.02.08
설 명 :
수정이력 :

플랫폼 클라우드 연동 I (Firebase)

[학습목표]

플랫폼 클라우드 서비스(PAAS,Platform As A Service)와 연동하여 Flutter 앱을 개발하는 방법을 이해합니다.
Firebase Authentication 클라우드 서비스를 사용하여 로그인과 회원가입 기능을 개발해 봅니다.
Firestore Database 클라우드 서비스를 사용하여 추가와 조회 기능을 개발해 봅니다.

[플랫폼 클라우드(PAAS, Platform As A Service)]

PAAS 클라우드 서비스는 Backend 서버의 많은 기능들을 대체할 수 있습니다. Firebase는 프로그램 개발을 위한 클라우드 서비스로 사용량이 적은 개발단계에서는 특별히 많은 데이터를 저장하거나(5GB 초과시 과금) 사용량이 폭증하지 않는 한 무상으로 사용할 수 있습니다. 그러나 사용량이 늘어나면 사용하는 만큼 비용을 지불하여야 하니 주의하여야 합니다.

Firebase 클라우드 요금제

[Firebase Authentication]

Firebase 클라우드의 Authentication 서비스를 사용하여 회원가입, 로그아웃 및 로그인과 같은 Backend 기능들을 구현해 보겠습니다.

Firebase 클라우드 프로젝트 만들기

console.firebase.google.com에 접속하고 구글 계정으로 로그인 합니다.

로그인 - Google 계정

이메일 또는 휴대전화

accounts.google.com

프로젝트 만들기를 클릭합니다.

프로젝트 이름을 flutter firebase로 지정합니다.

프로젝트의 고유 이름을 기억해 둡시다.

Google 애널리틱스 사용을 설정합니다.

Google 애널리틱스 계정을 선택하거나 추가합니다.

Firebase Authentication 서비스 시작하기

빌드 > Authentication 메뉴를 클릭합니다.

시작하기를 클릭합니다.

원하는 인증방법을 선택합니다. 교육 목적상 이메일/비밀번호를 선택합니다.

Firebase CLI 설치

Firebase를 사용하여 개발을 하기 위해서는 개발자 컴퓨터에 Firebase CLI(Command Level Interface,명령어를 사용하는 도구)를 설치하여야 합니다.
Firebase CLI 참조 | Firebase 문서로 이동합니다. 그런데 독립 실행형 바이너리로 설치하면 나중에 Firebase 실행 파일을 찾지 못하는 문제가 있으니 npm 사용하여 설치하는 방법을 선택합시다.

Firebase CLI 참조 | Firebase 문서

firebase.google.com

아래 화면에서 Node.js 링크를 눌러 Node.js 설치 사이트로 이동합니다.

Download Node.js (LTS) 버튼을 눌러 설치 파일을 다운로드받습니다.

다운로드 받은 파일을 기본 설정을 수용하며 설치합니다.

명령 프롬프트를 새로 기동시켜 npm install -g firebase-tools 명령을 수행하여 Firebase CLI를 설치합니다.

Flutter 앱 프로젝트에 Firebase 클라우드 프로젝트 연동하기

안드로이드 스튜디오를 다시 닫았다 연후 로그인과 회원가입 기능을 개발해 둔 bottom_navigation_bar 프로젝트를 오픈합니다.
안드로이드 스튜디오에서 터미널 창을 열고 dart pub global activate flutterfire_cli 명령어를 실행하면 Flutter 프로젝트에 Firebase를 연결하기 위한 FlutterFire CLI(Command Level Interface, 명령어를 사용하여 원하는 작업을 원활하게 수행하도록 설계된 도구)를 설치할 수 있습니다. C:\flutter\bin\mingit\cmd가 PATH 시스템 변수에 추가되어 있어야 합니다. 이전 버전의 Git에서는 Git 설치로 해결하였으나 2025년 2월 8일 버전의 Git은 버전 차이로 오류가 발생합니다.

PATH 환경 변수에 C:\Users\user\AppData\Local\Pub\Cache\bin (교육장 PC에 맞는 경로로 변경) 경로를 추가합니다. PATH 환경 변수를 적용하기 위하여 안드로이드 스튜디오를 다시 닫았다 연후 bottom_navigation_bar 프로젝트를 다시 오픈합니다.
참조) idx를 사용하여 개발하는 경우 위와 같이 Firebase CLI를 설치하기 위한 절차가 생략됩니다.

만들어둔 flutter-firebase Firebase 프로젝트를 bottom_navigation_bar Flutter 앱 프로젝트에 연결하기 위하여 flutterfire configure --project=your-firebase-project-id 명령을 실행해줍니다. your-firebase-project-id은 Firebase 클라우드 프로젝트를 만들때 기억하라고 했던 고유번호입니다. 프로젝트 이름을 사용하지 않고 프로젝트 고유번호를 사용한다는 것에 주의하기 바랍니다. 프로젝트 고유 번호를 웹 브라우저의 주소창에서 쉽게 확인할 수 있습니다.

혹시 아래와 같은 오류가 발생한다면

firebase에 로그인하는 절차를 거쳐야 합니다.

참조) idx를 사용하여 개발하는 경우 Firebase에 로긴하는 절차가 생략됩니다.

Firebase 인증이 완료된 후 설정할 플랫폼을 선택하라는 메세지가 나타나면 화살표와 스페이스키를 이용하여 android와 ios를 선택한 후 Enter 키를 칩니다. 이때 프로젝트에 포함된 플랫폼만 선택하여야 합니다. 그렇지 않으면 설정 작업을 하다가 오류가 발생합니다.

연동하고자 하는 앱 ID를 입력해줍니다.

android > app > build.gradle 파일의 applicationId 값을 참조하여 입력합니다. —> 최근에 입력하지 않도록 변경된 것 같습니다.

flutterfire configure --project=your-firebase-project-id 명령의 실행이 정상적으로 완료되면 아래의 첫번째 화면을 볼 수 있는데 flutter-firebase Firebase 프로젝트와 bottom_navigation_bar Flutter 앱 프로젝트가 연결된 것입니다. 아래 두번째 화면과 같이 Firebase의 프로젝트에도 앱이 등록되어 나타나는 것을 확인할 수 있습니다.

최상위 폴더에 firebase.json 파일이 생기고 lib 폴더에 firebase_options.dart 파일이 생성된 후 firebase_options.dart 파일에 오류가 발생하는 것을 확인할 수 있습니다.

이 오류는 pubspec.yaml 파일에 firebase_core: ^3.6.0 의존성을 추가하여 해결할 수 있습니다. 그리고 Firebase Authorization 서비스를 사용하기 위하여 firebase_auth: ^5.3.1 의존성을 함께 추가합니다.

Build > Flutter > Build APK 메뉴를 클릭하여 apk 파일을 빌드할 때 아래 두번째 화면과 같은 오류가 발생합니다. 이를 예방하기 위하여 아래 세번째 화면에서 알려 주는 것과 같이 android\app\build.gradle 파일에 minSdkVersion을 23으로 설정합니다. 아래 화면을 참조바랍니다.

아래는 Build시의 오류 화면입니다.

Firebase 초기화 및 회원가입

먼저 Firebase 초기화를 위하여 main.dart 파일에서 main() 함수를 아래와 같이 수정합니다.

// main.dart 파일의 코드
... 생략 ...
import 'package:firebase_core/firebase_core.dart';  // Firebase 초기화 import
import 'firebase_options.dart';                     // Firebase Option import

void main() async {                           // 비동기 호출을 위하여 async 추가
  WidgetsFlutterBinding.ensureInitialized();  // 비동기 함수 호출 전에 초기화 확인
  await Firebase.initializeApp(               // 비동기적으로 Firebase 초기화
    options: DefaultFirebaseOptions.currentPlatform,
  );
  
  runApp(const MyApp());
}
... 생략 ...

Firebase의 Authorization 서비스를 사용하여 회원가입을 구현하기 위하여 signup_page.dart 파일에서 import, addUser 함수 및 화면 구성을 아래와 같이 수정합니다.

// signup_page.dart 파일의 코드
import 'package:flutter/material.dart';

//import 'package:http/http.dart' as http;         // 사용하지 않게 되어 삭제
// Firebase Authorization import
import 'package:firebase_auth/firebase_auth.dart';
... 생략 ...
  /*
  addUser(String userId, String password, String name) async {
    String serverUri = "http://10.0.2.2:8087/add-user";

    var response = await http.post(
      Uri.parse(serverUri),
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: {
        'userId': userId,
        'password': password,
        'name': name,
      },
    );

    print(response.body);

    if (response.statusCode == 200) {
      var addUserStatus = response.body;
      if (addUserStatus == 'success') {
        Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (_) => const MyHomePage(title: 'Flutter Demo Home Page')));
      } else {
        showAlertDialog("사용자 추가 실패", "Flutter Server 관리자에게 문의하세요.");
      }
    } else {
      showAlertDialog("서버 오류", "Flutter Server의 정상 동작 여부를 점검하세요.(${response.statusCode})");
    }
  }
  */
  addUser(String userId, String password, String name) async {
    try {
      // Firebase Authentication을 사용하여 회원가입 처리
      final UserCredential userCredential = await FirebaseAuth.instance.createUserWithEmailAndPassword(
        email: userId,
        password: password,
      );

      // 이름 업데이트 / ?는 null일 수 있는 값일때 붙여줌
      await userCredential.user?.updateDisplayName(name);

      // 홈화면으로 이동
      Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (_) => const MyHomePage(title: 'Flutter Demo Home Page')));
    } catch (e) {
      showAlertDialog("사용자 추가 실패", "$e");  // 오류 메세지
    }
  }
... 중략 ...
                  Container(
                    width: 200,
                    child: TextField(
                      controller: userIdController,
                      keyboardType: TextInputType.emailAddress,  // userId를 email로 받아 들임
                      maxLines: 1,
                      decoration: InputDecoration(
                          labelText: "아이디",
                          border: OutlineInputBorder(),
                          //hintText: "8자 이상 입력해 주세요."
                          hintText: "이메일 ID를 입력해 주세요."     // userId를 email로 받아 들임
                      ),
                    ),
                  ),  
... 생략 ...

회원가입을 해 보겠습니다. main() 함수가 수정된 것은 단순한 화면 변경이 아니기 때문에 재시작해 주어야 합니다. 메일 ID를 User ID로 입력한 후 동일한 방식으로 회원가입을 하면 회원 가입이 되어 홈화면으로 이동하는 것을 확인할 수 있습니다.

Firebase에 만들어 놓은 flutter firebase 프로젝트의 Authorization 화면으로 이동해 보면 입력한 사용자 ID가 등록되어 있는 것을 확인할 수 있습니다.

이번에는 한번 등록한 메일 ID를 User ID로 다시 한번 회원가입을 시도해 보겠습니다. [firebase_auth/email-already-in-use] The email address is already in use by another account. 메세지를 보여주면 사용자 추가에 실패합니다.

로그인과 로그아웃

Firebase의 Authorization 서비스로 로그인된 상태이면 홈화면으로 바로 이동하고 로그아웃된 상태이면 로그인 화면으로 이동하기 위하여 main.dart 파일을 아래와 같이 수정합니다.

// main.dart 파일의 코드
... 생략 ...
// Firebase Authorization import
import 'package:firebase_auth/firebase_auth.dart';

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

  //runApp(const MyApp());     // user 변수가 정의되어 const를 해제합니다.
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  //const MyApp({super.key});  // user 변수가 정의되어 const를 해제합니다.
  MyApp({super.key});
  // FirebaseAuth로부터 현재 로그인한 사용자 정보를 가져옵니다.
  // 로그인된 상태이면 user 정보를 가지고 오고, 그렇지 않으면 null 값이 넘어 옵니다.
  // User?와 같이 자료형 뒤에 ?가 붙으면 null인 값과 그렇지 않은 값을 가질 수 있다는 의미입니다.
  User? user = FirebaseAuth.instance.currentUser;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      //home: const MyHomePage(title: 'Flutter Demo Home Page'),
      //home: LoginPage(),
      // user가 null 즉 로그아웃된 상태이면 로그인 화면으로 그렇지 않으면 홈화면으로
      home: user == null ? LoginPage() : MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
... 생략 ...

Firebase의 Authorization 서비스는 로그아웃을 하지 않으면 로그인 상태를 유지하기 때문에 앱을 다시 시작해도 로그인 화면으로 이동하지 않고 홈화면으로 이동합니다.

Firebase의 Authorization 서비스로 로그인된 상태에서 로그아웃하기 위하여 main.dart 파일에서 _MyHomePageState 클래스를 아래와 같이 수정합니다. 로그인 화면으로 이동하기 전에 FirebaseAuth.instance.signOut() 함수를 비동기적으로 호출하면 로그아웃이 됩니다.

// main.dart 파일의 코드
... 생략 ...
class _MyHomePageState extends State<MyHomePage> {
  var pages = [ HttpListviewPage(),
                ImageListViewPage(),
                SimpleListViewPage(),
                MyThirdPage(),
              ];

  int _selectedNaviIndex = 0;

  _onBottomNavigationItemTapped(index) {
    setState(() {
      _selectedNaviIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
        actions: [
          IconButton(
              icon: Icon(Icons.logout),
              onPressed: () async {  // 비동기적으로 FirebaseAuth에서 로그아웃
                await FirebaseAuth.instance.signOut();
                Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (_) => LoginPage()));
              }
          ),
        ]
      ),
... 생략 ...

이제 Appbar에서 로그아웃 아이콘을 누르면 로그아웃되어 로그인 화면이 나타납니다.

Firebase의 Authorization 서비스로 로그인하는 기능을 구현하기 위하여 login_page.dart 파일에서 import, loginCheck 함수 및 화면 구성을 아래와 같이 수정합니다.

// login_page.dart 파일의 코드
... 생략 ...
// Firebase Authorization import
import 'package:firebase_auth/firebase_auth.dart';
... 중략 ...
  /*
  loginCheck(String userId, String password) async {
    String serverUri = "http://10.0.2.2:8087/login-check";

    var response = await http.post(
      Uri.parse(serverUri),
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: {
        'userId': userId,
        'password': password,
      },
    );

    print(response.body);

    if (response.statusCode == 200) {
      var parseJson = jsonDecode(response.body);
      bool loginSuccess = parseJson['loginSuccess'];

      if (loginSuccess) {
        saveUserId(userId);        // 로그인 성공시 성공한 User Id 문자열을 저장
        Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context) => const MyHomePage(title: 'Flutter Demo Home Page')));
      } else {
        showAlertDialog("로그인 실패", "아이디가 존재하지 않거나 비밀번호가 일치하지 않습니다.");
      }
    } else {
      showAlertDialog("서버 오류", "Flutter Server의 정상 동작 여부를 점검하세요.(${response.statusCode})");
    }
  }
  */
  loginCheck(String userId, String password) async {
    try {
      // Firebase Authentication을 사용하여 로그인 처리
      await FirebaseAuth.instance.signInWithEmailAndPassword(
        email: userId,
        password: password,
      );

      // 홈화면으로 이동
      Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (_) => const MyHomePage(title: 'Flutter Demo Home Page')));
    } catch (e) {
      showAlertDialog("사용자 로긴 실패", "$e");  // 오류 메세지
    }
  }
... 중략 ...
                    SizedBox(
                      width: 200,
                      child: TextField(
                        controller: userIdController,
                        keyboardType: TextInputType.emailAddress,  // userId를 email로 받아 들임
                        decoration: InputDecoration(
                          labelText: "아이디",
                          border: OutlineInputBorder(),
                            hintText: "이메일 ID를 입력해 주세요."     // userId를 email로 받아 들임
                        ),
                      ),
                    ),  
... 생략 ...

정상적인 로그인을 시도해 보겠습니다. 로그인이 잘되어 홈화면으로 이동합니다.

로그아웃후 로그인 ID나 비밀번호를 틀리게 하여 로그인을 시도해 보겠습니다. ID가 잘못된 경우 [firebase_auth/channel-error] "dev.flutter.pigeon.firebase_auth_platform_interface.FirebaseAuthHostApi.signInWithEmailAndPassword” 메세지와 암호가 잘못된 경우 [firebase_auth/invalid-credential] The supplied auth credential is incorrect, malformed or has expired 메세지가 나타나며 사용자 로긴이 실패하는 것을 확인할 수 있습니다.

Snackbar 메세지

이제 다이어로그(Dialog) 형태로 나타나는 오류 메세지를 스낵바(SnackBar) 형식의 오류 메시지로 다듬어 볼 차례입니다.
signup_page.dart 파일의 addUser() 함수를 아래와 같이 수정합니다.

// signup_page.dart 파일의 addUser() 함수 코드
... 생략 ...
  addUser(String userId, String password, String name) async {
    try {
      final UserCredential userCredential = await FirebaseAuth.instance.createUserWithEmailAndPassword(
        email: userId,
        password: password,
      );

      await userCredential.user?.updateDisplayName(name);

      Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (_) => const MyHomePage(title: 'Flutter Demo Home Page')));
    } catch (e) {
      //showAlertDialog("사용자 추가 실패", "$e");
      ScaffoldMessenger.of(context).showSnackBar(  // SnackBar 메세지로 변경
        SnackBar(
          content: Text("${userId} 사용자를 추가할 수 없습니다. 입력한 메일 ID가 올바른지 점검해 보세요."),
        ),
      );
    }
  }
... 생략 ...

login_page.dart 파일의 loginCheck() 함수를 아래와 같이 수정합니다.

// login_page.dart 파일의 loginCheck() 함수 코드
... 생략 ...
  loginCheck(String userId, String password) async {
    try {
      await FirebaseAuth.instance.signInWithEmailAndPassword(
        email: userId,
        password: password,
      );

      Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (_) => const MyHomePage(title: 'Flutter Demo Home Page')));
    } catch (e) {
      //showAlertDialog("사용자 로긴 실패", "$e");
      ScaffoldMessenger.of(context).showSnackBar(  // SnackBar 메세지로 변경
        SnackBar(
          content: Text("사용자 로긴에 실패하였습니다. 입력한 메일 ID와 암호를 점검해 보세요."),
        ),
      );
    }
  }
... 생략 ...

코드 수정 후 실행해 보면 로그인 오류와 회원가입 오류가 발생할 때 스낵바(SnackBar) 메세지가 하단에 잠시 나타났다가 사라지는 것을 확인할 수 있습니다.

[Firestore Database]

Firebase 클라우드의 Firestore Database 서비스를 사용하여 ImageListView 페이지의 이미지 URL과 책제목을 프로그램에 하드코딩하지 않고 백앤드 서버와 연동해 보겠습니다. Firestore Database는 NoSQL 기반의 문서형 데이터베이스(Document-based database)입니다.

Firestore Database 서비스 시작하기

Firebase의 flutter firebase 프로젝트로 이동하여 빌드 > Firestore Database 메뉴를 클릭한 후 데이터베이스 만들기를 클릭합니다.

데이터베이스를 생성할 위치를 선택합니다. 우리는 asia-northeast3 (Seoul)을 선택합니다.

프로덕션 모드에서 시작을 선택한 후 만들기 버튼을 클릭합니다.

Firestore Database가 만들어지면 아래와 같은 화면이 나타납니다.

규칙 탭을 클릭하여 보안규칙을 설정하러 갑시다. 초기에 설정되어 있는 보안규칙은 아래와 같은데 allow read, write: if false;는 모든 읽기와 쓰기를 차단하는 규칙입니다.

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if false;
    }
  }
}

아래와 같이 설정합시다. 그리고 게시 버튼을 누릅니다. 이 설정을 적용하면, 로그인된 사용자만 Firestore에 접근할 수 있습니다. 게시 버튼을 누른 후 규칙의 적용에 1분 정도의 시간이 소요된다고 하니 조금 대기했다가 사용합시다.

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

규칙에 대한 자세한 설명은 생략하니 아래 링크를 참조하기 바랍니다.

[Firebase] 파이어베이스 보안규칙 (Firestore Security Rules ) 작성 방법

파이어베이스에서 제공하는 보안규칙은 코드가 간단하며 보안규칙을 위해 인프라를 관리하거나 복잡한 서버측 인증 및 인증 코드를 작성할 필요 없다. 하지만 보안규칙을 적용하지 않으면 파

seizemymoment.tistory.com

Firestore Database에 책정보 데이터 올리기

pubspec.yaml 파일에 cloud_firestore: ^5.4.4를 디펜던시로 등록하고 pub get 메뉴를 클릭합니다. 패키지의 이름이 firestore_database가 아니고 cloud_firestore인 것에 주의바랍니다.

Firestore Database에 ImageListView에 하드코딩해 놓은 책의 정보를 저장하기 위하여 main.dart 파일에 필요한 import 문장을 추가하고 Appbar에 save 아이콘을 추가한 후 클릭할 때 Firestore Database에 추가하는 로직을 추가합니다.

// main.dart 파일의 코드
... 생략 ...
// Firestore Database import
import 'package:cloud_firestore/cloud_firestore.dart';
... 중략 ...
  saveBooksToFirestore() async {
    var imgList = [ "https://image.aladin.co.kr/product/34207/82/cover200/896088457x_1.jpg",
      "https://image.aladin.co.kr/product/31794/10/cover200/k362833219_1.jpg",
      "https://image.aladin.co.kr/product/3422/90/cover200/8966260993_1.jpg",
      "https://image.aladin.co.kr/product/57/79/cover200/8991268072_2.jpg",
      "https://image.aladin.co.kr/product/34274/43/coversum/scm9462999557200.jpg",
      "https://image.aladin.co.kr/product/26031/38/coversum/k702737950_1.jpg",
    ];

    var imgNameList = [ "파이썬 + AI", "점프 투 파이썬", "생각하는 프로그래밍",
      "실용주의 프로그래머", "프로그래밍 심리학", "UWP 퀵스타트",
    ];

    // String?와 같이 자료형 뒤에 ?가 붙으면 null인 값과 그렇지 않은 값을 가질 수 있다는 의미입니다.
    // currentUser?와 같이 변수명 뒤에 ?가 붙으면 변수가 null이 아닌 경우에만 뒤의 따라오는 값을 사용한다는 의미입니다.
    String? uid = FirebaseAuth.instance.currentUser?.uid;
    String? username = FirebaseAuth.instance.currentUser?.displayName;
    Timestamp createdAt = Timestamp.now();

    for (int i = 0; i < imgList.length; i++) {
      // dynamic은 여러가지 자료형을 동시에 처리할 수 있다는 의미입니다.
      // Firestore Database는 일종의 NoSQL로 Map(Dictionary) 즉 json의 형식으로 저장할 수 있습니다.
      Map<String, dynamic> data = {
        "uid": uid,
        "username": username,
        "imgUrl": imgList[i],
        "bookName": imgNameList[i],
        "createdAt": createdAt,
      };

      try {
        // Firestore의 books 컬렉션에 게시물 추가하기
        await FirebaseFirestore.instance.collection("books").add(data);
      } catch (e) {
        print(e);
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text("책 정보 업로드에 실패했습니다: ${imgNameList[i]}")),
        );
        return;
      }
    }

    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text("책 정보 업로드에 성공했습니다."),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
        actions: [
          IconButton(   // 저장 아이콘 추가
            icon: Icon(Icons.save),
            onPressed: saveBooksToFirestore,   // 클릭 발생시 저장 함수 지정
          ),
          IconButton(
            icon: Icon(Icons.logout),
            onPressed: () async {
              await FirebaseAuth.instance.signOut();
              Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (_) => LoginPage()));
            }
          ),
        ]
      ),
... 생략 ...

위의 코드를 완성한 후 앱을 완전히 재시작한 후 저장버튼을 눌러 봅시다. 그러면 Firestore Database에 책정보가 저장된 것을 알 수 있습니다. Firestore Database는 NoSQL 기반의 문서형 데이터베이스(Document-based database)로 컬렉션(Collection)은 DBMS의 테이블(Table)에 해당하고, 문서(Document)는 행(Row) 혹은 레코드(Record)에 해당하며, 필드(Field)는 열 혹은 컬럼(Column)에 해당합니다.

Firestore Database에 저장된 책정보를 사용하여 ImageListView 보여 주기

Firestore Database에서 필드 수정 기능을 사용하여 책의 이름 앞에 FF(Firebase Firestore)를 추가합시다. 그러면 책의 이름으로 이전에 하드코딩했던 ImageListVIew인지 Firestore Database에서 가져온 ImageListView인지 책의 이름을 보고 판단할 수 있을 것입니다.

Firestore Database에서 ImageListView로 책 정보를 가져오기 위하여 image_listview_page.dart 파일에 필요한 import 문장을 추가하고 ImageListViewPage Widget이 생성될 때 하드코딩되어 있던 imgList 변수와 imgNameList 변수를 초기화하도록 프로그램의 코드를 아래와 같이 수정합니다 .
StatelessWidget을 StatefulWidget으로 변경해야 하는데 class ImageListViewPage extends StatelessWidget 문장 위에 마우스 커서를 두고 Alt-Enter 키를 친 후 Convert to StatefulWidget 메뉴를 선택합니다. 반대의 경우 즉 StatelessWidget을 StatefulWidget으로 변경해야 하는 경우에도 동일한 방법을 사용합니다.

// image_listview_page.dart 파일의 코드
import 'package:flutter/material.dart';

// Firestore Database import
import 'package:cloud_firestore/cloud_firestore.dart';

import 'image_listview_detail_page.dart';

// StatelessWidget을 StatefulWidget으로 변경합니다.
// class ImageListViewPage extends StatelessWidget 문장 위에 마우스 커서를 두고
// Alt-Enter 키를 친 후 Convert to Stateful Widget 메뉴를 선택하면 됩니다.
class ImageListViewPage extends StatefulWidget {
  const ImageListViewPage({super.key});

  @override
  State<ImageListViewPage> createState() => _ImageListViewPageState();
}

class _ImageListViewPageState extends State<ImageListViewPage> {
  /* 하드코딩된 리스트들을 삭제하고
  var imgList = [ "https://image.aladin.co.kr/product/34207/82/cover200/896088457x_1.jpg",
                  "https://image.aladin.co.kr/product/31794/10/cover200/k362833219_1.jpg",
                  "https://image.aladin.co.kr/product/3422/90/cover200/8966260993_1.jpg",
                  "https://image.aladin.co.kr/product/57/79/cover200/8991268072_2.jpg",
                  "https://image.aladin.co.kr/product/34274/43/coversum/scm9462999557200.jpg",
                  "https://image.aladin.co.kr/product/26031/38/coversum/k702737950_1.jpg",
                ];

  var imgNameList = [ "파이썬 + AI", "점프 투 파이썬", "생각하는 프로그래밍",
                      "실용주의 프로그래머", "프로그래밍 심리학", "UWP 퀵스타트",
                    ];
  */

  // 빈 리스트를 만듭니다.
  List<String> imgList = [];
  List<String> imgNameList = [];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    fetchBooks();    // Widget을 초기화할 때 Firestore Database에서 책정보를 조회
  }

  fetchBooks() async {
    try {
      // FirebaseFirestore로부터 데이터를 받아옵니다.
      var snapshot = await FirebaseFirestore.instance.collection("books").get();
      //var snapshot = await FirebaseFirestore.instance.collection("books").orderBy("createdAt").limit(2).get();
      /*
      var snapshot = await FirebaseFirestore.instance
                      .collection("books")
                      .where("bookName", isEqualTo: "FF 파이썬 + AI")
                      .get();
      */
      
      var documents = snapshot.docs;
      /*    // 특정 문자열을 포함하는 데이터만 조회
      var documents = snapshot.docs.where((doc) {
        return (doc['bookName'] as String).contains("FF");
      }).toList();
      */
      
      // 문서별로 imgList와 imgNameList에 이미지 URL과 책이름을 저장합니다.
      for (var doc in documents) {
        var data = doc.data();

        imgList.add(data['imgUrl']);
        imgNameList.add(data['bookName']);
      }
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text("책 정보 다운로드에 실패했습니다.")),
      );
      return;
    }

		// 리스트의 변경을 화면에 반영해 줍니다.
		// setState() 함수는 build() 함수를 다시 호출하여 화면에 상태 변화를 반영하도록 합니다.
		// 화면에 표시될 상태 변수가 꼭 setState 함수 안에서 변경될 필요는 없으며,
		// setState 호출 시점에 이미 변경된 상태가 있으면 이를 반영하여 화면이 갱신됩니다.
		setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
	    body: Container(
	      width: double.infinity,
	      height: double.infinity,
		    // Firestore Database에서 값을 가져오는 동안 프로그래스 바를 보여 줍니다.
		    child: imgList.length == 0 ? LinearProgressIndicator() : ListView.builder(
		      itemCount: imgList.length,
		      itemBuilder: (context, index) {
... 생략 ...

위의 코드를 완성한 후 앱을 재시작하고 ImageListView로 이동해 봅시다. 그러면 Firestore Database에서 가져온 책정보가 나타나는 것을 알 수 있습니다. 책의 이름 앞에 FF가 붙어 있어서 쉽게 확인할 수 있습니다.

[실습 V] 자신의 가족을 소개하는 family_intro2 앱을 개선해 보세요.

family_intro2 프로젝트에 로그인 기능과 회원가입 기능을 Firebase 클라우드를 이용하도록 수정해 보세요.

플랫폼 클라우드 연동 I (Firebase)

[학습목표]

스마트폰의 갤러리에 저장된 사진이나 동영상을 가져다 사용하는 방법을 이해합니다.
스마트폰에서 사진이나 동영상을 촬영하여 사용하는 방법을 이해합니다.
Flutter App의 이미지를 Flutter Server에 저장하는 방법을 이해합니다.
Flutter Server에 저장된 이미지를 Flutter App에서 보여주는 방법을 이해합니다.

[갤러리와 카메라]

테스트 코드를 작성하기 위하여 gallery_camera 프로젝트를 새로 만듭시다.
스마트폰의 갤러리에 저장된 사진은 ImagePicker Widget을 사용하여 파일에 저장된 일반 이미지처럼 가져다 사용할 수 있습니다. ImagePicker Widget을 사용하려면 image_picker 라이브러리를 가져다 사용하여야 합니다. https://pub.dev/ 사이트를 확인해 보니 image_picker의 최신 버전이 1.1.2인데 안드로이드 이뮬레이터에서 동작하지 않습니다. 그래서 안드로이드 이뮬레이터에서 동작하는 버전인 0.8.7 버전을 사용하도록 하겠습니다. pubspec.yaml에 등록한 후 pub get 명령어를 실행합시다.

# pubspec.yaml 파일
... 생략 ...
dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.6
  #image_picker: 1.1.2    # 이뮬레이터에서 동작하지 않음
  image_picker: 0.8.7     # 이뮬레이터에서 동작함
... 생략 ...

안드로이드 앱에서 갤러리와 카메라를 사용하기 위해서는 android/app/src/main/AndroidManifest.xml 파일에 아래와 같은 권한 설정을 해야 한다고 하는데 최근 버전의 Flutter에서 아래와 같은 설정이 없이 정상적으로 동작하고 있습니다. 혹시 권한 문제가 발생하면 아래의 uses-permission 설정 3줄을 추가하기 바랍니다.

<!-- AndroidManifest.xml 파일 -->
... 생략 ...
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.your_app">

    <uses-permission android:name="android.permission.CAMERA"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    
    <application
        android:label="your_app"
        android:icon="@mipmap/ic_launcher">
... 생략 ...

iOS 앱에서 갤러리와 카메라를 사용하기 위해서는 ios/Runner/Info.plist 파일에 아래와 같은 권한 설정을 해야 합니다.

<!-- Info.plist 파일 -->
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>NSPhotoLibraryUsageDescription</key>
  <string>gallery_camera 앱에서 갤러리와 카메라를 사용합니다.</string>
	<key>CFBundleDevelopmentRegion</key>
	<string>$(DEVELOPMENT_LANGUAGE)</string>
	<key>CFBundleDisplayName</key>
	<string>Gallery Camera</string>
... 생략 ...

아래 코드에서 눈여겨 볼 부분은 picker.pickImage(source: ImageSource.gallery); 문장에 의하여 갤러리에서 선택되는 이미지와 picker.pickImage(source: ImageSource.camera); 문장에 의하여 사진기로 촬영되는 이미지가 파일에 저장된다는 것입니다. 저장된 이미지 파일을 image = File(pickedImage.path); 문장으로 image 변수에 저장한 후 Image.file((image, width: 300, height: 300) 문장으로 화면에 보여 주게 됩니다. 갤러리와 사진촬영의 경우도 시간을 많이 소비하는 작업이기 때문에 pickImage() async나 takePicture() async와 같이 비동기 함수로 만드는 부분은 매우 직관적입니다.

// main.dart 파일 코드
import 'package:flutter/material.dart';

import 'package:image_picker/image_picker.dart';  // image_picker 라이브러리 import
import 'dart:io';                                 // File IO를 위해 import
... 중략 ...
class _MyHomePageState extends State<MyHomePage> {
  var image;           // 이미지 경로를 저장하는 변수

  pickImage() async {
    var picker = ImagePicker();       // 갤러리에서 이미지 한장을 가져 오는 코드
    var pickedImage = await picker.pickImage(source: ImageSource.gallery);

    if (pickedImage != null) {        // 갤러리에서 이미지를 정상적으로 가져온 경우
      setState(() {
        image = File(pickedImage.path); // 갤러리에서 가져온 이미지 경로를 변수에 저장
      });
    }
  }

  takePicture() async {
    var picker = ImagePicker();         // 사진기로 이미지 한장을 촬영하는 코드로
    var pickedImage = await picker.pickImage(source: ImageSource.camera);
                                        // ImageSource.gallery가 ImageSource.camera로
    if (pickedImage != null) {          // 바뀐 것만 달라짐
      setState(() {
        image = File(pickedImage.path);
      });
    }
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            image == null                   // 가져온 이미지나 촬영한 이미지가 없으면
                ? Text('사진을 선택하세요.')
                : Image.file(               // 파일에 저장된 이미지를 보여 줌
                  image,
                  width: 300,
                  height: 300,
                ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: pickImage,    // 갤러리에서 사진을 가져 오는 이벤트 핸들러 기동
              child: Text('갤러리에서 사진 선택'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: takePicture,  // 사진을 촬영하는 이벤트 핸들러 기동
              child: Text('사진 촬영'),
            ),
          ],
        ),
      ),
    );
  }
}

갤러리와 카메라 기능을 이뮬레이터에서 테스트하려면 몇가지 절차를 거쳐야 합니다. “Flutter FAQ와 Tips”에 정리된 “Android 에뮬레이터에 사진 추가하기”와 “안드로이드 에뮬레이터 카메라 활성화”를 참조하기 바랍니다. 그런데 강사의 경우에도 이뮬레이터에서 갤러리와 카메라를 정상적으로 동작시킬 때 많은 어려움들을 겪었습니다. 때로는 앱 자체가 정상적으로 동작하지 않아 에뮬레이터를 초기화한 후 다시 수행하여야 하였고, 어떤 경우에는 매우 오래 기다린 뒤에 - 정상 동작을 포기할 즈음 - 자동으로 정상적으로 동작하였습니다. 그러다가 다시 동작하지 않기도 하였습니다. 가능하면 이상 동작이 발생하지 않도록 간편하게 스마트폰을 사용하여 테스트하기 바랍니다.

이미지 대신 동영상을 가져다 사용하려면 picker.pickVideo(source: ImageSource.gallery) 혹은 picker.pickVideo(source: ImageSource.camera) 함수를 사용합니다.

// main.dart 파일 코드
... 생략 ...
class _MyHomePageState extends State<MyHomePage> {
  var image;
  var video;      // 동영상을 저장할 변수

  pickVideo() async {
    var picker = ImagePicker();    // picker.pickImage가 picker.pickVideo로 바뀜
    var pickedVideo = await picker.pickVideo(source: ImageSource.gallery);
                                   // 나머지 코드들은 image가 video로 바뀐것 정도가 다름
    if (pickedVideo != null) {
      setState(() {
        video = File(pickedVideo.path);
      });
    }
  }

  takeVideo() async {
    var picker = ImagePicker();    // picker.pickImage가 picker.pickVideo로 바뀜
    var pickedVideo = await picker.pickVideo(source: ImageSource.camera);

    if (pickedVideo != null) {
	    setState(() {
        video = File(pickedVideo.path);
      });
    }
  }
... 중략 ...  
          children: <Widget>[
            image == null
                ? Text('사진을 선택하세요.')
                : Image.file(
                  image,
                  width: 300,
                  height: 300,
                ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: pickImage,
              child: Text('갤러리에서 사진 선택'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: takePicture,
              child: Text('사진 촬영'),
            ),
            video == null                           // image가 video로 바뀌는 것을
                ? Text('동영상을 선택하세요.')       // 코드가 image의 경우와 거의 동일함
                : Text('비디오 파일: ${video.path}'),  // Video의 경로를 출력함
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: pickVideo,
              child: Text('갤러리에서 동영상 선택'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: takeVideo,
              child: Text('동영상 촬영'),
            ),
          ],
        ),
      ),
    );
  }
}

동영상을 갤러리에서 선택하거나 촬영하면 스마트폰에 저장된 동영상의 경로가 나타납니다. 이미지도 동영상과 같이 스마트폰에 저장된 경로가 image 변수에 저장되는 것이며 Image.file() 메소드를 사용해 화면에 보여 주는 것입니다.
가져온 동영상을 화면에 보여 주려면 video_player 라이브러리의 VideoPlayerController를 사용하여야 합니다. 관심있는 분들은 노션에 올려 놓은 “Flutter FAQ와 Tips” 문서의 “동영상을 재생하는 코드”를 참조하여 직접 구현해 보기 바랍니다.
동영상과 이미지의 구분없이 가져다 사용하려면 picker.pickMedia() 함수를 사용합니다.

여러장의 이미지를 동시에 가져다 사용하려면 picker.pickMultiImage() 함수를 사용합니다.
gallery_camera 프로젝트의 화면이 가득찼으니 multi_image 프로젝트를 만들겠습니다.
pubspec.yaml 파일의 설정을 잊지 맙시다.

# pubspec.yaml 파일
... 생략 ...
dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.6
  #image_picker: 1.1.2    # 이뮬레이터에서 동작하지 않음
  image_picker: 0.8.7     # 이뮬레이터에서 동작함
... 생략 ...

아래 코드를 주석을 중심으로 살펴 봅시다.

// main.dart 파일 코드
import 'package:flutter/material.dart';

import 'package:image_picker/image_picker.dart';
import 'dart:io';
... 중략 ...
class _MyHomePageState extends State<MyHomePage> {
  var images;        // 여러장의 이미지를 저장하기 위한 변수

  pickMultipleImages() async {
    var picker = ImagePicker();
    var pickedImages = await picker.pickMultiImage();  // 기존 코드와 함수가 달라짐

    if (pickedImages.isNotEmpty) {      // 가져온 사진이 있으면
      setState(() {                     // 가져온 사진의 파일 Pass를 리스트로 변환
        images = pickedImages.map((pickedFile) => File(pickedFile.path)).toList();
      });
    } else {                            // 가져온 사진이 없으면
      setState(() {
        images = null;                  // null을 저장하여 비어 있음을 알림
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            images == null
                ? Text('여러 장의 사진을 선택하세요.')
                : Expanded(
              child: GridView.builder(     // ListView.builder에 준하여 이해
                                           // GridView의 모양을 결정해 줌
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,       // 가로로 세칸
                  crossAxisSpacing: 10,    // 가로 간격
                  mainAxisSpacing: 10,     // 세로 간격
                ),
                itemCount: images.length,
                itemBuilder: (context, index) {
                  return Image.file(
                    images[index],
                    fit: BoxFit.cover,     // 이미지의 크기를 동일하게 가져가기 위해 필요
                  );
                },
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: pickMultipleImages,
              child: Text('갤러리에서 여러 사진 선택'),
            ),
          ],
        ),
      ),
    );
  }
}

[Flutter App의 이미지와 동영상을 Flutter Server에 저장하기]

Flutter Server에서 Flutter App의 요청을 받아 파일을 저장하기 위하여 src\main\resources\application.properties 파일에 Upload 용량의 제한을 50MB 수준으로 완화해 줍니다.

# application.properties 파일
spring.application.name=flutter_server
server.port=8087

# 최대 파일 크기 (예: 50MB)
spring.servlet.multipart.max-file-size=50MB

# 최대 요청 크기 (예: 50MB, 여러 파일 업로드를 포함할 경우 적용)
spring.servlet.multipart.max-request-size=50MB

그리고 UploadController 클래스를 아래 화면과 같은 위치에 아래 코드와 같이 생성합니다.

// UploadController 클래스
package com.example.flutter_server;

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;

@RestController
@RequestMapping("/upload")
public class UploadController {

    // 업로드할 경로 설정 (예: 로컬 서버에서 저장할 폴더 경로)
    String projectDir = System.getProperty("user.dir");
    String uploadDir = projectDir + "/uploads/";

    @PostMapping
    public ResponseEntity<String> uploadImage(@RequestParam("file") MultipartFile file) {
        try {
            String filePath = uploadDir + file.getOriginalFilename();

            File dest = new File(filePath);

            // 폴더가 존재하지 않으면 생성
            if (!dest.getParentFile().exists()) {
                dest.getParentFile().mkdirs();
            }

            // 파일 저장
            file.transferTo(dest);

            return new ResponseEntity<>("이미지 업로드 성공: " + filePath, HttpStatus.OK);
        } catch (IOException e) {
            e.printStackTrace();
            return new ResponseEntity<>("이미지 업로드 실패", HttpStatus.INTERNAL_SERVER_ERROR);
        }
    }
}

이미지와 동영상을 Flutter Server에 저장하는 코드를 구현하기 위하여 다시 gallery_camera 프로젝트로 이동하겠습니다.
먼저 pubspec.yaml 파일에 이미지/동영상 업로드를 위한 라이브러리인 dio를 설정합니다.

# pubspec.yaml 파일
... 생략 ...
dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.6
  #image_picker: 1.1.2    # 이뮬레이터에서 동작하지 않음
  image_picker: 0.8.7     # 이뮬레이터에서 동작함
  dio: ^5.2.1             # 이미지/동영상 업로드를 위한 라이브러리
... 생략 ...

아래 코드를 주석을 중심으로 살펴 봅시다.

// main.dart 파일 코드
... 생략 ...
import 'package:dio/dio.dart';    // 이미지/동영상 Upload를 위한 라이브러리 import
... 중략 ...
class _MyHomePageState extends State<MyHomePage> {
... 중략 ...
  upload(media) async {           // 동영상 혹은 이미지 upload를 위한 비동기 함수 추가
    if (media != null) {
      String fileName = media.path.split('/').last;
      var formData = FormData.fromMap({  // 이 코드가 upload할 데이터를 만드는 핵심입니다.
        "file": await MultipartFile.fromFile(media.path, filename: fileName),
      });

      try {               // dio는 status code가 200이 아닌 경우 Exception을 발생시킵니다
	      var dio = Dio();  // Flutter Server 통신시 설명한 것들로 http대신 dio를 사용합니다.
	      String serverUri = "http://localhost:8087/upload";
	
	      if (Platform.isAndroid) {
	        serverUri = "http://10.0.2.2:8087/upload";
	      }
	      var response = await dio.post(serverUri, data: formData);
	
	      print("미디어(이미지/비디오) 업로드 성공");
      } catch(e) {
        print("미디어(이미지/비디오) 업로드 실패: ${e}");
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            image == null
                ? Text('사진을 선택하세요.')
                : Column(
                  children: [
                    Image.file(
                      image,
                      width: 300,
                      height: 300,
                    ),
                    ElevatedButton(       // 이미지가 있는 경우 업로드 버튼을 활성화하고
                      onPressed: () {upload(image);},   // upload 함수에 image를 넘겨
                      child: Text('이미지 업로드'),      // 업로드합니다.
                    ),
                  ],
                ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: pickImage,
              child: Text('갤러리에서 사진 선택'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: takePicture,
              child: Text('사진 촬영'),
            ),
            video == null
                ? Text('동영상을 선택하세요.')
                : Column(
                  children: [
                    Text('비디오 파일: ${video.path}'),
                    ElevatedButton(       // 동영상이 있는 경우 업로드 버튼을 활성화하고
                      onPressed: () {upload(video);},  // upload 함수에 video를 넘겨
                      child: Text('동영상 업로드'),     // 업로드합니다.
                    ),
                  ],
                ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: pickVideo,
              child: Text('갤러리에서 동영상 선택'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: takeVideo,
              child: Text('동영상 촬영'),
            ),
          ],
        ),
      ),
    );
  }
}

이뮬레이터로 테스할 때 말썽을 부리지 않는다면 괜찮은데 이뮬레이터가 말썽을 부리면 스마트폰으로 테스트해야 합니다.
다행히 테스트할 스마트폰과 Flutter Server가 연결된 Network 대역이 같다면 즉 연결된 무선 LAN AP가 동일하다면 스마트폰의 앱에서 Flutter Server에 접속할 수 있습니다. 먼저 Flutter Server가 수행되는 PC에서 ipconfig 명령을 발행하여 PC의 IP 주소를 알아냅시다. 아래 화면의 경우에는 172.30.1.95입니다. Network 대역이 같지 않다면 ngrok를 사용하여 연결합니다.

Flutter Server의 주소를 확인한 후 Flutter 앱에서 접속할 주소를 아래와 같은 형식으로 수정해 주어야 합니다.

// main.dart 파일의 uploadImage() async 함수 코드
... 생략 ...
      //String serverUri = "http://localhost:8087/upload";

      //if (Platform.isAndroid) {
        //serverUri = "http://10.0.2.2:8087/upload-image";
      //}
      
      String serverUri = "http://172.30.1.95:8087/upload";
... 생략 ...

실행해 보니 아래 화면과 같이 이미지와 동영상이 Flutter Server의 uplods 폴더에 잘 저장이 됩니다. 예전에는 이미지를 저장하기 위해 image/jpg, 동영상을 저장하기 위해 video/mp4와 같은 형식의 MIME 타입(Multipurpose Internet Mail Extensions Type)을 지정해 주어야 했습니다. 그러나 현재는 Spring Boot나 Firebase 같은 백엔드 서버가 파일의 MIME 타입을 자동으로 감지하여 처리해 주는 경우가 많아, 개발자가 수동으로 설정할 필요가 줄어들었습니다. MIME 타입은 원래 이메일 파일 형식을 정의하기 위해 시작되었으나, 현재는 HTTP에서도 서버가 전송하는 콘텐츠의 종류를 정의하고 클라이언트가 이를 이해하도록 돕는 중요한 표준으로 사용되고 있습니다.

[Flutter Server의 이미지와 동영상을 Flutter App에 보여 주기]

Flutter Server에 저장된 이미지와 동영상을 가져다 사용하려면 uploads 폴더를 웹사이트에 노출시켜 주어야 합니다. WebConfig 클래스를 아래와 같이 설정하면 됩니다.

// WebConfig 클래스
package com.example.flutter_server;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // 업로드된 파일을 URL로 접근할 수 있도록 설정
        registry.addResourceHandler("/uploads/**")
                .addResourceLocations("file:" + System.getProperty("user.dir") + "/uploads/");
    }
}

그러면 웹브라우저에서 http://localhost:8087/uploads/1000003729.jpg나 http://localhost:8087/uploads/1000003121.mp4와 같이 조회해 볼 수 있고,
Image.network(”http://localhost:8087/uploads/1000003729.jpg”)
Image.network(”http://10.0.2.2:8087/uploads/1000003729.jpg”)
Image.network(”http://172.30.1.95:8087/uploads/1000003729.jpg”) 와 같은 방식으로 Flutter App에서 보여 줄 수 있습니다.

플랫폼 클라우드 연동 II

[학습목표]

Firebase Storage 클라우드 서비스를 사용하여 이미지 데이터를 저장하고 조회하는 기능을 개발해 봅니다.

[Firebase Storage]

Firebase 클라우드의 Storage 서비스를 사용하여 스마트폰에 있는 이미지와 동영상을 백앤드 서버에 저장해 보겠습니다. 이미지와 동영상은 저장공간을 많이 차지하게 되니 요금이 발생하지 않도록 주의합시다.
최근에 Firebase Storage의 경우 Spark 요금제를 적용할 수 없어 Blaze 요금제를 적용할 수 밖에 없습니다. 개발 단계에서도 비용이 발생할 수 있는 위험이 커졌습니다. 아래의 공지와 같이 클라우드의 요금제는 수시로 변경되기 때문에 예측하지 않은 과금이 발생할 수 있어 매우 주의하여야 합니다.

Firebase Storage 서비스 시작하기

Firebase의 flutter firebase 프로젝트로 이동하여 빌드 > Storage 메뉴를 클릭한 후 프로젝트 업그레이드를 클릭합니다. 요금제를 Spark 요금제에서 Blaze 요금제로 올리는 것인데 1GB의 저장 용량과 다운로드 트래픽을 발생시키지 않고 동시 사용자가 많아지지 않도록 주의바랍니다.

Cloud Billing 계정 만들기를 선택합니다. 그리고 필요한 정보들을 입력한 후 구매확인 버튼을 누릅니다.

결제 예산 설정 화면에서 예산 금액을 입력하고 계속 버튼을 누릅니다.

Cloud Billing 계정 연결 버튼을 누릅니다.

시작하기 버튼을 누릅니다.

버킷(Bucket)을 생성할 위치를 선택합니다. 버킷(Bucket)은 이미지나 동영상을 저장할 저장소로 이해하면 됩니다. 우리는 무료 등급 버킷인 US-CENTRAL1을 선택합니다.

프로덕션 모드에서 시작을 선택한 후 만들기 버튼을 클릭합니다.

Firebase Storage Bucket이 만들어지면 아래와 같은 화면이 나타납니다.

규칙 탭을 클릭하여 보안규칙을 설정하러 갑시다. 아래와 같이 설정합시다. 그리고 게시 버튼을 누릅니다. 이 설정을 적용하면, 로그인된 사용자만 Firestore에 접근할 수 있습니다. 게시 버튼을 누른 후 규칙의 적용에 1분 정도의 시간이 소요된다고 하니 조금 대기했다가 사용합시다. → Firebase Authorization 서비스의 도움이 없이 사용하기 위하여 잠시 보안을 풀어 놓겠습니다. 아래와 같이 설정하면 Firebase Authorization으로 로그인되지 않아도 Firebase Store에 모든 사용자가 이미지와 동영상 등을 업로드할 수 있습니다. → 테스트후 바로 권한을 정상화합시다.

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      //allow read, write: if request.auth != null;
      allow read, write: if true;    // 프로그램을 간결하게 보여 주기 위하여
    }                                // 전체 권한을 오픈합니다.
  }                                  // 테스트 후 바로 권한을 정상화합시다.
}

Flutter 앱 프로젝트에 Firebase 클라우드 프로젝트 연동하기

안드로이드 스튜디오로 gallery_camera 프로젝트를 오픈합니다.
만들어둔 flutter-firebase Firebase 프로젝트를 gallery_camera Flutter 앱 프로젝트에 연결하기 위하여 flutterfire configure --project=your-firebase-project-id 명령을 실행해줍니다. your-firebase-project-id은 Firebase 클라우드 프로젝트를 만들때 기억하라고 했던 고유번호입니다. 프로젝트 이름을 사용하지 않고 프로젝트 고유번호를 사용한다는 것에 주의하기 바랍니다. 프로젝트 고유 번호를 웹 브라우저의 주소창에서 쉽게 확인할 수 있습니다.

그후 “Chapter 7. 플랫폼 클라우드 연동 I”의 “Flutter 앱 프로젝트에 Firebase 클라우드 프로젝트 연동하기”에서 설명하는 것과 동일한 방법으로 설정을 진행합니다.

flutterfire configure --project=your-firebase-project-id 명령의 실행이 정상적으로 완료되면 안드로이드 스튜디오의 gallery_camera 프로젝트에 아래 첫번째 화면과 같이 최상위 폴더에 firebase.json 파일이 생기고 lib 폴더에 firebase_options.dart 파일이 생성된 것을 확인할 수 있으며, 아래 두번째 화면과 같이 Firebase의 프로젝트에도 앱이 등록되어 나타나는 것을 확인할 수 있습니다.

pubspec.yaml 파일에 firebase_core: ^3.6.0 와 firebase_storage: ^12.3.4를 디펜던시로 등록하고 pub get 메뉴를 클릭합니다.

android\app\build.gradle 파일에 minSdkVersion을 23으로 설정합니다.

Firebase Storage에 이미지와 동영상 올리기

Firebase Storage에 이미지와 동영상을 업로드할 수 있도록 main.dart 파일에 필요한 import 문장을 추가하고 main() 함수와 upload() 함수를 아래와 같이 수정합니다 .

// main.dart 파일의 코드
import 'package:flutter/material.dart';

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

//import 'package:dio/dio.dart';      // Firebase Store 사용으로 삭제

// Firebase 라이브러리 import
import 'package:firebase_core/firebase_core.dart';       // Core import
import 'package:firebase_storage/firebase_storage.dart'; // Storage import
import 'firebase_options.dart';                          // Options import

void main() async {           // Firebase 초기화 시작
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );                          // Firebase 초기화의 끝

  runApp(const MyApp());
}
... 중략 ...
/*
  upload(media) async {
    if (media != null) {
      String fileName = media.path.split('/').last;
      var formData = FormData.fromMap({
        "file": await MultipartFile.fromFile(media.path, filename: fileName),
      });

      try {
        var dio = Dio();
        //String serverUri = "http://localhost:8087/upload";
        String serverUri = "http://192.168.0.5:8087/upload";

        if (Platform.isAndroid) {
          //serverUri = "http://10.0.2.2:8087/upload";
          serverUri = "http://192.168.0.5:8087/upload";
        }
        var response = await dio.post(serverUri, data: formData);

        print("미디어(이미지/비디오) 업로드 성공");
      } catch(e) {
        print("미디어(이미지/비디오) 업로드 실패: ${e}");
      }
    }
  }
*/
  upload(media) async {
    if (media != null) {
      // 이미지를 저장할 Firebase Storage의 경로명을 지정합니다.
      String fileName = media.path.split('/').last;
      String pathName = '/uploads/$fileName';

      try {
        // 선택한 미디어를 Storage에 업로드 할 수 있는 File로 변환해줍니다.
        File imageFile = File(media.path);

        // File 객체로 변환한 미디어를 Firebase Storage에 업로드합니다.
        await FirebaseStorage.instance.ref(pathName).putFile(imageFile);

        // Firebase Storage에 업로드된 파일의 URL 가져오기
        // Spring Boot와의 연동에서는 생략한 로직으로 여기서는 간단히 추가할 수 있습니다.
        String imageUrl = await FirebaseStorage.instance.ref(pathName).getDownloadURL();

        // 이미지의 URL은 파일이나 Database 등의 저장소에 저장되어 활용하게 됩니다.
        print("업로드된 미디어(이미지/비디오)의 URL : $imageUrl}");
      } catch(e) {
        print("미디어(이미지/비디오) 업로드 실패: ${e}");
      }
    }
  }
... 생략 ...

이미지를 Firebase Storage에 올리는 테스트는 이뮬레이터가 아니라 스마트폰으로 하겠습니다. 갤러리에서 사진 선택 버튼을 클릭한 후 이미지 업로드 버튼을 클릭합니다.

그러면 아래 화면과 같이 안드로이드 스튜디오 하단에 Firebase Authorization을 사용하지 않았기때문에 W/StorageUtil(23282): no auth token for request와 같은 경고가 나타나지만 I/flutter ( 5030): 업로드된 미디어(이미지/비디오)의 URL : https://firebasestorage.googleapis.com/v0/b/totemic-fulcrum-420006.firebasestorage.app/o/uploads%2F1000004288.png?alt=media&token=d367e371-9624-418f-a3f4-5f3b7a49dc8a}와 같은 출력이 나타나 파일이 정상적으로 업로드되었다는 것을 알려 줍니다.

Firebase Storage 사이트에 가서 확인하면 아래 화면과 같이 지정된 폴더 위치에 선택한 이미지(유형이 image/png)가 저장되어 있는 것을 확인할 수 있습니다.

이번에는 이미지와 동일한 방법으로 동영상을 업로드해 보겠습니다. 앱을 다시 시작한 후 스마트폰에서 갤러리에서 동영상 선택 버튼을 클릭한 후 동영상 업로드 버튼을 클릭합니다.

그러면 동영상 업로드를 위한 코드의 변경이나 추가없이 I/flutter ( 5030): 업로드된 미디어(이미지/비디오)의 URL : https://firebasestorage.googleapis.com/v0/b/totemic-fulcrum-420006.firebasestorage.app/o/uploads%2F1000002759.mp4?alt=media&token=e958a190-d6c8-4ee6-a54f-be0ec79883fa}와 같은 출력이 나타나 파일이 정상적으로 업로드되었다는 것을 알려 줍니다.

Firebase Storage 사이트에 가서 확인하면 아래 화면과 같이 지정된 폴더 위치에 선택한 동영상(유형이 video/mp4)이 저장되어 있는 것을 확인할 수 있습니다.

규칙 탭을 클릭하여 보안규칙을 설정을 원복하러 갑시다. 저는 강의 목적을 달성했으니 만약을 대비하여 권한의 정상화를 넘어 모든 권한을 막아 놓겠습니다. 아래와 같이 설정하면 권한을 모두 회수하고 아무런 권한도 주지 않게 됩니다. 게시 버튼을 누르는 것도 잊지 맙시다.

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      //allow read, write: if request.auth != null;
      //allow read, write: if true;
      allow read, write: if false;  // 모든 권한을 회수
    }
  }
}

[배포]

안드로이드 앱 배포 파일 만들기

안드로이드 스튜디오에서 File > Build > Flutter > Build APK 메뉴를 클릭하면 확장자가 apk인 안드로이드 앱의 배포 파일을 만들 수 있습니다.

빌드가 끝나면 프로젝트 폴더 하부의 build\app\outputs\apk\release 폴더에 app-release.apk 배포 파일이 생긴 것을 확인할 수 있습니다.

apk 확장자를 가진 안드로이드 앱의 배포 파일을 안드로이드 폰에 저장한 후 아래 링크에서 설명하는 방법으로 앱을 설치할 수 있습니다.

출처를 알 수 없는 앱 설치 방법(안드로이드13)

안녕하세요 이번에는 출처를 알수 없는 앱 설치 방법을 포스팅 하도록 할께요 간혹 출처를 알 수 없는 앱을...

blog.naver.com

테스트 앱과 실전 앱 배포

안드로이드 폰은 Play Console을 통하여 테스트 앱을 배포할 수 있습니다.
iOS는 출처를 알 수 없는 앱 설치를 허용하지 않으며 TestFlight를 통하여 테스트 앱을 배포할 수 있으나 TestFlight는 Apple Developer Program에 가입한 유료 계정에서만 사용할 수 있습니다.
그외 안드로이드 앱을 Google Play Store에, iOS 앱을 Apple App Store를 통하여 실전 배포할 수 있습니다. 앱 배포 방법은 플랫폼 정책에 따라 수시로 변경될 수 있으므로, 배포할 일이 있을 때 최신 절차를 배우고 적용하는 것이 좋습니다.

참고 문헌

[논문]

없음

[보고서]

없음

[URL]

없음

문의사항

[기상학/프로그래밍 언어]

sangho.lee.1990@gmail.com

[해양학/천문학/빅데이터]

saimang0804@gmail.com

[Flutter] 쉽게 배우는 플러터 앱 개발 실무 07강

shlee1990 — Sat, 1 Feb 2025 11:15:39 +0900

정보

업무명 : [Flutter] 쉽게 배우는 플러터 앱 개발 실무 07강
작성자 : 이상호
작성일 : 2025.02.01
설 명 :
수정이력 :

공유 파일

작업 파일

20250201_first_flutter.zip

drive.google.com

20250201_flutter_server.zip

drive.google.com

ngrok.exe

drive.google.com

서버/DBMS 연동 (Spring Boot)

서버연동(http통신)

학습목표

인터넷 통신의 표준으로 자리잡은 http와 https를 이해합니다.
Request-Response 통신 구조를 활용하여 서버와 클라이언트간 통신하는 방법을 알아 봅니다.
서버 사이드인 백 앤드는 Spring Boot로, 클라이언트 사이드인 프론트 앤드는 Flutter로 상호 연동하여 개발해 봅니다.
로그인 화면을 구현하며 컨트롤러를 활용한 사용자 대화형 앱을 만들어 봅니다.
Back End 기능으로 Flutter Server에 데이터베이스 서비스 기능을 개발하는 방법을 이해합니다.
Front End 기능으로 Flutter App에 Back End 서비스와 연동된 화면을 개발하는 방법을 이해합니다.

Instructor Note

서버 연동부터는 프로그램의 복잡도가 급격히 상승하여 코딩을 하면서 설명하기 어려움. → 노션을 보며 설명한 후 소스 코드를 복사해 넣은 후 코드를 보며 설명할 것.

http란? / https란?

http는 Hyper Text Transfer Protocol의 약자로 전송 규약(Transfer Protocol,통신규약)입니다.
이게 무슨 뜻일까요? 다시 점진적으로 생각을 확장하며 이해해 봅시다.
Text는 프로그래머의 입장에서는 문자열(String)입니다. 아래 화면과 같이 Text는 메모장 프로그램으로 잘 열립니다.

Hyper Text는 아래 화면과 같이 인터넷에 가서 볼 수 있는 사이트에 클릭하면 이동하게 만들어져 있는 Text들이 Hyper Text인데 이미지를 클릭해도 어딘가로 이동합니다. 따라서 Hyper는 어디론가 이동해 간다라는 의미를 가졌다고 보면 됩니다. Hyper Text의 위상이 크게 점프(Hyper Jump)한 이유가 여기에 있는데 인간의 두뇌의 생각의 흐름이 Text와 같이 순차적이지 않고 Hyper Text와 같이 어디론가 Hyper Jump해 가기 때문입니다. Hyper Text는 인간의 생각을 표현하기에 적합한 Text입니다.

Hyper Text는 주로 HTML(Hyper Text Markup Language)로 만들어 집니다. 언어는 언어인데 로직을 구현해 주는 일반 프로그래밍 언어와는 다르게 무언가를 표시(Markup)해 주기 때문에 붙은 이름입니다. 그래서 XML도 Markup 언어이고 Markdown도 Markup 언어입니다. HTML은 아래 화면과 같이 생겼었지요. Hyper는 주로 a 태그로 표현되는데 매우 중요한 개념에 매우 간단한 문법이네요.

그래서 이렇게 중요한 Hyper Text를 보내기(Transfer) 위한 방법(Protocol)을 개발하여 사용하기 시작해서 지금은 보내고 받는 기능이 모두 포함된 인터넷 통신의 표준으로 자리매김하였습니다.
https는 이렇게 중요한 Hyper Text가 암호화되지 않은 일반 Text로 오고 가는 것에 대한 보안에 위협을 느껴 암호화된 Text로 주고 받도록 진화시킨 후 http의 뒤에 s(Security) 붙여서 http와 구분합니다.
매우 다행인 것은 http와 https의 사용이 매우 쉽다는 것입니다. http://www.naver.com 혹은 https://www.naver.com 와 같이 브라우저에 입력하면 Hyper Text를 보내 주니까요. 하지만 보내준 Hyper Text를 처리하는 것에는 적지 않은 노력이 들어 갑니다. 그래서 크롤링을 배울 때 매우 어려웠지요? 이런 사유로 HTML과 같은 형식 외에도 XML이나 json과 같은 형식을 고안해 내게 되었습니다.
또 매우 다행인 것은 위의 http와 https에 대한 설명이 마음에 와 닿지 않더라도, 프로그래머 관점에서 http와 https는 지금까지 배워서 사용했던 라이브러리나 패키지와 다르지 않다는 것입니다.

request → response

pubspec.yaml 설정

http 패키지를 가져다 사용해 봅시다. http 패키지는 Flutter에서 기본으로 제공하지 않기 때문에 pubspec.yaml 파일에서 설정하는 작업을 해 주어야 합니다.
pubspec.yaml 파일에서 아래 화면과 같은 위치를 찾아 Flutter가 기본적으로 사용할 패키지로 지정해 놓은 (이것이 Dependency의 의미입니다. 지정된 패키지에 종속되어 현재 프로젝트를 코딩하게 되니까요.)
아래 화면과 같은 위치에 http: ^1.1.0을 입력합니다.

1.x.x 버전 중에서 가능한 최신 버전을 사용한다는 의미로, 주버전이 1인 한, 마이너 버전과 패치 버전에서 업데이트가 가능함을 나타냅니다.

pubspec.yaml 파일을 수정한 다음에는 Pub get 메뉴를 눌러 Process finished with exit code 0 메세지나 나오는 것을 확인하여야 합니다. 너무나 중요하여 반복하여 설명합니다. 앞단에서 뭔가가 흐트러지면 뒤에서는 이해하기 어려운 오류들을 겪게 됩니다. 프로그래머들은 앞단계에서의 로그를 늘 주의 깊게 관찰하고 가능하다면 늘 반환값이 0인지를 늘 확인하여야 합니다.

request → response

기본적인 http 통신은 아래 화면과 같이 클라이언트에서 요청(request)을 보내면 서버에서 응답(response)를 보내는 방식으로 동작합니다. 브라우저는 Text로 받은 HTML, CSS 및 JavaScript 등을 브라우저의 화면에 해석하여 보여 줍니다. 이런 작업을 Rendering(표현,연출,연주)이라고 합니다. 용어에는 크게 신경쓰지 맙시다.

그러면 http 패키지를 이용하여 “https://www.naver.com”에서 아래 화면과 같은 데이터를 받아 와 봅시다. 브라우저가 Rendering하는 단계가 빠지기 때문에 Text 형태의 HTML, CSS 및 JavaScript가 넘어올 것입니다.

먼저 http_listview_page.dart 파일을 만들고 아래 코드와 같이 입력합시다.

// http_listview_page.dart 파일 코드
import 'package:flutter/material.dart';

// stful 코드조각으로 추가된 HttpListviewPage 클래스 코드
class HttpListviewPage extends StatefulWidget {
  const HttpListviewPage({super.key});

  @override
  State<HttpListviewPage> createState() => _HttpListviewPageState();
}

class _HttpListviewPageState extends State<HttpListviewPage> {
  String textHTML = "서버로 부터 HTML을 가져오기 전";

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        textHTML,
        style: TextStyle(fontSize: 30),
      ),
    );
  }
}

화면 Widget이 하나 추가되었으니 main.dart 파일에도 아래와 같은 코드가 추가되어야 합니다.

// 생성된 HttpListViewPage 클래스를 보여주도록 수정한 main.dart 파일 코드
... 생략 ...
class _MyHomePageState extends State<MyHomePage> {
  var pages = [ HttpListviewPage(),      // 첫번째 페이지로 추가 
                ImageListViewPage(),
                SimpleListViewPage(),
                MyThirdPage(),
              ];
... 중략 ...
        items: [
          BottomNavigationBarItem(           // 첫번째 네베게이션 항목으로 추가
            icon: Icon(Icons.person),
            label: "User List View",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.photo_library),
            label: "Image List View",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.list),
            label: "Simple List View",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.looks_3),
            label: "3rd Page",
          ),
        ],
      ),
    );
  }
}

그리고 실행해 보면 오른쪽 화면과 같이 나타납니다. 이제 http 패키지를 사용해 네이버 웹사이트에서 HTML을 불러와 봅시다. Stateful Widget을 사용하면 화면이 아니라 상태 변수들이 변하기 때문에 Hot Reload를 눌러도 반영되지 않는 경우가 많습니다. 그럴 때에는 재시작 버튼을 누르거나 프로그램의 실행을 멈추고 다시 시작하여야 합니다.

아래 코드에 대한 자세한 설명은 나중에 합니다. 일단은 객체 생성시 초기화를 위하여 단한번 수행되는 @override void initState() 메서드에서 requestResponseServer(); 메소드를 호출하고 그 메소드 안에 var response = await http.get(Uri.parse("https://www.naver.com")); 문장이 있어서 Naver 사이트에 Request하여 받아 온 Response를 변수에 저장하는 로직의 흐름만 이해합시다.

// http 패키지로 Naver에서 HTML을 가져오는 기능을 추가한 http_listview_page.dart 파일 코드
import 'package:flutter/material.dart';

import 'package:http/http.dart' as http; // http 패키지를 import하여 http라는 별명 부여
                                         // 패키지의 메소드를 http.get()과 같이 호출하게됨

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

  @override
  State<HttpListviewPage> createState() => _HttpListviewPageState();
}

class _HttpListviewPageState extends State<HttpListviewPage> {
  String textHTML = "서버로 부터 HTML을 가져오기 전";

  requestResponseServer() async {   // Server에 Request를 보내 Response를 받는 함수 추가
    // http.get()으로 Request하여 Response를 reponse 변수에 저장
    var response = await http.get(Uri.parse("https://www.naver.com"));
    // 여기에 Return Code를 확인하는 로직이 들어가야 하나 핵심만 설명하기도 벅차 생략합니다.
    // 실제 업무 환경에서는 반드시 정상 수행되었는지 Return Code 확인을 하여야 합니다.
    setState(() {              // Widget에 상태의 변화를 통보하여 build() 메소드 다시 실행
      textHTML = response.body;// Reponse로 받아온 HTML 문장을 textHTML에 저장
    });
  }

  @override
  void initState() {              // 객체가 생성될 때 딱 한번만 수행되는 메소드
    // TODO: implement initState  // @override할 때 자동으로 추가된 코드로
    super.initState();            // 이 문장은 부모 클래스의 초기화를 먼저 수행한 후
    // Child인 자신의 초기화를 진행하라는 의미임
    requestResponseServer();       // 최초 함수 호출을 위하여 추가된 코드
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        textHTML,
        style: TextStyle(fontSize: 30),
      ),
    );
  }
}

위의 코드에서는 교육 목적상 코드를 단순하게 만들기 위하여 var response = await http.get(Uri.parse("https://www.naver.com")); 문장 뒤에 Return Code와 Return Message를 처리하는 것을 생략하고 있습니다. 그러나 실전 환경에서는 이 두가지를 매우 주의깊게 코드로 처리하여야 합니다. 앞으로 DB 연결 등의 처리에서도 Return Code와 Return Message의 처리를 가능한 단순하게 처리할텐데 예외처리(Exception Handling)와 함께 전문 프로그래머가 반드시 지켜야할 기본이자 미덕이라는 것을 알고 있어야 하겠습니다.
이제 실행을 해 보는데 이번에는 매우 주의깊게 화면이 변하는 것을 관찰하여야 합니다. 실행을 하면 왼쪽 화면이 먼저 나타나고 조금 있다가 오른쪽 화면이 나타납니다. 왜 그럴까요?

비동기 처리

일반적으로 프로그램의 코드는 동기식으로 진행됩니다. 앞의 문장이 끝나야 뒤의 문장이 시작되는 것입니다. 앞의 문장이 끝나지 않으면 뒤의 문장이 시작되지 않습니다. 서로 시작과 끝이 딱딱 맞아 있어서 동기식(Synchronous)이라고 부릅니다. Synchronized Swimming처럼 앞뒤의 코드들의 수행 순서가 서로 딱딱 맞는 것입니다. 지금까지 배운 코드들은 모두 동기식으로 동작했습니다. 코드에 특별한 표시가 없으면 동기식으로 동작합니다.
그런데 이번에는 http 통신을 이용해서 원격지에 있는 서버에서 데이터를 가져 옵니다. 시간이 많이 걸리겠지요. 이럴 때 코드가 동기식으로 동작한다면 어떻게 될까요? 데이터를 모두 가져올 때까지 클라이언트에서는 아무런 코드도 실행되지 않겠지요. 그랬다면 서버에서 데이터를 가져올 때까지 오른쪽의 화면을 볼 수 없었을 것입니다. 앞의 코드의 수행이 끝날 때까지 기다려야 하니까요. 그래서 Flutter는 http.get() 메소드를 비동기식으로 만들어 놓았습니다. 코드가 서로 시작 시점과 종료 시점이 딱딱 맞지 않고 독립적으로 돌아가기 때문에 비동기식(Asynchronous)이라고 부릅니다.

비동기식의 원리와 개념과 의미를 알았으니 이번에는 문법을 알아 봅시다. 비동기식의 문법은 아래 코드와 같이 비동기 호출을 하는 함수의 ( )와 { 사이에 async를 추가하고 비동기식으로 호출되는 문장의 앞에 await를 추가하는 것입니다. 즉, async는 함수에서 함수안에 비동기 호출이 있다고 알려 주는 역할을 하고 await는 비동기 호출이 종료될 때까지 기다렸다가 뒤의 문장들을 수행하라는 의미가 됩니다. 코드에 async~await 쌍의 특별한 표시가 있을때에만 비동기식으로 동작합니다.

// http_listview_page.dart 파일에서 비동기식으로 호출하는 문장만 발췌한 코드
...생략...
  requestResponseServer() async {
    var response = await http.get(Uri.parse("https://www.naver.com")); 
... 생략 ...

HttpListviewPage 클래스 코드의 흐름을 그림으로 그려보면 아래와 같습니다.

비동기 호출 기술을 활용하여 조금 더 의미있는 코드를 추가해 봅시다. 네이버에서 HTML을 받아 오기 전에 화면에 "서버로 부터 HTML을 가져오기 전"이라는 문자열을 보여 주는 것보다 데이터를 가져오는 작업이 수행 중이라는 표시가 되면 더 좋을 것 같습니다. 백문이 불여 일견. 코드해서 실행화면을 봅시다.
아래 코드는 “조건 ? 참일 때 수행할 문장 : 거짓일 때 수행할 문장”의 구조인 삼항 연산자를 알면 쉽게 이해가 됩니다. Flutter의 return 문장에서는 삼항 연산자와 같은 간단한 표현식을 사용할 수 있습니다.

// 로딩표시하는 CircularProgressIndicator 기능을 추가한 http_listview_page.dart 파일 코드
import 'package:flutter/material.dart';

import 'package:http/http.dart' as http;

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

  @override
  State<HttpListviewPage> createState() => _HttpListviewPageState();
}

class _HttpListviewPageState extends State<HttpListviewPage> {
  String textHTML = "서버로 부터 HTML을 가져오기 전";

  requestResponseServer() async {
    var response = await http.get(Uri.parse("https://www.naver.com"));

    setState(() {
      textHTML = response.body;
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    requestResponseServer();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: textHTML == "서버로 부터 HTML을 가져오기 전" // http.get() 완료 전이면
        ? CircularProgressIndicator()                    // 로딩 표시
        : Text(
            textHTML,
            style: TextStyle(fontSize: 30),
          ),
    );
  }
}

오른쪽의 실행화면을 봅시다. 비동기식의 이점이 명확하게 보이지 않나요? 동기식이면 화면이 멈추었을 것인데 비동기식이니 네이버에서 HTML을 가져오는 동안 Progress Circle을 보여 줄 수가 있습니다.

Flutter에서 비동기(Asynchronous) 프로그래밍을 지원하는 요소들은 네트워크 통신, 파일 I/O, 데이터베이스 작업 등 시간 소요가 발생하는 작업을 처리할 때 지원되는 것처럼 비동기 프로그램의 경우에도 객체 지향 프로그래밍의 경우와 같이 여러분 스스로 비동기로 동작하는 기능을 만들기 보다 비동기로 제공되는 기능을 사용하는 경우가 더 많습니다. 다른 사람들이 만들어 놓은 객체를 호출하여 사용하는 것만큼이나 aync~await 키워드의 쌍으로 비동기 기능을 사용하는 것은 단순합니다.

웹서버 구축 후 request → response (HTML)

이번에는 위에서 했던 request → response 형식의 일반적인 http 통신을 우리가 직접 웹서버를 구축하여 진행하겠습니다. 앞 과정에서 배웠던 Spring Boot 환경으로 구축하겠습니다.
먼저 Spring Boot 프로젝트를 만들기 위하여 Spring Initializr 사이트로 이동합시다. 그리고 아래와 같은 정보를 입력하여 프로젝트를 만듭니다. 무언가를 선택할 때에는 항상 이유가 있어야 합니다. 제가 선택한 이유도 일리가 있으니 한번 읽어 보세요.
- Project : Maven - 여러분이 겪었던 한글 문제가 사라질 것입니다.
- Language : Java - 우리가 이 언어를 배웠고 Kotlin으로 전환되는 추세로 보이나 아직도 대세는 Java라고 생각합니다.
- Spring Boot : 3.3.4 - Spring Initializr가 초기값으로 제공해 주는 가장 안정적인 버전을 선택합니다.
- Artifact/Name : flutter_server - Flutter를 공부하기 위한 Server Side Application을 구축합니다. Flutter은 Client Side Application입니다.
- Java : 17 - 현재 가장 안정적이라고 알려진 버전을 선택합니다.
- Dependencies : Spring Boot DevTools, Lombok, Spring Web, Thymeleaf, Oracle Driver - Oracle DBMS에 연동하며 Web Server를 구축하기 위한 가장 기본적은 모듈들이라고 생각했습니다. 아주 단순한 DBMS 연동만 계획하고 있어서 JPA나 MyBatis는 사용하지 않습니다. MVC 패턴도 사용하지 않습니다.

이제 Generate 버튼을 눌러 압축파일을 다운받읍시다. 그리고 다운로드 받은 압축파일을 프로젝트를 관리하는 폴더로 이동시켜 압축을 풀어 줍니다.

그리고 오랜만에 IntelliJ 통합개발환경을 기동시켜 압축을 푼 폴더를 open합니다.

File → Project Structure로 이동하여 SDK 버전이 17로 지정되어 있는지 확인합니다. 그리고 Labguage level을 SDK Default로 선택합니다.

아래 화면과 같이 src/main/resources/application.properties 파일에 server.port=8087을 입력하여 Oracle DBMS와의 포트 충돌을 사전에 예방합니다. 최신 버전의 Oracle DBMS Express 버전을 설치하면 8080 포트와 충돌하지 않아서 별도의 설정이 필요하지 않습니다.

그리고 아래 화면과 같이 src/main/resources/templates 폴더에 index.html 파일을 만든 후 아래 화면과 같이 편집합니다. HTML의 틀을 IntelliJ 통합개발환경이 만들어 주기 때문에 여러분은 <body>와 </body> 사이에 <H1>Flutter와 연동하기 위한 Flutter Backend Server입니다.</H1> 문장만 입력하면 됩니다.

그리고 아래 화면과 같이 src/main/java/com.example.flutter_server 폴더의 FlutterServerApplication으로 이동하여 마우스 우측 클릭한 후 Run ‘FlutterServerA…main() 메뉴를 선택합니다. 나중에는 상단에 실행 메뉴를 눌러 더 쉽게 프로젝트를 실행할 수 있으나 처음에 프로젝트를 수행할 때에는 이 방법이 가장 안전합니다.

프로젝트가 실행된 후 IntelliJ 통합개발환경 화면 하단에 메세지들을 유심히 살펴보기 바랍니다. 혹시 오류가 발생한 것이 있다면 해결한 후 다음 단계로 넘어가야 합니다. 다행히 아래 화면의 메세지를 보니 Started FlutterServerApplication in 5.221 seconds (process running for 6.912)라고 나타나는 것으로 보아 문제없이 프로젝트가 실행 중입니다.

IntelliJ 통합개발환경의 화면 상단에서 Edit Configuration 메뉴를 클릭하여 설정이 잘 되어 있는지 확인합니다. Java 17 SDK 환경으로 설정되어 있다면 정상입니다.

그럼 인터넷 브라우저에서 http://localhost:8087을 주소창에 입력하여 Flutter Server가 정상적으로 동작하는지 확인해 보겠습니다. https://www.naver.com 과 달리 https를 사용하지 못하는 것은 웹서버에 보안설정을 하지 않았기 때문입니다.
성공입니다. 웹서버가 정상적으로 구축되었습니다. 이제 Flutter Client와 Flutter Server를 연동해 보겠습니다.

Naver에 연결되었던 앱을 조금 전에 만든 로컬 서버로 연결하는 작업은 아주 간단할 것 같습니다. 아래 코드와 같이 http.get() 메소드에 넘겨 주는 서버의 주소를 https://www.naver.com 에서 http://localhost:8087로 바꾸어 주면 될 것 같습니다.

// http_listview_page.dart 파일 - 변경후 코드
... 생략 ...
  requestResponseServer() async {
    //var response = await http.get(Uri.parse("https://www.naver.com"));
    var response = await http.get(Uri.parse("http://localhost:8087"));  // 연결 주소 변경

    setState(() {
      textHTML = response.body;
    });
  }
... 생략 ...

그러나 운영 환경에서는 맞는 말인데 개발 환경에서는 그렇지 않습니다. 그래서 코드를 위와 같이 수정한 후 실행시켜 보니 한없이 Progress Circle만 나타납니다. Server를 찾지 못하고 있는 것입니다.

이유는 아래와 같은 그림에서 설명하는 것처럼 이뮬레이터는 별도의 가상 장치로 localhost는 이뮬레이터이지 여러분의 PC가 아니기 때문입니다.

똑똑한 iOS의 이뮬레이터는 이 문제를 해결해 놓아서 http://localhost:8087로 접근이 가능하나 Andrioid 이뮬레이터는 그렇지 않아서 http://10.0.2.2:8087로 접근하여야 합니다.

// http_listview_page.dart 파일 - Android 이뮬레이터에서 PC의 localhost를 접속하도록 변경후 코드
... 생략 ...
  requestResponseServer() async {
    //var response = await http.get(Uri.parse("https://www.naver.com"));
    //var response = await http.get(Uri.parse("http://localhost:8087"));
    var response = await http.get(Uri.parse("http://10.0.2.2:8087"));  // 연결 주소 변경

    setState(() {
      textHTML = response.body;
    });
  }
... 생략 ...

다시 실행시켜 보니 로딩 표시가 나타나다가 우리가 구축한 웹사이트에서 구축해 놓은 index.html 파일의 HTML을 가져와서 보여 줍니다.

그런데 느끼시겠지만 위의 코드는 Android에서만 돌아가는 반쪽짜리 코드입니다. 코드가 수행되는 플랫폼(Platform,여기서는 Server 혹은 PC의 종류를 의미합니다.)에 따라 그에 적합한 Url를 사용하도록 코드를 바꾸어야 합니다.

// Android와 iOS 이뮬레이터에서 모두 동작하는 코드 (참조용/실행해 보지 않음)
... 생략 ...
import 'package:flutter/material.dart';

import 'package:http/http.dart' as http;
import 'dart:io';                        // 실행 중인 플랫폼을 알려주는 패키지 import
... 중략 ...
  requestResponseServer() async {
    //var response = await http.get(Uri.parse("https://www.naver.com"));
    String serverUrl = "http://localhost:8087";    // 서버 URL의 초기값 지정

    if (Platform.isAndroid) {                      // Android 플랫폼인 경우
      serverUrl = "http://10.0.2.2:8087";          // 서버 URL 변경
    }

    var response = await http.get(Uri.parse(serverUrl));  // 변수를 사용하여 호출

    setState(() {
      textHTML = response.body;
    });
  }
... 생략 ...

그런데 아래와 같은 HTML을 가져다가 정보를 내가 원하는 형태로 만들어 사용하는 것은 상당히 복잡하고 기술적인 도전이 될 수 있습니다.

이런 일을 Parsing(구문분석, Compiler를 만드는 사람들이 처음에 사용한 말입니다. Rendering 만큼이나 어려운 말입니다.)한다고 합니다. HTML을 가져다가 Parsing하여 사용하는 것은 여러분이 배운 Web Crawling의 주제이며 Selenium과 BeautifulSoup 패키지의 관심사일 만큼 큰 주제입니다. 이 두가지 패키지로도 한계에 부딛히면 정규식(Regular Expression)의 도움을 받아야 할 수도 있고, 때로는 find, substring, replace 등과 같은 문자열 객체(String)들이 제공하는 다양한 함수들의 도움을 받아야 할 수도 있습니다. 그리고 여러분이 Text Mining에서 배웠던 okt나 mecab과 같은 다양한 언어 형태소 분석기들을 사용하여야 할지도 모릅니다.
결국 HTML은 사람의 생각을 표현하기에는 적합한 구조이나, Server와 Client간의 Data를 주고 받기에는 적합한 구조가 아닙니다. Data를 주고 받기 위해서는 더 단순한 구조가 필요합니다.

json request → response

그래서 사람들은 데이터를 주고 받는 용도로 더 단순하고 쉬운 방법을 생각하게 되었습니다.
먼저 개발된 것은 HTML을 확장시킨 XML(Extensible Markup Language)를 만들어 냈습니다.
그러나 아래 화면에 보이는 것과 같이 XML도 HTML 보다 구조화되고 개선되기는 했으나 데이터를 쉽게 주고 받을만큼 단순화되지는 못하였습니다.

그래서 최근에는 JSON(JavaScript Object Notation)이라는 단순화된 형식이 각광을 받게 되었습니다. JSON의 형식을 잠시 보고 갑시다.

위의 화면의 형식을 보면 여러분이 배운 프로그래밍 언어에서 익숙한 두가지 구조로 되어 있습니다. 대괄호([ ])는 Python의 리스트나 Java의 배열에서 사용하던 기호이고, 중괄호({ })는 Python의 딕셔너리(dict)의 기호이고 JSON을 구성하는 값들은 Python의 딕셔너리(dict)나 Java의 Map과 같이 Key와 Value의 구조를 가지고 있습니다. 굳이 차이가 있다면 프로그래밍 언어의 내부에 저장되지 않고 인터넷 상에서 데이터를 주고 받아야 하기 때문에 Key가 모두 Text 문자열이라는 것입니다. Value는 문자열뿐만 아니라 숫자, 배열, 불리언 값 및 객체(Nested json) 등이 될 수 있습니다.
아주 단순한 구조이지요? 그래서 최근에는 JSON이 XML을 제치고 데이터를 주고 받는 표준으로 자리잡고 있으며, 이 뿐만이 아니라 No SQL이나 객체의 저장 형태로도 이 형식을 사용해 가는 추세입니다.
우리는 XML을 배우지 않고 JSON을 배울 것입니다.
지금 여기서 예를 들려고 하는 것은 아래의 왼쪽 화면과 같은 https://jsonplaceholder.typicode.com/users Url에서 json Data를 받아와서 아래의 오른쪽 화면과 같은 ListView에 보여 주는 것입니다.

인터넷 상의 json과 같은 Data Service를 조금 더 이해하기 위하여 https://jsonplaceholder.typicode.com/users/1 Url을 브라우저에 입력해 봅시다. 그러면 전체 사용자(users)가 아니라 사용자 중 id가 1인 사용자의 정보만 보여줄 것입니다. 아주 전형적으로 인터넷 상에서 정보를 조회하는 방식입니다.

또 단계적으로 코드를 하며 이해해 봅시다. 일단 json Data를 가져 오는 코드는 Naver에서 HTML을 가져 오던 로직과 동일합니다. Data를 가져오는 주소만 달라집니다.

// http_listview_page.dart 파일 - json Data 가져오는 로직이 반영된 코드
... 생략 ...
  requestResponseServer() async {
    //var response = await http.get(Uri.parse("https://www.naver.com"));
    //String serverUrl = "http://localhost:8087";
    //String serverUrl = "http://10.0.2.2:8087";
    String serverUrl = "https://jsonplaceholder.typicode.com/users/1";  // Url 변경

    var response = await http.get(Uri.parse(serverUrl));

    setState(() {
      textHTML = response.body;
    });
  }
... 생략 ...

json Data를 잘 가져 옵니다.

json Data를 가져 왔으니 남은 일은 json Data를 Parsing(구문분석)하여 사용하는 것입니다. Dart 언어에서 json Data Parsing은 매우 간편합니다. Dart convert 패키지의 jsonDecode() 함수는 json을 구문분석하여 Map(딕셔너리) 객체로 만들어 주는데 Map 객체에서 Data를 꺼내서 사용할 때 아래와 같이 가져올 json의 형식과 구조을 정확하게 알고 그에 맞추어 사용하기만 하면 됩니다.

{
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "Sincere@april.biz",
  "address": {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  },
  "phone": "1-770-736-8031 x56442",
  "website": "hildegard.org",
  "company": {
    "name": "Romaguera-Crona",
    "catchPhrase": "Multi-layered client-server neural-net",
    "bs": "harness real-time e-markets"
  }
}

그러면 json Data를 Map의 형태로 파싱하여 ListView에 출력해 보겠습니다.

// http_listview_page.dart 파일 코드
import 'package:flutter/material.dart';

import 'package:http/http.dart' as http;
import 'dart:convert';        // jsonDecode() 메소드를 사용하기 위하여 import

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

  @override
  State<HttpListviewPage> createState() => _HttpListviewPageState();
}

class _HttpListviewPageState extends State<HttpListviewPage> {
  //String textHTML = "서버로 부터 HTML을 가져오기 전";   // 주석처리 (문제를 해결할 때 사용하게 됨)
  var parsedJson;             // json을 파싱하여 저장할 변수 정의

  requestResponseServer() async {
    //var response = await http.get(Uri.parse("https://www.naver.com"));
    //String serverUrl = "http://localhost:8087";
    //String serverUrl = "http://10.0.2.2:8087";
    String serverUrl = "https://jsonplaceholder.typicode.com/users/1";

    var response = await http.get(Uri.parse(serverUrl));

    setState(() {
      //textHTML = response.body;
      parsedJson = jsonDecode(response.body);   // json 파싱
      print(parsedJson);                        // 파싱된 json 출력
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    requestResponseServer();
  }

  @override
  Widget build(BuildContext context)
    /* LisView로 보여 주도록 변경
    return Center(
      child: textHTML == "서버로 부터 HTML을 가져오기 전"
        ? CircularProgressIndicator()
        : Text(
            textHTML,
            style: TextStyle(fontSize: 30),
          ),
    );
    */
    return parsedJson == null
      ? Center(
          child: CircularProgressIndicator(),
        )
      : ListView.builder(            // Parsing된 json 즉 Map(딕셔너리)을 ListView에 출력
		      itemCount: 1,              // Data가 하나라서 1을 강제 지정
		      itemBuilder: (context, index) {
		        return Card(
		          child: Center(
		            child: Column(
		              children: [
		                Text("ID: ${parsedJson['id']}",   // parsedJson을 Map의 형태로 보여줌
		                  style: TextStyle(fontSize: 30),
		                ),
		                Text("이름: ${parsedJson['name']}",
		                  style: TextStyle(fontSize: 25),
		                ),
		                Text("사용자명: ${parsedJson['username']}",
		                  style: TextStyle(fontSize: 25),
		                ),
		                Text("메일주소: ${parsedJson['email']}",
		                  style: TextStyle(fontSize: 25),
		                )
		              ],
		            ),
		          ),
		        );
		      },
    );
  }
}

그러면 하단의 실행창에 파싱된 1개의 Map Data가 출력되는 것을 볼 수 있고, Map Data가 ListView에 출력되는 것을 볼 수 있습니다.

그러면 하단의 실행창에 파싱된 여러개의 Map Data가 리스트(List)의 형태로 출력되는 것을 볼 수 있고, Map Data의 리스트가 ListView에 출력되는 것을 볼 수 있습니다.

// http_listview_page.dart 파일 코드
import 'package:flutter/material.dart';

import 'package:http/http.dart' as http;
import 'dart:convert';

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

  @override
  State<HttpListviewPage> createState() => _HttpListviewPageState();
}

class _HttpListviewPageState extends State<HttpListviewPage> {
  //var parsedJson;
  var users;                 // 변수명을 의미있게 변경
  
  requestResponseServer() async {
    //var response = await http.get(Uri.parse("https://www.naver.com"));
    //String serverUrl = "http://localhost:8087";
    //String serverUrl = "http://10.0.2.2:8087";
    //String serverUrl = "https://jsonplaceholder.typicode.com/users/1";
    String serverUrl = "https://jsonplaceholder.typicode.com/users";  // Url 변경

    var response = await http.get(Uri.parse(serverUrl));

    setState(() {
      // textHTML = response.body;
      //parsedJson = jsonDecode(response.body);
      users = jsonDecode(response.body);      // 의미있게 바꾼 변수명을 사용
      print(users);
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    requestResponseServer();
  }

  @override
  Widget build(BuildContext context) {
    return users == null                      // 의미있게 바꾼 변수명을 사용
        ? Center(
            child: CircularProgressIndicator(),
          )
        : ListView.builder(
			      //itemCount: 1,
			      itemCount: users.length,          // 여러개의 Data가 넘어와서 변경
			      itemBuilder: (context, index) {   // 의미있게 바꾼 변수명을 사용
			        var user = users[index];        // 여러개의 Data가 넘어와서 추가
			        return Card(                    // 변수의 이름을 의미있게 users/user로 변경
			          child: Center(
			            child: Column(
			              children: [
			                Text("ID: ${user['id']}",
			                  style: TextStyle(fontSize: 30),
			                ),
			                Text("이름: ${user['name']}",
			                  style: TextStyle(fontSize: 25),
			                ),
			                Text("사용자명: ${user['username']}",
			                  style: TextStyle(fontSize: 25),
			                ),
			                Text("메일주소: ${user['email']}",
			                  style: TextStyle(fontSize: 25),
			                )
			              ],
			            ),
			          ),
			        );
			      },
    );
  }
}

웹서버 구축 후 request → response (json)

웹서버에 json Data를 반환하는 기능을 구축하기 위하여 IntelliJ 통합개발환경으로 이동해서 아래 위치에 UserController Java Class를 만듭니다.

// Flutter Server의 UserController 클래스 코드
package com.example.flutter_server;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller       // Controller로 사용되게 해주는 Annotation
@ResponseBody     // HTML 문서가 아니라 일반 문자열을 반환하게 해 주는 Annotation
public class UserController {
    @GetMapping("/users")    // http://localhost:8087/users가 접속 Url
    public String users() {
        return "여기에 붙여 넣습니다.";
    }
}

웹브라우저에서 https://jsonplaceholder.typicode.com/users 주소를 쳐서 json Datga를 불러온 후 반환되는 json 문자열 전체를 복사합니다. 그리고 위의 코드에서 return "여기에 붙여 넣습니다"; 문자에 붙여 넣습니다.

그러면 IngtelliJ가 문법 오류가 나지 않도록 알아서 잘 문자열을 처리해서 return 문장으로 json Data 문자열을 반환하게 해 줍니다.

복사해 넣은 json Data를 원본 데이터와 달라지도록 살짝 수정하여 Test Data를 완성하겠습니다.

그러면 웹 서버를 다시 실행한 후 웹브라우저에서 localhost:8087/users를 쳐 json Data가 정상적으로 반환되는지 확인합시다. 아래 화면을 보니 json Data가 잘 반환됩니다.

json Data의 형식을 동일하게 가져갔기 때문에 코드에서 바꿀 부분은 url을 우리가 개발한 flutter_server의 users Url로 바꾸는 것 뿐입니다.

// http_listview_page.dart 파일 코드
import 'package:flutter/material.dart';

import 'package:http/http.dart' as http;
import 'dart:convert';

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

  @override
  State<HttpListviewPage> createState() => _HttpListviewPageState();
}

class _HttpListviewPageState extends State<HttpListviewPage> {
  var users;

  requestResponseServer() async {
    //var response = await http.get(Uri.parse("https://www.naver.com"));
    //String serverUrl = "http://localhost:8087";
    //String serverUrl = "http://10.0.2.2:8087";
    //String serverUrl = "https://jsonplaceholder.typicode.com/users/1";
    //String serverUrl = "https://jsonplaceholder.typicode.com/users";
    var serverUrl = "http://10.0.2.2:8087/users";        // Url 변경

    var response = await http.get(Uri.parse(serverUrl));

    setState(() {
      users = jsonDecode(response.body);
      print(users);
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    requestResponseServer();
  }

  @override
  Widget build(BuildContext context) {
    return users == null
        ? Center(
            child: CircularProgressIndicator(),
          )
        : ListView.builder(
      itemCount: users.length,
      itemBuilder: (context, index) {
        var user = users[index];
        return Card(
          child: Center(
            child: Column(
              children: [
                Text("ID: ${user['id']}",
                  style: TextStyle(fontSize: 30),
                ),
                Text("이름: ${user['name']}",
                  style: TextStyle(fontSize: 25),
                ),
                Text("사용자명: ${user['username']}",
                  style: TextStyle(fontSize: 25),
                ),
                Text("메일주소: ${user['email']}",
                  style: TextStyle(fontSize: 25),
                )
              ],
            ),
          ),
        );
      },
    );
  }
}

이제 원하는 대로 우리가 만든 Flutter 서버에서 Data를 가져다가 Flutter 클라이언트 화면에 보여 주었습니다.

로그인 화면

로그인 화면을 만드는 것도 단계적으로 점진적으로 만들며 이해해 봅시다.
먼저 login_page.dart 파일을 만든 후 그 안에 LoginPage 클래스를 만들겠습니다. 로그인 화면은 User ID와 Password 등을 입력받아야 하니 Stateful Widget으로 만듭니다. 지금부터는 안드로이드 스튜디오를 조작하는 방법을 설명하지 않으니 이전에 배운 것들을 떠올리며 코딩하기 바랍니다.
아래 코드를 보면 TextField Widget과 InputDecoration 객체와 TextBox Widget이 사용된 것을 제외하면 기존에 배운 것들입니다. TextField는 키보드 입력을 받는 기능을 하고, InputDecoration은 입력 필드를 꾸며주는 역할을 합니다. 로그인 버튼을 누르면 우선 MainHomePage로 이동하게 만들었습니다.
먼저 로그인 화면에 필요한 Image 파일을 images 폴더에 저장하고

pubspec.yaml 파일에 자원(Asset)으로 등록한 후 Pub get 메뉴를 클릭하기 바랍니다.

// login_page.dart에 만든 LoginPage Stateful Widget 클래스 코드
import 'package:flutter/material.dart';

import "main.dart";

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

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset("images/LG전자 DX School.PNG"),
            SizedBox(height: 50),
            SizedBox(
              height: 200,
              child: Column(
                children: [
                  SizedBox(
                    width: 200,
                    child: TextField(                // TextField 사용
                      decoration: InputDecoration(   // InputDecoration사용
                        labelText: "아이디",
                        border: OutlineInputBorder(),
                      ),
                    ),
                  ),
                  SizedBox(
                    width: 200,
                    child: TextField(                // TextField 사용
                      obscureText: true,             // 입력하는 암호가 필드에 보이지 않게 처리함
                      decoration: InputDecoration(   // InputDecoration사용
                        labelText: "비밀번호",
                        border: OutlineInputBorder(),
                      ),
                    ),
                  ),
                  SizedBox(height: 20),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      TextButton(                   // TextButton 사용
                          onPressed: () {},
                          child: Text("회원가입")
                      ),
                      TextButton(                   // TextButton 사용
                          onPressed: () {
                            Navigator.of(context).push(
                              MaterialPageRoute(builder: (_) => MyHomePage(title: 'Flutter Demo Home Page')),
                            );
                          },
                          child: Text("로그인")
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Image.asset("images/lab4dx.PNG"),
          ],
        ),
      ),
    );
  }
}

로그인 화면은 Home 화면보다 앞에 와야 하니 main.dart 파일의 코드를 Home 화면보다 Login 화면을 먼저 실행하도록 수정하여야 하겠습니다.

// 로그인 화면을 먼저 나오게 수정한 main.dart 코드
... 생략 ...
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      //home: const MyHomePage(title: 'Flutter Demo Home Page'),
      home: LoginPage(),   // 최초 기동할 Page를 MyHomePage에서 LoginPage로 변경
    );
  }
}
... 생략 ...

이제 실행해 봅시다. 로그인 화면이 나타난 후 로그인 TextButton을 누르면 MyHomePage로 이동합니다. 그런데 Back 버튼을 눌러서 다시 로그인화면으로 돌아 가는 것이 마음에 들지 않습니다.

그럴 때에는 화면 이동을 할 때 Navigator.of(context).push() 메소드 대신에 Navigator.of(context).pushReplacement() 메소드를 사용합니다. 메소드 이름이 의미하는 것으로 자명(Self Explanatory)하지만 설명해 보면 push는 호출하는 페이지를 Navigator Stack에 남기고 이동하여 원래의 화면으로 돌아갈 수 있고, pushReplacement는 호출하는 페이지를 Navigator Stack에 남기지 않고 이동하여 원래 화면으로 이동할 수 없습니다.

// _LoginPageState 클래스의 변경후 화면이동 코드
    //Navigator.of(context).push(
    Navigator.of(context).pushReplacement(    // 돌아가기 기능을 제거하도록 메소드 변경
      MaterialPageRoute(builder: (_) => MyHomePage(title: 'Flutter Demo Home Page')),
    );

실행해 보면 MyHomePage의 상단 AppBar에 ← 화살표가 사라지며 로그인 화면으로 다시 돌아 가는 기능이 사라진 것을 확인할 수 있습니다.

이제 아래 코드를 주석 처리한 것을 중심으로 읽어 봅시다.

// TextField에 초기값을 저장하고 입력된 값을 가져와 사용하는 _LoginPageState 클래스 코드
class _LoginPageState extends State<LoginPage> {
  TextEditingController userIdController = TextEditingController();   // 콘트롤러 추가
  TextEditingController passwordController = TextEditingController(); // 콘트롤러 추가

  @override                             // 초기값 부여를 위해 initState() 메소드 override
  void initState() {
    // TODO: implement initState
    super.initState();

    userIdController.text = "test";     // User ID에 초기값 부여
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset("images/LG전자 DX School.PNG"),
              SizedBox(height: 50),
              SizedBox(
                height: 200,
                child: Column(
                  children: [
                    SizedBox(
                      width: 200,
                      child: TextField(
                        controller: userIdController,   // TextField와 Controller 연결
                        decoration: InputDecoration(
                          labelText: "아이디",
                          border: OutlineInputBorder(),
                        ),
                      ),
                    ),
                    SizedBox(
                      width: 200,
                      child: TextField(
                        controller: passwordController,  // TextField와 Controller 연결
                        obscureText: true,
                        decoration: InputDecoration(
                          labelText: "비밀번호",
                          border: OutlineInputBorder(),
                        ),
                      ),
                    ),
                    SizedBox(height: 20),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        TextButton(
                            onPressed: () {},
                            child: Text("회원가입")
                        ),
                        TextButton(
                            onPressed: () {
                              if(userIdController.text == "test" && passwordController.text == "test")        // 입력된 값을 Check하여 두값이 모두 test일 경우 로그인하도록 수정
                                Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context) => const MyHomePage(title: 'Flutter Demo Home Page')));
                              else              // 일치하지 않는 경우 알림창 출력
                                showDialog(
                                    context: context, 
                                    builder: (context) {
                                      return AlertDialog(content: Text("아이디가 존재하지 않거나 비밀번호가 일치하지 않습니다."));
                                    }
                                );
                            },
                            child: Text("로그인")
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              Image.asset("images/lab4dx.PNG"),
            ],
          ),
        )
      ),
    );
  }
}

실행해 보겠습니다. 아이디가 없거나 비빌번호가 틀리면 경고창이 나타나고, Test를 위하여 만든 임시코드와 같이 모두 “test”를 입력하면 로긴되어 MyHomePage로 이동합니다. 경고창을 가능한 단순한 형태로 만들어서 확인(OK) 버튼이 나타나지 않는데 경고창의 외부를 클릭하면 경고창이 닫힙니다. 곧 개선할 것입니다.

이제 Spring Boot로 구축하고 있는 Flutter Server에 접속하여 사용자 정보를 가져오도록 기능을 더 개선해 보겠습니다. 일반적으로 사용자 정보는 스마트폰에 저장하지 않고 중앙의 서버에 보관하게 됩니다. 그래서 Flutter 개발자는 DBMS 기술보다는 통신 기술과 클라우드 기술에 더 관심을 가져야 합니다. 이 과정에서는 클라우드 기술을 사용하지 않는데 웹 서버와 연동 방법을 알면 클라우드 연결도 쉽게 익혀서 사용할 수 있습니다.
아래 코드도 우선 Flutter Server 연동을 먼저 Test할 수 있도록 아이디와 비밀번호가 모두 “test”인 경우 true를 반환하고 그렇지 않은 경우 false를 반환하게 만들었습니다.

// Flutter Server의 UserController 클래스 코드
package com.example.flutter_server;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.bind.annotation.PostMapping;   // import 추가
import org.springframework.web.bind.annotation.RequestParam;  // import 추가

@Controller
@ResponseBody
public class UserController {
    @PostMapping("/login-check")         // 추가된 메소드
    public String loginCheck(@RequestParam("userId") String userId, @RequestParam("password") String password) {
        if ( userId.equals("test") && password.equals("test") )
            return "true";
        else
            return "false";
    }

    @GetMapping("/users")    // http://localhost:8087/users가 접속 Url
    public String users() {
        return "[\n" +
                "    {\n" +
                "        \"id\": 320811,\n" +
                "        \"name\": \"안용제\",\n" +
                "        \"username\": \"yongjaeahn\",\n" +
                "        \"email\": \"yongjaeahn@naver.com\",\n" +
... 생략 ...

이제 Flutter에서 위에서 만든 Flutter Server의 Restful API Service-위에서 만든 웹 서비스를 사용하여 로그인을 Check하는 기능을 만들어 봅시다. 경고창을 자주 사용하게 될 것으로 예상되어 여러 상황을 함께 고려하도록 경고창 기능을 하는 함수로 분리하였습니다. 그리고 지금까지 미루어 놓았던 http 통신 작업 후의 Return Code 처리 로직도 추가하였습니다. 그러나 예외 처리는 로직이 지나키게 복잡해 질 것을 우려하여 추가하지 않았습니다. (예외처리는 사용자 프로그래머이 영역이 아니라 전문 프로그래머의 영역이라고 생각합니다.) 관심이 있으신 분들은 개인적으로 문의하거나 여력이 될 때 여러분 스스로 추가해 보기 바랍니다.
아래 코드를 주석을 중심으로 읽어 봅시다.

// Flutter 서버를 통하여 Login Check하는 기능이 추가된_LoginPageState 클래스 코드 - 문자열
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;  // http 통신을 위하여 import

import "main.dart";

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

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  TextEditingController userIdController = TextEditingController();
  TextEditingController passwordController = TextEditingController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    userIdController.text = "test";
  }

  loginCheck(String userId, String password) async {  // 로그인 체크 함수 추가
    String serverUri = "http://10.0.2.2:8087/login-check";  // Flutter Server의
                                                            // login check url
    var response = await http.post(     // Post 방식으로 호출
      Uri.parse(serverUri),
      headers: {                        // Post 방식 호출을 위해서 headers 정보 필요
        'Content-Type': 'application/x-www-form-urlencoded', // 응용프로그램/폼 인코드
      },
      body: {                // Request Parameter로 userId와 password를 넘겨줌
        'userId': userId,
        'password': password,
      },
    );

    print(response.body);    // 읽어온 문자열을 확인

    if (response.statusCode == 200) { // 오류없이 잘 읽어온 경우
      var loginStatus = response.body;
      if (loginStatus == 'true') {    // 아이디와 비밀번호가 일치하여 'true' 반환된 경우
        Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context) => const MyHomePage(title: 'Flutter Demo Home Page')));
      } else {                        // // 아이디와 비밀번호가 불일치하여 'false'인 경우
        showAlertDialog("로그인 실패", "아이디가 존재하지 않거나 비밀번호가 일치하지 않습니다.");
      }
    } else {       // Flutter 서버에서 로그인 체크하다가 알 수 없는 오류가 발생한 경우
      showAlertDialog("서버 오류", "Flutter Server의 정상 동작 여부를 점검하세요.(${response.statusCode})");
    }
  }

  showAlertDialog(title,message) {     // 경고창을 보여주는 기능을 함수로 분리
    showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text(title),          // 경고창의 타이틀 추가
            content: Text(message),
            actions: [                   // 경고창에 Ok 버튼 추가
              TextButton(
                onPressed: () {          // Ok 버튼 누르면 이전 창으로 돌아감
                  Navigator.of(context).pop();
                },
                child: Text("Ok"),
              )
            ],
          );
        }
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset("images/LG전자 DX School.PNG"),
            SizedBox(height: 50),
            SizedBox(
              height: 200,
              child: Column(
                children: [
                  SizedBox(
                    width: 200,
                    child: TextField(
                      controller: userIdController,
                      decoration: InputDecoration(
                        labelText: "아이디",
                        border: OutlineInputBorder(),
                      ),
                    ),
                  ),
                  SizedBox(
                    width: 200,
                    child: TextField(
                      controller: passwordController,
                      obscureText: true,
                      decoration: InputDecoration(
                        labelText: "비밀번호",
                        border: OutlineInputBorder(),
                      ),
                    ),
                  ),
                  SizedBox(height: 20),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      TextButton(
                          onPressed: () {},
                          child: Text("회원가입")
                      ),
                      TextButton(
                          onPressed: () {
                            /* 기존에 단순화된 Test 코드 삭제 후
                            if(userIdController.text == "test" && passwordController.text == "test")
                              //Navigator.of(context).push(
                              Navigator.of(context).pushReplacement(
                                MaterialPageRoute(builder: (_) => MyHomePage(title: 'Flutter Demo Home Page')),
                              );
                            else
                              showDialog(
                                  context: context,
                                  builder: (context) {
                                    return AlertDialog(content: Text("아이디가 존재하지 않거나 비밀번호가 일치하지 않습니다."));
                                  }
                              );
                            */
                            loginCheck(userIdController.text,passwordController.text);  // loginCheck 함수 사용
                          },
                          child: Text("로그인")
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Image.asset("images/lab4dx.PNG"),
          ],
        ),
      ),
    );
  }
}

이번에는 Login Check를 Text 즉 String 방식이 아닌 json 방식으로 해 보겠습니다. 먼저 IntelliJ 통합개발환경으로 Flutter 서버 측의 코드부터 json 문자열을 반환하도록 수정하겠습니다.

// Flutter Server의 UserController 클래스 코드
package com.example.flutter_server;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

import java.util.HashMap;    // import 추가
import java.util.Map;        // import 추가

@Controller
@ResponseBody
public class UserController {
		/* String으로 반환하는 함수 주석 처리
    @PostMapping("/login-check")
    public String loginCheck(@RequestParam("userId") String userId, @RequestParam("password") String password) {
        if ( userId.equals("test") && password.equals("test") )
            return "true";
        else
            return "false";
    }
    */
    @PostMapping("/login-check")    // Map 즉 딕셔너리 즉 json으로 반환하는 함수 추가
    public Map<String, Boolean> loginCheck(@RequestParam("userId") String userId, @RequestParam("password") String password) {
        boolean loginSuccess = userId.equals("test") && password.equals("test");

        Map<String, Boolean> response = new HashMap<>();
        response.put("loginSuccess", loginSuccess);

        return response;
    }

    @GetMapping("/users")    // http://localhost:8087/users가 접속 Url
    public String users() {
        return "[\n" +
                "    {\n" +
                "        \"id\": 320811,\n" +
                "        \"name\": \"안용제\",\n" +
                "        \"username\": \"yongjaeahn\",\n" +
                "        \"email\": \"yongjaeahn@naver.com\",\n" +
... 생략 ...

그리고 Flutter Client에서 문자열을 확인하던 로직을 json을 확인하는 로직으로 바꾸어 보겠습니다.

// Flutter 서버를 통하여 Login Check하는 기능이 추가된_LoginPageState 클래스 코드 - json
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';                    // jsonDecode 함수를 사용하기 위하여 import
... 중략 ...
  loginCheck(String userId, String password) async {
    String serverUri = "http://10.0.2.2:8087/login-check";

    var response = await http.post(
      Uri.parse(serverUri),
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: {
        'userId': userId,
        'password': password,
      },
    );

    print(response.body);

    if (response.statusCode == 200) {
      //var loginStatus = response.body;
      var parseJson = jsonDecode(response.body);      // Json을 Decode하여 Map으로 변경
      bool loginSuccess = parseJson['loginSuccess'];  // Map에서 loginSuccess 키의 값을 읽음

      //if (loginStatus == 'true') {
      if (loginSuccess) {              // Map에서 받아온 bool 값을 비교
        Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context) => const MyHomePage(title: 'Flutter Demo Home Page')));
      } else {
        showAlertDialog("로그인 실패", "아이디가 존재하지 않거나 비밀번호가 일치하지 않습니다.");
      }
    } else {
      showAlertDialog("서버 오류", "Flutter Server의 정상 동작 여부를 점검하세요.(${response.statusCode})");
    }
  }
... 생략 ...

이제 간단한 Animation을 구현해 보겠습니다.
먼저 아이디와 비밀번호 TextField가 서서히 나타나게 해 보겠습니다.

// 아이디와 비밀번호 Text가 서서히 나타나는 Animation이 추가된 login_page.dart 파일 코드
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'dart:async';                    // Timer 객체를 사용하기 위하여 import

import "main.dart";

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

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  TextEditingController userIdController = TextEditingController();
  TextEditingController passwordController = TextEditingController();

  double idPasswordOpacity = 0;  // 처음에 불투명도를 0으로 즉, 완전히 투명하게 설정

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    userIdController.text = "test";

    WidgetsBinding.instance.addPostFrameCallback((_) {  // Timer를 Widget에 전달하여 실행
      Timer(Duration(seconds: 2), () {                  // 2초뒤
        setState(() {                                   // 완전히 불투명하게 설정
          idPasswordOpacity = 1;                        // 불투명도를 1로
        });
      });
    });
  }
  ... 중략...
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset("images/LG전자 DX School.PNG"),
              SizedBox(height: 50),
              SizedBox(
                height: 200,
                child: AnimatedOpacity(           // AnimatedOpacity Widget으로 감쌈
                  opacity: idPasswordOpacity,     // 불투명도를 앞에서 지정한 변수로 지정
                  duration: Duration(seconds: 3), // 3초간 서서히 나타나도록 설정
                  child: Column(
                    children: [
                      SizedBox(
                        width: 200,
                        child: TextField(
                          controller: userIdController,
                          decoration: InputDecoration(
                            labelText: "아이디",
                            border: OutlineInputBorder(),
                          ),
                        ),
                      ),
                      SizedBox(
                        width: 200,
                        child: TextField(
                          controller: passwordController,
                          obscureText: true,
                          decoration: InputDecoration(
                            labelText: "비밀번호",
                            border: OutlineInputBorder(),
                          ),
                        ),
                      ),
 ... 생략 ...

이번에는 이미지를 회전시키는 Animation을 해 보겠습니다.

// 이미지가 회전하는 Animation이 추가된 login_page.dart 파일 코드
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'dart:async';
import 'dart:math';        // pi 상수를 사용하기 위하여 import

import "main.dart";

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

  @override
  State<LoginPage> createState() => _LoginPageState();
}

//class _LoginPageState extends State<LoginPage> {
class _LoginPageState extends State<LoginPage> with SingleTickerProviderStateMixin {
                    // SingleTickerProviderStateMixin을 사용하도록 설정
                    // Mixin은 Java에는 없는 개념으로 특정 기능만 제공하는 클래스로 보면 됨
                    // Animation COntroller를 사용하기 위하여 이 Mixin이 필요함
                    // 여러 Animation을 사용하려면 TickerProviderStateMixin을 대신 사용함
                    // 아래 코드에서 vsync: this를 동작가능하게 하여 Animation을 동기화함
                    
  TextEditingController userIdController = TextEditingController();
  TextEditingController passwordController = TextEditingController();

  double idPasswordOpacity = 0;

  var animationController;   // animationController 변수
  var animation;             // 어떤 Animation을 할지 결정함

  @override
  void initState() {         // 객체 사용전 최초 자원을 할당 및 초기화
    // TODO: implement initState
    super.initState();      // Parent들이 할당할 자원과 초기화를 맨앞에 수행
                            // dispose()와 반대로 앞에 배치

    // Animation Controller에 3초 Animation을 설정/Animation 대상은 이 객체(vsync: this)
    animationController = AnimationController(duration: Duration(seconds: 3), vsync: this);
    // 0도 에서 360도(pi * 2) 돌아가는 Animation을 Animation Controller에 설정. (3초에 한바퀴)
    animation = Tween<double>(begin:0,end: pi * 2).animate(animationController);
    animationController.repeat(); // animation Controller로 Animation 시작
                                  // animation이 수치상으로 발생하고
                                  // 이를 가져다 화면에 보여주는 Widget은 AnimatedBuilder임

    userIdController.text = "test";

    WidgetsBinding.instance.addPostFrameCallback((_) {
      Timer(Duration(seconds: 2), () {
        setState(() {
          idPasswordOpacity = 1;
        });
      });
    });
  }

  @override
  void dispose() {
    animationController.dispose();  // 할당받은 Animation Controller 자원을 반납함
    // TODO: implement dispose
    super.dispose();                // Parent들이 해제할 자원을 맨뒤에 해제(initState()와 반대로 뒤에 배치)
  }                                 // super.initState()는 앞에 배치되어 Parent가 할당할 자원을 먼저 할당
  
... 중략 ...
            AnimatedBuilder(                     // image 객체를 AnimatedBuilder로 감쌈
                animation: animationController,  // animationController를 사용하여 Animation
                builder: (context, widget) {     // context : 현재 화면, widget : 감싸진 Widget
                  return Transform.rotate(       // animation에 설정된 각도 정보를 가지고 회전시킴
                    angle: animation.value,      // 각도 정보가 포함된 animation을 사용
                    child: widget,               // AnimatedBuilder로 감싸진 Widget
                  );
                },
                child: Image.asset("images/lab4dx.PNG")
            ),
          ],
        ),
      ),
    );
  }
}

Instructor Note : 스마튼폰에서 팀즈 화면 공유를 통하여 Flutter Animation 앱 소개 - 코드와 애니메이션 형태가 들어 있음

회원가입

Oracle DBMS가 설치되어 있지 않다면 Oracle Database Express Edition 설치 압축 파일을 다운로드하여 압축을 푼 후 Setup.exe 실행 파일을 실행하여 설치합니다. 설치시 입력한 비밀번호를 잘 기억해 두었다가 system 사용자 ID로 로그인할 때 사용하여야 합니다.
Oracle SQL Developer가 설치되어 있지 않다면 설치 압축 파일을 다운로드하여 압축을 푼 후 별도의 설치절차없이 sqldeveloper.exe 실행 파일을 실행하여 사용하면 됩니다.
Instructor Note: PC에 설치된 Oracle DBMS의 system 계정의 비밀 번호를 자신의 것으로 바꾸어 사용하여야 합니다. 변경 방법은 아래와 같습니다.

Instructor Note: system 계정의 비밀번호를 변경하여 사용 중 Oracle DB 접속시 오류가 발생한다면 Oracle DBMS를 지웠다가 다시 설치하여야 합니다. 오라클 삭제 방법

오라클 삭제 방법

오라클은 삭제가 무척이나 불편하다.

velog.io

먼저 Back End 기능의 예로 회원가입을 위한 데이터베이스 테이블을 Flutter Server에 만들겠습니다. 아래와 같은 SQL 문장을 Oracle SQL Developer에서 실행시키면 됩니다. 이미 테이블이 존재하는 경우 삭제하고 다시 만들도록 SQL 문장이 구성되었습니다.

-- 테이블이 이미 존재하면 삭제
DROP TABLE flutter_user CASCADE CONSTRAINTS PURGE;

-- 테이블 생성
CREATE TABLE flutter_user (
    id VARCHAR2(10) PRIMARY KEY,     -- id 필드는 PRIMARY KEY로 설정
    password VARCHAR2(20) NOT NULL,  -- password 필드는 NULL 불가
    name VARCHAR2(20) NOT NULL       -- name 필드는 NULL 불가
);

Flutter Server에서 생성한 Database Table에 연결하기 위하여 DBConnection 객체를 만들어 생성자 주입을 위하여 @Component 어노테이션(Annotation)을 추가합니다.

// DBConnection 클래스
package com.example.flutter_server;

import org.springframework.stereotype.Component;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

@Component
public class DBConnection {
    private static Connection connection;

    public Connection getConnection() throws SQLException, ClassNotFoundException {
        if (connection == null || connection.isClosed()) {
            String url = "jdbc:oracle:thin:@localhost:1521:xe";
            String driver = "oracle.jdbc.driver.OracleDriver";
            String username = "your_oracle_db_id";
            String password = "your_oracle_db_password";

            Class.forName(driver);
            connection = DriverManager.getConnection(url, username, password);
        }
        return connection;
    }
}

http://localhost:8087/add-user Url로 Database Table에 사용자를 추가하기 위한 로직을 추가합니다. 아래 코드는 JPA나 MyBatis을 사용하지 않고 일반적인 SQL를 사용하기 때문에 코드를 읽으면서 직관적으로 이해할 수 있을 것입니다. JPA나 MyBatis의 경우 응용프로그램의 복잡도가 충분히 높아져서 JPA나 MyBatis의 도움을 받아야만 하는 시점에 Refactoring으로 구현하여 사용하면 됩니다. TDD의 점진적 개발 방법론에 따르면 지금은 굳이 JPA나 MyBatis를 사용하여 프로그램의 복잡도를 높일 이유가 없습니다.

// UserController 클래스에 DBConnection을 주입(Autowired)하여 
// flutter_user DB 테이블에 사용자를 추가하는 로직 추가
package com.example.flutter_server;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

import java.util.HashMap;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;  // 의존성 주입을 위하여 import
import java.sql.Connection;                                     // DB 연결을 위하여 Import
import java.sql.PreparedStatement;
import java.sql.SQLException;

@Controller
@ResponseBody
public class UserController {
    @Autowired
    DBConnection dbConnection;     // DBConnection 의존성 주입

    @PostMapping("/add-user")      // 사용자를 추가하기 위한 함수 추가
    public String addUser(@RequestParam("userId") String userId, @RequestParam("password") String password, @RequestParam("name") String name) {
        PreparedStatement pstmt;

        try {
            Connection connection = dbConnection.getConnection();

            String sql = "INSERT INTO flutter_user (id, password, name) VALUES (?, ?, ?)";
            pstmt = connection.prepareStatement(sql);

            pstmt.setString(1, userId);
            pstmt.setString(2, password);
            pstmt.setString(3, name);

            int rowsInserted = pstmt.executeUpdate();
            if (rowsInserted > 0) {
                System.out.println("사용자 데이터가 성공적으로 추가되었습니다.");
                return "success";
            } else {
                System.out.println("사용자 데이터 추가시 오류가 발생하였습니다.");
                return "failure";
            }
        } catch (SQLException | ClassNotFoundException e) {
            System.out.println("사용자 데이터 추가시 DBMS 오류가 발생하였습니다.");
            return "failure";
        }
    }

    @PostMapping("/login-check")
    public Map<String, Boolean> loginCheck(@RequestParam("userId") String userId, @RequestParam("password") String password) {
        boolean loginSuccess = userId.equals("test") && password.equals("test");

        Map<String, Boolean> response = new HashMap<>();
        response.put("loginSuccess", loginSuccess);

        return response;
    }

    @GetMapping("/users")    // http://localhost:8087/users가 접속 Url
    public String users() {
        return "[\n" +
                "    {\n" +
                "        \"id\": 320811,\n" +
                "        \"name\": \"안용제\",\n" +
                "        \"username\": \"yongjaeahn\",\n" +
                "        \"email\": \"yongjaeahn@naver.com\",\n" +
... 생략 ...

그러면 Flutter Client에서 Flutter Server의 add-user API를 사용하여 회원가입 정보를 입력한 후 사용자를 추가하는 로직을 구현해 보겠습니다.
이번에는 Front End 기능의 예로 회원가입을 위한 UI(User Interface) 화면을 Flutter Client에 만들겠습니다.
아래의 코드에서 보듯이 회원가입을 위한 SignupPage Widget 화면 구성은 매우 평범하고, Flutter Server의 add-user API를 호출하는 코드는 로그인 기능을 구현할때 개발했던 loginCheck() 함수를 복사한 후 필요한 곳의 로직을 수정하여 구현하였습니다. 핵심 로직이 아닌 데이터 검증 등의 기능은 코드의 이해도 향상을 위하여 구현하지 않았습니다. 필요시 각자 구현하여 사용바랍니다.

// signup_page.dart 파일 
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

import "main.dart";
import "login_page.dart";

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

  @override
  State<SignupPage> createState() => _SignupPageState();
}

class _SignupPageState extends State<SignupPage> with SingleTickerProviderStateMixin  {
  TextEditingController userIdController = TextEditingController();
  TextEditingController passwordController = TextEditingController();
  TextEditingController passwordConfirmController = TextEditingController();
  TextEditingController nameController = TextEditingController();

  addUser(String userId, String password, String name) async {
    String serverUri = "http://10.0.2.2:8087/add-user";  // URL 변경

    var response = await http.post(
      Uri.parse(serverUri),
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: {
        'userId': userId,
        'password': password,
        'name': name,               // Data로 name을 추가로 넘겨줌
      },
    );

    print(response.body);

    if (response.statusCode == 200) {
      var addUserStatus = response.body;
      if (addUserStatus == 'success') {   // Flutter 서버에서 "true" 대신 "success" 반환
        // 회원가입에 성공하면 자동으로 로그인되게 구현
        Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (_) => const MyHomePage(title: 'Flutter Demo Home Page')));
      } else {
        showAlertDialog("사용자 추가 실패", "Flutter Server 관리자에게 문의하세요.");
      }
    } else {
      showAlertDialog("서버 오류", "Flutter Server의 정상 동작 여부를 점검하세요.(${response.statusCode})");
    }
  }

  showAlertDialog(title,message) {
    showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text(title),
            content: Text(message),
            actions: [
              TextButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: Text("Ok"),
              )
            ],
          );
        }
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("회원가입"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              height: 300,
              child: Column(
                children: [
                  Container(
                    width: 200,
                    child: TextField(
                      controller: userIdController,
                      maxLines: 1,                          // 최대 라인수를 1줄로 제한
                      decoration: InputDecoration(
                          labelText: "아이디",
                          border: OutlineInputBorder(),
                          hintText: "8자 이상 입력해 주세요."  // 안내 문구 추가
                      ),
                    ),
                  ),
                  Container(
                    width: 200,
                    child: TextField(
                      controller: passwordController,
                      obscureText: true,
                      maxLines: 1,                          // 최대 라인수를 1줄로 제한
                      decoration: InputDecoration(
                          labelText: "비밀번호",
                          border: OutlineInputBorder(),
                          hintText: "8자 이상 입력해 주세요."  // 안내 문구 추가
                      ),
                    ),
                  ),
                  Container(
                    width: 200,
                    child: TextField(
                      controller: passwordConfirmController,
                      obscureText: true,
                      maxLines: 1,                          // 최대 라인수를 1줄로 제한
                      decoration: InputDecoration(
                        labelText: "비밀번호확인",
                        border: OutlineInputBorder(),
                      ),
                    ),
                  ),
                  Container(
                    width: 200,
                    child: TextField(
                      controller: nameController,
                      maxLines: 1,                          // 최대 라인수를 1줄로 제한
                      decoration: InputDecoration(
                        labelText: "이름",
                        border: OutlineInputBorder(),
                      ),
                    ),
                  ),
                  SizedBox(height: 20),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      TextButton(
                          onPressed: () {
                            Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context) => LoginPage()));
                          },
                          child: Text("취소")
                      ),
                      TextButton(
                          onPressed: () { // 회원가입 클릭시 Server의 add-user API 호출
                            addUser(userIdController.text,passwordController.text,nameController.text);
                          },
                          child: Text("회원가입")
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

회원가입 화면을 만들었으니 로그인 화면에서 회원가입을 클릭하면 회원가입으로 이동하는 로직을 구현하겠습니다.

// LoginPage Widget
... 생략 ...
  TextButton(
      onPressed: () {
        Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (_) => SignupPage()));  // 회원가입 페이지로 이동
      },
      child: Text("회원가입")
  ),
... 생략 ...

그럼 회원가입 기능을 사용하여 회원가입을 해 보겠습니다. 이뮬레이터는 한글 추가 작업을 하지 않으면 한글을 사용할 수 없어 이름을 영문으로 입력하겠습니다. 이뮬레이터에 한글을 추가하고 싶으면 노션의 “Flutter FAQ와 Tips”에서 “안드로이드 에뮬레이터에 한글 추가”를 참조하기 바랍니다.
회원가입이 성공하면 자동으로 로긴되어 초기화면이 나타납니다.

회원가입이 Flutter Server의 DBMS에 어떤 영향을 미쳤는지 아래와 같은 SQL 문장을 Oracle SQL Developer에서 실행시킵시다.

-- Flutter 사용자 테이블을 조회
SELECT * FROM flutter_user;

그러면 회원가입한 사용자의 정보가 DBMS의 테이블에 추가된 것을 확인할 수 있습니다

사용자를 추가하는 Flutter Server의 add-user API를 개발하였으니, 로그인시 사용자 로그인을 Check하는 login-check API를 test 사용자로 하드코딩해 놓은 것에서 DBMS에 연결하여 확인하도록 수정하겠습니다.

// Flutter Server의 UserController 클래스
package com.example.flutter_server;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

import java.util.HashMap;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.SQLException;

@Controller
@ResponseBody
public class UserController {
    @Autowired
    DBConnection dbConnection;

    @PostMapping("/add-user")
    public String addUser(@RequestParam("userId") String userId, @RequestParam("password") String password, @RequestParam("name") String name) {
        PreparedStatement pstmt;

        try {
            Connection connection = dbConnection.getConnection();

            String sql = "INSERT INTO flutter_user (id, password, name) VALUES (?, ?, ?)";
            pstmt = connection.prepareStatement(sql);

            pstmt.setString(1, userId);
            pstmt.setString(2, password);
            pstmt.setString(3, name);

            int rowsInserted = pstmt.executeUpdate();
            if (rowsInserted > 0) {
                System.out.println("사용자 데이터가 성공적으로 추가되었습니다.");
                return "success";
            } else {
                System.out.println("사용자 데이터 추가시 오류가 발생하였습니다.");
                return "failure";
            }
        } catch (SQLException | ClassNotFoundException e) {
            System.out.println("사용자 데이터 추가시 DBMS 오류가 발생하였습니다.");
            return "failure";
        }
    }

    // ID와 Password가 일치하는 사용자가 있는지 확인하는 함수 추가
    private boolean matchedUser(String userId, String password) {
        PreparedStatement pstmt;

        try {
            Connection connection = dbConnection.getConnection();

            // 사실상 SQL 문장 하나만 차이나는 것과 같음 (INSERT 문장이 SELECT 문장으로 변경됨)
            String sql = "SELECT * FROM flutter_user WHERE id = ? AND password = ?";
            pstmt = connection.prepareStatement(sql);

            pstmt.setString(1, userId);
            pstmt.setString(2, password);

            int rowsSelected = pstmt.executeUpdate();
            if (rowsSelected > 0) {
                System.out.println("사용자의 ID와 Password가 일치합니다.");
                return true;
            } else {
                System.out.println("ID가 존재하지 않거나 Password가 일치하지 않습니다.");
                return false;
            }
        } catch (SQLException | ClassNotFoundException e) {
            System.out.println("사용자 데이터 조회시 DBMS 오류가 발생하였습니다.");
            return false;
        }
    }

    @PostMapping("/login-check")
    public Map<String, Boolean> loginCheck(@RequestParam("userId") String userId, @RequestParam("password") String password) {
        //boolean loginSuccess = userId.equals("test") && password.equals("test");
        boolean loginSuccess = matchedUser(userId, password);     // DBMS의 데이터를 사용하도록 수정
        
        Map<String, Boolean> response = new HashMap<>();
        response.put("loginSuccess", loginSuccess);

        return response;
    }

    @GetMapping("/users")    // http://localhost:8087/users가 접속 Url
    public String users() {
        return "[\n" +
                "    {\n" +
                "        \"id\": 320811,\n" +
                "        \"name\": \"안용제\",\n" +
                "        \"username\": \"yongjaeahn\",\n" +
                "        \"email\": \"yongjaeahn@naver.com\",\n" +
... 생략 ...

이제 회원가입 절차를 통하여 Flutter Server의 DBMS에 등록된 사용자 ID와 암호로만 로그인할 수 있게 되었습니다. 회원가입이 성공하면 바로 로긴되게 구현하여 회원가입 후 다시 로그인하는 번거로운 절차를 없앴습니다. → Flutter Server와 Flutter Client를 모두 재기동한 후 테스트합시다.

이제 로그아웃(Logout) 기능을 만들어 보겠습니다. 아래 코드와 같이 로그아웃 버튼을 MyHomePage Widget에 있는 AppBar의 우측 상단에 만들고 클릭시 로그인 화면으로 이동하게 하는 것으로 충분합니다.

// main.dart 파일에 있는 MyHomePage Widget
... 생략 ...
class _MyHomePageState extends State<MyHomePage> {
  int _selectedNaviIndex = 0;

  _onBottomNavigationItemTapped(index) {
    setState(() {
      _selectedNaviIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
        actions: [                 // actions로 logout 아이콘이 추가되고
          IconButton(              
            icon: Icon(Icons.logout),
            onPressed: () {        // 클릭하면 Login 페이지로 이동함
              Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (_) => LoginPage()));
            }
          ),
        ]
      ),
... 생략 ...

이제 화면 우측 상단에 생겨난 로그아웃 버튼을 눌러 다시 로그인 화면으로 이동하게 되었습니다.

그런데 로그아웃 후 최근에 로그인한 사용자의 ID가 아니라 test라는 ID가 계속 나타나는 것이 눈에 거슬립니다. 로그인할 때 최근에 로그인한 ID를 저장했다가 로그인 화면에 다시 보여주는 로직을 구현해 보겠습니다. 이런 기능은 스마트폰에 문자열 데이터를 저장했다가 불러오는 방법으로 구현할 수 있습니다.
우선 pubspec.yaml 파일에 shared_preferences 라이브러리를 등록한 후 pub get 메뉴를 클릭합니다.

# pubspec.yaml
... 생략 ...
dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.6
  http: ^1.1.0
  shared_preferences: ^2.1.0   # 추가된 라이브러리
... 생략 ...

그리고 login_page.dart 파일에서 추가된 라이브러리를 import한 후 문자열을 저장하고 가져오는 비동기 함수를 정의하여 호출합니다.

// login_page.dart
... 생략 ...
import 'package:shared_preferences/shared_preferences.dart'; // library import
... 중략 ...
class _LoginPageState extends State<LoginPage> with SingleTickerProviderStateMixin {
  TextEditingController userIdController = TextEditingController();
  TextEditingController passwordController = TextEditingController();

  double idPasswordOpacity = 0;

  var animationController;
  var animation;

  // 로그인 ID를 저장하는 함수
  saveUserId(String userId) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.setString('user_id', userId);
  }
  
  // 저장된 로그인 ID를 불러오는 함수
  loadSavedUserId() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      var userId = prefs.getString('user_id');
      if(userId != null)
        userIdController.text = userId;
    });
  }
  
  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    //userIdController.text = "test";    // 하드코딩해 놓은 문자열을
    loadSavedUserId();                   // 저장된 문자열을 가져오는 함수의 호출로 변경
... 중략 ...
  loginCheck(String userId, String password) async {
... 중략 ...
    if (response.statusCode == 200) {
        var parseJson = jsonDecode(response.body);
        bool loginSuccess = parseJson['loginSuccess'];

        if (loginSuccess) {
          saveUserId(userId);        // 로그인 성공시 성공한 User Id 문자열을 저장
... 생략 ...

initState() 함수가 변경되는 등 수정이 크게 발생했으니 Flutter Client를 재시작하여 확인합시다.

[실습] 자신의 가족을 소개하는 family_intro2 앱을 개선해 보세요.

family_intro2 프로젝트에 로그인 기능과 Animation 기능과 회원가입 기능을 추가해 보세요.
사용자 정보와 DBMS 테이블은 백엔드 서버(Back End Server)에 있어야 합니다.

참고 문헌

[논문]

없음

[보고서]

없음

[URL]

없음

문의사항

[기상학/프로그래밍 언어]

sangho.lee.1990@gmail.com

[해양학/천문학/빅데이터]

saimang0804@gmail.com

[홍보] 전단지 배포 대행 업체

shlee1990 — Sat, 1 Feb 2025 01:39:38 +0900

전화바로걸기
H.P: 1668-0999
☎ TEL: 010-9336-2752

홈페이지 더보기클릭
http://firstprbrothers.com

블로그 더보기클릭
https://m.blog.naver.com/tkrtkrqo1058?suggestAddBuddy=true

카카오채널
http://pf.kakao.com/_CCkNT

전단지배포 국내 업계 1위!
✅ 대기업에서 믿고 맡기는 이유!
◈전단지배포 대표브랜드!

[Flutter] 쉽게 배우는 플러터 앱 개발 실무 06강

shlee1990 — Sat, 18 Jan 2025 13:50:49 +0900

정보

업무명 : [Flutter] 쉽게 배우는 플러터 앱 개발 실무 06강
작성자 : 이상호
작성일 : 2025.01.18
설 명 :
수정이력 :

공유 파일

원본 파일

flutter-golden-rabbit-novice-v2-main.zip

drive.google.com

작업 파일

20250118_first_flutter.zip

drive.google.com

기본 Widget II

학습목표

ListView Widget의 사용법과 사용시의 이점을 이해하고 구현해 봅니다.
그외 알아두면 유용한 Widget들이 어떤 것들이 있는지 알아봅니다.
if 조건 표현식, 삼항 연산자 및 for 반복 표현식을 활용하여 Widget을 구현하는 방법을 이해하고 구현해 봅니다.

TextField Widget

TextField Widget은 문자열의 입력을 받는 Widget입니다.
first_flutter 프로젝트를 다시 연후 아래 코드를 화면의 최상단 Widget으로 추가해 봅시다.

// main.dart 함수
... 생략 ...
TextField(    // 추가된 TextField Widget
  decoration: InputDecoration(
    labelText: "필드이름",
    border: OutlineInputBorder(),
  ),
),
Container(
  width: double.infinity,
  alignment: Alignment.center,
  color: Colors.yellow,
  child: const Text(
    'You have pushed the button this many times:',
    textAlign: TextAlign.center,
    style: TextStyle(
        color: Colors.pink,
        fontSize: 40,
        fontStyle: FontStyle.italic,
    ),
  ),
),
... 생략 ...

앱을 실행해 보면 화면의 상단에 입력을 위한 필드가 추가되어 있는 것을 알 수 있습니다. 그런데 입력 필드가 화면의 행을 모두 채우고 있습니다.

입력 필드의 길이는 SizedBox Widget을 사용하여 통제할 수 있습니다.

// main.dart 함수
... 생략 ...
SizedBox(       // SizedBox Widget으로
  width: 200,   // 입력필드의 길이를 200 논리적 픽셀로 지정
  child: TextField(
    decoration: InputDecoration(
      labelText: "필드이름",
      border: OutlineInputBorder(),
    ),
  ),
),
... 생략 ...

앱을 다시 실행해 보면 입력 필드의 길이가 지정한 만큼 축소되는 것을 확인할 수 있습니다.

텍스트 필드에 입력한 문자열이 화면에만 보이지 않고 변수에서 값을 받아 오거나 변수에 값을 저장하는 방법을 알아 보겠습니다. TextField Widget과 연결하여 사용할 변수는 TextEditingController 객체 변수로 정의한 후 TextField Widget의 controller 속성으로 지정해 줍니다.

// main.dart 함수
... 생략 ...
class _MyHomePageState extends State<MyHomePage> {
  TextEditingController textEditingController = TextEditingController();   // 콘트롤러 추가

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    textEditingController.text = "입력 필드의 초기값";
  }
... 중략 ...
SizedBox(
  width: 200,
  child: TextField(
    controller: textEditingController,   // TextField와 Controller 연결
    decoration: InputDecoration(
      labelText: "필드이름",
      border: OutlineInputBorder(),
    ),
  ),
),
... 생략 ...

그후 프로그램의 코드에서 textEditingController.text = "입력 필드의 초기값";와 같은 할당문을 사용하면 텍스트 필드에 값이 나타납니다.

화면에 입력한 값을 가져다 사용할 때에는 TextField Widget과 연결된 변수의 값을 textEditingController.text와 같은 형식으로 코드에서 가져다 사용하면 됩니다.

// main.dart 함수
... 생략 ...
SizedBox(
  width: 200,
  child: TextField(
    // 값 변경 후 Enter를 치면 textEditingController.text에 저장된 값을 print
    onSubmitted: (_) {print(textEditingController.text);},
    controller: textEditingController,
    decoration: InputDecoration(
      labelText: "필드이름",
      border: OutlineInputBorder(),
    ),
  ),
),
... 생략 ...

TextField Widget에 TextField Changed라고 입력한 후 Enter를 치면 안드로이드 스튜디오의 하단 창에 입력한 값이 출력되는 것을 확인할 수 있습니다.

이와 같이 화면에서 TextField 입력을 받아 사용하기 위해서는 화면의 TextField와 연결되어 변수 역할과 제어 역할을 해 주는 제어기(TextEditingController)의 중재가 필요합니다. 아래의 그림을 참조바랍니다. TextEditingController 외에도 이와 유사한 역할을 해 주는 다양한 (TextEditingController)들이 존재하는데 기본적인 원리와 개념과 의미는 동일하며 사용법은 약간의 차이가 있을 뿐 유사합니다.

표현식과 연산자를 활용한 Widget

Flutter는 if나 for와 같은 표현식(Expression)이나 삼항 연산자(Operatr)를 사용하여 Widget를 구성하는 방법을 제공합니다.
if 조건 표현식

// main.dart 함수
... 생략 ...
class _MyHomePageState extends State<MyHomePage> {
  bool contentLoaded = false;  // 콘텐츠가 로드되었는지 여부를 나타내는 변수

  TextEditingController textEditingController = TextEditingController();
... 중략 ...
if (contentLoaded ) Text("콘텐츠가 로드되었습니다.") // 콘텐츠 로드된 경우
else CircularProgressIndicator(),                   // 콘텐츠 로드 중인 경우
SizedBox(
  width: 200,
  child: TextField(
    onSubmitted: (_) {print(textEditingController.text);},
    controller: textEditingController,
    decoration: InputDecoration(
      labelText: "필드이름",
      border: OutlineInputBorder(),
    ),
  ),
),
... 생략 ...

앱을 실행해 보면 contentLoaded 변수에 false가 저장되어 있어서 로딩 중이라는 의미로 원형 프로그래스 바가 출력되는 것을 확인할 수 있습니다.

플러스(+) 버튼을 누를 때 _count 변수를 증가시킴과 동시에 contentLoaded 변수의 값을 true로 변경시켜 보겠습니다.

// main.dart 함수
... 생략 ...
  void _incrementCounter() {
    setState(() {
	    _counter++;
      contentLoaded = true;    // 콘텐츠가 로드되었다고 변수 설정
    });
  }
... 생략 ...

앱을 다시 실행해 보면 플러스(+) 버튼을 누를 때 원형 프로그래스 바가 “콘텐츠가 로드되었습니다.”라는 텍스트로 출력되는 것을 확인할 수 있습니다.

삼항 연산자

이번에는 if 표현식(Expression)을 삼항 연산자(Operator)로 간결하게 표현해 보겠습니다.

// main.dart 함수
... 생략 ...
// if (contentLoaded ) Text("콘텐츠가 로드되었습니다.")
// else CircularProgressIndicator(),
// 삼항 연산자로 변경
contentLoaded ? Text("콘텐츠가 로드되었습니다.") : CircularProgressIndicator(),
SizedBox(
  width: 200,
  child: TextField(
    onSubmitted: (_) {print(textEditingController.text);},
    controller: textEditingController,
    decoration: InputDecoration(
      labelText: "필드이름",
      border: OutlineInputBorder(),
    ),
  ),
),
... 생략 ...

앱의 실행결과는 동일합니다.

for 반복 표현식

ListView Widget에서 사용했던 SimpleListView 예제를 화면의 상단에 추가해 보겠습니다.

// main.dart 함수
... 생략 ...
class _MyHomePageState extends State<MyHomePage> {
	// ListView Widget에 반복하여 보여줄 리스트 변수
  var strList = ["1번째 항목","2번째 항목","3번째 항목","4번째 항목","5번째 항목",
    "6번째 항목","7번째 항목","8번째 항목","9번째 항목","10번째 항목",
    "11번째 항목","12번째 항목","13번째 항목","14번째 항목","15번째 항목",
    "16번째 항목","17번째 항목","18번째 항목","19번째 항목","20번째 항목"
  ];

  bool contentLoaded  = false;
... 중략 ...
	          // ListView Widget의 크기를 SizedBox의 크기로 제한
SizedBox(
  height: 200,
  child: ListView.builder(
      itemCount: strList.length,
      itemBuilder: (context, index) {
        return GestureDetector(
          onTap: () {
            // 오류 발생을 예방하기 위하여 주석 처리
            // Navigator.of(context).push(
            //     MaterialPageRoute(builder: (_) => SimpleListViewDetailPage(id: index, password: strList[index]))
            // );
          },
          child: Card(
            child: Center(
              child: Text(strList[index],
                style: TextStyle(fontSize: 40),
              ),
            ),
          ),
        );
      }
  ),
),
// if (contentLoaded ) Text("콘텐츠가 로드되었습니다.")
// else CircularProgressIndicator(),
contentLoaded ? Text("콘텐츠가 로드되었습니다.") : CircularProgressIndicator(),
... 생략 ...

앱을 실행해 보면 오른쪽 화면과 같이 나타납니다.

이 코드를 for 반복 표현식을 사용하여 코딩해 보겠습니다. 아래 코드와 같이 리스트가 나타나게 하는 것까지는 단순한 형식으로 구현이 가능한데, itemBuilder의 index 인자를 사용할 수 없는 한계가 있습니다.

// main.dart 함수
... 생략 ...
	          // ListView Widget의 크기를 SizedBox의 크기로 제한
            SizedBox(
              height: 200,
              // child: ListView.builder(
              //     itemCount: strList.length,
              //     itemBuilder: (context, index) {
              //       return GestureDetector(
              //         onTap: () {
              //           // Navigator.of(context).push(
              //           //     MaterialPageRoute(builder: (_) => SimpleListViewDetailPage(id: index, password: strList[index]))
              //           // );
              //         },
              //         child: Card(
              //           child: Center(
              //             child: Text(strList[index],
              //               style: TextStyle(fontSize: 40),
              //             ),
              //           ),
              //         ),
              //       );
              //     }
              // ),
              child: ListView(    // ListView.builder가 ListView로 변경됨
                children: [       // itemCount와 itemBuilder 속성대신 children 속성 사용
                  for (var element in strList) // for 반복 표현식 사용
                    Card(                    // Card Widget이 strList 변수의 요소마다 생성됨
                      child: Center(
                        child: Text(element,
                          style: TextStyle(fontSize: 40),
                        ),
                      ),
                    ),
                ],
              ),
            ),
... 생략 ...

그래서 Dart 언어의 문장(Statement)으로 이 문제를 해결하려고 하면 아래 화면과 같이 오류가 발생합니다. 여기서 사용하는 if와 for 표현식(Expression)과 삼항 연산자(Operator)는 return 문장안에서 사용되어 Dart 언어의 문장과 달리 약식의 제한적인 문법만 허용하기 때문입니다. Dart의 표현식 기반 문법은 간결하면서도 강력한 기능을 제공하여, 웹 프로그래밍에서 사용되는 ASP, JSP, Thymeleaf와 유사한 동적 콘텐츠 처리를 구현할 수 있습니다.

DropdownButton Widget

DropdownButton Widget은 사전에 정해진 값들 중에서 선택하여 입력을 받는 Widget입니다. 아래 코드를 화면의 최상단 Widget으로 추가해 봅시다.

// main.dart 함수
... 생략 ...
class _MyHomePageState extends State<MyHomePage> {
  var selectedElement = "요소2";    // DropdownButton 요소의 초기값 
  
  var strList = ["1번째 항목","2번째 항목","3번째 항목","4번째 항목","5번째 항목",
    "6번째 항목","7번째 항목","8번째 항목","9번째 항목","10번째 항목",
    "11번째 항목","12번째 항목","13번째 항목","14번째 항목","15번째 항목",
    "16번째 항목","17번째 항목","18번째 항목","19번째 항목","20번째 항목"
  ];
... 중략 ...
            SizedBox(              
              width: 200,
              child: Center(
                child: DropdownButton<String>(     // DropdownButton Widget 추가
                  value: selectedElement,          // DropdownButton의 선택과 변수를 연결
                  onChanged: (String? newValue) {  // DropdownButton 선택시 이벤트 처리기
                    print(newValue);               // 인자가 Null로 넘어올 수 있어 ?로 허용
                    setState(() {              // DropdownButton에 연결된 변수값 상태 변경
                      selectedElement = newValue!;  // 값이 Null 아닌 것을 !로 확인후 사용
                    });
                  },
                  items: [
                    for (var element in ["요소1","요소2","요소3"])   // for 반복 표현식
                      DropdownMenuItem<String>(  // DropdownButton의 요소 Widget 추가
                        value: element,
                        child: Text(element),
                      ),
                  ],
                ),
              ),
            ),
... 생략 ...

앱을 실행하면 화면 상단에 DropdownButton Widget이 나타나는 것을 확인할 수 있으며 value 속성으로 지정한 selectedElement 변수의 값이 초기값으로 나타나는 것을 확인할 수 있습니다.

DropdownButton Widget을 클릭하거나 탭하면 for 표현식으로 추가한 DropdownMenuItem<String> Widget들이 선택 가능한 목록으로 나타나는 것을 확인할 수 있습니다.

요소를 선택하면 선택한 요소가 DropdownButton Widget에 나타나고, 실행창에도 print되는 것을 확인할 수 있습니다.

TextField와 DropdownButton Widget 외에 Radio<T>와 RichText 등의 입력을 위한 Widget들이 다양하게 존재하니 필요할 때 찾아서 사용하기 바랍니다.

SingleChildScrollView Widget

SingleChildScrollView Widget은 화면 하나로 제한된 크기를 Scroll하여 확장하게 만들어 줍니다.

// main.dart 함수
... 생략 ...
  @override
  Widget build(BuildContext context) {
    double imageWidth = (MediaQuery.of(context).size.width - 30) / 3;
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(     // Center Widget을 SingleChildScrollView으로 감싸줌
        child: Center(
          child: Column(
            // mainAxisAlignment 변경 : spaceAround -> start
            //mainAxisAlignment: MainAxisAlignment.spaceAround,
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
... 생략 ...

앱을 실행하면 화면 상단에 하단에 화면이 깨지는 현상이 사라지고, 아래로 Scroll할 수 있는 것을 확인할 수 있습니다.

[실습] 계산기

프로젝트 이름 : calculator
설명 : BottomNavigationBar를 사용하여 4개의 주화면을 구성한 후 단계별로 계산기를 만듭니다.

import 'package:flutter/material.dart';
import 'calculator_page1.dart';
import 'calculator_page2.dart';
import 'calculator_page3.dart';
import 'calculator_page4.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var pages = [
    CalculatorPage1(),
    CalculatorPage2(),
    CalculatorPage3(),
    CalculatorPage4(),
  ];

  int _selectedNaviIndex = 0;

  _onBottomNavigationItemTapped(index) {
    setState(() {
      _selectedNaviIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: pages[_selectedNaviIndex],
      bottomNavigationBar: BottomNavigationBar(
        //showSelectedLabels: false,
        //showUnselectedLabels: false,

        currentIndex: _selectedNaviIndex,
        selectedItemColor: Colors.blue,
        unselectedItemColor: Colors.grey,

        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        onTap: _onBottomNavigationItemTapped,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.looks_one),
            label: "Calculator1",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.looks_two),
            label: "Calculator2",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.looks_3),
            label: "Calculator3",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.looks_4),
            label: "Calculator4",
          ),
        ],
      ),
    );
  }
}

1단계 : 사칙연산(/,*,-,+)을 수행하는데 연산자와 숫자의 입력이 적절한지 확인하지 않고 우선 계산되는 기능을 구현해 봅니다. 연산자가 틀린 경우 오류가 발생하거나 동작하지 않는 한계가 있습니다.

2단계 : 연산자가 사칙연산(/,*,-,+)을 벗어나는 경우 하단에 오류 메세지를 출력하도록 개선합니다. 여전히 입력된 숫자가 틀린 경우 오류가 발생하거나 동작하지 않는 한계가 있습니다.

3단계 : 사칙연산(/,*,-,+)의 입력이 틀리지 않도록 드롭 다운 버튼(DropdownButton Widget)으로 구현하여 실수를 방지함으로써 입력 검증을 하지 않습니다. 입력한 숫자가 적절하지 않은 오류 메세지를 보여 주고 다시 입력하게 합니다.

4단계 : 숫자와 사칙연산(/,*,-,+)의 입력이 틀리지 않도록 버튼으로 구현하여 입력하는 수식을 상단에 나타나게 한 후 = 버튼을 누르면 계산하게 합니다. 입력한 수식이 적절하지 않은 C(Clear) 버튼을 눌러 다시 입력하게 합니다. 수작업 입력을 배제하여 실수가 방지되나 여전히 수식이 잘못될 위험이 남아 있어서 try~catch 예외처리로 수식의 오류를 잡아 냅니다.

expressions: ^0.2.5 패키지를 사용합니다. pubspec.yaml에 아래와 같이 등록한 후 Pub Get 버튼을 누릅시다.

코드 팩토리의 플러터 프로그래밍 - 10장 만난지 며칠 U&I (240페이지)

프로젝트 이름 : u_and_i
설명 : 하트를 눌러서 처음 만난 날을 설정하면 오늘이 D+몇일인지를 보여 줍니다. 처음으로 iOS의 쿠퍼티노 디자인을 사용해 봅니다.

이미지와 폰트를 저자의 깃허브(https://github.com/codefactory-co/flutter-golden-rabbit-novice-v2.git)에서 다운받아 images와 fonts 폴더에 복사해 넣은 후 pubspec.yaml에 등록 후 Pub Get
이 예제에 폰트를 등록하는 전형적인 pubspec.yaml 설정이 나오고 있음. Regular와 Light 폰트는 weight을 지정하지 않고 있고, Medium과 Bold 폰트는 weight를 각각 500과 700으로 지정하고 있음

GitHub - codefactory-co/flutter-golden-rabbit-novice-v2: Must Have 코드팩토리의 플러터 프로그래밍 3쇄 개정판

Must Have 코드팩토리의 플러터 프로그래밍 3쇄 개정판. Contribute to codefactory-co/flutter-golden-rabbit-novice-v2 development by creating an account on GitHub.

github.com

  # pubspec.yaml의 코드
  assets:
    - images/
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # <https://flutter.dev/to/resolution-aware-images>

  # For details regarding adding assets from package dependencies, see
  # <https://flutter.dev/to/asset-from-package>

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  fonts:
    - family: parisienne
      fonts:
        - asset: fonts/Parisienne-Regular.ttf
    - family: sunflower
      fonts:
        - asset: fonts/Sunflower-Light.ttf
        - asset: fonts/Sunflower-Medium.ttf
          weight: 500
        - asset: fonts/Sunflower-Bold.ttf
          weight: 700

화면을 만들어 봅시다.
Hear Icon을 누르면 쿠퍼티노 날짜 다이어로그가 화면의 하단에 나오도록 해 봅시다. import 'package:flutter/cupertino.dart';로 import하는 showCupertinoDialog() 쿠퍼티노 함수를 사용하여 쉽게 구현할 수 있습니다.

웹프로그래밍(개인 포트폴리오)

학습목표

플러터로 웹프로그래밍을 하는 방법을 이해하고 구현해 봅니다.
개인의 포트폴리오 사이트를 웹으로 구현하여 Github에 배포해 봅니다.

개인 포트폴리오 사이트 개요

플러터 웹프로그램으로 개인 포트폴리오 사이트를 만들어 볼 것 입니다. 아래와 같은 견본 화면들을 참조하여 각자를 소개할 사이트를 설계해 보시기 바랍니다. 여기서의 목적은 플러터로 화면을 만드는 것이 아니라 웹프로그래밍을 하는 것이니 공수를 많이 들이지 말고 개략적으로 만든 후 향후 보완해 가시기 바랍니다.

홈(Home) 페이지의 견본

프로젝트(Project) 페이지의 견본

연락처(Contact) 페이지의 견본

프로젝트 생성 및 설정

my_portfolio 프로젝트를 생성합니다. 플랫폼으로 Web을 꼭 선택합시다.
필요한 이미지들을 images 폴더에 저장합니다. 그리고 pubspec.yaml 파일에 다음과 같이 강조 혹은 주석 처리된 코드와 같이 수정 및 추가합시다.
email_button.png

phone_button.png

  # To add assets to your application, add an assets section, like this:
  assets:                    // 주석 해제
    - images/                // 이미지가 저장된 폴더
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

Web 개발을 위하여 pubspec.yaml 파일에 다음과 같이 강조 및 주석 처리한 코드를 추가합시다.

dependencies:
  flutter:
    sdk: flutter
  flutter_web_plugins:    // 웹 개발을 위한 플러그인
    sdk: flutter          // flutter 플러그인 지정
  cupertino_icons: ^1.0.8

웹프로그램 뼈대 코드 만들기

lib 폴더 하부에 projects_page.dart 파일을 생성하고 다음과 같이 코드합시다.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("연락처 페이지"),
      ),
    );
  }
}

lib 폴더 하부에 contact_page.dart 파일을 생성하고 다음과 같이 코드합시다.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("연락처 페이지"),
      ),
    );
  }
}

main.dart 파일의 코드에서 아래 코드에서 강조 처리된 코드를 수정 혹은 추가합시다.

import 'package:flutter/material.dart';

// 웹프로그램을 개발하기 위한 패키지 import
import 'package:flutter_web_plugins/flutter_web_plugins.dart';

// 프로젝트와 연락처 페이지 import
import 'projects_page.dart';
import 'contact_page.dart';

void main() {
  usePathUrlStrategy();     // 웹방식의 라우팅을 사용하도록 설정
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    /* 플러터 프레임워크가 제공한 코드를 주석 처리하고 웹프로그래밍할 때의 라우팅 방식으로 변경
    return MaterialApp(  
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
    */
    return MaterialApp(
      initialRoute: '/',
      onGenerateRoute: (routeSettings) {
        // ?? 연산자는 앞에 지정된 값이 Null인 경우에 뒤의 값을 사용하도록 하는 역할을 함
        final uri = Uri.parse(routeSettings.name ?? '/');
        final path = uri.path;
        Widget page;
        switch (path) {
          case "/":
            page = MyHomePage();
          case "/projects":
            page = ProjectsPage();
          case "/contact":
            page = ContactPage();
          default:
            return null;
        }
        return PageRouteBuilder(
	        settings: routeSettings,
          pageBuilder: (_, __, ___) => page,
          transitionDuration: Duration.zero,
        );
      },
    );
  }
}

class MyHomePage extends StatefulWidget {
  /* title 속성을 넘기지 않도록 코드를 수정
  const MyHomePage({super.key, required this.title});
  
  final String title;
  */
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  /* 플러터 프레임워크가 제공한 코드를 주석 처리하고 웹의 홈페이지로 변경
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
  */
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("홈 페이지"),
      ),
    );
  }
}

웹프로그램의 뼈대가 되는 코드들을 완성했으니 안드로이드 스튜디오 상단에서 실행할 디바이스로 이뮬레이터를 선택하지 않고 Chrome 혹은 Edge를 선택한 후 앱을 실행합니다.

웹프로그램의 뼈대가 되는 코드들을 완성했으니 안드로이드 스튜디오 상단에서 실행할 디바이스로 이뮬레이터를 선택하지 않고 Chrome 혹은 Edge를 선택한 후 앱을 실행합니다. 그러면 포트 번호가 자동으로 지정되며 ‘/’ 라우트로 지정된 홈 페이지가 나타나는 것을 확인할 수 있습니다.

웹페이지의 주소에 /projects로 지정하면 ‘/projects’ 라우트로 지정된 프로젝트 페이지가 나타나는 것을 확인할 수 있고

웹페이지의 주소에 /contact로 지정하면 ‘/contact’ 라우트로 지정된 연락처 페이지가 나타나는 것을 확인할 수 있습니다.

웹화면의 네비게이션바 만들기

웹프로그래밍할 때 네비게이션바의 역할은 플러터의 앱바를 사용하여 만들수 있는데, 앱바는 홈 페이지와 프로젝트 페이지와 연락처 페이지에 공통적으로 반영되기 때문에 appBar 코드를 함수화하겠습니다. lib 폴더 하단에 common_appbar.dart 파일을 만들어 아래 코드와 같이 AppBar Widget을 반환값으로 가지는 buildAppBar 함수를 만들어 봅시다.

import 'package:flutter/material.dart';

AppBar buildCommonAppBar() {
  return AppBar(
    title: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          "홈",
          style: TextStyle(
            color: Colors.purple,
            fontSize: 16,
            fontWeight: FontWeight.bold, // 선택된 강조 Weight
          ),
        ),
        SizedBox(width: 37),
        Text(
          "프로젝트",
          style: TextStyle(
            color: Colors.grey,
            fontSize: 16,
            fontWeight: FontWeight.normal, // 선택되지 않은 일반 Weight
          ),
        ),
        SizedBox(width: 37),
        Text(
          "연락처",
          style: TextStyle(
            color: Colors.grey,
            fontSize: 16,
            fontWeight: FontWeight.normal, // 선택되지 않은 일반 Weight
          ),
        ),
      ],
    ),
  );
}

그리고 main.dart 파일, projects_page.dart 파일 및 contact_page.dart 파일에 아래 코드에 강조 및 주석 처리된 것과 같이 추가합니다.

// main.dart 파일의 코드
import 'package:flutter/material.dart';

import 'package:flutter_web_plugins/flutter_web_plugins.dart';

import 'projects_page.dart';
import 'contact_page.dart';

// commonAppBar 콤포넌트 import
import 'common_appbar.dart';
... 생략 ...
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: buildCommonAppBar(),   // 공통 AppBar 추가
      body: Center(
        child: Text("홈 페이지"),
      ),
    );
  }
}

// projects_page.dart 파일의 코드
import 'package:flutter/material.dart';

// commonAppBar 콤포넌트 import
import 'common_appbar.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: buildCommonAppBar(),   // 공통 AppBar 추가
      body: Center(
        child: Text("프로젝트 페이지"),
      ),
    );
  }
}

// contact_page.dart 파일의 코드
import 'package:flutter/material.dart';

// commonAppBar 콤포넌트 import
import 'common_appbar.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: buildCommonAppBar(),   // 공통 AppBar 추가
      body: Center(
        child: Text("연락처 페이지"),
      ),
    );
  }
}

그후 앱을 다시 실행해 보면 아래 화면들과 같이 나타납니다.

그런데 화면의 앱바 즉 네비게이션바의 색상이 선택된 페이지와 일치하지 않습니다. 그래서 코드를 아래와 같이 각각 수정해 보겠습니다.

// common_appbar.dart 파일의 코드
import 'package:flutter/material.dart';

// 네비게이션할 페이지들을 열거형으로 정의합니다.
enum NavigationPages {
  home,
  projects,
  contact,
}

// 선택된 페이지를 인자로 받아옴
AppBar buildCommonAppBar(NavigationPages selectedPage) {
  return AppBar(
    title: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          "홈",
          style: TextStyle(
            // 선택된 홈 페이지의 폰트 색상을 보라색으로, 그렇지 않은 경우 회색으로 변경함
            color: selectedPage == NavigationPages.home ? Colors.purple : Colors.grey,
            fontSize: 16,
            // 선택된 홈 페이지의 폰트를 강조하고, 그렇지 않은 경우 일반 두께로 변경함
            fontWeight: selectedPage == NavigationPages.home ? FontWeight.bold : FontWeight.normal, 
          ),
        ),
        SizedBox(width: 37),
        Text(
          "프로젝트",
          style: TextStyle(
            // 선택된 프로젝트 페이지의 폰트 색상을 보라색으로, 그렇지 않은 경우 회색으로 변경함
            color: selectedPage == NavigationPages.projects ? Colors.purple : Colors.grey,
            fontSize: 16,
            // 선택된 프로젝트 페이지의 폰트를 강조하고, 그렇지 않은 경우 일반 두께로 변경함
            fontWeight: selectedPage == NavigationPages.projects ? FontWeight.bold : FontWeight.normal,
          ),
        ),
        SizedBox(width: 37),
        Text(
          "연락처",
          style: TextStyle(
            // 선택된 연락처 페이지의 폰트 색상을 보라색으로, 그렇지 않은 경우 회색으로 변경함
            color: selectedPage == NavigationPages.contact ? Colors.purple : Colors.grey,
            fontSize: 16,
            // 선택된 연락처 페이지의 폰트를 강조하고, 그렇지 않은 경우 일반 두께로 변경함
            fontWeight: selectedPage == NavigationPages.contact ? FontWeight.bold : FontWeight.normal,
          ),
        ),
      ],
    ),
  );
}

// main.dart 파일의 코드
... 생략 ...
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 선택된 홈 페이지를 인자로 넘겨줌
      appBar: buildCommonAppBar(NavigationPages.home),
      body: Center(
        child: Text("홈 페이지"),
      ),
    );
  }
}

// projects_page.dart 파일의 코드
import 'package:flutter/material.dart';

import 'common_appbar.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 선택된 프로젝트 페이지를 인자로 넘겨줌
      appBar: buildCommonAppBar(NavigationPages.projects),
      body: Center(
        child: Text("프로젝트 페이지"),
      ),
    );
  }
}

// contact_page.dart 파일의 코드
import 'package:flutter/material.dart';

import 'common_appbar.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 선택된 연락처 페이지를 인자로 넘겨줌
      appBar: buildCommonAppBar(NavigationPages.contact),
      body: Center(
        child: Text("연락처 페이지"),
      ),
    );
  }
}

이제 네비게이션바에서 선택된 페이지의 색상과 두께가 보라색에 강조된 폰트로 나타나는 것을 확인할 수 있습니다.

네비게이션(화면이동) 기능 만들기

플러터 앱에서 아래 코드와 같이 정의된 웹 방식의 라우팅을 사용하는 경우

Navigator.of(context).pushNamed("/"); 문장으로 홈 페이지로 이동할 수 있고, Navigator.of(context).pushNamed("/projects"); 문장으로 프로젝트 페이지로 이동할 수 있으며, Navigator.of(context).pushNamed("/contact"); 문장으로 연락처 페이지로 이동할 수 있습니다.
그래서 buildCommonAppBar() 함수가 context를 인자로 받아올 수 있게 수정하고 네비게이션바에 위치한 홈, 프로젝트 및 연락처 텍스트 위젯(Text Wdiget)를 클릭할 때 Navigator.pushNamed() 메소드를 사용하여 클릭된 페이지로 이동하도록 수정하여야 합니다.

// common_appbar.dart 파일의 코드
import 'package:flutter/material.dart';

enum NavigationPages {
  home,
  projects,
  contact,
}

// context를 추가적인 인자로 받아옴
AppBar buildCommonAppBar(BuildContext context, NavigationPages selectedPage) {
  return AppBar(
    title: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 클릭하면 홈 페이지로 이동
        GestureDetector(
          onTap: () { Navigator.of(context).pushNamed("/"); },
          child: Text(
            "홈",
            style: TextStyle(
              color: selectedPage == NavigationPages.home ? Colors.purple : Colors.grey,
              fontSize: 16,
              fontWeight: selectedPage == NavigationPages.home ? FontWeight.bold : FontWeight.normal,
            ),
          ),
        ),
        SizedBox(width: 37),
        // 클릭하면 프로젝트 페이지로 이동
        GestureDetector(
          onTap: () { Navigator.of(context).pushNamed("/projects"); },
          child: Text(
            "프로젝트",
            style: TextStyle(
              color: selectedPage == NavigationPages.projects ? Colors.purple : Colors.grey,
              fontSize: 16,
              fontWeight: selectedPage == NavigationPages.projects ? FontWeight.bold : FontWeight.normal,
            ),
          ),
        ),
        SizedBox(width: 37),
        // 클릭하면 연락처 페이지로 이동
        GestureDetector(
          onTap: () { Navigator.of(context).pushNamed("/contact"); },
          child: Text(
            "연락처",
            style: TextStyle(
              color: selectedPage == NavigationPages.contact ? Colors.purple : Colors.grey,
              fontSize: 16,
              fontWeight: selectedPage == NavigationPages.contact ? FontWeight.bold : FontWeight.normal,
            ),
          ),
        ),
      ],
    ),
  );
}

그리고 buildCommonAppBar() 함수를 호출할 때 context를 인자로 넘겨 주도록 수정합니다.

// main.dart 파일의 코드
... 생략 ...
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // context를 추가적인 인자로 넘겨줌
      appBar: buildCommonAppBar(context, NavigationPages.home),
      body: Center(
        child: Text("홈 페이지"),
      ),
    );
  }
}

// projects_page.dart 파일의 코드
import 'package:flutter/material.dart';

import 'common_appbar.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // context를 추가적인 인자로 넘겨줌
      appBar: buildCommonAppBar(context, NavigationPages.projects),
      body: Center(
        child: Text("프로젝트 페이지"),
      ),
    );
  }
}

// contact_page.dart 파일의 코드
import 'package:flutter/material.dart';

import 'common_appbar.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // context를 추가적인 인자로 넘겨줌
      appBar: buildCommonAppBar(context, NavigationPages.contact),
      body: Center(
        child: Text("연락처 페이지"),
      ),
    );
  }
}

프로그램을 실행해 보면 이제 웹브라우저의 주소창에 URL을 입력하는 방식이 아니라 네비게이션바의 텍스트를 클릭하여 페이지간의 이동이 되는 것을 확인할 수 있습니다.

폴더 리팩토링

lib 폴더 하부를 보면 소스 코드 파일들이 종류에 상관없이 섞여 있습니다.

lib 폴더 하부에 pages 폴더와 widgets 폴더를 만들어 소스코드를 종류별로 리팩토링(Refactoring)하여 분류해 둡시다.

폴더를 분류한 후 소스 코드에서 해당 파일을 참조하는 코드들도 분류된 폴더에 맞게 자동으로 변경되는 것을 확인해 보기 바랍니다.

[실습] 자신의 경력을 소개하는 my_portfolio 웹을 완성하세요.

시간을 많이 들이지 말고 간략히 개발했다가 향후 개선해 가시기 바랍니다.

GitHub로 포트폴리오 웹프로그램 배포

github.com로 이동하여 로긴합니다. 계정이 없으면한 후 로긴합니다.
리포지터리 이름을 깃헙아이디.github.io(예: yongjaeahn.github.io)와 같이 부여하여 Public Repository를 만들어줍니다.

안드로이드 스튜디오 터미널 창에서 flutter build web 명령어를 수행합니다. 명령어 수행이 완료되면 배포할 웹프로그램의 폴더가 build 폴더 하단에 web 폴더로 생성되어 있는 것을 확인할 수 있습니다.

앞에서 생성한 깃헙아이디.github.io 리포지토리로 이동하여 uploading an existing file 메뉴를 클릭합니다.

web 폴더 내에 있는 파일들을 드래그하여 업로드 합니다.

업로드가 끝나면 화면 하단의 Commit changes를 클릭합니다.

리포지터리의 상단에서 Settings 메뉴를 클릭한 후 좌측 메뉴에서 Pages를 클릭한 후 https://yongjaeahn.github.io 와 같은 형태의 웹사이트 링크나 Visit Site 버튼을 클릭하여 GitHub에 배포된 포트폴리오 웹사이트를 방문할 수 있습니다.

GitHub에 배포되는 포트폴리오 웹사이트는 개인이나 팀이 자신의 경력, 프로젝트, 기술 역량을 효과적으로 보여주기 위한 디지털 공간입니다. 이 사이트는 여러 가지 용도로 활용되며, 특히 개발자나 디자이너에게 매우 유용합니다.

Github에 공개된 개인 프로필 사례 : https://rodrigob.github.io

Rodrigo Benenson github page

M. Cordts, M. Omran, S. Ramos, T. Scharwächter, M. Enzweiler, R. Benenson, U. Franke, , B. Schiele Presented at CVPR workshop (unpublished) Chef's recommendation @inproceedings{Cordts2015Cvprw, title={The Cityscapes Dataset}, author={Cordts, Marius and Om

rodrigob.github.io

참고 문헌

[논문]

없음

[보고서]

없음

[URL]

없음

문의사항

[기상학/프로그래밍 언어]

sangho.lee.1990@gmail.com

[해양학/천문학/빅데이터]

saimang0804@gmail.com

[Flutter] 쉽게 배우는 플러터 앱 개발 실무 05강

shlee1990 — Sat, 11 Jan 2025 10:23:24 +0900

정보

업무명 : [Flutter] 쉽게 배우는 플러터 앱 개발 실무 05강
작성자 : 이상호
작성일 : 2025.01.11
설 명 :
수정이력 :

공유 파일

원본 파일

flutter-golden-rabbit-novice-v2-main.zip

drive.google.com

작업 파일

20250111_first_flutter.zip

drive.google.com

Dart 언어 III

학습목표

Python, Java, Javascript로 배운 프로그래밍의 기본 원리와 개념과 의미를 기억해 봅니다.
이미 알고 있는 프로그래밍 지식을 확장하여 Dart 언어를 이해합니다.

Dart 객체 지향 프로그래밍

객체지향이란?

클래스란?

클래스 만들기

멤버 변수(Member Variable)은 객체 내에 정의된 변수로, 객체의 상태나 데이터를 저장하는 데 사용되어 객체의 특징이나 특성을 나타내는 것으로 흔히 속성(Property)라고 부릅니다.

객체의 기능을 나타내는 메소드(Method)는 객체 내에 정의된 함수로, 멤버 함수(Member Function)로 볼 수 있습니다.

생성자(Constructor)는 객체의 데이터를 초기화하는 일을 해 줍니다. 변수에 값이 저장되어 있어야 프로그램이 수행되듯이 객체에도 변수에 값이 있어서 그 값들을 기반으로 특정한 기능을 수행할 수있습니다.

객체 만들기

Person("Kildong", 10)와 같이 생성자 파라메터 순서에 맞게 값을 넣어 변수를 만들듯이 객체를 만듭니다. boy.name 혹은 boy.age와 같이 객체이름.멤버변수의 형태로 호출하여 사용할 수 있습니다.

메소드 호출

위치 파라메터 (Positional Parameter)

이름있는 파라메터(Named Parameter)

파라메터에 이름을 붙일 수는 없을까요? 생성자 정의시 Person({required this.name, required this.age})와 같이 인자들을 중괄호({})로 감싸고 인자의 앞에 required 키워드를 붙입니다. 그리고 객체를 만들때 마치 딕셔너리 혹은 맵을 만들때와 같이 Person(name: "Kildong", age: 10)의 형식으로 파라메터의 이름 뒤에 콜론(:)을 찍은 후 인자에 넘겨줄 값을 기술합니다.

생략가능한 파라메터(Optional Parameter)

this.age=1과 같이 이름있는 파라메터에 required 키워드를 생략하고 초기값을 부여하면 생략가능한 파라메터를 만들수 있습니다. Person(name: "Kildong")와 같이 인자에 값을 넘기는 것을 생략하면 초기값이 대신 사용됩니다.

int? age와 같이 파라메터를 Nullable 변수로 정의하고 생략가능한 파라메터에 초기값을 지정하지 않으면 초기값대신 null 값으로 지정됩니다.

예제. 위의 코드를 위치 파라메터와 이름있는 파라메터를 섞어서 코딩해 보세요.

캡슐화(Encapsulation)/정보은폐(Information Hiding)

외부 공개(public)와 외부 비공개(private)

일반적으로 외부 공개(public)와 외부 비공개(private)는 클래스 내부에서만 사용되는가 혹은 클래스 외부에서도 사용될 수 있는가를 말하는데 Dart는 같은 파일에서 사용이 가능한 것을 의미합니다. Dart는 다른 언어와 달리 private나 public과 같은 키워드를 제공하지 않으며 변수나 함수의 이름에 _(언더바)를 붙이면 외부 비공개(private)로 인식하고 그렇지 않으면 외부 공개(public)로 인식합니다. Python과 같이 접근 제어를 강제하지 않는 언어도 있지만, 특별히 외부에 공개하지 않을 변수나 함수를 외부 비공개로 만드는 것은 여전히 클래스간 그리고 파일간 변수의 간섭을 차단하기 때문에 안전한 코딩 습관이 됩니다.

상속(Inheritance)

믹스인(Mix In)

추상화(Abstraction)

클래스(Class)가 붕어빵틀이고 객체(Object)는 붕어빵이라는 비유에서 따온 추상화(Abstraction)가 미완의 붕어빵틀이라는 비유는 적절하지 않으며, 추상화(Abstraction)는 철학, 수학 및 과학분야에서 유사 이래로 꾸준히 사용되어온 "본질적인 특성을 도출하여 단순화”하는 것을 의미하는 것으로 개념화(Conceptualization)에 가까운 표현입니다.

예제. 위의 코드에서 클래스의 이름을 Circle로 변경하고, Shape 추상 클래스를 상속받아 Rectangle 클래스를 만들고 사각형의 면적을 구하는 코드로 수정하세요.
추상 클래스(Abstract Class)를 개념적인 비행기에 비유한다면, 클래스(Class)는 설계된 보잉 747에 비유할 수 있고, 객체(Object)는 제작된 보잉 747 비행기 자체에 비유할 수 있습니다.
Instructor Note : 클래스와 객체에 대하여 배웠으니 이제 Flutter가 기본적으로 제공하는 코드에서 클래스가 정의된 형태를 살펴보며 이해해 볼 것

실습 - 음악 밴드 만들기

현대식 프로그래밍 언어의 공통적 특징

절차적 프로그래밍 (Procedural Programming)

프로그램 문장을 순서대로 배치하여 코드로 문제를 해결해가는 방식입니다. 변수의 값을 바꾸는 예제로 각 언어가 어떻게 공통적인 코드 형태를 가지는지 확인해 보겠습니다. 섭섭하겠지만 코드를 실행해 보기 어려운 JavaScript는 예를 들지 않겠습니다.

// Dart 코드
void main() {
  String a = "첫번째 문자열";
  String b = "두번째 문자열";
  print("a : " + a + ", b : " + b);

  String temp;
  temp = a;
  a = b;
  b = temp;
  print("a : " + a + ", b : " + b);
}

Python은 변수의 자료형을 지정하지 않아도 변수에 값을 할당할 때 할당되는 값의 자료형에 맞게 자동으로 변수의 자료형이 결정됩니다. 이는 코딩의 생산성을 높여 주나 오류 해결을 어렵게 합니다.

# Python 코드  
a = "첫번째 값"
b = "두번째 값"
print("a : " + a + ", b : " + b)

temp = a
a = b
b = temp
print("a : " + a + ", b : " + b)

// Java 코드
package com.example.demo_maven_mybatis;

public class Test {
    public static void main(String[] args) {
        String a = "첫번째 값";
        String b = "두번째 값";
        System.out.println("a : " + a + ", b : " + b);

        String temp;
        temp = a;
        a = b;
        b = temp;
        System.out.println("a : " + a + ", b : " + b);
    }
}

프로그램 문장의 순서를 논리에 맞추어 나열하는 것이 절차적 프로그래밍의 핵심입니다. 필요에 따라 if 문장으로 선택적 구조, for나 while 문장으로 반복적 구조를 구현할 수 있습니다.

객체지향 프로그래밍 (Object Oriented Programming)

객체지향프로그래밍은 변수와 메소드를 객체안에 독립적으로 배치함으로써 코드의 독립성과 재활용성을 높여 복잡도가 높은 프로그램을 개발할 수 있게 해 줍니다. 간단한 객체를 만들어 반복하여 사용해 보겠습니다.

// Dart 코드
class Car {         // 클래스 정의
  String brand;     // 필드 (속성)
  String model;
  int year;

  Car(this.brand, this.model, this.year);   // 생성자

  void displayInfo() {                      // 메서드 (동작)
    print('Car: $brand $model, Year: $year');
  }
}

void main() {
  Car yourCar = Car('Tesla', 'Model S', 2023);  // Car 객체 생성
  yourCar.displayInfo();                        // Car 객체의 메서드 호출

  Car myCar = Car('기아', 'K5 Hybrid', 2020);    // Car 객체 생성
  myCar.displayInfo();                           // Car 객체의 메서드 호출
}

# Python 코드  
class Car:         # 클래스 정의
    def __init__(self, brand, model, year):    # 생성자
        self.brand = brand                     # 필드 (속성)
        self.model = model
        self.year = year

    def display_info(self):                    # 메서드 (동작)
        print(f'Car: {self.brand} {self.model}, Year: {self.year}')

your_car = Car('Tesla', 'Model S', 2023)       # Car 객체 생성
your_car.display_info()                        # Car 객체의 메서드 호출

my_car = Car('기아', 'K5 Hybrid', 2020)        # Car 객체 생성
my_car.display_info()                          # Car 객체의 메서드 호출

// Java 코드
package com.example.demo_maven_mybatis;

class Car {                  // 클래스 정의
    private String brand;    // 필드 (속성)
    private String model;
    private int year;

    public Car(String brand, String model, int year) {  // 생성자
        this.brand = brand;
        this.model = model;
        this.year = year;
    }

    public void displayInfo() {                         // 메서드 (동작)
        System.out.println("Car: " + brand + " " + model + ", Year: " + year);
    }
}

public class Test {          // 메인 클래스
    public static void main(String[] args) {
        Car yourCar = new Car("Tesla", "Model S", 2023);  // Car 객체 생성
        yourCar.displayInfo();                            // Car 객체의 메서드 호출

        Car myCar = new Car("기아", "K5 Hybrid", 2020);   // Car 객체 생성
        myCar.displayInfo();                              // Car 객체의 메서드 호출
    }
}

처음에는 객체를 만들어 사용하기보다 만들어져서 제공되는 객체의 활용에 초점을 맞추면 쉽게 객체지향프로그래밍에 적응해 갈 수 있습니다. 실제 업무 현장에서도 객체를 만들어 사용하는 것보다 만들어진 객체를 사용하는 경우가 더 많습니다. 제공되는 객체의 속성 변수와 메소드가 어떤 것들이 있고 어떤 역할을 하는지를 이해하고 사용하는 것이 객체지향 프로그래밍의 핵심입니다.
객체를 직접 만들어 사용하는 것은 쉽지 않은데 많은 초보자들이 처음부터 객체를 만드는 기술을 배우기 위하여 Java와 Spring을 어려워하는 이유가 됩니다.

함수형 프로그래밍 (Functional Programming)

함수형 프로그래밍은 코드의 가독성, 유지보수성, 병렬 처리 등을 향상시키는 다양한 장점을 제공합니다. 최근에는 이름이 없는 한줄 함수인 람다 함수를 사용하여 코딩의 편의성과 간결성을 크게 향상시키고 있습니다. 리스트 변수에 2개의 간단한 함수를 적용하는 예를 들어 보겠습니다.
Dart언어는 JavaScript의 var이나 let의 경우와 같이 자료형을 명시적으로 지정하지 않으면 할당되는 값에 의해 자료형이 결정되는 var 키워드를 가지고 있습니다.

// Dart 코드
int addTen(int number) {            // 일반 함수 정의
  return number + 10;
}

void main() {
  var numbers = [1, 2, 3, 4, 5];

  var adds = numbers.map(addTen);                  // 일반 함수 적용
  print(adds);

  adds = numbers.map((num) { return num + 10; });  // 익명 함수 적용
  print(adds);

  adds = numbers.map((num) => num + 10);           // 람다 함수 적용
  print(adds);
}

# Python 코드   
def add_ten(number):        # 일반 함수 정의
    return number + 10

numbers = [1, 2, 3, 4, 5]
    
adds = list(map(add_ten, numbers))                  # 일반 함수 적용
print(adds)
    
squares = list(map(lambda num: num * num, numbers)) # 람다 함수 적용 / 익명 함수 적용
print(squares)

함수형 프로그래밍에서 가장 이해하기 어려운 것이 람다함수입니다. 기호도 익숙하지 않고 언듯 암호처럼 보이지만 현대의 프로그래밍 언어들은 대부분 함수형 프로그래밍과 람다함수를 제공하니 꼭 위의 코드 형태를 기억하고 있어야 합니다.

선언적 프로그래밍 (Declarative Programming)

앞에서 설명한 절차적 프로그래밍, 객체지향 프로그래밍 및 함수형 프로그래밍 기법을 모두 사용하여도 복잡도가 매우 높은 프로그래밍을 하는 경우에는 한계에 부딛힙니다. 이런 어려움을 간단하게 해결해 주는 프로그래밍 기법이 선언적 프로그래밍입니다.
어노테이션(Annotation)이나 데코레이터(Decorator)라는 메타 데이터 태그를 클래스, 함수, 또는 변수에 붙이면, 프레임워크나 라이브러리가 이를 읽어 자동으로 특정 기능을 수행하도록 설정할 수 있습니다. 이로 인해 프로그래머는 수동으로 많은 코드를 작성하지 않고도 원하는 기능을 구현할 수 있습니다.
어노테이션(Annotation)이나 데코레이터(Decorator)는 프로그래밍 언어마다 사용하는 프레임워크마다 많이 다르기 때문에 공통된 예를 들지 않고 사용의 형태만 간단히 예를 들겠습니다. 따라서 위에서 예를 든 코드들과 달리 실행해 볼 수 없습니다.

// Dart 코드
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

# Python 코드   
from flask import Flask, request, json

app = Flask(__name__)

@app.route('/receive-data', methods=['POST'])
def receive_data():
    received_data = request.get_json()

// Java 코드
package com.example.demo_maven_mybatis.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/sample")
public class SampleController {
    @RequestMapping("/aaa")
    public void aaa() {
        System.out.println("@RequestMapping : /sample/aaa");
    }

    @RequestMapping("/bbb")
    public void bbb() {
        System.out.println("@RequestMapping : /sample/bbb");
    }
}

선언적 프로그래밍은 매우 강력하지만 프로그래머의 통제 범위를 벗어나 있기 때문에 반드시 해당 프로그래밍 언어나 프레임워크의 지침대로 사용해야 합니다. 그리고 프레임워크나 라이브러리가 이를 읽어 자동으로 특정 기능을 수행하도록 설정하기 때문에 오류가 발생할 경우 원인을 찾기가 매우 어렵습니다. 그러나 이제는 선언적 프로그래밍을 모르면 코딩을 할 수 없는 시대가 되었습니다. 오류가 발생한다면 혹은 원하는대로 동작하지 않는다면 인터넷 검색과 생성형 AI의 도움 외에 이전에 오류를 경험하고 해결한 경험자의 도움이 필요할지도 모릅니다.

상태 관리

학습목표

프로그램의 상태(State)에 대하여 이해합니다.
StatelessWidget과 StatefulWidget의 차이와 언제 어떤 Widget을 적용하는지 이해합니다.
StatefulWidget에서 변수에 값이 변경될 때 상태 변경을 Widget에 알려 주는 이유와 방법을 이해합니다.
StatefulWidget에서만 동작하는 BottomNavigationBar Widget을 사용하여 화면 이동을 구현해 봅니다.

State란?

프로그램의 상태는 프로그램의 실행 과정에서 달라지는 변수들의 현재 값들을 의미합니다. 상태는 프로그램의 동작과 연관되며, 프로그램의 목표는 특정 상태에 도달하는 것입니다. 예를 들어, 사용자의 로그인 여부, 장바구니에 담긴 상품 목록, 또는 게시글에 달린 댓글 수 등이 프로그램의 상태가 될 수 있습니다. 이러한 상태들은 프로그램의 흐름에 따라 변하며, 이를 효과적으로 관리하는 것이 중요한 과제입니다.
상태에 대한 논의를 Widget으로 확장해 보겠습니다. navigation 프로젝트에서 만들었던 MySecondPage와 MyThirdPage 화면 Widget은 상태가 있을까요? 없습니다. 항상 고정된 화면이 나타나니까요.

그러면 first_flutter 프로젝트에서 Flutter 프레임워크가 자동으로 만들었던 MyHomePage 화면 Widget은 상태가 있을까요? 있습니다. 우측 하단에 위치한 버튼을 누르면 숫자가 1씩 증가하니까요.

안드로이드 스튜디오 편집 화면에서 stless 코드 조각(Code Snippet)으로 Widget을 자동 생성하면

아래 화면과 같이 StatelessWidget 클래스를 상속한(extends) 객체가 1개로 구성된 Widget이 만들어 지는데 이 Widget이 상태가 없는 상수 형태의 Widget입니다.

안드로이드 스튜디오 편집 화면에서 stful 코드 조각(Code Snippet)으로 Widget을 자동 생성하면

아래 화면과 같이 StatefulWidget 클래스를 상속한(extends) 객체가 2개로 구성된 Widget이 만들어지는데 이것이 상태가 있는 변수 형태의 Widget입니다.

Python은 상태가 없는 변수인 상수의 개념이 없고 상태가 있는 변수인 일반 변수만 있는데 Flutter도 상태가 있는 Widget 한가지 방식으로 통일하면 좋을텐데 도대체 왜 이러는걸까요??? 그 이유는 스마트폰이 성능이 비교적 낮은 장비라는데에 있습니다.
const나 final 키워드를 사용해서 상태가 있는 변수가 아닌 상태가 없는 상수로 만들어 놓으면 스마트폰에 부하를 덜 걸게 되어 성능이 향상되는 것처럼, 상태가 있는 StatefulWidget을 상속하여 사용하지 않고 상태가 없는 StatelessWidget을 상속하여 사용해도 마찬가지로 앱의 성능이 향상됩니다.

StatefulWidget에서 상태를 바꾸는 방법

또 다시 Flutter 프레임워크가 기본적으로 제공했던 코드를 소환하겠습니다.

위의 코드를 보면 int _counter = 0;로 변수가 하나 정의되어 있습니다. 앱 프로그램이 아닌 일반적인 프로그램이라면 _counter++; 문장으로 프로그램의 상태가 변경될 것입니다. 그러나 우리는 Flutter 앱 프로그램을 사용하고 있습니다. Flutter 앱 프로그램은 변수의 값이 바뀌어도 화면을 그에 맞게 다시 그려주지 않으면 우리 눈에 바뀐 변수이 값을 보여 줄 수 없습니다. 그렇게 하려면 바뀐 변수의 값을 보여 주기 위하여 화면을 그려주는 아래 화면과 같은 build() 메소드가 다시 수행되어야 합니다. 변수가 변했으니 화면을 다시 그리라고 StatefulWidget에 신호를 보내주는 함수가 setState() 함수입니다.
이제는 그 동안 사용하기만 해 왔던 build() 메소드에 대하여 말할 수 있습니다. 사용할 Widget으로 이동하면 그 Widget의 build() 메소드가 수행되어 화면을 그립니다. 이때 화면에 대한 정보는 context에 들어 있습니다. 반환값은 Widget인데 그래서 build() 메소드는 return 문장을 사용하여 그리고 싶은 Widget 반환하는 것입니다.

StatefulWidget의 경우 StatelessWidget에서 한번만 수행되던 build() 메소드가 Widget의 상태가 변할 때마다 다시 수행되는 것입니다.

예제. first_flutter 프로젝트의 build 함수의 하단에 print(”build 함수가 수행됩니다.”); 문장을 추가하기 바랍니다. 그리고 _incrementCounter() 함수에서 setState() 함수를 주석 처리한 후 _counter++; 문장만 남겨 놓은 뒤에 + 버튼을 클릭하며 화면상의 숫자가 변화하여 나타나는지와 안드로이드 스튜디오의 하단에 “build 함수가 수행됩니다.” 메세지가 출력되는지 관찰해 보기 바랍니다. 다시 주석 처리를 원복한 후 + 버튼을 클릭하며 같은 방법으로 관찰해 보기 바랍니다. 그러면 Flutter의 상태 관리의 의미를 이해하게 될 것 입니다.
Widget의 상태가 변경될 때 반복수행하는 build() 메소드와 함께 Widget 생성시 한번만 수행되는 initState() 메소드와 Widget 소멸시 한번만 수행되는 dispose() 메소드의 존재도 알고 있어야 합니다. 필요시 build() 메소드를 @override하여 사용했듯이 initState() 메소드와 dispose() 메소드를 @override하여 사용하기 바랍니다.

엄밀하게 따지면 Flutter의 상태관리는 아래 화면과 같은 복잡한 구조를 가지는데 자주 사용되는 것만 떼어서 생각하면 위의 2개의 화면과 같이 단순화하여 이해하는 것으로 시작하면 좋습니다.

Flutter 프레임워크 코드 분석 II

이제 상태관리까지 이해하여 Dart와 Flutter의 전반적인 내역들을 알게 되었으니 Flutter 프레임워크가 만들어준 코드를 분석해 봅시다. 이번에는 큰 흐름에 맞추어 이해하는 단계를 넘어 세부적인 사항까지 집중하여 이해해 봅시다.
Instructor Note : 아래의 코드를 second_flutter 프로젝트로 만들어 전체적으로 리뷰해 볼 것. TRY THIS로 표기된 것을 주석대로 바꾸며 프레임워크가 제공한 코드를 사용할 때의 이점을 느껴볼 것.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // TRY THIS: Try running your application with "flutter run". You'll see
        // the application has a purple toolbar. Then, without quitting the app,
        // try changing the seedColor in the colorScheme below to Colors.green
        // and then invoke "hot reload" (save your changes or press the "hot
        // reload" button in a Flutter-supported IDE, or press "r" if you used
        // the command line to start the app).
        //
        // Notice that the counter didn't reset back to zero; the application
        // state is not lost during the reload. To reset the state, use hot
        // restart instead.
        //
        // This works for code too, not just values: Most code changes can be
        // tested with just a hot reload.
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // TRY THIS: Try changing the color here to a specific color (to
        // Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
        // change color while the other colors stay the same.
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          //
          // TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint"
          // action in the IDE, or press "p" in the console), to see the
          // wireframe for each widget.
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

BottomNavigationBar를 사용한 화면 이동

이제 Widget의 상태에 대하여 이해를 했으니 StatefulWidget으로 동작하는 몇가지 유용한 Widget들을 사용해 보겠습니다.
먼저 bottom_navigation_bar 프로젝트를 만듭시다.
Flutter가 제공해준 main.dart 파일의 _MyHomePageState 클래스로 이동하여 Scaffold Widget에 floatingActionButton 속성을 지정하는 코드를 삭제하고, bottomNavigationBar 속성 코드를 추가합니다.

// 변경후 코드
... 생략 ...
class _MyHomePageState extends State<MyHomePage> {
... 중략 ...
      /*
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
      */
      bottomNavigationBar: BottomNavigationBar(    // bottomNavigationBar 시작
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.looks_two, color: Colors.blue),
              label: "2nd Page",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.looks_3, color: Colors.blue),
            label: "3rd Page",
          ),
        ],
      ),                                           // bottomNavigationBar의 끝
    );

프로젝트를 실행해 보면 왼쪽 화면과 같이 FloatingActionButton으로 나타나던 것이 오른쪽 화면과 같이 하단에 네비게이션(Navigation,화면 이동)을 위한 숫자 버튼과 하단에 레이블이 추가된 형태 즉, BottomNavigationBar로 나타나는 것을 확인할 수 있습니다. 프로그램의 변경이 Hot Reload할 수준을 넘어섰기 때문에 재시작해 주어야 합니다.

이제 화면 하단에 숫자로된 네비게이션 버튼이 눌릴 때마다 나타나는 변경을 화면에 표시하도록 수정해 봅시다. 아래의 코드에서 눈여겨 보아야 할 것은 void _incrementCounter()에는 인자가 없는데 새로 만들어진 _onBottomNavigationItemTapped(index)에는 index라는 인자가 되었다는 차이인데 이것은 Flutter 프레임워크의 BottomNavigationBar가 이벤트 처리기에 index 정보를 인자로 자동으로 넘겨 주게 되어 있기 때문에 생긴 변경입니다. Flutter 프레임워크 내부적으로 처리하는 동작이기 때문에 다른 프로그램의 코드를 보고 코딩하는 방법을 알아 내야 합니다.

// 변경후 코드
class _MyHomePageState extends State<MyHomePage> {
  /* _counter 변수 정의와 이벤트 처리기 삭제
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }
  */
  int _selectedNaviIndex = 0;      // _selectedNaviIndex 변수 정의와 이벤트 핸들러 시작

  _onBottomNavigationItemTapped(index) {
    setState(() {
      _selectedNaviIndex = index;
    });
  }                                // _selectedNaviIndex 변수 정의와 이벤트 핸들러의 끝

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              //'You have pushed the button this many times:',
              '선택한 페이지의 Index :',    // 변경된 코드
            ),
            Text(
              //'$_counter',
              '$_selectedNaviIndex',        // 변경된 코드
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: _onBottomNavigationItemTapped,    // 추가된 코드
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.looks_two, color: Colors.blue),
              label: "2nd Page",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.looks_3, color: Colors.blue),
            label: "3rd Page",
        ],
      ),
    );
  }
}

이제 프로젝트를 실행하고 하단의 숫자 버튼을 클릭하면 클릭되는 항목에 따라 Index의 값이 0과 1로 변경되는 것을 확인할 수 있습니다. 0이 BottomNavigationBar 첫번째 항목의 Index이고, 1이 두번째 항목의 Index입니다. 그래서 아래의 왼쪽 화면이 숫자 2 버튼을 누른 경우의 실행화면이고, 오른쪽 화면이 숫자 3 버튼을 누른 경우의 실행화면인 것을 알 수 있습니다.

항목이 2개인 BottomNavigationBar가 만들어졌으니 body에 사용할 페이지 2개가 필요합니다. 따로 만들지 않고 navigation 프로젝트에서 만들어 놓은 MySecondPage와 MyThirdPage를 복사해 사용하도록 하겠습니다.
navigation 프로젝트에서 my_second_page.dart 파일과 my_third_page.dart 파일을 복사(Copy)하여

bottom_navigation_bar 프로젝트의 lib 폴더에 붙여넣습니다 (Paste).

다른 프로젝트에서 소스 코드를 복사해 놓았으니 혹시 오류가 발생하지는 않을까요?
와!!! my_second_page.dart 파일에서도 my_third_page.dart 파일에서도 오류인 것을 알려 주는 빨간색이 보이지 않습니다. 이유는 프로젝트 내부의 dart 파일을 import할 때에 import 'my_third_page.dart'; 문장과 같이 상대경로를 사용하여 import했기 때문입니다.

그럼 절대 경로를 사용한다면 어떤 일이 생길까요? navigation 프로젝트에 my_second_page.dart 파일을 복사한 후 my_fourth_page.dart 파일을 만들어

상대경로인 import 'my_third_page.dart'; 문장을 주석처리한 후 의도적으로 소스 코드에 import 'package:navigation/my_third_page.dart';와 같은 절대 경로 import 문장으로 변경한 후 동일한 방식으로 my_fourth_page.dart 파일을 bottom_navigation_bar 프로젝트의 lib 폴더로 복사해 보겠습니다.

그랬더니 이런 아래 화면과 같이 오류가 발생합니다. 당연하지요. 절대경로에는 package:navigation/와 같은 패키지 이름이 포함되어 있거든요.

상대 경로는 개발 환경과 운영 환경에 독립적이라는 것을 코드 조각과 실행 화면으로 보여 드려 보았습니다. 그러면 앞으로 불필요한 파일에 의하여 오류가 파생되는 것을 막기 위하여 두 프로젝트에서 my_fourth_page.dart 파일을 삭제합시다.
그러면 파일들을 복사해 온 후 프로그램이 정상적으로 동작하는지 실행하여 확인해 봅시다. 정상적으로 잘 동작합니다. my_second_page.dart 파일과 my_third_page.dart 파일을 복사해 놓았지만 main.dart 파일과 연결되는 코드가 없으니 기존 화면이 그대로 나타나게 됩니다.

이제 선택된 Index가 0이면 MySecondPage를 보여 주고, Index가 1이면 MyThirdPage를 보여 주도록 코드를 수정해 봅시다.
우선 main.dart 파일의 _MyHomePageState 클래스에서 아래 코드와 같이 변경해 봅시다.

// 변경후 코드
... 생략 ...
      /*
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              //'You have pushed the button this many times:',
              '선택한 페이지의 Index :',
            ),
            Text(
              //'$_counter',
              '$_selectedNaviIndex',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      */
      body: MyThirdPage(),
... 생략 ...

그리고 실행해 보면 어떤 BottomNavigationBarItem을 누르면 항상 세번째 페이지가 나타납니다.

이 문제를 해결하기 위해서는 호출할 화면의 리스트를 만들고 앞에서 클릭한 BottomNavigationBarItem의 인덱스를 저장해 놓은 _selectedNaviIndex 변수를 사용하여 선택된 화면을 보여 주게 코드를 보완하여야 하겠습니다.

// 변경후 코드
class _MyHomePageState extends State<MyHomePage> {
  var pages = [ MySecondPage(id: 320811, password: "mypassword"),
                MyThirdPage()
              ];           // body에 사용할 페이지들의 리스트 정의

  int _selectedNaviIndex = 0;

  _onBottomNavigationItemTapped(index) {
    setState(() {
      _selectedNaviIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      //body: MyThirdPage(),
      body: pages[_selectedNaviIndex],   // pages 리스트에서 선택된 화면을 출력
      bottomNavigationBar: BottomNavigationBar(
        onTap: _onBottomNavigationItemTapped,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.looks_two, color: Colors.blue),
            label: "2nd Page",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.looks_3, color: Colors.blue),
            label: "3rd Page",
          ),
        ],
      ),
    );
  }
}

실행시키면 화면의 형태가 각각 오른쪽과 같습니다.

Instructor Note : 코드 전체를 완성하여 실행화면을 보여 주지 말고 실행화면이 달라지는 것을 보여줄 수 있다면 최대한 단계적으로 보여줄 것 → 주석이 부여된 순서로 보여주면 됨
BottomNavigationBar가 보이는 형태를 조금만 다듬어 보겠습니다.

// 변경후 코드
  bottomNavigationBar: BottomNavigationBar(
    showSelectedLabels: false,           // Label 제거
    showUnselectedLabels: false,

    currentIndex: _selectedNaviIndex,    // 선택된 Color와 선택되지 않은 Color 구분
    selectedItemColor: Colors.blue,      // Icon Widget에서 color 속성을 제거
    unselectedItemColor: Colors.grey,

    // 배경색을 AppBar에서 복사하여 AppBar와 통일
    backgroundColor: Theme.of(context).colorScheme.inversePrimary, 

    onTap: _onBottomNavigationItemTapped,
    items: [
      BottomNavigationBarItem(
          //icon: Icon(Icons.looks_two, color: Colors.blue),  // color 속성 삭제
          icon: Icon(Icons.looks_two),
          label: "2nd Page",
      ),
      BottomNavigationBarItem(
        //icon: Icon(Icons.looks_3, color: Colors.blue),      // color 속성 삭제
        icon: Icon(Icons.looks_3),
        label: "3rd Page",
      ),
    ],
  ),

실행해 보니 오른쪽 화면과 같이 나타납니다.

Scaffold Widget의 bottomNavigationBar 속성으로 지정할 수 있는 객체로는 BottomNavigationBar Widget 외에 TabBar Widget을 이용하는 화면 이동 기법도 있으니 필요할 때 필요한 만큼 찾아서 사용하기 바랍니다.

BottomNavigationBar class - material library - Dart API

A material widget that's displayed at the bottom of an app for selecting among a small number of views, typically between three and five. There is an updated version of this component, NavigationBar, that's preferred for new applications and applications t

api.flutter.dev

TabBar class - material library - Dart API

A Material Design primary tab bar. Primary tabs are placed at the top of the content pane under a top app bar. They display the main content destinations. Typically created as the AppBar.bottom part of an AppBar and in conjunction with a TabBarView. If a T

api.flutter.dev

기본 Widget II

학습목표

ListView Widget의 사용법과 사용시의 이점을 이해하고 구현해 봅니다.
그외 알아두면 유용한 Widget들이 어떤 것들이 있는지 알아봅니다.
if 조건 표현식, 삼항 연산자 및 for 반복 표현식을 활용하여 Widget을 구현하는 방법을 이해하고 구현해 봅니다.

ListView Widget

Simple ListView

ListView는 화면과 같이 데이터를 반복하여 보여주는 스마트폰 앱 개발에서 매우 빈번하게 사용되는 Widget입니다.

위와 같은 형태의 ListView를 만들어 볼텐데 우선 간단하게 Text로 구성된 SimpleListViewPage를 만들어 보겠습니다.
simple_listview_page.dart 파일을 만들어 SimpleListViewPage Stateless Widget을 만듭시다.

// simple_listview_page.dart 파일의 SimpleListViewPage 클래스 코드
import 'package:flutter/material.dart';               // 코드 혹은 복사

class SimpleListviewPage extends StatelessWidget {    // stl 코드 조각으로 생성
  const SimpleListviewPage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

그리고 main.dart 파일로 이동하여 아래 화면과 같이 SimpleListViewPage를 pages 리스트 변수에 등록합니다. 테스트하기 쉽도록 첫번째 페이지로 등록하겠습니다.

그리고 파일의 하단부로 이동하여 첫번째 BottomNavigationBarItem으로 등록합니다.

그리고 프로그램을 다시 실행해 보았습니다. 첫번째 페이지로 등록한 SimpleListViewPage가 잘 나타납니다. 프로그램의 변경이 Hot Reload할 수준을 넘어섰기 때문에 재시작해 주어야 합니다.

화면이 정상적으로 나타나는 것을 확인했으니 이제 Scaffold Widget과 ListView.builder() 생성자 메소드를 이용하여 ListView를 만들어 보겠습니다.

// simple_listview_page.dart 파일의 SimpleListViewPage 클래스 코드
import 'package:flutter/material.dart';

class SimpleListViewPage extends StatelessWidget {
  //const SimpleListViewPage({super.key});
  SimpleListViewPage({super.key});              // const 키워드 삭제

  var strList = ["1번째 항목","2번째 항목","3번째 항목","4번째 항목","5번째 항목",
                 "6번째 항목","7번째 항목","8번째 항목","9번째 항목","10번째 항목",
                 "11번째 항목","12번째 항목","13번째 항목","14번째 항목","15번째 항목",
                 "16번째 항목","17번째 항목","18번째 항목","19번째 항목","20번째 항목"
                ];    // ListView에 보여줄 문자열 리스트 생성

  @override
  Widget build(BuildContext context) {
    //return const Placeholder();             // 제공된 코드 삭제
    return ListView.builder(
          itemCount: strList.length,          // ListView에 나타날 항목의 수 지정
          itemBuilder: (context, index) {
            return Text(strList[index],       // ListView의 각 item에
              style: TextStyle(fontSize: 40), // strList의 각 item을 Text Widget으로 추가
            );
          }
    );
  }
}

참고. 위의 코드 중 ListView.builder 생성자 메소드가 itemBuilder 속성에 의하여 return Text(…); 문장과 같이 Text Widget이라는 객체를 반환(return)하는 것을 눈여겨 보시기 바랍니다. 팩토리 메소드(Factory Method) 혹은 생성자 메소드(Constructor Method)는 이와 같이 객체를 만들어 반환하는 메소드를 말합니다.
그리고 실행해 보면 strList 리스트 변수에 들어 있던 항목들이 순서대로 화면에 나타나고 항목들이 화면의 크기를 초과하는 경우 스크롤이 되는 것을 확인할 수 있습니다.

그런데 항목들은 잘 나타나지만 조금 보기 좋게 다듬어야 하겠습니다.
Instructor Note : 코드 전체를 완성하여 실행화면을 보여 주지 말고 실행화면이 달라지는 것을 보여줄 수 있다면 최대한 단계적으로 보여줄 것 → 여기서는 Text, Center, Container,의 순으로 화면이 변하는 모습을 보여줄 것

// simple_listview_page.dart 파일의 SimpleListViewPage 클래스 코드
import 'package:flutter/material.dart';

class SimpleListViewPage extends StatelessWidget {
  SimpleListViewPage({super.key});

  var strList = ["1번째 항목","2번째 항목","3번째 항목","4번째 항목","5번째 항목",
                 "6번째 항목","7번째 항목","8번째 항목","9번째 항목","10번째 항목",
                 "11번째 항목","12번째 항목","13번째 항목","14번째 항목","15번째 항목",
                 "16번째 항목","17번째 항목","18번째 항목","19번째 항목","20번째 항목"
                ];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: strList.length,
      itemBuilder: (context, index) {
        return Container(                              // Container를 활용하여
          margin: EdgeInsets.symmetric(vertical: 2),   // 상하 마진과
          padding: EdgeInsets.symmetric(vertical: 5),  // 상하 패딩 지정
          color: Colors.grey,                          // 항목별 배경색을 지정
          child: Center(                               // 텍스트를 가운데 정렬
            child: Text(strList[index],
              style: TextStyle(fontSize: 40),
            ),
          ),
        );
      }
    );
  }
}

실행해 보니 오른쪽 화면과 같이 나타납니다.

혹시 ListView의 방향을 수직 방향에서 수평 방향으로 바꾸고 싶다면 ListView.builder()에 scrollDirection: Axis.horizontal 속성을 추가하고 마진(Margin)과 패딩(Padding)을 수직(Vertical) 방향에서 수평(Horizontal) 방향으로 수정하면 됩니다.

ListView의 방향을 바꾸면 화면의 형태를 그에 맞게 다시 수정하여야 합니다. 우리가 만든 ListView는 수평방향와 맞지 않으니 scrollDirection: Axis.horizontal 속성을 삭제합시다.

그런데 Container의 마진과 패딩을 인위적으로 조정하고 색상을 조정하는 등의 작업이 번거로운데 위의 실행화면을 보면 만족할 만큼 예쁘지도 않습니다. 그래서 ListView의 Look and Feel을 부드럽게 해 주는 Card Widget을 Container Widget 대신 사용해 보겠습니다.

// itemBuilder의 반환 Widget을 Container에서 Card로 바꾼 코드
  child: ListView.builder(
    itemCount: strList.length,
    itemBuilder: (context, index) {
      //return Container(   // Container Widget을                         
      //  margin: EdgeInsets.symmetric(vertical: 2),
      //  padding: EdgeInsets.symmetric(vertical: 5),
      //  color: Colors.grey,
      return Card(          // Card Widget으로 대체
        child: Center(
          child: Text(strList[index],
            style: TextStyle(fontSize: 40),
          ),
        ),
      );
    },
  ),

Container Widget을 Card Widget으로 바꾸었더니 ListView의 Look and Feel이 왼쪽 화면의 형태에서 오른쪽 화면의 형태로 부드러워졌습니다.

이번에는 ListView 항목을 Tab했을 때 해당 항목의 상세 화면으로 이동하는 기능을 구현해 보겠습니다. ListView Widget은 이벤트 처리 기능을 가지고 있지 않기 때문에 Tab이나 Click 등의 이벤트를 받아서 처리하려면 GestureDetector Widget을 사용해야 합니다. 상세화면은 아직 만들어지지 않아서 우선 my_second_page.dart 파일의 MySecondPage 클래스를 사용하겠습니다. 다행히 객체의 속성을 인자로 받아 들이는 기능이 이미 구현되어 있습니다.

// ListView에 Tap 이벤트 처리 로직을 추가한 SimpleListViewPage 클래스 코드
... 생략 ...
class SimpleListViewPage extends StatelessWidget {
... 중략 ...
      itemBuilder: (context, index) {
        return GestureDetector(     // ListView의 항목에 이벤트 처리 기능 부여
          onTap: () {
            Navigator.of(context).push( // MySecondPage의 id 인자에 index를 넘기고
              MaterialPageRoute(builder: (_) => MySecondPage(id: index, password: strList[index]))
            );                          // password 인자에 strList에 저장된 항목 데이터를 넘김
          },
          child: Card(
... 생략 ...

이제 ListView의 특정 항목을 Tap하거나 Click하면 상세 페이지가 나타납니다.

my_second_page.dart 파일의 이름이 simple_listview_detail_page.dart로 바뀌고 MySecondPage 클래스가 SimpleListViewDetailPage로 바뀌면 코드의 의미가 더 명확해질 것 같습니다.
파일 이름은 다른 파일의 import 문장에서 사용되고 있고, 클래스 이름도 화면 이동을 위한 코드나 Widget 생성을 위한 코드에 산재되어 있어 이름을 일일이 찾아가면서 바꾼다는 것은 쉬운 일이 아닙니다. 안드로이드 스튜디오는 이런 상황에 대비하여 Refactor 기능을 제공합니다.

먼저 파일 이름부터 바꾸어(Refactor) 보겠습니다. my_second_page.dart 파일 위에 마우스 커서를 두고 오른쪽 버튼을 눌러 팝업 메뉴가 나타나면 Refactor와 Rename 메뉴를 차례로 클릭합니다.

변경될 파일 이름으로 simple_listview_detail_page.dart를 입력한 후 Refactor 버튼을 누릅니다.

이번에는 클래스 이름을 바꾸어(Refactor) 보겠습니다. MySecondPage 클래스 이름을 마우스로 선택한 후 다시 마우스 오른쪽 클릭을 한후 Refactor와 Rename 메뉴를 차례로 선택합니다.

변경될 클래스 이름으로 SimpleListViewDetailPage를 입력한 후 Refactor 버튼을 누릅니다.

파일 이름과 클래스 이름의 바꾸는(Refactor) 작업이 완료되면 관련된 파일과 클래스 이름들이 모두 일관성 있게 변경됩니다. 이름을 일일이 찾아가 바꾸지 말고 안드로이드 스튜디오의 Refactor 기능을 활용합시다.

아무튼 덕분에 우리같은 프로그래머들은 Refactoring의 힘에 의하여 보다 손쉽게 다른 프로젝트의 소스 코드들을 가져다 사용할 수 있습니다. 처음부터 다시 개발하는 것보다 매우 생산성이 있는 일입니다.
Refactor 작업으로 코드들이 많이 변경되었으니 정상적으로 동작하는지 확인하고 갑시다.
현재까지 작성된 코드를 공유합니다.

// SimpleListViewPage 클래스의 코드 
import 'package:bottom_navigation_bar/simple_listview_detail_page.dart';
import 'package:flutter/material.dart';

class SimpleListViewPage extends StatelessWidget {
  SimpleListViewPage({super.key});

  var strList = ["1번째 항목","2번째 항목","3번째 항목","4번째 항목","5번째 항목",
                 "6번째 항목","7번째 항목","8번째 항목","9번째 항목","10번째 항목",
                 "11번째 항목","12번째 항목","13번째 항목","14번째 항목","15번째 항목",
                 "16번째 항목","17번째 항목","18번째 항목","19번째 항목","20번째 항목"
                ];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: strList.length,
      itemBuilder: (context, index) {
        return GestureDetector(
          onTap: () {
            Navigator.of(context).push(
              MaterialPageRoute(builder: (_) => SimpleListViewDetailPage(id: index, password: strList[index]))
            );
          },
          child: Card(
            child: Center(
              child: Text(strList[index],
                style: TextStyle(fontSize: 40),
              ),
            ),
          ),
        );
      }
    );
  }
}

simple_listview_detail_page.dart와 같은 형식의 이름은 뱀처럼 연결되어 ****Snake 표기법이라고 부르고, SimpleListViewDetailPage와 같은 형식의 이름은 프로그래밍 언어 Pascal에서 사용된 방식이어서 Pascal 표기법이라고 부르는데, 그중 bottomNavigationBar와 같이 첫글자가 소문자이면 Camel 표기법이라고 부릅니다. 최근의 이름을 부여하는 경향은 파일 이름은 Snake 표기법, 클래스의 이름은 Pascal 표기법, 변수와 상수의 이름은 Carmel 표기법을 사용하는 경향이 있습니다. Python은 예외적으로 클래스의 이름에만 Pascal 표기법을 사용하고 파일 이름과 변수에 모두 Snake 표기법을 사용합니다.

표기법	사용예	Dart	Java	Python
Snake 표기법	simple_listview_detail_page.dart	파일/폴더 이름	폴더이름	파일/폴더/변수/속성/함수 이름
Pascal 표기법	SimpleListViewDetailPage	클래스(객체) 이름	파일(클래스)/클래스(객체) 이름	클래스(객체) 이름
Camel 표기법	bottomNavigationBar	변수/상수/속성/함수 이름	변수/상수/속성/함수 이름
모두 대문자 (C언어 Macro)	EPOCH, BATCH_SIZE			상수 이름

ListView Widget과 유사하게 GridView Widget을 사용하면 인스타그램에서 가져온 아래 화면과 같은 형태를 만들 수 있습니다.

GridView class - widgets library - Dart API

A scrollable, 2D array of widgets. The main axis direction of a grid is the direction in which it scrolls (the scrollDirection). The most commonly used grid layouts are GridView.count, which creates a layout with a fixed number of tiles in the cross axis,

api.flutter.dev

ListView class - widgets library - Dart API

A scrollable list of widgets arranged linearly. ListView is the most commonly used scrolling widget. It displays its children one after another in the scroll direction. In the cross axis, the children are required to fill the ListView. If non-null, the ite

api.flutter.dev

Image ListView

Text 중심의 SimpleListView를 만들어 보며 ListView의 기본적인 원리와 개념과 의미를 배웠습니다. 이제 배운 것을 활용하여 Image가 추가된 형태의 ImageListView를 만들어 보겠습니다.
simple_listview_page.dart 파일을 복사하여 image_listview_page.dart 파일을 만듭니다. 아래 화면과 같이 복사한 파일에서 SimpleListViewPage 클래스 이름을 ImageListViewPage로 클래스 정의와 생성자 문장에서 2군데 모두 수정하세요.

그리고 main.dart 파일에서 아래와 같이 새로 만든 ImageListViewPage가 BottomNavigationBar의 첫번째 버튼을 눌렀을 때 실행되도록 코드를 수정합니다.

// main.dart 파일의 _MyHomePageState 클래스 코드
... 생략 ...
class _MyHomePageState extends State<MyHomePage> {
  var pages = [ ImageListViewPage(),     // 첫번째 페이지로 추가
                SimpleListViewPage(),
                // Detail Page로 전환된 SimpleListViewDetailPage 페이지 제거
                //SimpleListViewDetailPage(id: 320811, password: "mypassword"),
                MyThirdPage(),
              ];
... 중략 ...
        items: [
          BottomNavigationBarItem(      // ImageListViewPage 추가
            icon: Icon(Icons.photo_library),
            label: "Image List View",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.list),
            label: "Simple List View",
          ),
          // Detail Page로 전환된 SimpleListViewDetailPage 페이지 제거
          //BottomNavigationBarItem(
          //  icon: Icon(Icons.looks_two),
          //  label: "2nd Page",
          //),
          BottomNavigationBarItem(
            icon: Icon(Icons.looks_3),
            label: "3rd Page",
          ),
        ],
      ),
    );
  }
}

실행해서 정상적으로 동작하는지 확인해 봅시다. SimpleListViewPage를 복사하여 ImageListViewPage를 만들었기 때문에 아래 화면에서 첫번째 화면과 두번째 화면이 동일합니다. 프로그램의 변경이 Hot Reload할 수준을 넘어섰기 때문에 재시작해 주어야 합니다.

이제 ImageListViewPage를 수정하여 원하는 화면을 만들어 봅시다.

// Text 형태의 LisView의 콘텐츠를 Image 형태로 변경한 image_listview_page.dart 파일 코드
import 'package:flutter/material.dart';

class ImageListViewPage extends StatelessWidget {
  ImageListViewPage({super.key});

  /* Text 중심의 strList 삭제
  var strList = ["1번째 항목","2번째 항목","3번째 항목","4번째 항목","5번째 항목",
                 "6번째 항목","7번째 항목","8번째 항목","9번째 항목","10번째 항목",
                 "11번째 항목","12번째 항목","13번째 항목","14번째 항목","15번째 항목",
                 "16번째 항목","17번째 항목","18번째 항목","19번째 항목","20번째 항목"
                ]; */
  
  // 이미지 URL로 구성된 imgList 추가
  var imgList = [ "https://image.aladin.co.kr/product/34207/82/cover200/896088457x_1.jpg",
                  "https://image.aladin.co.kr/product/31794/10/cover200/k362833219_1.jpg",
                  "https://image.aladin.co.kr/product/3422/90/cover200/8966260993_1.jpg",
                  "https://image.aladin.co.kr/product/57/79/cover200/8991268072_2.jpg",
                  "https://image.aladin.co.kr/product/34274/43/coversum/scm9462999557200.jpg",
                  "https://image.aladin.co.kr/product/26031/38/coversum/k702737950_1.jpg",
                ];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      //itemCount: strList.length       // ListView의 항목의 수를 
      itemCount: imgList.length,        // strList.length에서 imgList의 수로 변경
      itemBuilder: (context, index) {
        return GestureDetector(
          onTap: () {                   // 이벤트 처리기 주석 처리 -> 향후 구현
          //  Navigator.of(context).push(
          //    MaterialPageRoute(builder: (_) => SimpleListViewDetailPage(id: index, password: strList[index]))
          //  );
          },
          child: Card(
            child: Center(
              //child: Text(strList[index],             // Text Widget을
              //  style: TextStyle(fontSize: 40),
              //),
              child: Image.network(imgList[index]),     // Image Widget으로 변경
            ),
          ),
        );
      }
    );
  }
}

실행해 보니 첫번째 페이지에 서적들의 이미지의 ListView가 나타납니다.

이제 Image와 Text가 공존하는 ListView를 만들어 보겠습니다.

// LisView의 콘텐츠에 Image와 Text가 공존하는 형태로 변경한 image_listview_page.dart 파일 코드
import 'package:flutter/material.dart';

class ImageListViewPage extends StatelessWidget {
  ImageListViewPage({super.key});

  var imgList = [ "https://image.aladin.co.kr/product/34207/82/cover200/896088457x_1.jpg",
                  "https://image.aladin.co.kr/product/31794/10/cover200/k362833219_1.jpg",
                  "https://image.aladin.co.kr/product/3422/90/cover200/8966260993_1.jpg",
                  "https://image.aladin.co.kr/product/57/79/cover200/8991268072_2.jpg",
                  "https://image.aladin.co.kr/product/34274/43/coversum/scm9462999557200.jpg",
                  "https://image.aladin.co.kr/product/26031/38/coversum/k702737950_1.jpg",
                ];

  // 이미지 이름 리스트 추가
  var imgNameList = [ "파이썬 + AI", "점프 투 파이썬", "생각하는 프로그래밍",
                      "실용주의 프로그래머", "프로그래밍 심리학", "UWP 퀵스타트",
                    ];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: imgList.length,
      itemBuilder: (context, index) {
        return GestureDetector(
          onTap: () {
          //  Navigator.of(context).push(
          //    MaterialPageRoute(builder: (_) => SimpleListViewDetailPage(id: index, password: strList[index]))
          //  );
          },
          child: Card(
            child: Center(
              child: Row(           // Image와 Text를 Row로 배치
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Image.network(imgList[index]),
                  Column(           // Text들을 Column으로 배치
                    children: [
                      Text("Index - $index",            // index를 Text로 출력
                        style: TextStyle(fontSize: 30),
                      ),
                      Text(imgNameList[index],          // Image의 이름을 Text로 출력
                        style: TextStyle(fontSize: 25),
                      ),
                    ],
                  )
                ],
              ),
            ),
          ),
        );
      }
    );
  }
}

실행시켜 보았습니다. 이미지의 크기가 들쭉날쭉하고, 이미지가 작은 것은 너무 작습니다.

혹시 Image의 파일이 큰 것이 들어오거나 Text의 길이가 긴 것이 들어 온다면 어떤 일이 생기는지 확인해 보았습니다.
먼저 Image의 파일이 크게 들어오는 경우입니다.

// image_listview_page.dart 파일 코드
... 생략 ...
                  Image.network(imgList[index],
                      width: 400,       // 이미지의 너비를 지정함
                  ),
... 생략 ...

이미지가 커지면서 코딩된 화면이 장치의 화면의 크기를 넘어서 빗금으로 깨지는 현상이 생깁니다.

// image_listview_page.dart 파일 코드
... 생략 ...
children: [
  Image.network(imgList[index],
  //    width: 400,
  ),
  Column(
    children: [
      Text("Index - $index",
        style: TextStyle(fontSize: 30),
      ),
      Text(imgNameList[index],
        style: TextStyle(fontSize: 25),
      ),
      // 길이가 긴 Text를 추가함
      Text("리스트 항목 중 사진이 크거나 텍스트가 길어지면 어떤 일이 생길까?",
        style: TextStyle(fontSize: 30),
      ),
    ],
  )
],
... 생략 ...

마찬가지로 Text가 길어지면서 코딩된 화면이 장치의 화면의 크기를 넘어서 빗금으로 깨지는 현상이 생깁니다.

그럴때를 대비하여 코드를 아래와 같이 수정해 보겠습니다.

// image_listview_page.dart 파일 코드
... 생략 ...
                children: [
                  // Expanded Widget으로 감싸면 화면 크기의 비율을 자동으로 조정해 줍니다.
                  Expanded(
                    child: Image.network(imgList[index],
                        width: 400,
                    ),
                  ),
                  // Expanded Widget으로 감싸면 화면 크기의 비율을 자동으로 조정해 줍니다.
                  Expanded(
                    child: Column(
                      children: [
                        Text("Index - $index",
                          style: TextStyle(fontSize: 30),
                        ),
                        Text(imgNameList[index],
                          style: TextStyle(fontSize: 25),
                        ),
                        // 길이가 긴 Text를 추가함
                        Text("리스트 항목 중 사진이 크거나 텍스트가 길어지면 어떤 일이 생길까?",
                          style: TextStyle(fontSize: 30),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
          ),
        );
      }
    );
  }
}

실행해 보니 Expanded Widget의 도움으로 화면이 넘치는 현상이 해결이 되었는데, 이미지가 너무 작은 문제는 아직 남아 있습니다.

이 문제는 노션의 “Flutter FAQ와 Tips” 페이지에서 “주변의 Image와 넓이와 높이를 맞출때 Image에 빈공간이 나타나거나 Image가 왜곡되어 나타나는 경우가 있습니다. 어떻게 해결하여야 할까요?” 를 보고 해결해 봅시다.

// 완성된 코드
... 생략 ...
  Expanded(
    child: Image.network(imgList[index],
      width: 400,
      fit: BoxFit.fill, // BoxFit.fiil이 적합하다고 판단함
    ),
  ),
... 생략 ...

실행해 보니 이미지가 작았던 문제도 해결되었습니다.

이제 ImageListViewDetailPage 클래스를 만든 후 ImageListViewPage 클래스와 연결할 차례입니다. 먼저 image_listview_detail_page.dart 파일을 만든 후 아래와 같이 코딩합시다.

// ImageListViewDetailPage 클래스의 코드  
import 'package:flutter/material.dart';

class ImageListViewDetailPage extends StatelessWidget {
  const ImageListViewDetailPage({super.key, required this.index, required this.name, required this.imgUrl});

  final int index;
  final String name;
  final String imgUrl;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text("ImageListView Detail"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Text(
              "Index - $index",
              style: TextStyle(fontSize: 30),
            ),
            Image.network(imgUrl),
            Text(
              name,
              style: TextStyle(fontSize: 40),
            ),
          ],
        ),
      )
    );
  }
}

그리고 image_listview_page.dart 파일에 ImageListViewDetailPage 페이지로 이동하는 코드를 추가합시다.

// Detail 페이지로의 이동 로직이 추가된 ImageListViewPage 클래스의 코드  
import 'package:bottom_navigation_bar/image_listview_detail.page.dart';
import 'package:flutter/material.dart';

class ImageListViewPage extends StatelessWidget {
  ImageListViewPage({super.key});

  var imgList = [ "https://image.aladin.co.kr/product/34207/82/cover200/896088457x_1.jpg",
                  "https://image.aladin.co.kr/product/31794/10/cover200/k362833219_1.jpg",
                  "https://image.aladin.co.kr/product/3422/90/cover200/8966260993_1.jpg",
                  "https://image.aladin.co.kr/product/57/79/cover200/8991268072_2.jpg",
                  "https://image.aladin.co.kr/product/34274/43/coversum/scm9462999557200.jpg",
                  "https://image.aladin.co.kr/product/26031/38/coversum/k702737950_1.jpg",
                ];

  var imgNameList = [ "파이썬 + AI", "점프 투 파이썬", "생각하는 프로그래밍",
                      "실용주의 프로그래머", "프로그래밍 심리학", "UWP 퀵스타트",
                    ];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: imgList.length,
      itemBuilder: (context, index) {
        return GestureDetector(
          onTap: () {
            Navigator.of(context).push(        // Detai 페이지로 이동
              MaterialPageRoute(builder: (_) => ImageListViewDetailPage(index: index, name: imgNameList[index], imgUrl: imgList[index]))
            );
          },
          child: Card(
            child: Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Expanded(
                    child: Image.network(imgList[index],
                      width: 400,
                      fit: BoxFit.fill,
                    ),
                  ),
                  Expanded(
                    child: Column(
                      children: [
                        Text("Index - $index",
                          style: TextStyle(fontSize: 30),
                        ),
                        Text(imgNameList[index],
                          style: TextStyle(fontSize: 25),
                        ),
                        Text("리스트 항목 중 사진이 크거나 텍스트가 길어지면 어떤 일이 생길까?",
                          style: TextStyle(fontSize: 30),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
          ),
        );
      }
    );
  }
}

프로그램을 실행한 후 ImageListView에서 특정 항목을 클릭하면 상세 화면으로 이동합니다.

**Instructor Note : “**Flutter FAQ와 Tips”에서”Flutter 프로젝트 이름 변경/Flutter 프로젝트 복사”를 설명할 것

[실습] 자신의 가족을 소개하는 family_intro 앱을 개선해 보세요.

family_intro 프로젝트를 참조하여 family_intro2 프로젝트로 다시 구성해 보세요. 반드시 하단에 BottomNavigationBar가 나타나야 합니다. family_intro 프로젝트의 화면 구조를 유지하되 하나의 화면은 Image ListView이어야 하며 ListView 항목을 클릭하면 Detail 페이지로 이동해야 합니다. ListView는 가족 구성원들의 목록이어야 하고 Detail 페이지는 family_intro에서 개발해 두었던 가족 구성원을 소개하는 화면으로 연결하기 바랍니다.

TextField Widget

TextField Widget은 문자열의 입력을 받는 Widget입니다.
first_flutter 프로젝트를 다시 연후 아래 코드를 화면의 최상단 Widget으로 추가해 봅시다.

// main.dart 함수
... 생략 ...
TextField(    // 추가된 TextField Widget
  decoration: InputDecoration(
    labelText: "필드이름",
    border: OutlineInputBorder(),
  ),
),
Container(
  width: double.infinity,
  alignment: Alignment.center,
  color: Colors.yellow,
  child: const Text(
    'You have pushed the button this many times:',
    textAlign: TextAlign.center,
    style: TextStyle(
        color: Colors.pink,
        fontSize: 40,
        fontStyle: FontStyle.italic,
    ),
  ),
),
... 생략 ...

앱을 실행해 보면 화면의 상단에 입력을 위한 필드가 추가되어 있는 것을 알 수 있습니다. 그런데 입력 필드가 화면의 행을 모두 채우고 있습니다.

입력 필드의 길이는 SizedBox Widget을 사용하여 통제할 수 있습니다.

// main.dart 함수
... 생략 ...
SizedBox(       // SizedBox Widget으로
  width: 200,   // 입력필드의 길이를 200 논리적 픽셀로 지정
  child: TextField(
    decoration: InputDecoration(
      labelText: "필드이름",
      border: OutlineInputBorder(),
    ),
  ),
),
... 생략 ...

앱을 다시 실행해 보면 입력 필드의 길이가 지정한 만큼 축소되는 것을 확인할 수 있습니다.

텍스트 필드에 입력한 문자열이 화면에만 보이지 않고 변수에서 값을 받아 오거나 변수에 값을 저장하는 방법을 알아 보겠습니다. TextField Widget과 연결하여 사용할 변수는 TextEditingController 객체 변수로 정의한 후 TextField Widget의 controller 속성으로 지정해 줍니다.

// main.dart 함수
... 생략 ...
class _MyHomePageState extends State<MyHomePage> {
  TextEditingController textEditingController = TextEditingController();   // 콘트롤러 추가

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    textEditingController.text = "입력 필드의 초기값";
  }
... 중략 ...
            SizedBox(
              width: 200,
              child: TextField(
                controller: textEditingController,   // TextField와 Controller 연결
                decoration: InputDecoration(
                  labelText: "필드이름",
                  border: OutlineInputBorder(),
                ),
              ),
            ),
... 생략 ...

그후 프로그램의 코드에서 textEditingController.text = "입력 필드의 초기값";와 같은 할당문을 사용하면 텍스트 필드에 값이 나타납니다.

화면에 입력한 값을 가져다 사용할 때에는 TextField Widget과 연결된 변수의 값을 textEditingController.text와 같은 형식으로 코드에서 가져다 사용하면 됩니다.

// main.dart 함수
... 생략 ...
SizedBox(
  width: 200,
  child: TextField(
    // 값 변경 후 Enter를 치면 textEditingController.text에 저장된 값을 print
    onSubmitted: (_) {print(textEditingController.text);},
    controller: textEditingController,
    decoration: InputDecoration(
      labelText: "필드이름",
      border: OutlineInputBorder(),
    ),
  ),
),
... 생략 ...

TextField Widget에 TextField Changed라고 입력한 후 Enter를 치면 안드로이드 스튜디오의 하단 창에 입력한 값이 출력되는 것을 확인할 수 있습니다.

이와 같이 화면에서 TextField 입력을 받아 사용하기 위해서는 화면의 TextField와 연결되어 변수 역할과 제어 역할을 해 주는 제어기(TextEditingController)의 중재가 필요합니다. 아래의 그림을 참조바랍니다. TextEditingController 외에도 이와 유사한 역할을 해 주는 다양한 (TextEditingController)들이 존재하는데 기본적인 원리와 개념과 의미는 동일하며 사용법은 약간의 차이가 있을 뿐 유사합니다.

표현식과 연산자를 활용한 Widget

Flutter는 if나 for와 같은 표현식(Expression)이나 삼항 연산자(Operatr)를 사용하여 Widget를 구성하는 방법을 제공합니다.

if 조건 표현식

// main.dart 함수
... 생략 ...
class _MyHomePageState extends State<MyHomePage> {
  bool contentLoaded = false;  // 콘텐츠가 로드되었는지 여부를 나타내는 변수

  TextEditingController textEditingController = TextEditingController();
... 중략 ...
            if (contentLoaded ) Text("콘텐츠가 로드되었습니다.") // 콘텐츠 로드된 경우
            else CircularProgressIndicator(),                   // 콘텐츠 로드 중인 경우
            SizedBox(
              width: 200,
              child: TextField(
                onSubmitted: (_) {print(textEditingController.text);},
                controller: textEditingController,
                decoration: InputDecoration(
                  labelText: "필드이름",
                  border: OutlineInputBorder(),
                ),
              ),
            ),
... 생략 ...

앱을 실행해 보면 contentLoaded 변수에 false가 저장되어 있어서 로딩 중이라는 의미로 원형 프로그래스 바가 출력되는 것을 확인할 수 있습니다.

플러스(+) 버튼을 누를 때 _count 변수를 증가시킴과 동시에 contentLoaded 변수의 값을 true로 변경시켜 보겠습니다.

// main.dart 함수
... 생략 ...
  void _incrementCounter() {
    setState(() {
	    _counter++;
      contentLoaded = true;    // 콘텐츠가 로드되었다고 변수 설정
    });
  }
... 생략 ...

앱을 다시 실행해 보면 플러스(+) 버튼을 누를 때 원형 프로그래스 바가 “콘텐츠가 로드되었습니다.”라는 텍스트로 출력되는 것을 확인할 수 있습니다.

삼항 연산자

이번에는 if 표현식(Expression)을 삼항 연산자(Operator)로 간결하게 표현해 보겠습니다.

// main.dart 함수
... 생략 ...
// if (contentLoaded ) Text("콘텐츠가 로드되었습니다.")
// else CircularProgressIndicator(),
// 삼항 연산자로 변경
contentLoaded ? Text("콘텐츠가 로드되었습니다.") : CircularProgressIndicator(),
SizedBox(
  width: 200,
  child: TextField(
    onSubmitted: (_) {print(textEditingController.text);},
    controller: textEditingController,
    decoration: InputDecoration(
      labelText: "필드이름",
      border: OutlineInputBorder(),
    ),
  ),
),
... 생략 ...

앱의 실행결과는 동일합니다.

for 반복 표현식

ListView Widget에서 사용했던 SimpleListView 예제를 화면의 상단에 추가해 보겠습니다.

// main.dart 함수
... 생략 ...
class _MyHomePageState extends State<MyHomePage> {
	// ListView Widget에 반복하여 보여줄 리스트 변수
  var strList = ["1번째 항목","2번째 항목","3번째 항목","4번째 항목","5번째 항목",
    "6번째 항목","7번째 항목","8번째 항목","9번째 항목","10번째 항목",
    "11번째 항목","12번째 항목","13번째 항목","14번째 항목","15번째 항목",
    "16번째 항목","17번째 항목","18번째 항목","19번째 항목","20번째 항목"
  ];

  bool contentLoaded  = false;
... 중략 ...
	          // ListView Widget의 크기를 SizedBox의 크기로 제한
            SizedBox(
              height: 200,
              child: ListView.builder(
                  itemCount: strList.length,
                  itemBuilder: (context, index) {
                    return GestureDetector(
                      onTap: () {
                        // 오류 발생을 예방하기 위하여 주석 처리
                        // Navigator.of(context).push(
                        //     MaterialPageRoute(builder: (_) => SimpleListViewDetailPage(id: index, password: strList[index]))
                        // );
                      },
                      child: Card(
                        child: Center(
                          child: Text(strList[index],
                            style: TextStyle(fontSize: 40),
                          ),
                        ),
                      ),
                    );
                  }
              ),
            ),
            // if (contentLoaded ) Text("콘텐츠가 로드되었습니다.")
            // else CircularProgressIndicator(),
            contentLoaded ? Text("콘텐츠가 로드되었습니다.") : CircularProgressIndicator(),
... 생략 ...

앱을 실행해 보면 오른쪽 화면과 같이 나타납니다.

이 코드를 for 반복 표현식을 사용하여 코딩해 보겠습니다. 아래 코드와 같이 리스트가 나타나게 하는 것까지는 단순한 형식으로 구현이 가능한데, itemBuilder의 index 인자를 사용할 수 없는 한계가 있습니다.

// main.dart 함수
... 생략 ...
// ListView Widget의 크기를 SizedBox의 크기로 제한
SizedBox(
  height: 200,
  // child: ListView.builder(
  //     itemCount: strList.length,
  //     itemBuilder: (context, index) {
  //       return GestureDetector(
  //         onTap: () {
  //           // Navigator.of(context).push(
  //           //     MaterialPageRoute(builder: (_) => SimpleListViewDetailPage(id: index, password: strList[index]))
  //           // );
  //         },
  //         child: Card(
  //           child: Center(
  //             child: Text(strList[index],
  //               style: TextStyle(fontSize: 40),
  //             ),
  //           ),
  //         ),
  //       );
  //     }
  // ),
  child: ListView(    // ListView.builder가 ListView로 변경됨
    children: [       // itemCount와 itemBuilder 속성대신 children 속성 사용
      for (var element in strList) // for 반복 표현식 사용
        Card(                    // Card Widget이 strList 변수의 요소마다 생성됨
          child: Center(
            child: Text(element,
              style: TextStyle(fontSize: 40),
            ),
          ),
        ),
    ],
  ),
),
... 생략 ...

그래서 Dart 언어의 문장(Statement)으로 이 문제를 해결하려고 하면 아래 화면과 같이 오류가 발생합니다. 여기서 사용하는 if와 for 표현식(Expression)과 삼항 연산자(Operator)는 return 문장안에서 사용되어 Dart 언어의 문장과 달리 약식의 제한적인 문법만 허용하기 때문입니다. Dart의 표현식 기반 문법은 간결하면서도 강력한 기능을 제공하여, 웹 프로그래밍에서 사용되는 ASP, JSP, Thymeleaf와 유사한 동적 콘텐츠 처리를 구현할 수 있습니다.

DropdownButton Widget

DropdownButton Widget은 사전에 정해진 값들 중에서 선택하여 입력을 받는 Widget입니다. 아래 코드를 화면의 최상단 Widget으로 추가해 봅시다.

// main.dart 함수
... 생략 ...
class _MyHomePageState extends State<MyHomePage> {
  var selectedElement = "요소2";    // DropdownButton 요소의 초기값 
  
  var strList = ["1번째 항목","2번째 항목","3번째 항목","4번째 항목","5번째 항목",
    "6번째 항목","7번째 항목","8번째 항목","9번째 항목","10번째 항목",
    "11번째 항목","12번째 항목","13번째 항목","14번째 항목","15번째 항목",
    "16번째 항목","17번째 항목","18번째 항목","19번째 항목","20번째 항목"
  ];
... 중략 ...
            SizedBox(              
              width: 200,
              child: Center(
                child: DropdownButton<String>( // DropdownButton Widget 추가
                  value: selectedElement,      // DropdownButton의 선택과 변수를 연결
                  onChanged: (newValue) {      // DropdownButton 선택시 이벤트 처리기
                    print(String? newValue);   // 인자가 Null로 넘어올 수 있어 ?로 허용
                    setState(() {              // DropdownButton에 연결된 변수값 상태 변경
                      selectedElement = newValue!;  // 값이 Null 아닌 것을 !로 확인후 사용
                    });
                  },
                  items: [
                    for (var element in ["요소1","요소2","요소3"])   // for 반복 표현식
                      DropdownMenuItem<String>(  // DropdownButton의 요소 Widget 추가
                        value: element,
                        child: Text(element),
                      ),
                  ],
                ),
              ),
            ),
... 생략 ...

앱을 실행하면 화면 상단에 DropdownButton Widget이 나타나는 것을 확인할 수 있으며 value 속성으로 지정한 selectedElement 변수의 값이 초기값으로 나타나는 것을 확인할 수 있습니다.

DropdownButton Widget을 클릭하거나 탭하면 for 표현식으로 추가한 DropdownMenuItem<String> Widget들이 선택 가능한 목록으로 나타나는 것을 확인할 수 있습니다.

요소를 선택하면 선택한 요소가 DropdownButton Widget에 나타나고, 실행창에도 print되는 것을 확인할 수 있습니다.

TextField와 DropdownButton Widget 외에 Radio<T>와 RichText 등의 입력을 위한 Widget들이 다양하게 존재하니 필요할 때 찾아서 사용하기 바랍니다.

SingleChildScrollView Widget

SingleChildScrollView Widget은 화면 하나로 제한된 크기를 Scroll하여 확장하게 만들어 줍니다.

// main.dart 함수
... 생략 ...
  @override
  Widget build(BuildContext context) {
    double imageWidth = (MediaQuery.of(context).size.width - 30) / 3;
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(     // Center Widget을 SingleChildScrollView으로 감싸줌
        child: Center(
          child: Column(
            // mainAxisAlignment 변경 : spaceAround -> start
            //mainAxisAlignment: MainAxisAlignment.spaceAround,
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
... 생략 ...

앱을 실행하면 화면 상단에 하단에 화면이 깨지는 현상이 사라지고, 아래로 Scroll할 수 있는 것을 확인할 수 있습니다.

[실습] 계산기

프로젝트 이름 : calculator
설명 : BottomNavigationBar를 사용하여 4개의 주화면을 구성한 후 단계별로 계산기를 만듭니다.

import 'package:flutter/material.dart';
import 'calculator_page1.dart';
import 'calculator_page2.dart';
import 'calculator_page3.dart';
import 'calculator_page4.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var pages = [
    CalculatorPage1(),
    CalculatorPage2(),
    CalculatorPage3(),
    CalculatorPage4(),
  ];

  int _selectedNaviIndex = 0;

  _onBottomNavigationItemTapped(index) {
    setState(() {
      _selectedNaviIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: pages[_selectedNaviIndex],
      bottomNavigationBar: BottomNavigationBar(
        //showSelectedLabels: false,
        //showUnselectedLabels: false,

        currentIndex: _selectedNaviIndex,
        selectedItemColor: Colors.blue,
        unselectedItemColor: Colors.grey,

        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        onTap: _onBottomNavigationItemTapped,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.looks_one),
            label: "Calculator1",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.looks_two),
            label: "Calculator2",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.looks_3),
            label: "Calculator3",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.looks_4),
            label: "Calculator4",
          ),
        ],
      ),
    );
  }
}

1단계 : 사칙연산(/,*,-,+)을 수행하는데 연산자와 숫자의 입력이 적절한지 확인하지 않고 우선 계산되는 기능을 구현해 봅니다. 연산자가 틀린 경우 오류가 발생하거나 동작하지 않는 한계가 있습니다.

2단계 : 연산자가 사칙연산(/,*,-,+)을 벗어나는 경우 하단에 오류 메세지를 출력하도록 개선합니다. 여전히 입력된 숫자가 틀린 경우 오류가 발생하거나 동작하지 않는 한계가 있습니다.

3단계 : 사칙연산(/,*,-,+)의 입력이 틀리지 않도록 드롭 다운 버튼(DropdownButton Widget)으로 구현하여 실수를 방지함으로써 입력 검증을 하지 않습니다. 입력한 숫자가 적절하지 않은 오류 메세지를 보여 주고 다시 입력하게 합니다.

4단계 : 숫자와 사칙연산(/,*,-,+)의 입력이 틀리지 않도록 버튼으로 구현하여 입력하는 수식을 상단에 나타나게 한 후 = 버튼을 누르면 계산하게 합니다. 입력한 수식이 적절하지 않은 C(Clear) 버튼을 눌러 다시 입력하게 합니다. 수작업 입력을 배제하여 실수가 방지되나 여전히 수식이 잘못될 위험이 남아 있어서 try~catch 예외처리로 수식의 오류를 잡아 냅니다.

expressions: ^0.2.5 패키지를 사용합니다. pubspec.yaml에 아래와 같이 등록한 후 Pub Get 버튼을 누릅시다.

코드 팩토리의 플러터 프로그래밍 - 10장 만난지 며칠 U&I (240페이지)

프로젝트 이름 : u_and_i
설명 : 하트를 눌러서 처음 만난 날을 설정하면 오늘이 D+몇일인지를 보여 줍니다. 처음으로 iOS의 쿠퍼티노 디자인을 사용해 봅니다.

이미지와 폰트를 저자의 깃허브(https://github.com/codefactory-co/flutter-golden-rabbit-novice-v2.git)에서 다운받아 images와 fonts 폴더에 복사해 넣은 후 pubspec.yaml에 등록 후 Pub Get
이 예제에 폰트를 등록하는 전형적인 pubspec.yaml 설정이 나오고 있음. Regular와 Light 폰트는 weight을 지정하지 않고 있고, Medium과 Bold 폰트는 weight를 각각 500과 700으로 지정하고 있음

GitHub - codefactory-co/flutter-golden-rabbit-novice-v2: Must Have 코드팩토리의 플러터 프로그래밍 3쇄 개정판

Must Have 코드팩토리의 플러터 프로그래밍 3쇄 개정판. Contribute to codefactory-co/flutter-golden-rabbit-novice-v2 development by creating an account on GitHub.

github.com

  # pubspec.yaml의 코드
  assets:
    - images/
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # <https://flutter.dev/to/resolution-aware-images>

  # For details regarding adding assets from package dependencies, see
  # <https://flutter.dev/to/asset-from-package>

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  fonts:
    - family: parisienne
      fonts:
        - asset: fonts/Parisienne-Regular.ttf
    - family: sunflower
      fonts:
        - asset: fonts/Sunflower-Light.ttf
        - asset: fonts/Sunflower-Medium.ttf
          weight: 500
        - asset: fonts/Sunflower-Bold.ttf
          weight: 700

화면을 만들어 봅시다.
Hear Icon을 누르면 쿠퍼티노 날짜 다이어로그가 화면의 하단에 나오도록 해 봅시다. import 'package:flutter/cupertino.dart';로 import하는 showCupertinoDialog() 쿠퍼티노 함수를 사용하여 쉽게 구현할 수 있습니다.

참고 문헌

[논문]

없음

[보고서]

없음

[URL]

없음

문의사항

[기상학/프로그래밍 언어]

sangho.lee.1990@gmail.com

[해양학/천문학/빅데이터]

saimang0804@gmail.com

[Flutter] 쉽게 배우는 플러터 앱 개발 실무 04강

shlee1990 — Sat, 4 Jan 2025 12:01:06 +0900

정보

업무명 : [Flutter] 쉽게 배우는 플러터 앱 개발 실무 04강
작성자 : 이상호
작성일 : 2025.01.04
설 명 :
수정이력 :

공유 파일

원본 파일

flutter-golden-rabbit-novice-v2-main.zip

drive.google.com

작업 파일

20250104_first_flutter.zip

drive.google.com

화면 이동

학습목표

앱 화면을 추가하며(Push) 부모 화면에서 자식 화면으로 이동하는 방법을 이해합니다.
사용중인 앱 화면을 빠져나와(Pop) 자식 화면에서 부모 화면으로 이동하는 방법을 이해합니다.
사용중인 자손 화면을 빠져나와 Home 화면으로 바로 이동하는 방법을 이해합니다.
소스코드를 분리하여 모듈화하는 장점과 방법을 이해합니다.
Widget간 인자를 넘기고 받는 방법을 이해합니다.

Navigator 객체를 이용한 화면 이동

우선 아래와 같이 2개의 화면을 만들어 간단히 화면 이동을 해 보겠습니다. 첫번째 페이지는 Flutter 프레임워크가 제공하는 MyHomePage Widget 객체를 사용하고 두번째 페이지는 MySecondPage Widget 객체를 만들어 사용하겠습니다.

먼저 이전에 만든 프로젝트를 사용할 수 없으니 navigation 프로젝트를 만듭시다.
먼저 첫번째 페이지를 만들기 위하여 MyApp 클래스와 _MyHomePageState 클래스의 코드를 아래와 같이 수정합시다. 이번에는 Scaffold 객체의 body 속성을 모두 변경하게 됩니다.

// main.dart 파일에 구현한 첫번째 페이지
... 생략 ...
class MyApp extends StatelessWidget {
... 중략 ...
      home: const MyHomePage(title: '첫번째 페이지'),   // 페이지 이름 변경
... 중략 ...
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Container(                 // 여기부터 코딩 시작
        width: double.infinity,            // 화면의 넓이 전체를 사용
        height: double.infinity,           // 화면의 높이 전체를 사용
        color: Colors.pinkAccent,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "첫번째 페이지입니다.",
              style: TextStyle(fontSize: 40),
            ),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.blue,
                ),
              onPressed: () {},            // 페이지 이동 로직은 이후 구현
              child: Text(
                  "두번째 페이지로 이동",
                  style: TextStyle(fontSize: 20),
              ),
            ),
          ],
        ),
      ),                               // 여기까지 코딩
    );
  }
}

실행해 보면 첫번째 페이지가 잘 나타납니다.

이제 두번째 페이지를 만들어 봅시다. 먼저 아래 화면과 같이 main.dart 파일의 끝에서 st를 친후 안드로이드 스튜디오가 제시해 주는 몇가지 선택지 중에서 stless을 선택합니다.

그러면 안드로드 스튜디오가 아래 화면과 같이 클래스를 생성해 주는데 이는 Spring Boot를 개발할 때 IntelliJ에서 psvm을 입력하여 코드를 자동으로 생성받는 것과 유사한 기능입니다.

이때 class와 extends 사이에 클래스의 이름인 MySocondPage를 입력합니다. 그러면 아래 화면과 같이 안드로이드 스튜디오가 클래스 이름이 필요한 곳에 MySocondPage를 자동으로 추가해 주면서 클래스를 수정해 줍니다.

그후 return const Placeholder(); 문장을 _MyHomePageState 클래스의 return Scaffold(…중략…); 문장 전체로 대체합니다. 그리고 배경색과 화면 중앙의 텍스트와 버튼의 색상의 두번째 페이지에 맞게 수정해 줍니다.

// MySecondPage 클래스에 구현한 두번째 페이지
class MySecondPage extends StatelessWidget {
  const MySecondPage({super.key});
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text("두번째 페이지"),      // 변경된 코드
      ),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.blue,               // 변경된 코드
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "두번째 페이지입니다.",        // 변경된 코드
              style: TextStyle(fontSize: 40),
            ),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.pinkAccent,  // 변경된 코드
              ),
              onPressed: () {},
              child: Text(
                "첫번째 페이지로 이동",      // 변경된 코드
                style: TextStyle(fontSize: 20),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드에서 MyHomePage와 MySecondPage의 큰 차이점을 느꼈나요? MyHomePage는 2개의 클래스로 만들어지는 반면에 MySecondPage는 1개의 클래스로 만들어지고 있습니다. 나중에 설명하겠지만 여기서는 Widget를 하나의 클래스로 만들 수도 있고 두개의 클래스로 만들수도 있구나 하는 정도만 이해하고 가면 됩니다.
이제는 버튼을 눌렀을 때 두번째 페이지로 이동하게 해주는 코드를 작성할 차례입니다. 이벤트 처리기로 만들면 되겠지요. 자식 페이지로의 이동은 Navigator 객체의 push 메소드에 의하여 이루어집니다. 이때 또 다시 Navigator.of(context) 팩토리 메소드 혹은 생성자 메소드를 사용하여 현재 화면인 context 화면 이동을 제어하기 위한 Navigator 객체를 만듭니다. 즉 화면의 이동도 현재 화면에 보이는 맥락으로 움직인다는 의미로 받아 들이면 됩니다. 제공되는 인자는 새로 생성되는 MySecondPage 화면의 경로를 의미하는데 MaterialPageRoute 객체를 사용하여 MySecondPage 화면으로 이동하는 경로 객체를 만듭니다. Route는 화면 전환과 네비게이션을 관리하는 개념으로, 모바일 앱뿐만 아니라 웹에서도 사용됩니다. Flutter는 이러한 Route 개념을 활용하여 앱 내에서 페이지 전환을 쉽게 구현할 수 있도록 합니다.
위의 설명이 어렵다면 그냥 아래의 코드 조각을 하위 화면으로 이동하는 코드의 전형적인 모습으로 받아 들이면 됩니다.

// 이벤트 처리기를 onPressed 이벤트에 구현하는 코드 (첫번째 페이지)
ElevatedButton(
  style: ElevatedButton.styleFrom(
      backgroundColor: Colors.blue,
    ),
  onPressed: () {         // 이벤트 처리기의 시작
    Navigator.of(context).push(    // 자식 화면으로 이동하기 위한 전형적인 코드
      MaterialPageRoute(builder: (_) => MySecondPage()),
    );                             // (_)는 문법적으로 인자의 지정이 강제화되어
                                   //       있으나 사용하지 않을 때 사용
  },                      // 이벤트 처리기의 끝
  child: Text(
      "두번째 페이지로 이동",
      style: TextStyle(fontSize: 20),
  ),
),

먼저 My Home Page에서 My Second Page로 이동이 잘 되는지 확인하고 갑시다. 코드의 모순이 누적되면 감당하기 어렵기 때문에 코드가 변경될 때마다 테스트하고 가는 것이 테스트 주도 개발(TDD, Test Driven Development)의 기본 사상입니다. 매우 중요한 원칙이니 우리도 따라서 합시다.

My Home Page에서 My Second Page로 화면 이동하는 로직이 잘 동작하니 이제 자신감을 가지고 부모 페이지인 My Home Page로 이동하는 로직을 추가합시다. 코딩하는 방법은 부모 화면에서 자식 화면으로 이동하는 것과 유사하나 훨씬 코딩이 단순합니다. Navigator.of(context).push(MaterialPageRoute(builder: (_) => MySecondPage()));와 같은 코드를 Navigator.pop(context);와 같이 수정해 주면 되는데 두 코드를 비교해 보면 인자가 빠져 있습니다. 당연할 것입니다. 자식은 여럿이니 어디로 가야할지 알아야 하지만 부모는 하나이니 어디로 가는지를 이미 알고 있으니 인자는 필요없는 것입니다. 그리고 push 메소드가 pop 메소드로 바뀌어 있는데 이는 화면 이동을 관리하는 Navigator 객체가 스택(Stack)이라는 자료 구조를 사용하기 때문에 붙은 이름입니다.

// 이벤트 처리기를 onPressed 이벤트에 구현하는 코드 (두번째 페이지)
ElevatedButton(
  style: ElevatedButton.styleFrom(
      backgroundColor: Colors.blue,
    ),
  onPressed: () {         // 이벤트 처리기의 시작               
    Navigator.pop(context);      // 부모 화면으로 이동하기 위한 전형적인 코드
  },                      // 이벤트 처리기의 끝
  child: Text(
      "첫번째 페이지로 이동",
      style: TextStyle(fontSize: 20),
  ),
),

이제 실행해 보면 첫번째 페이지와 두번째 페이지간에 화면 이동이 자연스럽게 이루어지는 것을 확인할 수 있습니다.

이제 아래 그림을 봅시다. 아래 그림에서 Data를 화면으로 바꾸어 이해하면 Navigator 객체가 하는 일을 이해할 수 있습니다. 부모화면에서 자식 화면으로 이동할 때 화면을 하나 밀어 넣는(Push) 것이 되고, 다시 자식화면에서 부모 화면으로 돌아갈 때 화면 하나를 빼내는(Pop) 것이 되니 메소드의 이름의 의미를 알 수 있습니다.

build() 메소드는 화면을 만드는(build) 역할을 하는 메소드입니다. 이때 동일한 화면에서 그리는 작업을 하려면 동일한 context를 가지고 다녀야 합니다. 그래서 Navigator.of(context)와 같이 context에 기반하여 Navigator 객체를 생성하게 하고 있고, Navigator.pop(context) 메소드의 첫번째 인자로 context를 지정해 주었습니다. 이 말을 이해하려고 하다가 이해가 안되면 그냥 넘어가도 됩니다. 전공자는 알고 가야 하겠지만 비전공자는 코딩할 위치와 코딩하는 방법만 알고 있어도 됩니다. 그것도 인터넷 검색이나 ChatGPT 등의 생성형 AI의 도움을 받을 정도만 알고 있으면 됩니다.

간단한 프로그램에서 화면간의 이동은 위에서 설명하는 정도의 개념을 이해하고 있으면 됩니다. Flutter 앱의 경우도 웹처럼 Route를 복잡하게 가져갈 수 있으나 이도 또한 전문 프로그래머의 영역이라고 생각합니다.

모듈 분리 (소스 코드 분리)

앞에서 예를 든 것과 같이, Dart 언어는 하나의 파일에서 여러 개의 위젯 클래스를 함께 관리하는 것을 허용합니다. 그러나 프로젝트를 진행할 때는 각 위젯을 별도의 파일로 분리해 사용하면 소스 파일의 크기를 줄이고, 여러 명이 각자 담당하는 위젯을 구분하여 동시에 작업할 수 있는 등의 이점이 있습니다. 이러한 작업을 모듈 분리라고 합니다. 쉽게 말해, 하나의 소스 파일이 하나의 위젯을 포함하도록 분리하는 것으로 이해할 수 있습니다.
먼저 lib 폴더 아래 my_second_page.dart 파일을 만듭시다.

그리고 main.dart 파일에 개발해 두었던 MySecondPage 클래스의 코드들을 잘라내서 my_second_page.dart 파일로 이동시킵니다. 그러면 아래와 같이 문법 오류가 잔뜩 나타나는데 필요한 import 작업이 누락되어 있기 때문입니다.

이때 import 'package:flutter/material.dart'; 문장을 파일의 맨앞에 추가하면 오류가 사라집니다.

그런데 main.dart 파일로 이동해 보면 import 'package:flutter/material.dart'; 문장이 존재하는데도 1개의 오류가 발생하는 것을 볼 수 있습니다.

그 이유는 아래 화면에서 빨간색 밑줄로 오류를 표시해 보여주는 것과 같이 같은 파일에 있던 MySecondPage Widget이 다른 파일로 옮겨 가서 찾을 수 없기 때문인데요 이렇게 모듈 분리된 Widget은 import해야 사용이 가능합니다.

import 'my_second_page.dart'; 문장과 같이 상대경로를 사용하여 Widget을 import하거나 import 'package:navigation/my_second_page.dart'; 문장과 같이 절대경로를 사용하여 Widget을 import합니다. 외부 패키지와 달리 내부 패키지의 경우에는 대부분 상대경로가 개발환경과 운영환경에 종속성이 없어 더 나은 선택이 됩니다.

이렇게 모듈 분리 후에도 정상적으로 실행되는지 테스트를 완료하기 바랍니다.

모듈 분리의 이점을 누려 봅시다. 먼저 my_second_page.dart 파일을 복사하여 붙여 넣는 방법으로 my_third_page.dart 파일을 만듭니다.

클래스의 이름을 MySecondPage에서 MyThirdPage로 변경한 후 변경이 필요한 곳만 수정해 주는 것으로 쉽게 하나의 화면을 더 만들 수 있습니다.
변경한 전체 코드는 아래와 같습니다.

// 모듈을 복사하여 수정이 완료된 my_third_page.dart 파일
import 'package:flutter/material.dart';

class MyThirdPage extends StatelessWidget {    // 변경된 코드
  const MyThirdPage({super.key});              // 변경된 코드
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text("세번째 페이지"),     // 변경된 코드
      ),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.green,             // 변경된 코드
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "세번째 페이지입니다.",      // 변경된 코드
              style: TextStyle(fontSize: 40),
            ),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.blue,  // 변경된 코드
                ),
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text(
                "두번째 페이지로 이동",             // 변경된 코드
                style: TextStyle(fontSize: 20),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

예제. MySecondPage에서 MyThirdPage로 이동하는 기능을 구현해 보세요. 구현하는 방식은 MyHomePage에서 MySecondPage로 이동하는 로직과 동일한데 세번째 페이지로 이동 Elevated Button을 만들어 세번째 페이지로 이동하는 코드를 추가하면 됩니다. my_second_page.dart 파일에 import 'my_third_page.dart'; 문장을 추가하는 것도 잊지 말고 추가해야 오류가 발생하는 것을 방지할 수 있습니다.
Page들이 부모 Widget에서 자식 Widget으로 순차적으로 Push되고 Pop되는 경우를 생각해 봅시다. Navigator Stack의 상태는 아래 화면과 같이 변화할 것입니다.

이번에는 MyThirdPage에서 MyHomePage로 바로 이동해야 하는 경우를 생각해 봅시다.
아래 화면과 같은 형태의 이동이 기술적으로 가능하지도 않지만 가능해도 문제입니다.

MyHomePage를 계속 Push하는 것으로 구현할 수도 있는데 동작은 할텐데 정신을 차리고 생각을 좀 해 봅시다. 이렇게 코딩을 하면 정상동작을 하는 것처럼 보이는데 화면이 계속 쌓여가다가 중간에 남은 화면이 계속 메모리에 남아 쌓여 가다가 어느순간 스마트폰이 느려지다가 결국 메모리를 모두 소모하고 멈출 것입니다.

이것이 프로그래머들이 흔히 말하는 메모리 누수의 의미입니다. 이뮬레이터도 이런 현상을 모두 해결하지 못했는지 가끔 동작하지 않고 죽습니다. 메모리 누수를 포함하여 가끔 꼬여버린 컴퓨터의 문제를 해결하는 방법은??? 컴퓨터를 껐다가 켜서 초기화하는 것입니다. → 이것이 전문가들이??? 가장 많이 사용하는 컴퓨터의 문제해결방법인 이유입니다. 저도 이 교안을 만드는 동안에 이뮬레이터의 현상태를 몇번 지웠다(Wipe Data)가 다시 설정했는지 컴퓨터를 몇번을 껐다 켰는지 모릅니다. ㅠㅠㅠ 프로그래밍은 동작할 때부터 더 어렵습니다. 문제들이 숨겨져 있는데 이런 문제를 테스트를 통하여 모두 잡아 내야 하기 때문입니다. 물론 이런 영역은 프로그래밍 전문가들이 할 일입니다만 기획을 하는 사람들도 알고는 있어야 합니다. 그래야 멋진 기획을 할 수 있을테니까요.
자손 화면에서 조상 화면으로 이동하려면 이런 용도에 맞는 popUntil()이라는 별도의 메소드를 사용하고 인자로 (route) => route.isFirst 람다 함수를 넘겨 주어야 합니다.

먼저 MyThirdPage에 홈으로 이동하는 버튼을 만들어 보겠습니다. 홈버튼은 스마트폰 상단의 앱바에 만드는 것이 보기 좋을 것 같습니다.
아래 코드와 같이 AppBar에 actions라는 속성으로 IconButton Widget을 추가하였습니다. 이벤트를 처리하여야 하니 Icon이 아니라 IconButton을 추가하여야 하겠지요?

// 홈버튼 추가후 코드
... 생략 ...
class MyThirdPage extends StatelessWidget {
  const MyThirdPage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text("세번째 페이지"),
        actions: [       // actions 속성 추가 시작
          IconButton(
            icon: Icon(Icons.home),
            onPressed: () {}
          ),
        ]                // actions 속성 추가의 끝
      ),
... 생략 ...

실행한 후 MyHomePage를 거쳐, MySecondPage를 거쳐 MyThirdPage로 이동해 보니 스마트폰의 우측 상단에 즉 AppBar의 우측에 홈 버튼이 나타납니다.

이번에는 홈버튼을 눌렀을 때 MyHomePage로 이동하는 코드를 추가하겠습니다. IconButton Widget의 onPressed 이벤트 처리기에 Navigator.of(context).popUntil까지만 입력하면 아래 화면과 같이 전체 문법을 자동으로 완성해 줍니다.

여기서 predicate는 true 혹은 false를 반환하는 람다함수를 말합니다. Navigator.of(context).popUntil 함수는 predicate가 true를 반환하면 pop을 멈추고 false를 반환하면 계속 pop하며 화면을 Stack에서 지워게 됩니다.

// 변경후 MyThirdPage 클래스 코드
... 생략 ...
class MyThirdPage extends StatelessWidget {
... 중략 ...
          IconButton(
            icon: Icon(Icons.home),
            onPressed: () {
              //Navigator.of(context).popUntil(predicate)
              Navigator.of(context).popUntil( // route.isFirst가 false인 경우 pop 지속
                  (route) => route.isFirst    // route.isFirst가 true인 경우 pop 중단
              );
            },
          ),
... 생략 ...

코드를 완성하여 화면간 이동을 실행해 봅시다. 첫번째 페이지 → 두번째 페이지 → 세번째 페이지 → 첫번째 페이지의 순으로 화면이 이동하는 것을 확인할 수 있습니다.

Widget간 인자 넘기고 받기

아래의 두 코드를 읽으며 인자를 넘겨 주고 넘겨 받는 방법에 대하여 직관적으로 이해해 봅시다.

// Widget으로 인자를 넘겨 주는 코드
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),  // 인자를 넘겨 주는 코드
    );
  }
}

// Widget에서 인자를 받아 오는 코드
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});   // 인자를 받아 속성을 초기화하며
                                                        // 객체를 생성하는 생성자
  final String title;                                   // 인자를 받아 저장하는 속성

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

참고. 위의 코드 중 MyHomePage({super.key, required this.title}); 가 객체의 생성자(Constructor)입니다. **생성자(Constructor)**는 MyHomePage(title: 'Flutter Demo Home Page')와 같이 객체를 변수화 혹은 인스탄스화하는 문장을 만나면 넘겨받은 인자를 객체의 속성으로 초기화하는 방법을 통하여 객체를 생성합니다.

위의 코드를 보고 Widget간에 인자를 넘겨 주고 넘겨 받는 방법을 요약하면 아래와 같습니다.
- 호출받는 Widget의 생성자에 받아올 인자를 정의 & 그에 맞는 속성을 정의
- 호출하는 Widget에서 호출받는 Widget의 정의에 맞게 호출받는 Widget을 호출

그러면 이번에는 위의 코드를 참조하여 MyHomePage에서 MySecondPage로 인자를 넘기는 코드를 구현하면서 Widget간에 인자를 주고 받는 방법을 살펴 봅시다.

// 인자를 넘겨 받는 코드를 하기 전의 MySecondPage 클래스의 헤더 코드
class MySecondPage extends StatelessWidget {
  const MySecondPage({super.key});

MyHomePage 클래스의 코드 형식에 맞게 id와 password를 받아올 수 있도록 MySecondPage 클래스의 코드를 작성해 보았습니다.

// 인자를 넘겨 받는 코드를 한 후의 MySecondPage 클래스의 헤더 코드
class MySecondPage extends StatelessWidget {
  const MySecondPage({super.key, required this.id, required this.password});// 변경된 코드
  final int id;            // 추가된 속성 코드
  final String password;   // 추가된 속성 코드

MyHomePage 클래스에서 MySecondPage 클래스를 호출하는 코드를 수정하기 위하여 main.dart 편집기로 이동했더니 MySecondPage 클래스의 정의가 변하며 오류가 발생하고 있습니다. 그러면 앞에서 정의된 인자의 형식에 맞게 MySecondPage 클래스를 호출하는 문장을 수정해 보겠습니다.

키워드 인자 형식이어서 인자이름: 값의 형식으로 인자를 넘겨 줍니다. 2개의 인자가 모두 필수(required)이어서 id와 password 값을 임의로 지정하여 2개의 인자를 모두 넘겨 주었습니다.

// MySecondPage를 호출하는 코드
MaterialPageRoute(builder: (_) => MySecondPage(id: 320811, password: "mypassword")),

호출할 때의 인자가 속성으로 잘 넘어 오는지 MySecondPage 클래스에서 확인하는 코드를 작성해 보겠습니다.

// 변경전 MySecondPage 클래스의 코드
class MySecondPage extends StatelessWidget {
  const MySecondPage({super.key, required this.id, required this.password});
  final int id;
  final String password;
... 중략 ...
      body: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.blue,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "두번째 페이지입니다.",
              style: TextStyle(fontSize: 40),
            ),
            ... 생략 ...
            
// 변경후 MySecondPage 클래스의 코드
class MySecondPage extends StatelessWidget {
  const MySecondPage({super.key, required this.id, required this.password});
  final int id;
  final String password;
... 중략 ...
      body: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.blue,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(       // 추가된 Text Widget 시작
              "ID - $id / Password - $password",
              style: TextStyle(fontSize: 30),
            ),          // 추가된 Text Widget의 끝
            Text(
              "두번째 페이지입니다.",
              style: TextStyle(fontSize: 40),
            ),
            ... 생략 ...

실행 후 두번째 페이지로 이동해 보니 넘어온 인자의 값이 잘 보입니다.

이번에는 첫번째 페이지에서 책들의 이미지를 보여준 후 이미지를 클릭하면 이미지의 상세화면을 만들어 보여주는 기능을 구현해 보겠습니다.

// 변경후 _MyHomePageState 클래스의 코드
... 생략 ...
            Text(
              "첫번째 페이지입니다.",
              style: TextStyle(fontSize: 40),
            ),
            Row(                  // 코드 추가의 시작
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                GestureDetector(
                  onTap: () {
                    print("파이썬 + AI 책이 클릭되었습니다.");
                  },
                  child: Image.network("https://image.aladin.co.kr/product/34207/82/cover200/896088457x_1.jpg"),
                ),
                GestureDetector(
                  onTap: () {
                    print("점프 투 파이썬 책이 클릭되었습니다.");
                  },
                  child: Image.network("https://image.aladin.co.kr/product/31794/10/cover200/k362833219_1.jpg"),
                ),
              ],
            ),                    // 코드 추가의 끝 
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.blue,
              )
... 생략 ...

위의 코드를 실행해서 책의 이미지가 나오고 Image Widget을 GestureDetector Widget으로 감싸서 이미지를 클릭할 때 이벤트 처리기가 동작합니다.

my_second_page.dart 파일을 복사하여 붙여 넣는 방법으로 book_detail_page.dart 파일을 만듭니다.

그리고 book_detail_page.dart 파일의 코드를 아래와 같이 수정합니다.

// 변경후 book_detail_page.dart 파일의 코드
import 'package:flutter/material.dart';

//import 'my_third_page.dart';          세번째 페이지로 이동하지 않아 삭제

//class MySecondPage extends StatelessWidget {
//  const MySecondPage({super.key, required this.id, required this.password});
//  final int id;
//  final String password;

class BookDetailPage extends StatelessWidget {             // 클래스의 이름을 바꾸고
  const BookDetailPage({super.key, required this.name});   // 책의 이름을 인자로 가져 오도록 수정
  final String name;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(name),                // title을 책의 이름으로 변경
      ),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.brown,             // 배경색을 갈색으로 변경
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            /*
            Text(
              "ID - $id / Password - $password",
              style: TextStyle(fontSize: 30),
            ),
            Text(
              "두번째 페이지입니다.",
              style: TextStyle(fontSize: 40),
            ),
            */
            // 책의 이미지를 임시로 보여줌 - 나중에 인자로 넘어온 책의 이름으로 조회하여 보여줄 것임
            Image.network("https://image.aladin.co.kr/product/3422/90/cover200/8966260993_1.jpg"),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.pinkAccent,
              ),
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text(
                "첫번째 페이지로 이동",
                style: TextStyle(fontSize: 20),
              ),
            ),
            /* 세번째 페이지로 이동 기능을 제거
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.green,
              ),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => MyThirdPage()),
                );
              },
              child: Text(
                "세번째 페이지로 이동",
                style: TextStyle(fontSize: 20),
              ),
            ),
            */
          ],
        ),
      ),
    );
  }
}

그리고 위에서 개발한 BookDetailPage로 이동하도록 main.dart 파일의 코드를 아래와 같이 수정합니다.

// 변경후 main.dart 파일의 _MyHomePageState 클래스의 코드
... 생략 ...
    Text(
      "첫번째 페이지입니다.",
      style: TextStyle(fontSize: 40),
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        GestureDetector(
          onTap: () {
            //print("파이썬 + AI 책이 클릭되었습니다.");
            Navigator.of(context).push(   // 화면 이동 기능 추가
              MaterialPageRoute(builder: (_) => BookDetailPage(name: "파이썬 + AI")),
            );
          },
          child: Image.network("https://image.aladin.co.kr/product/34207/82/cover200/896088457x_1.jpg"),
        ),
        GestureDetector(
          onTap: () {                     
            //print("점프 투 파이썬 책이 클릭되었습니다.");
            Navigator.of(context).push(   // 화면 이동 기능 추가
              MaterialPageRoute(builder: (_) => BookDetailPage(name: "점프 투 파이썬")),
            );
          },
          child: Image.network("https://image.aladin.co.kr/product/31794/10/cover200/k362833219_1.jpg"),
        ),
      ],
    ),
    ElevatedButton(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.blue,
      ),
... 생략 ...

실행해 보면 BookDetailPage의 제목으로 책의 이름이 나타나고 임의의 책 이미지가 화면에 나타나는 것을 확인할 수 있습니다.

이제는 인자로 넘어온 책의 이름으로 이미지의 URL을 찾아 책의 이름에 적합한 책의 이미지를 보여 주는 기능을 개발하겠습니다.
아래 화면과 같이 bookUrls 맵(딕셔너리) 변수를 만들면 const BookDetailPage({super.key, required this.name}); 문장에서 오류가 발생합니다. 이유는 변수 정의전까지 변하지 않는 상수(Constant) 상태이었던 객체가 변할 수 있는 변수(Variable) 상태로 변하기 때문인데

BookDetailPage({super.key, required this.name}); 문장과 같이 const 키워드를 제거하는 것으로 해결이 됩니다.

// 변경후 book_detail_page.dart 파일의 코드
import 'package:flutter/material.dart';

class BookDetailPage extends StatelessWidget {
  // bookUrls 변수의 정의로 BookDetailPage이 const가 아니게 되어 const 삭제
  //const BookDetailPage({super.key, required this.name});
  BookDetailPage({super.key, required this.name});
  final String name;

  // 책의 이름을 키(Key)로 책의 이미지 URL을 값(Value)으로 맵(딕셔너리) 변수를 정의
  var bookUrls = { "파이썬 + AI": "https://image.aladin.co.kr/product/34207/82/cover200/896088457x_1.jpg",
                   "점프 투 파이썬": "https://image.aladin.co.kr/product/31794/10/cover200/k362833219_1.jpg",
                 };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(name),
      ),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.brown, 
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            //Image.network("https://image.aladin.co.kr/product/34207/82/cover200/896088457x_1.jpg"),
            // 책 이미지의 URL을 bookUrls 맵(딕셔너리)에서 찾아서 보여 줌            
            Image.network("${bookUrls[name]}"),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.pinkAccent,
              ),
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text(
                "첫번째 페이지로 이동",
                style: TextStyle(fontSize: 20),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

그러면 선택한 책과 일치하는 이미지가 나타나는 것을 확인할 수 있습니다.

화면을 이동할 때 애니메이션(전환 애니메이션,Transaction Animation)해 주는 Hero Widget을 사용하면 화면의 이동이 매우 역동적으로 변하는데 아래의 코드들과 같이 애니메이션이 필요한 동일한 시각적 요소들을 Hero Widget으로 감싸주면 됩니다. 이때 tag로 제공되는 문자열은 서로 연결되어 애니메이션이 필요한 동일한 시각적 요소들에게 동일한 값이 지정되어야 합니다.

// 화면 전환을 시작하는 Hero Widget 코드 - main.dart 파일의 _MyHomePageState 클래스의 코드 
Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    GestureDetector(
      onTap: () {
        Navigator.of(context).push(
          MaterialPageRoute(builder: (_) => BookDetailPage(name: "파이썬 + AI")),
        );
      },
      child: Hero(              // 책의 이름을 tag로 지정하여 Hero Widget 추가
        tag: "파이썬 + AI",
        child: Image.network("https://image.aladin.co.kr/product/34207/82/cover200/896088457x_1.jpg")
      ),
    ),
    GestureDetector(
      onTap: () {
        Navigator.of(context).push(
          MaterialPageRoute(builder: (_) => BookDetailPage(name: "점프 투 파이썬")),
        );
      },
      child: Hero(
          tag: "점프 투 파이썬", // 책의 이름을 tag로 지정하여 Hero Widget 추가
          child: Image.network("https://image.aladin.co.kr/product/31794/10/cover200/k362833219_1.jpg")
      ),
    ),
  ],
),

// 화면 전환이 끝나는 부분의 Hero Widget 코드 - book_detail_page.dart 파일의 코드
child: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    //Image.network("https://image.aladin.co.kr/product/3422/90/cover200/8966260993_1.jpg"),
    Hero(
      tag: name,      // 인자로 받은 책의 이름을 tag로 지정하여 Hero Widget 추가
      child: Image.network("${bookUrls[name]}")
    ),
    ElevatedButton(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.pinkAccent,
      ),

Hero Widget 애니메이션을 실행해 보면 tag로 연결된 두 이미지가 서로 연결되어 동작하는 듯한 애니메이션이 발생하는 것을 확인할 수 있습니다.
현재까지 작성된 코드를 공유합니다.

// main.dart 파일의 _MyHomePageState 클래스의 코드 
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.pinkAccent,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "첫번째 페이지입니다.",
              style: TextStyle(fontSize: 40),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                GestureDetector(
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(builder: (_) => BookDetailPage(name: "파이썬 + AI")),
                    );
                  },
                  child: Hero(
                    tag: "파이썬 + AI",
                    child: Image.network("https://image.aladin.co.kr/product/34207/82/cover200/896088457x_1.jpg")
                  ),
                ),
                GestureDetector(
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(builder: (_) => BookDetailPage(name: "점프 투 파이썬")),
                    );
                  },
                  child: Hero(
                      tag: "점프 투 파이썬",
                      child: Image.network("https://image.aladin.co.kr/product/31794/10/cover200/k362833219_1.jpg")
                  ),
                ),
              ],
            ),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.blue,
              ),
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (_) => MySecondPage(id: 320811, password: "mypassword",)),
                );
              },
              child: Text(
                "두번째 페이지로 이동",
                style: TextStyle(fontSize: 20),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// BookDetailPage 클래스의 코드 
import 'package:flutter/material.dart';

class BookDetailPage extends StatelessWidget {
  BookDetailPage({super.key, required this.name});
  final String name;

  var bookUrls = { "파이썬 + AI": "https://image.aladin.co.kr/product/34207/82/cover200/896088457x_1.jpg",
                   "점프 투 파이썬": "https://image.aladin.co.kr/product/31794/10/cover200/k362833219_1.jpg",
                 };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(name),
      ),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.brown,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Hero(
              tag: name,
              child: Image.network("${bookUrls[name]}")
            ),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.pinkAccent,
              ),
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text(
                "첫번째 페이지로 이동",
                style: TextStyle(fontSize: 20),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Instructor Note : 노션의 “Flutter FAQ와 Tips”에서 “안드로이드 스튜디오와 삼성폰을 연결하는 방법”, “앱의 이름을 지정하는 방법”, “앱의 아이콘을 지정하는 방법”을 설명할 것 혹은 보여줄 것

[실습] 자신의 가족을 소개하는 family_intro 앱을 개선해 보세요.

지금까지 배운 것들을 기반으로 팀을 소개하는 하나의 화면으로 구성된 앱을 확장하여 아래 그림과 같이 구성원의 이미지를 클릭하는 경우 구성원의 상세 화면으로 이동하는 기능을 가진 앱으로 개선해 보기 바랍니다.

홈화면의 이미지에서 구성원 상세 화면의 이미지로 이동할 때 Hero 애니메이션을 구현해 보고, 앱을 구현한 후 앱의 이름과 앱의 아이콘을 지정하여 안드로이드 스마트 폰에 추억으로 간직하기 바랍니다. 안드로이드 스튜디오에서 이뮬레이터 대신 스마트폰을 연결하여 실행하면 스마트폰에 앱이 설치됩니다.

참고 문헌

[논문]

없음

[보고서]

없음

[URL]

없음

문의사항

[기상학/프로그래밍 언어]

sangho.lee.1990@gmail.com

[해양학/천문학/빅데이터]

saimang0804@gmail.com

[Flutter] 쉽게 배우는 플러터 앱 개발 실무 03강

shlee1990 — Sat, 28 Dec 2024 11:04:54 +0900

정보

업무명 : [Flutter] 쉽게 배우는 플러터 앱 개발 실무 03강
작성자 : 이상호
작성일 : 2024.12.28
설 명 :
수정이력 :

공유 파일

원본 파일

flutter-golden-rabbit-novice-v2-main.zip

drive.google.com

작업 파일

20241228_first_flutter.zip

drive.google.com

pubspec.yaml과 Pub 사이트

[학습목표]

외부에서 제공하는 라이브러리를 사용하기 위하여 pubspec.yaml 파일의 설정법을 알아봅니다

[pubspec.yaml과 Pub 사이트]

Image를 자원(assets)으로 사용하기 위해 pubspec.yaml 파일을 사용했던 것처럼 Flutter의 외부 라이브러리 혹은 패키지를 사용하기 위해서도 pubspec.yaml 파일을 사용하는데 이전에는 스쳐지나갔던 pubspec.yaml에 대하여 조금 더 알아 보도록 합시다.

Java Spring 진영에 Maven Central 사이트가 있는 것처럼

Maven Central (Gradle에서도 사용 가능)

URL: https://search.maven.org

Maven Central Repository Search

search.maven.org

설명: Maven과 Gradle 프로젝트에서 가장 널리 사용되는 라이브러리 저장소입니다. Maven Central은 다양한 라이브러리를 쉽게 검색하고 추가할 수 있도록 지원합니다.
Flutter에는 Pub 사이트가 있어서 제공되는 패키지들에 대한 정보를 제공합니다. 우리는 찾아서 사용하면 됩니다.

Flutter의 Pub 사이트 (pub.dev)

URL: https://pub.dev

The official repository for Dart and Flutter packages.

Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter and general Dart programs.

pub.dev

설명: Flutter 및 Dart 패키지에 대한 중앙 저장소입니다. Flutter 개발자가 패키지를 관리하고 검색할 수 있는 사이트입니다.
사용법: pubspec.yaml 파일에서 패키지를 정의하고, pub get 명령을 사용해 패키지를 다운로드합니다.
아래와 같이 webview_flutter: 4.4.1 패키지를 pubspec.yaml에 등록 후 Pub Get하면 패키지를 가져다 사용할 수 있습니다.

// Webview를 사용하기 위하여 import
import 'package:webview_flutter/webview_flutter.dart';

Fonts를 지정하여 사용하는 방법

폰트 파일을 저장할 fonts 폴더를 만듭니다.

파일 탐색기에서 사용할 수 있는 폰트를 확인합니다.

일부 폰트의 경우에는 폰트 파일에서 마우스 우측 클릭을 한 후 속성을 HMFMPYUN.TTF와 같은 이름을 보고 폰트 파일의 이름을 알 수 있습니다. 그런 경우 파일 탐색기에서 폰트를 Drag하여 안드로이드 스튜디오의 fonts 폴더에 Drop합니다.

파일 탐색기에서 폰트 파일의 이름을 확인하기 어려운 경우 Windows 명령어를 사용하여 폰트 파일 이름을 확인한 후 windows 명령어를 사용하여 복사합니다.

C:\>cd c:\windows\fonts

C:\Windows\Fonts>dir

C:\Windows\Fonts>dir malgun*

C:\Windows\Fonts>copy malgun*.ttf C:\Users\USER\StudioProjects\gesture_widgets\fonts

폰트 파일을 복사해 온 후의 폴더의 형태는 아래 화면과 같습니다.

pubspec.yaml에 복사한 Font를 등록한 후 Pub get 명령어를 수행합니다.

fonts:
    - family: Hmfmpyun
      fonts:
        - asset: fonts/HMFMPYUN.TTF
          weight: 700
    - family: MalgunGothic
      fonts:
        - asset: fonts/malgun.ttf
        - asset: fonts/malgunbd.ttf
          weight: 700

pubspec.yaml에 등록된 Font의 이름을 가져다 사용합니다.

  Text(
    "맑은 고딕",
    style: TextStyle(
      fontSize: 40,
      fontFamily: 'MalgunGothic',
    ),
  ),
  Text(
    "휴면 편지체",
    style: TextStyle(
      fontSize: 40,
      fontFamily: 'MalgunGothic',
    ),
  ),

[실습] 자신의 가족을 소개하는 family_intro 앱을 개발하세요.

family_intro 프로젝트를 만들어 작업하시기 바랍니다.
지금까지 배운 것들을 기반으로 자신의 가족을 소개하는 하나의 화면으로 구성된 앱을 개발하기 바랍니다.
필수적으로 사용해야 할 Widget : Scaffold, Text, Image, Container, Column, Row, Stack, Positioned
디자인 기준 : 팀 구성원들의 이미지를 모두 추가, Children 3개인 Row와 Children 2개를 포함하는 Row를 모두 사용, 팀 고유의 배경 색상, 한글 Font 사용
Instructor Note : family_intro 앱의 실행 화면을 스마트폰에서 팀즈로 화면을 공유하여 수강생들에게 보여 줄 것

코드 팩토리의 플러터 프로그래밍 - 8장 블로그 웹 앱 (194페이지)

프로젝트 이름 : blog_web_app
설명 : https://blog.codefactory.ai 주소를 가진 블로그를 Web View에 보여 준 후 링크를 클릭하며 사용하다가 AppBar의 홈 버튼을 누르면 다시 https://blog.codefactory.ai 주소로 돌아 옵니다.

webview_flutter: 4.4.1 패키지를 pubspec.yaml에 등록 후 Pub Get

코드 팩토리의 플러터 프로그래밍 - 9장 전자액자 (218페이지)

프로젝트 이름 : image_carousel
설명 : PageView Widget을 사용하면 스와이프를 통한 화면 전환이 이루어집니다. 특정 시간이 지나면 화면이 자동으로 전환되는 기능을 Timer 객체를 사용하여 구현합니다.

이미지를 저자의 깃허브(https://github.com/codefactory-co/flutter-golden-rabbit-novice-v2.git)에서 다운받아 images 폴더에 복사해 넣은 후 pubspec.yaml에 등록 후 Pub Get

Dart 언어 II

[학습목표]

Python, Java, Javascript로 배운 프로그래밍의 기본 원리와 개념과 의미를 기억해 봅니다.
이미 알고 있는 프로그래밍 지식을 확장하여 Dart 언어를 이해합니다.

[Dart 언어의 기초 II]

컬렉션 자료형

컬렉션(Collection)은 여러 값을 하나의 변수에 저장할 수 있는 자료형입니다. List와 같이 여러 값을 순서대로 저장하거나, Map과 같이 특정 키값을 기반으로 빠르게 값을 검색해야 하거나, Set과 같이 중복된 데이터를 제거할 때 주로 사용됩니다.
아래 코드와 같이 변수명을 디지핑과 같이 한글로 만들면 오류를 유발하는 경우가 많습니다. → 곧 수정해 놓겠습니다. 변수명을 영문으로 변환하여 이해바랍니다.

리스트(List)는 값이 여러개이기 때문에 대괄호([])사이에 첨자(인덱스,Index)를 사용하여 값을 조회하는데 이때 첫번째 값의 인덱스는 0이 되고, 전체 길이는 변수명.length와 같은 형식으로 알아 볼 수 있습니다.

var 동적 자료형 (List/Map/Set)

var 동적 자료형을 사용하면 코딩을 쉽고 단순하게 유지할 수 있습니다. 정의된 변수를 사용하는 방법은 자료형을 명시적으로 지정한 경우와 다르지 않습니다.
runtimeType 속성과 is 연산자를 사용하여 동적으로 지정된 자료형을 확인하거나 비교할 수 있습니다.
print() 함수를 사용하여 변수에 저장된 값들을 조회볼 수 있는데 디버거(Debugger)를 사용하면 프로그램의 흐름에 따른 변수의 값을 쉽게 확인해 볼 수 있습니다.

// List의 예
void main() {
  // 자료형의 명시적 지정 (정적 자료형)
  List<String> lists = [ "문자열 항목1", "문자열 항목2", "문자열 항목3" ];
  print(lists);

  print(lists[0]);
  print(lists[lists.length-1]);

  print(lists.runtimeType);
  print(lists is List<String>);

  // 자료형의 암묵적 지정 (동적 자료형)
  var listsVar = [ "문자열 항목1", "문자열 항목2", "문자열 항목3" ];
  print(listsVar);
  
  print(listsVar[0]);
  print(listsVar[listsVar.length-1]);

  print(listsVar.runtimeType);
  print(listsVar is List<String>);
}

// Map 혹은 Dictionary의 예
void main() {
  // 자료형의 명시적 지정 (정적 자료형)
  Map<String,String> maps = {"홍길동": "프로젝트관리자","강감찬": "모듈 리더"};
  print(maps);
  print(maps["홍길동"]);
  
  print(maps.runtimeType);
  print(maps is Map<String,String>);

  // 자료형의 암묵적 지정 (동적 자료형)
  var mapsVar = {"홍길동": "프로젝트관리자","강감찬": "모듈 리더"};
  print(mapsVar);
  print(mapsVar["강감찬"]);
  
  print(mapsVar.runtimeType);
  print(mapsVar is Map<String,String>);
}

// Set의 예
void main() {
  // 자료형의 명시적 지정 (정적 자료형)
  Set<String> sets = { "사과", "바나나", "배", "귤", "사과" };  // 사과가 중복
  print(sets);                                                 // 출력에 중복없음

  print(sets.contains("사과"));
  print(sets.contains("파인애플"));

  print(sets.runtimeType);
  print(sets is Set<String>);

  // 자료형의 암묵적 지정 (동적 자료형)
  var setsVar = sets = { "사과", "바나나", "배", "귤", "사과" };
  print(setsVar);

  print(setsVar.contains("사과"));
  print(setsVar.contains("파인애플"));

  print(setsVar.runtimeType);
  print(setsVar is Set<String>);
}

var로 정의한 변수는 한번 변수의 유형이 결정되면 변경될 수 없습니다. dynamic으로 정의한 변수는 한번 변수의 유형이 결정된 뒤에라도 필요에 따라 다른 유형으로 변경될 수 있습니다.
왜 dynamic과 같은 자료형이 존재해야 하는지 언듯 이해가 되지 않을텐데 나중에 꼭 필요한 예를 들어 다시 설명하겠습니다.
지금은 그냥 이질적인 자료형을 모두 수용해야 할 때 dynamic을 사용한다는 정도만 이해하고 갑시다.

연산자

Python은 몫연산자로 //을 사용하는데 Dart 언어는 ~/를 사용하는군요.

Python은 논리 연산자로 and, or, not을 사용하지만, Dart는 Java나 JavaScript처럼 C 스타일의 논리 연산자 &&, ||, !을 사용합니다.

Dart는 Java나 JavaScript처럼 C 스타일의 증감 연산자인 ++와 --를 지원합니다. 이 연산자는 변수의 값을 1씩 증가 또는 감소시키는 데 사용됩니다. Python에서는 이러한 증감 연산자가 없기 때문에, 같은 기능을 하려면 += 1 또는 -= 1을 사용해야 합니다.

Dart 언어는 Java와 JavaScript와 같이 조건 ? 참일 때 값 : 거짓일 때 값 형태의 삼항 연산자를 사용하여 간결하게 조건문을 표현합니다. 반면 Python은 값 if 조건 else 값 형태의 삼항 연산자를 사용하여 조건에 따라 값을 할당하는 방식을 취합니다. 문법(Syntax)적인 형식은 다르나 의미(Semantics)는 if ~ else ~의 복잡한 표현을 단순화하는 것으로 동일합니다.

// Dart 코드
void main() {
    int num1 = 10;
    int num2 = 20;
    int max = num1 > num2 ? num1 : num2;
    print(max);

    int min;
    if(num1 < num2)
        min = num1;
    else
        min = num2;
    print(min);
}

# Python 코드  
num1 = 10
num2 = 20
max_num = num1 if num1 > num2 else num2
print(max_num)

if num1 < num2:
    min_num = num1
else:
    min_num = num2
print(min_num)

조건문

Dart 언어는 Java와 JavaScript와 같이 if와 else if 조건문을 지원합니다. 혹시 조건문의 흐름이 이해가 가지 않는다면 디버거를 사용하여 프로그램의 흐름을 추적해 보는 것이 좋습니다.

// Dart 코드
void main() {
    int num1 = 10;
    int num2 = 20;
    int max = num1 > num2 ? num1 : num2;
    print(max);

    int min;
    if(num1 < num2)
        min = num1;
    else
        min = num2;
    print(min);
}

Dart 언어는 Java와 JavaScript와 같이 switch 조건문을 지원합니다. Python은 기존에는 switch 조건문을 지원하지 않았으나 Python 3.10 이상의 버전에서는 match 조건문을 지원합니다. 문법(Syntax)적인 형식은 다르나 의미(Semantics)는 if ~ else if ~ else 의 복잡한 표현을 단순화하는 것으로 동일합니다.

// Dart 코드
void main() {
    int number = 3;

    switch (number) {
        case 1:
            print("One");
        case 2:
            print("Two");
        case > 2:
            print ("Greater than Two");
        default:
            print("Other");
    }
}

# Python 코드  
number = 3

match number:
    case 1:
        print("One")
    case 2:
        print("Two")
    case _ if number > 2:
        print("Greater than Two")
    case _:
        print("Other")

반복문

for in 반복문은 통상 컬렉션과 함께 사용되며 컬렉션의 요소만큼 반복하여 수행됩니다.

// Dart 코드 (for in 반복문)
void main() {
    // 자료형의 명시적 지정
    List<String> lists = [ "문자열 항목1", "문자열 항목2", "문자열 항목2" ];
    for(String item in lists) {
        print(item);
    }

    // 자료형의 암묵적 지정
    var items = [ "항목1", "항목2", "항목3" ];
    for(var item in items) {
        print(item);
    }
}

while 반복문은 통상 break 문장과 함께 사용되어 특정한 조건이 만족할 때 반복을 중단하게 됩니다.

// Dart 코드 (while 반복문)
import 'dart:math';

int factorial(int n) {
    if (n == 0 || n == 1) {
        return 1;
    }
    return n * factorial(n - 1);
}

void main() {
    // 초기 반복조건 설정
    double error = 100;
    const double tolerance = 0.001;

    double x = 3;
    double oldExpX = 1;
    int i = 1;

    // while 반복문
    while (true) {
        if (error <= tolerance) break;

        double expX = oldExpX + (1 / factorial(i)) * pow(x, i);

        error = (expX - oldExpX).abs();  // 반복조건 변경

        oldExpX = expX;
        i = i + 1;
    }

    print("무한급수를 $i 번 반복하여 찾아낸 exp(3) = $oldExpX");
    print("급수간 오차는 $error 입니다.");
}

혹시 반복문 코드의 흐름이 이해가 가지 않는다면 디버거를 사용하여 프로그램의 흐름을 추적하며 제어변수의 값을 관찰해 보는 것이 좋습니다.

[실습] 장바구니 총합 계산

[실습] 랜덤 점심 메뉴 출력

함수

{int a=1, int b=3}과 같이 이름있는 파라메터에 required 키워드를 생략하고 초기값을 부여하면 생략가능한 파라메터(Optional Parameter)를 만들수 있습니다. add()와 같이 인자에 값을 넘기는 것을 생략하면 초기값이 대신 사용됩니다.

int add({int a=1, int b=3}) => a + b;

void main() {
  print(add());
}

[실습] 학생부 정리하기

학생들의 이름과 성적이 담긴 리스트(List)는 아래와 같습니다. 아래의 리스트에서 구성요소인 맵(Map,딕셔너리/Dictionary)의 값의 자료형이 dynamic인 것을 눈여겨 봅시다.
딕셔너리의 “name” 키의 값의 자료형은 문자열(String)이고 “score” 키의 값의 자료형은 정수(int)이니 이 두가지 자료형을 모두 리스트가 수용하는 맵의 자료형으로 지정하려면 여러가지 자료형을 수용할 수 있는 dynamic 자료형을 사용하여야 합니다.

List<Map<String, dynamic>> students = [
	{"name": "김민준", "score": 85},
	{"name": "이서윤", "score": 92},
	{"name": "박지우", "score": 78},
	{"name": "최예은", "score": 89},
	{"name": "정하윤", "score": 91},
	{"name": "강서연", "score": 74},
	{"name": "윤도윤", "score": 88},
	{"name": "조현우", "score": 95},
	{"name": "오하은", "score": 77},
	{"name": "신우진", "score": 83},
	{"name": "홍서준", "score": 82},
	{"name": "임주원", "score": 94},
	{"name": "류채은", "score": 72},
	{"name": "김하람", "score": 86},
	{"name": "문예준", "score": 80},
	{"name": "최지호", "score": 90},
	{"name": "박다인", "score": 79},
	{"name": "이준우", "score": 88},
	{"name": "김유찬", "score": 87},
	{"name": "윤태민", "score": 93},
	{"name": "전도현", "score": 81},
	{"name": "서연우", "score": 92},
	{"name": "한수민", "score": 76},
	{"name": "유시현", "score": 89},
	{"name": "최지안", "score": 84},
	{"name": "신예지", "score": 85},
	{"name": "장하준", "score": 74},
	{"name": "정세준", "score": 78},
	{"name": "송윤아", "score": 90},
	{"name": "양지호", "score": 87},
	{"name": "백다온", "score": 82},
	{"name": "하지후", "score": 88},
	{"name": "강민재", "score": 93},
	{"name": "정유진", "score": 75},
	{"name": "이재윤", "score": 91},
	{"name": "박민혁", "score": 79},
	{"name": "김태윤", "score": 80},
	{"name": "이도현", "score": 84},
	{"name": "오주원", "score": 77},
	{"name": "조아인", "score": 92},
	{"name": "송다인", "score": 86},
	];
}

다음 명령어를 실행하여 결과를 확인해 보세요
- print(searchByName(students, name: "윤")); // 이름에 "윤"이 포함된 학생 출력
- print(searchByGrade(students, grade: 90)); // 90점 이상인 학생 출력

참고 문헌

[논문]

없음

[보고서]

없음

[URL]

없음

문의사항

[기상학/프로그래밍 언어]

sangho.lee.1990@gmail.com

[해양학/천문학/빅데이터]

saimang0804@gmail.com

[Flutter] 쉽게 배우는 플러터 앱 개발 실무 FAQ 및 Tips

shlee1990 — Tue, 24 Dec 2024 15:31:43 +0900

정보

업무명 : [Flutter] 쉽게 배우는 플러터 앱 개발 실무 FAQ와 Tips
작성자 : 이상호
작성일 : 2024.12.24
설 명 :
수정이력 :

FAQ

안드로이드 스튜디오 설치시 Hang되는 현상이 발생합니다.

단순히 기다려서 해결하였습니다.

안드로이드 스튜디오 설치후 이뮬레이터가 기동이 되지 않고 오류가 발생합니다. 어떻게 조치하여야 하나요?

이뮬레이터 기동이 되지 않고 오류가 발생하면
BIOS의 Advanced CPU에서 Virtualization, VT-x, SVM 등을 찾아 Enable (자동으로 Enable되어 있어 BIOS에 아예 설정 메뉴가 없는 경우도 있으나 그렇지 않은 경우 기종마다 BIOS 기동방식과 메뉴가 다르니 주의하여야 함)
나의 HP 노트북
증상

BIOS 설정을 통한 해결

더존 아카데미 구로의 데스크탑 중의 일부
증상
BIOS 설정을 통한 해결

화면을 모두 다시 뜨고 마지막 설정 화면을 추가
그래도 안되면
→ “Windows 기능 켜기 끄기”에서 “Windows 하이퍼바이저 플랫폼” 혹은 ”가상머신플랫폼” 토글 (선택이 해제되어 있었음 → 그후도 그대로 유지하여 플러터를 정상적으로 사용하였음) → Virtual Box 가상화 소프트웨어 설치시 오류가 발생하고 속도가 너무 느려서 “Windows 하이퍼바이저 플랫폼”을 Enable하여 해결함 → WSL(Windows Subsystem for Linux) 설치시 ”가상머신플랫폼”을 인에이블하라고 하여 인에이블함 → 초기값은 선택이 해제되어 있으나 결국은 모두 선택하여 사용해야 하는 듯

안드로이드 이뮬레이터 실행시 Hang되는 현상이 발생합니다.

설치할 때의 디폴트 이뮬레이터인 Medium Phone API 35가 PC마다 Hang되는 현상이 있음 → 이뮬레이터를 Pixel 8 Pro로 추가하여 해결하였습니다. → 그뒤 6.5인치 폰의 대안으로 6.4인치인 Medium Phone을 사용하였는데 느리기는 해도 사용할 수준은 되었습니다. → LG 노트북의 일부 노트북에서만 Hang을 유발하고 Desktop에서는 Hang을 유발한 적이 없습니다.
PC의 CPU와 Memory의 사용량이 급증하여 **불필요한 프로그램(카카오톡,nProtect, 등)**의 수행을 중단하여 해결하였습니다.
Github가 설치되어 있는 경우 안드로이드 스튜디오에서 프로젝트를 만들때 Hang되는 현상이 발견되어 path 환경변수에서 Git을 제외하여 해결하였습니다. → 맥북에는 git이 기본 명령어로 설치되어 있어서 그런지 이런 현상을 발견할 수 없었습니다.
관리자 권한을 간혹 필요로 하는 경우가 발견되어 관리자 권한으로 실행하였습니다. (File descripter 부족 오류가 이 경우에 해당하였습니다.)
PC나 안드로이 스튜디오를 재기동하여 해결하는 경우도 있었습니다.
프로젝트 새로 만들어 해결하는 경우도 있었습니다.

이뮬레이터가 주기적으로 먹통이 되거나 정상 동작하지 않습니다.

먼저 동작중인 이뮬레이터를 중단(ㅁ) 버튼을 눌러 실행을 중단시킵니다.

그후 … 버튼을 눌러 나타나는 팝업 메뉴에서 Wipe Data 메뉴를 클릭하여 이뮬레이터를 초기화합니다.

그후 이뮬레이터를 다시 기동하여 시도해 보기 바랍니다.

프로젝트 생성이 되지 않고 Hang되는 현상이 있습니다.

프로젝트 생성이 되지 않고 Hang 걸리는 화면은 아래와 같습니다.

이뮬레이터가 Hang되는 현상들을 함께 검토해 보기 바랍니다. C:\Program Files\Git\cmd 경로를 Path 환경 변수에서 제거한 후 정상화되는 경우가 있었습니다. → 맥북에서는 git 명령어가 기본적으로 설치되어 있어서 그런지 프로젝트 생성시 Hang되는 현상이 발생하지 않았습니다. Flutter가 C:\flutter 이외의 경로에 설치된 경우에도 프로젝트 생성시 Hang되는 현상이 발생하였습니다. → 맥북에서는 flutter가 사용자의 문서/flutter(/Users/lab4dx/documents/flutter)에 자동으로 설치되어서 그런지 프로젝트 생성시 Hang되는 현상이 발생하지 않았습니다.
flutter create project_name 명령어로 프로젝트를 생성해 보세요. 전체 플랫폼이 추가되니 필요한 플랫폼 폴더만 남기고 제거하여 사용할 수 있습니다.
Visual Studio Code에서는 프로젝트가 잘 만들어집니다. Visual Studio Code는 안드로이드 스튜디오처럼 IDE를 사용하여 만들지 않고 flutter create project_name 명령어로 프로젝트를 생성해서 잘 만들어지는 것으로 보입니다.

Visual Studio Code는 또 안드로이드 스튜디오와 달리 CPU 자원을 적게 사용합니다.

pubspec.yaml 파일을 수정한 후 아래와 같은 메뉴바가 나타나는 현상이 있습니다. 어떻게 조치하여하여야 할까요?

pubspec.yaml 파일을 수정한 후 Pub get을 해도 간헐적으로 안드로이드 스튜디오의 편집기의 상단에 아래와 같은 메뉴바가 나타나는 경우가 있는데 Pub get 작업이 정상적으로 되었다면 신경쓰지 않아도 됩니다. 아마 안드로이드 스튜디오 통합개발환경의 사소한 오류로 판단됩니다.

images/ 폴더에 등록된 이미지 Asset를 찾지 못하는 경우가 있습니다. 어떻게 조치하여야 하나요?

pubspec.yaml 설정에 문제가 없거나 코드의 경로와 파일명 등에 이상이 없다면 안드로이드 스튜디오를 껏다 켠 후 실행해 볼 것
pubspec.yaml에서 images/ 폴더 설정이 먹히지 않는 경우가 있어서 Image를 개별적으로 Asset으로 등록하면 해결됨

# 변경전
  assets:
    - images/
    
# 변경후
  assets:
    - images/다영.jpg
    - images/다은.jpeg
    - images/우리집 창밖.jpg
    - images/정화.jpg
    - images/쭈쭈.jpg
    - images/콩가루 가족.jpg

idx 환경에서는 “LG전자 DX School.PNG”와 같이 한글로 된 이미지 파일을 전혀 읽지 못하는 현상도 발견됨

주변의 Image와 넓이와 높이를 맞출때 Image에 빈공간이 나타나거나 Image가 왜곡되어 나타나는 경우가 있습니다. 어떻게 해결하여야 할까요?

이미지가 너무 큰 경우에는 Flutter가 아예 수용하지 못하는 현상이 있습니다.
width나 height 인자를 사용하여 Image의 크기를 강제로 조정한 Image에 맞는 적절한 Boxfit 속성을 사용합니다.

  Row(
    children: [
      Image.asset(
        "images/다은.jpeg",
        width: imageWidth3Pictures,
        height: imageHeight, // 동일한 높이 설정
        fit: BoxFit.cover,   // 비율을 유지하면서 잘림
      ),
      SizedBox(width: 5),
      Image.asset(
        "images/정화.jpg",
        width: imageWidth3Pictures,
        height: imageHeight, // 동일한 높이 설정
        fit: BoxFit.cover,   // 비율을 유지하면서 잘림
      ),
      SizedBox(width: 5),
      Image.asset(
        "images/다영.jpg",
        width: imageWidth3Pictures,
        height: imageHeight, // 동일한 높이 설정
        fit: BoxFit.cover,   // 비율을 유지하면서 잘림
      ),
    ],
  ),

이벤트 핸들러를 지정하면 처음에 화면이 로드될 때 실행되고 정작 클릭할 때 이벤트 핸들러가 실행되지 않습니다. 무엇이 문제일까요?

Flutter가 onTap: showFamilyDetail와 같은 형식의 문장은 이벤트 핸들러의 등록으로 인식하는데, onTap: showFamilyDetail("다은")와 같은 형식의 문장은 함수의 호출로 인식하기 때문에 발생하는 문제입니다.

// 문제가 발생한 코드
  GestureDetector(
    onTap: showFamilyDetail("다은"),  // 이벤트 핸들러의 등록이 아니라
    child: Image.asset(               // 함수의 호출로 인식합니다.
      "images/다은.jpg",
      width: imageWidth3Pictures,
      height: imageHeight,
      fit: BoxFit.cover,
    ),
  ),

람다 함수 혹은 한줄 함수의 형식으로 이벤트 핸들러를 등록하여 해결할 수 있습니다.

  GestureDetector(
    onTap: () => showFamilyDetail("다은"), // 람다 함수 혹은 한줄 함수
    child: Image.asset(
      "images/다은.jpg",
      width: imageWidth3Pictures,
      height: imageHeight,
      fit: BoxFit.cover,
    ),
  ),

익명 함수의 형식으로 이벤트 핸들러를 등록하여 해결할 수 있습니다.

// 문제가 발생한 코드
  GestureDetector(
    onTap: () {showFamilyDetail("다은");}, // 익명 함수
    child: Image.asset(
      "images/다은.jpg",
      width: imageWidth3Pictures,
      height: imageHeight,
      fit: BoxFit.cover,
    ),
  ),

Image를 둘러싼 Container에 Border와 Border Radius를 지정했는데 나타지 않고 Image만 나타납니다. 무엇이 문제일까요?

Image가 Container를 가리기 때문에 Border와 BorderRadius가 나타나지 않는 것입니다.

// 문제가 발생한 코드
  Container(
    width: 400,
    height: 400,
    decoration: BoxDecoration(
      border: Border.all(
        color: Colors.black,
        width: 5,
      ),
      borderRadius: BorderRadius.all(Radius.circular(50)),
    ),
    child: Image.asset(
        "images/${name}.jpg",
    ),
  )

Image를 Container의 모양과 동일한 형태로 잘라내기 위하여 ClipRRect Widget(Clip Rounded Rectangle Widget)을 사용하고, Image의 크기를 컨테이너 안에 꽉차도록 Image Widget에 fit: BoxFit.cover 인자를 설정합니다.

  Container(
    width: 400,
    height: 400,
    decoration: BoxDecoration(
      border: Border.all(
        color: Colors.black,
        width: 5,
      ),
      borderRadius: BorderRadius.all(Radius.circular(50)),
    ),
    child: ClipRRect(      // 이미지를 컨테이너와 동일한 모양으로 자름
      borderRadius: BorderRadius.all(Radius.circular(50)),
      child: Image.asset(
        "images/${name}.jpg",
        fit: BoxFit.cover,  // 이미지가 컨테이너 안에 꽉 차도록 설정
      ),
    ),
  )

context를 변수로 사용할 때 어떨 때에는 문법 오류가 발생하지 않고 어떨 때에는 오류가 발생합니다. 무엇이 문제일까요?

StatefulWidget에서는 클래스의 어디에서나 context 변수를 사용할 수 있습니다.

그러나 StatelessWidget에서는 context 변수를 build() 메소드 외부에서 사용할 수 없습니다.

이럴 때에는 이벤트 핸들러를 정의할 때 context를 인자로 추가한 후,

... 생략 ...
  showFamilyDetail(context, name) {    // 이벤트 핸들러 정의시 인자로 context를 추가
    Navigator.of(context).push(MaterialPageRoute(builder: (context) => FamilyDetail(name: name)));
  }
... 중략 ...
    child: GestureDetector(                        // 사용시 인자에
      onTap: () => showFamilyDetail(context,"다은"),// context 추가
      child: Image.asset(
        "images/다은.jpg",
        width: imageWidth3Pictures,
        height: imageHeight,
        fit: BoxFit.cover,
      ),
    ),
... 생략 ...

Color를 Colors 열거형(Enumeration) 외에 16진수 표현을 사용할 수 있나요?

넵, 다른 언어들과 동일하게 지원합니다. 아래와 같은 형식으로 16진수 표현의 Color를 지정할 수 있습니다.

// 16진수로 변경 전 (Colors 열거형 사용)
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),

// 16진수로 변경 후
colorScheme: ColorScheme.fromSeed(seedColor: Color(0xFF673AB7)),

FloatingActionButton을 여러개 만들 수 있을까요?

방법 1. Row Layout 객체를 사용

  floatingActionButton: Row(
    children: [
      FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
      ),
      FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
      ),
    ]
  ),

방법 2. Column Layout 객체를 사용

  floatingActionButton: Column(
    mainAxisAlignment: MainAxisAlignment.end,
    children: [
      FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
      ),
      FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
      ),
    ]
  ),

방법 3. Stack Layout 객체를 사용

  floatingActionButton: Stack(
    children: [
      Positioned(
        bottom: 80,
        right: 10,
        child: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ),
      ),
      Positioned(
        bottom: 150,
        right: 10,
        child: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ),
      ),
    ]
  ),

독립된 Page 화면으로 이동했는데 아래 화면과 같이 화면이 깨지는 현상이 나타납니다. 무엇이 잘못된 것일까요?

독립된 화면이 Scaffold Widget으로 시작하지 않을 때 나타나는 현상입니다.

// 문제 해결 전 코드
import 'package:flutter/material.dart';

class SimpleListViewDetailPage extends StatelessWidget {
  const SimpleListViewDetailPage({super.key, required this.id, required this.password});
  final int id;
  final String password;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.blue,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            "ID - $id / Password - $password",
            style: TextStyle(fontSize: 30),
          ),
          Text(
            "SimpleListViewDetailPage 페이지입니다.",
            style: TextStyle(fontSize: 40),
          ),
        ],
      ),
    );
  }
}

아래 코드와 같이 최상위 Widget을 Scaffold로 만들면 해결이 됩니다.

// 문제 해결 후 코드
import 'package:flutter/material.dart';

class SimpleListViewDetailPage extends StatelessWidget {
  const SimpleListViewDetailPage({super.key, required this.id, required this.password});
  final int id;
  final String password;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(                   // AppBar를 추가함
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(id.toString()),     // title은 임시로 인자로 넘겨 받은 id를 사용함
      ),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.blue,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "ID - $id / Password - $password",
              style: TextStyle(fontSize: 30),
            ),
            Text(
              "SimpleListViewDetailPage 페이지입니다.",
              style: TextStyle(fontSize: 40),
            ),
          ],
        ),
      ),
    );
  }
}

안드로이드 이뮬레이터로 이미지를 처리하는 작업 중 아래 화면과 같이 이뮬레이터가 멈춰 버리는 현상이 자주 발생합니다. 어떻게 해결하여야 할까요?

안드로이드 스튜디오와 idx에서 공통적으로 나타나는 현상인데 이뮬레이터로는 해결하기 어려운 문제로 보입니다. 어쩔 수 없이 스마트폰을 연결하여 테스트해야 한다고 생각합니다.

삼성폰이 Visual Studio Code와 안드로이드 스튜디오에서 인식되지 않는 현상이 있습니다.

C:\Users\user\AppData\Local\Android\Sdk\platform-tools를 Path 시스템 변수에 추가해 보세요. 혹시 케이블이 데이터 통신이 되지 않는 케이블인지 확인해 보세요.

Visual Studio Code에서 이뮬레이터에 연결이 되지 않습니다.

C:\Users\user\AppData\Local\Android\Sdk\platform-tools를 Path 시스템 변수에 추가해 보세요. 안드로이드 스튜디오의 이뮬레이터에 연결이 됩니다.

+ Create Android emulator를 클릭하여 이뮬레이터를 만들어서 사용합니다. 아래 화면과 같이 별도의 안드로이드 이뮬레이터에 연결할 수 있습니다.

그런데 결국 이뮬레이터를 사용한 개발은 느리고 오류가 많아서 교육용 외에는 사용하기 어려운 기술입니다. → 실제 기기를 연결하여 개발합시다.

Intel’s Developer Cloud (IDX)에서 Flutter 개발시 제약 사항이 어떤 것들이 있나요?

안드로이드 앱의 경우 프로젝트의 이름이 namespace와 applicationId와 연동되지 않고 언제나 com.example.myapp입니다. iOS 앱의 경우 어떻게 반영되는지 아직 확인되지 않고 있습니다.

이뮬레이터의 동작이 매우 안정적이지 않습니다. 아래 첫번째 화면과 같이 아이디와 비밀번호 사이를 키보드 포커스가 왔다 갔다하여 입력할 수 없습니다. 아래 두번째 화면과 같이 키보드 입력이 잘 이루어지지 않습니다. 아래 세번째 화면과 같이 키보드 자판이 이유없이 나타나 사라지지 않습니다. 아래 네번째 화면과 같이 이유없이 화면 하단이 깨지고 입력 필드에 있지도 않은 공란이 필드 앞쪽에 나타납니다. → 다행히 키보드 입력을 시도하거나 시간이 지나니 자동으로 해소됩니다. 그리고 Web에서는 이런 현상이 나타나는 것을 발견하지 못했습니다.

오랫동안 이상없이 사용되다가 이뮬레이터에 문제가 생겨서 해결되지를 않습니다. 아래 두번째 화면과 같이 Web은 문제가 없는데 안드로이드 이뮬레이터는 벌써 2일째 Starting preview가 나타나며 무한 수행만 됩니다. Firebase 설정을 여러번 바꾸면서 테스트했는데 아마 이런 형태의 문제는 안드로이드 스튜디오에서도 발생하지 않을까 생각됩니다. → flutter clean 명령을 실행하고 firebase_options.dart 파일과 firebase.json 등 Firebase 환경 설정 파일을 지우고 다시 시도해도 해결이 되지 않습니다. → 소스코드를 이관하여 해결하였습니다. (FAQ 중 “Flutter 프로젝트 이름 변경/Flutter 프로젝트 복사” 참조)

스마트폰을 연결하여 개발할 수 없어서 카메라를 사용한 앱의 개발이 제한적입니다. iOS 이뮬레이터는 제공되지 않으며, 안드로이드 이뮬레이터는 오류가 자주 발생하고 느립니다. 대신 안드로이드 스튜디오에서는 제공되지 않는 Web 이뮬레이터를 제공합니다.

무상으로 사용하는 경우 개발 가능한 최대 프로젝트의 수가 5개입니다.

Backend Server는 로컬 네트워크에 위치하고, idx 개발환경은 클라우드의 외부망에 위치하여 로컬 네트워크에 위치한 Backend Server 접근이 가능하지 않습니다. → idx에서 ngrok를 활용하여 로컬 네트워크에 위치한 Backend Server에 접근하는 방법” Tips 참조하여 해결
가끔 장애가 발생하는데 장애가 발생하는 동안 개발작업을 할 수 없습니다.

프로젝트간에 파일과 폴더 복사 기능을 사용할 수 없습니다. 이미지와 소스코드 이관을 거의 할 수 없는 상태입니다. → 다행히 동일한 프로젝트 내에서는 복사와 이동이 잘 됩니다.

안드로이드 이뮬레이터에서 Tab 키가 동작하지 않습니다. → 불행히 시간이 지나도 해소되지 않습니다. 그러나 Web에서는 이런 현상이 나타나지 않습니다.

가상 환경이 죽어서 살지 않는 현상이 있는 듯합니다. → 프로젝트를 빠져 나갔다가 다시 들어오면 가상 환경이 다시 만들어지며 문제가 해결될 것으로 보입니다.

디버거를 기동했더니 Hang이 걸려 버렸습니다. (아래 첫번째 화면) 때로는 오류 메세지를 보여 주며 중단되기도 합니다. (아래 두번째 화면) → 디버거를 사용하지 못하고 print() 함수를 사용해야 할 것 같습니다. → 화면이 없이 Dart 문장만 있는 간단한 프로그램의 경우에는 디버거가 동작합니다. (아래 세번째 화면)

이뮬레이터가 죽은 뒤 Hard Restart를 하고 프로젝트를 다시 기동하여 가상환경을 다시 만들어도 살아 나지를 않습니다. → 브라우저를 껏다 켜서 해결하였습니다. 아마도 디버거가 Hang될 때 무엇인가가 꼬였나 봅니다.

안드로이드 스튜디오, Visual Studio Code 및 IDX 중에서 어떤 개발 도구를 사용하여야 할까요?

제한된 교육용 : IDX + 이뮬레이터 ← 안드로이드 이뮬레이터로 카메라 및 ios 등의 테스트 제약
교육용 : 안드로이드 스튜디오/Visual Studio Code + 이뮬레이터 + 실제 기기
개발용 : 안드로이드 스튜디오/Visual Studio Code + 실제 기기 + 이뮬레이터
- **← 이뮬레이터의 속도가 느리고 잦은 오류 / 특히 카메라 사용시**
- ** → 맥북 사용시 iOS 이뮬레이터로 증상이 완화되나 카메라 사용불가**

main.dart의 Run Configuration이 깨져서 실행되지 않습니다.

flutter clean 명령으로 현재 build 환경을 초기화한 후 flutter run 명령으로 다시 build하여 실행해 보세요.

안드로이드 스튜디오에서 없는 파일이 있다고 오류가 발생하거나, 파일시스템에 이상이 있다는 오류 메세지가 나오는 등 프로그램 코드에 아무런 이상이 없는데 가끔 도무지 이해할 수 없는 오류가 발생합니다.

프로그램의 실행을 완전히 종료한 후 다시 실행하거나, flutter clean 명령어를 실행한 후 다시 실행해 보거나, Visual Studio Code로 개발도구를 전환하여 프로젝트를 실행해 보는 것도 좋은 대안입니다.
Visual Studio Code는 Flutter 전용 도구가 아니어서 Device Manager, SDK Manager, Device Explorer와 같은 기능이 제공되지 않습니다. 하지만 플러터 개발에 최적화된 환경을 제공하며, 필요한 경우 Android Studio와 병행하여 사용할 수도 있습니다.

Dart SDK is not configured 오류가 발생하며 앱을 실행할 수 없습니다.

Flutter가 Upgrade된 후 이전 버전의 Flutter에서 개발된 프로젝트에서 발생하는 오류입니다. 안드로이드 스튜디오의 File > Settings > Plugins로 이동하여 Flutter 플러그인을 Update합니다.

Using compileSdk 35 requires Android Gradle Plugin (AGP) 8.1.0 or higher. 오류가 발생합니다.

Flutter Upgrade에 따라 파생되는 문제입니다.

AGP를 업그레이드하지 않고 문제를 해결하려면 compileSdkVersion을 낮춥니다.
- android/app/build.gradle 파일 수정: compileSdkVersion을 34로 낮춥니다.

gradle
코드 복사
android {
    compileSdkVersion 34 
    defaultConfig {
        targetSdkVersion 34
    }
}

Tips

안드로이드 스튜디오와 삼성폰을 연결하는 방법

인터넷 검색어 : 안드로이드 스튜디오 삼성폰 연결
첫번째 링크 : #3.안드로이드 스튜디오 스마트폰 연결하기(개발자모드 설정) (tistory.com)
주의 : 스마트폰 연결 후 안드로이드에서 폰이 연결되지 않는 현상이 간헐적으로 발생하는데 그럴 때에는 스마트폰의 개발자 옵션에서 USB 디버깅 옵션을 껏다 켜는 것을 반복합니다.

맥북에서 안드로이트 스튜디오와 Flutter를 설치하는 방법

Windows PC에서 Flutter 앱을 개발하면 iOS는 테스트가 가능하지 않은 한계가 있어서 Flutter 앱의 개발은 맥북을 사용할 것을 권고드립니다. 필요할 때 인터넷 검색과 생성형 AI의 도움을 받아 개발 환경을 설정하여 사용하기 바랍니다.
인터넷 검색어 : 맥북 flutter 설치
첫번째 링크 : https://velog.io/@juheesvt/Flutter-맥-OS에서-플러터-설치하기
주의 : 제 기억에 위의 링크에 설명된 것보다 예외사항이 훨씬 많았습니다. 가시는 걸음 걸음 놓인 오류를 사뿐히 즈려 밟고 가야 합니다. 코드팩토리의 플러터프로그래밍 2판 28페이지 ~ 32페이지에서 여러가지 경우의 수에 맞게 상세하게 설명하고 있습니다.

맥북에서 iOS 시뮬레이터를 시작하는 방법

맥북의 App Store에서 Xcode 개발도구를 설치합니다.
Xcode 개발도구에서 Xcode → open developer tool → Simulator 메뉴를 선택합니다.
iOS 시뮬레이터에서 File → Open Simulator → iPhone 15 Pro 혹은 원하는 폰의 종류를 선택합니다.
iOS 시뮬레이터가 기동된 것을 확인한 후 안드로이드 스튜디오에서 기동된 iPhone 15 Pro (mobile) 혹은 원하는 폰의 종류를 이뮬레이터로 선택합니다.

맥북에서 안드로이트 스튜디오와 아이폰을 연결하는 방법

인터넷 검색어 : 맥북 flutter 아이폰 연결
권한이 있는 첫번째 링크 : https://code-boki.tistory.com/110

맥북에서 안드로이트 스튜디오와 안드로이드폰을 연결하는 방법

안드로이드 스마트폰을 맥북에 연결 (맥도로이드) : https://mac.eltima.com/ko/connect-samsung-phone-to-mac.html#cfp-toc-anchor-0

Flutter Doctor 명령어로 설치 오류를 해결하는 방법

명령 프롬프트에서 flutter doctor 명령어를 실행하여 Flutter 개발 환경에 문제가 없는지 확인해 봅시다. “flutter doctor” 명령어는 Flutter 개발을 위한 안드로이드 스튜디어가 비정상 동작할 때 상태를 진단하는 유용한 명령어이니 꼭 기억해 둡시다.
아래 화면을 보니 정상적으로 설치되어 사용할 수 있음에도 불구하고 세개의 X 표시가 나타납니다. 안드로이드 스튜디오의 실행 로그와 마찬가지로 오류 해결의 실마리가 메세지에 들어 있는 경우가 많으니 자세히 읽어 봅시다.

cmdline-tools component is missing, Android license status unknown, Visual Studio is missing necessary components 이렇게 3개의 오류 메세지가 나타나는데 우리가 Visual Studio 통합 개발 환경은 사용하지 않을 것이니 마지막 오류는 무시하고 첫번째와 두번째 오류를 해결하면 됩니다.
먼저 첫번째 오류는 명령어 도구(cmdlin-tools)가 설치되어 있지 않아 발생하는 것인데 인터넷 검색이나 생성형 AI 서비스를 활용하여 문제를 해결할 수 있을 것입니다. 인터넷에 “cmdline-tools component is missing”를 입력하여 검색해 보니 많은 분들이 해결책을 정리하여 올려 놓았습니다.

ChatGPT와 Gemini 생성형 AI 서비스도 해결책을 정리하여 알려 줍니다.

다행히 인터넷 검색에 기사들이 많이 나오니 그중 첫번째 게시물을 클릭하여 해결해 보겠습니다.
https://velog.io/@soongle/flutter-cmdline-tools-component-is-missing
두번째 Android license 문제는 다행히 오류 메세지 속에 해결 방법이 들어 있습니다.

X Android license status unknown.
  Run `flutter doctor --android-licenses` to accept the SDK licenses.
  See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.

flutter doctor --android-licenses 명령어를 실행한 후 y를 반복하여 입력하여 라이센스 조건을 수용합시다.

다시 flutter doctor 명령어를 실행해 보면 Visual Studio를 제외한 모든 문제들이 사라진 것을 확인할 수 있습니다.

앱의 이름을 지정하는 방법

앱의 아이콘을 지정하는 방법

먼저 .png 확장자를 가지는 Image 파일로 변환합니다.

.png 이미지 파일의 크기를 아래와 같이 각각 변환한 후

이름을 모두 ic_launcher.png로 바꾸어 android/app/src/main/res 폴더에 각 해상도에 맞추어 저장합니다.
아래는 변경전 이미지입니다.

아래는 변경후 이미지입니다.

안드로이드 에뮬레이터에 사진 추가하기

안드로이드 스튜디오의 Device Explorer를 사용하여 사진을 추가할 수 있습니다. ChatGPT에 문의하니 아래와 같이 알려 줍니다.

먼저 안드로이드 스튜디오에서 File > Tool > Windows > Device Explorer를메뉴를 클릭합니다.

Device Explorer에서 sdcard > Pictures 폴더를 찾아 해당 폴더에서 마우스 우측 클릭한 후 나타나는 팝업 메뉴에서 Upload 메뉴를 클릭하여 이미지를 Upload합니다.

그리면 복사한 이미지가 나타나는 것을 확인할 수 있습니다.

복사한 사진이 나타나지 않을 때 응급조치 방법
1. 1. C:\Users\user\AppData\Local\Android\Sdk\platform-tools\adb shell am broadcast -a android.intent.action.MEDIA_SCANNER_SCAN_FILE -d [file:///sdcard/Pictures/IMG_20150514_1.jpg](file:///sdcard/Pictures/IMG_20150514_1.jpg) 과 같은 형식의 명령어로 이뮬레이터의 사진을 가상 장치에 인식시킵니다.
  2. 이뮬레이터를 재시작해 봅니다.

안드로이드 에뮬레이터 카메라 활성화

안드로이드 스튜디오의 Device Manager를 사용하여 사진을 추가할 수 있습니다. Device Manager에서 … 아이콘을 클릭하여 나타나는 팝업 메뉴에서 Edit 메뉴를 클릭한 후

Show Advanced Settings 버튼을 클릭한 후

Camera의 Front와 Back을 모두 Webcam0으로 선택합니다.

그러면 이뮬레이터에서 Camera 사용 승인 절차를 거쳐서

Camera를 사용할 수 있게 됩니다.

iOS 에뮬레이터에 사진 추가하기

iOS 14 이후 버전의 시뮬레이터에서 지원된다고 하나 15버전에서도 해당되는 메뉴를 찾을 수 없었습니다.

iOS 에뮬레이터 카메라 활성화 하기

iOS 15버전에서도 아직 공식적으로 카메라 촬영 기능이 제공되지 않습니다.

안드로이드 에뮬레이터에 한글 추가

안드로이드 에뮬레이터에 한글을 추가하는 방법은 일반 스마트폰에 한글을 추가하는 방법과 동일합니다. 다만 우리가 폰을 구매할 때 한글이 자동으로 설정되어 출시되기 때문에 아래와 같은 방법으로 한글을 추가할 일이 없는 것입니다. 그러나 에뮬레이터는 기본 언어가 한글이 아니기 때문에 아래와 같은 설정을 하여야 합니다.
먼저 이뮬레이터의 홈버튼을 눌러 홈화면으로 이동합니다.

홈화면을 위로 스와이프(마우스로 화면의 중앙을 잡아 위로 끌러 올리면 됨)하여 앱목록이 나타나면 Settings 앱을 클릭합니다.

System 메뉴를 클릭합니다.

Languages 메뉴를 클릭합니다.

System Languages 메뉴를 클릭합니다.

Add a language 메뉴를 클릭합니다.

korean으로 언어를 검색하여 한국어를 설치합니다.

한국어가 기본언어가 되도록 한국어를 맨위로 끌어 올립니다. 그러면 한글을 입력할 수 있는 상태가 됩니다.

안드로이드 이뮬레이터에 이미지를 저장하는 방법

이미지를 검색한 후 이미지에서 마우스를 길게 눌렀다 떼면 이미지를 다운로드하는 메뉴가 나타납니다. 이때 Download Image 메뉴를 선택하면 이미지가 이뮬레이터에 저장됩니다.

이뮬레이터의 홈버튼을 눌러 홈화면으로 이동한 후 화면을 마우스로 위로 끌어 올리면 설치된 앱들이 나타나는데 여기서 Photos 앱을 실행하면 다운로드된 이미지를 확인할 수 있습니다.

단, 이뮬레이터를 초기화하기 위하여 Wipe Data하거나 Reset하는 경우 이뮬레이터에 저장된 이미지가 사라지니 이미지나 카메라 관련한 작업을 할 때에는 이뮬레이터를 사용하지 말고 스마트폰을 직접 연결하여 사용해야 할 것을 권고드립니다.

iOS 이뮬레이터에 이미지를 저장하는 방법

“안드로이드 이뮬레이터에 이미지를 저장하는 방법”에서 Download Image 메뉴대신 Save to Photos 메뉴를 선택한 후 Photos 앱을 실행하면 다운로드된 이미지를 확인할 수 있습니다.
pubspec.yaml 파일에 video_player: ^2.5.1를 디펜던시로 추가합니다.

video_player 라이브러리를 import 합니다.

import 'package:video_player/video_player.dart';

코드 예제 1 : Widget이 기동될 때 Network URL을 통하여 동영상을 재생하는 코드

  var videoPlayerController;   // VideoPlayerController 변수 정의

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
		// VideoPlayerController 객체 생성
    videoPlayerController = VideoPlayerController.networkUrl( 
        Uri.parse('https://firebasestorage.googleapis.com/v0/b/totemic-fulcrum-420006.firebasestorage.app/o/uploads%2F1000002759.mp4?alt=media&token=e958a190-d6c8-4ee6-a54f-be0ec79883fa')
    )
    ..initialize().then((_) { // VideoPlayerController 객체 초기화 완료 후 화면 갱신
      setState(() {});     // then은 await와 같은 기능
    })                     
    ..setLooping(true);    // 동영상 반복 재생 설정
  }                        // .. 연산자는 객체를 생성한 후 해당 객체의 메서드를 호출하거나
                           // 필드를 설정할 때 사용하는 약식 문법입니다. 
                           // Cascade 연산자라고 불립니다.

build() 함수 내에서 동영상을 보여 주기 위한 Widget은 아래와 같이 코드합니다.

    videoPlayerController.value.isInitialized
    ? AspectRatio(     // 주어진 위젯의 가로와 세로 비율을 유지하면서 크기를 조정
      aspectRatio: videoPlayerController.value.aspectRatio,
      child: VideoPlayer(videoPlayerController),
    )
    : CircularProgressIndicator(), // 초기화가 완료될 때까지 로딩 표시

VideoPlayer Widget을 실행하고 중단하는 코드는 아래와 같은 형태로 코드합니다.

  floatingActionButton: FloatingActionButton(
    onPressed: () {
      // 동영상 재생 및 일시정지 토글
      setState(() {
        videoPlayerController.value.isPlaying
            ? videoPlayerController.pause()
            : videoPlayerController.play();
      });
    },
    child: Icon(
      videoPlayerController.value.isPlaying ? Icons.pause : Icons.play_arrow,
    ),
  ),

코드 예제 2 : gallery_camera 프로젝트에서 동영상을 선택할 때 File 객체를 사용하여 동영상을 재생하는 코드
VideoPlayerController 변수를 정의한 후 pickVideo() 함수에서 VideoPlayerController 객체를 초기화합니다.

  var videoPlayerController;

  pickVideo() async {
    var picker = ImagePicker();
    var pickedVideo = await picker.pickVideo(source: ImageSource.gallery);

    if (pickedVideo != null) {
      video = File(pickedVideo.path);

      // VideoPlayerController.networkUrl을 VideoPlayerController.file로 변경
      videoPlayerController = VideoPlayerController.file(video)
        ..initialize().then((_) {
          setState(() {});
        })
        ..setLooping(true);
    }
  }
  
  takeVideo() async {
    var picker = ImagePicker();
    var pickedVideo = await picker.pickVideo(source: ImageSource.camera);

    if (pickedVideo != null) {
      video = File(pickedVideo.path);

      // VideoPlayerController 객체 생성
      videoPlayerController = VideoPlayerController.file(video)
        ..initialize().then((_) {
          // VideoPlayerController 객체 초기화 완료 후 화면 갱신
          setState(() {}); // then은 await와 같은 기능
        })
        ..setLooping(true); // 동영상 반복 재생 설정
    }
  }
  
  @override
  void dispose()
  {
    // TODO: implement dispose
    videoPlayerController?.dispose(); // 나중에 동영상 촬영을 하지 못하게 되는 현상 방지
    super.dispose();
  }

build() 함수 내에서 동영상을 보여 주기 위한 Widget은 아래와 같이 코드합니다.

video == null
    ? Text('동영상을 선택하세요.')
    : Column(
      children: [
        //Text('비디오 파일: ${video.path}'),       // 삭제
        videoPlayerController.value.isInitialized   // 동영상 코드 시작
        ? AspectRatio(
          aspectRatio: videoPlayerController.value.aspectRatio,
          child: VideoPlayer(videoPlayerController),
        )
        : CircularProgressIndicator(),              // 동영상 코드의 끝
        ElevatedButton(
          onPressed: () {},
          child: Text('동영상 업로드'),
        ),
      ],
    ),

VideoPlayer Widget을 실행하고 중단하는 코드는 생략합니다. 필요시 코드 예제 1을 참조하여 코드하기 바랍니다.

ngrok를 활용하여 로컬 네트워크에 위치한 Backend Server에 접근하는 방법

ngrok 사이트로 이동하여 로그인한 후 프로그램을 다운로드합니다. Edge 브라우저에서는 프로그램의 다운로드가 허용되지 않으니 Chrome 브라우저를 사용합니다.

다운로드 받은 파일의 압축을 풀어 c:\windows\system32 폴더에 저장합니다.

명령창에서 ngrok config add-authtoken your_auth_token 형태의 명령을 실행하여 ngrok를 수행할 권한을 얻습니다. your_auth_token은 ngrok에 Login한 후 아래 화면의 아래쪽에 잘려진 부분의 위치에 개인에게 제공되는 authtoken을 사용하기 바랍니다.

명령창에서 ngrok http 8087 명령을 실행하여 PC의 서비스(http와 같은 특정 프로토콜의 8087과 같은 특정 포트)를 외부망에 공개합니다.

ngrok http 8087 명령을 실행한 후 위와 같은 화면이 나타난다면 외부망에서 https://7813-121-141-142-246.ngrok-free.app로 접근하는 경우 ngrok를 실행한 PC의 http://localhost:8087로 포워딩(Forwarding)되어 접근할 수 있게 됩니다. 아래와 같은 화면이 나타나면 Visit Site 버튼을 클릭합니다.

단, 이 URL은 ngrok가 실행될 때마다 변경되니 한번 실행된 ngrok를 종료했다 다시 실행하면 다시 변경된 URL를 사용하여야 하니 매우 주의하여야 합니다.
특히 Flutter 등의 Client 프로그램을 사용하여 접근하는 경우 프로그램도 매번 수정하여야 하여 더욱 주의가 필요합니다.

flutter 프로젝트에 플랫폼을 추가하는 방법

Flutter에서는 개별 플랫폼만 추가하는 직접적인 명령어는 제공하지 않지만 flutter create . 명령어와 같이 플랫폼 이름으로 점(.)을 사용하면 추가하지 않은 모든 플랫폼을 프로젝트에 추가할 수 있습니다. 전체 플랫폼을 추가한 후 필요한 플랫폼만 남기고 나머지 플랫폼을 삭제하기 바랍니다.

Flutter 프로젝트 이름 변경/Flutter 프로젝트 복사

먼저 새로운 프로젝트를 만듭니다.
lib 폴더의 소스코드를 복사합니다.
images 폴더와 fonts 폴더를 등 기타 자원(assets) 폴더를 모두 복사합니다.
앱아이콘 복원 : android/app/src/main/res 폴더에서 mipmap으로 이름이 시작하는 폴더를 복사합니다.
앱이름 변경 : android/app/src/main/res 폴더의 AnrdoidManifest.xml 파일에서 android:label XML 키를 앱이름으로 다시 변경합니다.
pubspec.yaml 파일을 복사해 온 후 Pub Get 명령을 수행합니다.
SDK Version 불일치가 발생하는 경우 flutter upgrade 명령을 사용하여 flutter 버전을 업그레이드합니다.
test 폴더 하단의 widget_test.dart 파일에서 오류가 발생하는 경우 파일을 삭제합니다.
문법 오류가 발생하는 곳을 찾아 내부 모듈 import를 모두 상대 경로로 바꿉니다.
남아 있는 캐시와 여러가지 종속성 및 기술적인 문제의 발생 가능성이 높지만 ChatGPT와 Gemini 생성형 AI의 권고도 참고하기 바랍니다. → 아마도 위에서 설명한 1~9번의 방법을 사용하게 될 것으로 믿습니다.
아래는 ChatGPT의 권고입니다.

Flutter 프로젝트의 이름을 변경하려면 아래 단계들을 따라주세요. 프로젝트 이름을 바꿀 때 여러 파일과 설정을 업데이트해야 하므로, 주의 깊게 확인하면서 진행하세요.

프로젝트 폴더 이름 변경

프로젝트의 루트 디렉토리 이름을 새 이름으로 변경합니다. 예를 들어, old_project_name을 new_project_name으로 바꿉니다.

pubspec.yaml 파일 수정

pubspec.yaml 파일을 열어 name 속성을 새 프로젝트 이름으로 변경합니다.

# yaml
코드 복사
name: new_project_name

Android 설정 수정

android/app/src/main/AndroidManifest.xml 파일에서 <application android:label="OldProjectName"> 부분을 찾아서 새로운 이름으로 변경합니다.
android/app/build.gradle 파일의 applicationId 부분을 새 패키지 이름으로 바꿉니다 (이 작업은 패키지 이름을 바꾸는 경우에만 필요).

iOS 설정 수정

ios/Runner/Info.plist 파일을 열고 CFBundleName 항목을 새로운 프로젝트 이름으로 업데이트합니다.
Xcode에서 ios/Runner.xcodeproj 파일을 열고, 프로젝트 설정에서 Display Name을 새로운 이름으로 변경합니다.

프로젝트 빌드

변경 사항을 반영하려면 기존 빌드 캐시를 삭제하고 프로젝트를 다시 빌드하는 것이 좋습니다.

# bash
코드 복사
flutter clean
flutter pub get

iOS 및 Android 앱 이름 업데이트 확인

Android와 iOS에서 앱이 올바른 이름으로 표시되는지 확인하려면 에뮬레이터 또는 실제 디바이스에서 실행해 보세요.
이 작업 후에도 특정 플랫폼에서 앱 이름이 변경되지 않으면, 캐시 문제일 수 있으므로 Flutter 프로젝트나 에뮬레이터의 캐시를 정리하고 다시 실행해 보세요.

플러터 프로젝트 이름 변경 방법

플러터 프로젝트의 이름을 변경하는 것은 생각보다 간단하지만, 몇 가지 주의해야 할 사항이 있습니다. 변경 과정에서 놓치기 쉬운 부분까지 포함하여 자세히 설명해 드리겠습니다.

프로젝트 폴더 이름 변경

터미널(또는 명령 프롬프트)을 열고 프로젝트 폴더로 이동합니다.
mv 명령어를 사용하여 폴더 이름을 변경합니다.

# Bash
mv 기존_프로젝트_이름 새_프로젝트_이름

Android Studio 프로젝트 파일 업데이트

Android Studio에서 변경된 프로젝트 폴더를 엽니다.
.idea 폴더 삭제: 이 폴더는 Android Studio의 프로젝트 설정 정보를 저장하는 곳으로, 이전 프로젝트 정보를 포함하고 있으므로 삭제합니다.
app/build.gradle 파일 수정: applicationId를 새 프로젝트 이름에 맞게 변경합니다.

# Groovy
android {
    namespace 'com.example.new_app' // 새 패키지 이름으로 변경
    // ...
}

AndroidManifest.xml 파일 수정: package 속성을 새 패키지 이름으로 변경합니다.

# XML
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.new_app">
    // ...
</manifest>

iOS 프로젝트 파일 업데이트

ios 폴더 내 Runner 프로젝트 열기: Xcode에서 ios 폴더 내 Runner 프로젝트를 엽니다.
Info.plist 파일 수정: Bundle Identifier를 새 프로젝트 이름에 맞게 변경합니다.
Runner 타겟 설정: Runner 타겟의 Identity 탭에서 Bundle Identifier를 다시 한번 확인하고 변경합니다.

pubspec.yaml 파일 수정

pubspec.yaml 파일을 열고 name 필드를 새 프로젝트 이름으로 변경합니다.

Flutter Pub get 실행

터미널에서 변경된 프로젝트 폴더로 이동하여 다음 명령을 실행하여 패키지를 다시 가져옵니다.

# Bash
flutter pub get

기타 설정 변경

assets 폴더 경로: assets 폴더에 접근하는 코드가 있다면 해당 경로를 수정해야 합니다.
import 경로: import 문에 사용된 경로도 새 프로젝트 이름에 맞게 변경해야 합니다.
기타 설정 파일: 프로젝트 설정 파일 (예: .vscode 설정 파일)에 있는 프로젝트 이름 관련 설정을 변경해야 할 수 있습니다.

주의사항

백업: 변경하기 전에 프로젝트를 백업하는 것이 좋습니다.
단축키 사용: Android Studio에서 단축키를 사용하면 더 빠르게 파일을 찾고 수정할 수 있습니다.
꼼꼼한 확인: 모든 파일이 정확하게 변경되었는지 꼼꼼하게 확인해야 합니다.
플러그인 설정: 사용 중인 플러그인 설정도 새 프로젝트에 맞게 다시 설정해야 할 수 있습니다.

추가 팁

스크립트 활용: 반복적인 작업을 자동화하기 위해 스크립트를 작성할 수 있습니다.
rename 패키지: rename 패키지를 사용하여 파일 이름을 일괄적으로 변경할 수 있습니다.
주의: 위 과정에서 누락된 부분이나 오류가 발생할 수 있으므로 변경 전에 반드시 백업을 하고 신중하게 진행해야 합니다.
더 궁금한 점이 있다면 언제든지 질문해주세요.
참고: 위 설명은 일반적인 경우를 예시로 설명한 것이며, 프로젝트의 복잡도에 따라 추가적인 작업이 필요할 수 있습니다.

Visual Studio Code에서 Flutter 개발시의 설치 방법

Flutter 설치
안드로이드 스튜디오 설치
Visual Studio Code 설치 및 Flutter/Dart 확장 설치 (Flutter 확장을 설치하면 Dart 확장이 함께 이루어집니다.)

보기 > 명령 팔레트 메뉴(Ctrl+Shift+P)를 선택한 후 Run Flutter Doctor를 실행하여 설치 상태를 확인합니다.

Visual Studio Code에서 Flutter 개발시의 프로젝트 생성 방법

보기 > 명령 팔레트 메뉴(Ctrl+Shift+P)를 선택한 후 New Project를 실행합니다.

프로젝트 템플릿으로 Application을 선택합니다.

새 폴더 버튼을 눌러 프로젝트를 생성할 폴더를 생성한 후 선택합니다.

프로젝트 이름을 폴더 이름과 동일하게 입력한 후 엔터 키를 칩니다.

Visual Studio Code의 경우 개발 대상 플랫폼을 선택하는 기능이 없어 android, ios, linux, macos, web 및 windows 폴더가 모두 만들어집니다. 원하지 않는 개발 플랫폼의 폴더를 삭제한 후 사용하기 바랍니다 .

Visual Studio Code에서 실행 플랫폼 선택 방법

Visual Studio Code의 우측하단에서 No Device 버튼을 클릭하면 이뮬레이터를 포함하여 실행이 가능한 Chrome, Edge, Windows 및 SM A235N과 같이 PC에 연결된 폰 등의 장치가 나타납니다.

참고 문헌

[논문]

없음

[보고서]

없음

[URL]

없음

문의사항

[기상학/프로그래밍 언어]

sangho.lee.1990@gmail.com

[해양학/천문학/빅데이터]

saimang0804@gmail.com

[Flutter] 쉽게 배우는 플러터 앱 개발 실무 02강

shlee1990 — Sat, 21 Dec 2024 10:48:57 +0900

정보

업무명 : [Flutter] 쉽게 배우는 플러터 앱 개발 실무 02강
작성자 : 이상호
작성일 : 2024.12.21
설 명 :
수정이력 :

공유 파일

원본 파일

flutter-golden-rabbit-novice-v2-main.zip

drive.google.com

작업 파일

20241221_first_flutter.zip

drive.google.com

기본 Widget I

[학습목표]

Flutter가 객체 지향 프레임워크(Object Oriented Framework)라는 것을 이해합니다.
Widget의 기본적인 개념과 원리와 의미를 이해합니다.
Flutter가 제공하는 Widget을 추가, 수정 삭제하며 Widget 객체를 체험으로 익힙시다.
기본적인 Widget들의 사용법을 익히고 코딩해 본다.

[객체]

앞에서 Dart의 자료형(Data Type)이 객체(Object)이고, Flutter의 레고블럭에 해당하는 위젯(Widget)도 객체(Object)라고 설명했습니다.
하나의 객체는 객체의 상태(State)나 속성(Property)을 나타내는 멤버 변수(Variable)와 객체의 행동(Behavior)을 나타내는 멤버 함수(Function) 혹은 메소드(Method)로 구성됩니다.
객체를 만드는 것은 어려우나 만들어진 객체를 사용하는 것은 쉬운데, 먼저 앞에서 설명한 코드들 중에서 객체를 만들어 사용하는 예를 들어 객체를 만들어 사용하는 법을 설명하겠습니다.
객체는 클래스(Class)를 사용하여 객체를 만들어 사용합니다. 클래스의 이름은 변수나 속성과 달리 대문자로 시작합니다.

[객체의 생성 - 속성이 없는 경우]

아래의 코드에서 Placeholder는 int나 String과 같은 클래스(Class)입니다. Placeholder()과 같이 클래스 이름에 괄호를 붙이면 객체가 생성됩니다.

Placeholder()

[객체의 생성 - 속성을 특정 위치에 부여하는 경우]

아래의 코드를 보면 'App Bar의 타이틀' 문자열을 Text 클래스의 첫번째 속성으로 넘겨주고 있습니다.

[객체의 생성 - 속성을 이름으로 부여하는 경우]

아래의 코드를 보면 home:과 같이 속성의 이름을 소문자로 주고 그뒤에 Placeholder() 값을 주어 MaterialApp() 객체를 생성하고 있습니다. Placeholder()와 같은 객체도 정수나 문자열 등의 다른 자료형과 같이 값으로 사용될 수 있습니다.

MaterialApp(
	home: Placeholder(),
)

[객체의 생성 - 속성을 여러개 지정하는 경우]

위치로 지정하는 속성을 앞에 오게 하고, 이름으로 지정하는 속성을 뒤에 배치하는데 이름으로 지정하는 속성간의 순서는 상관없습니다. 속성들은 콤마(,)로 구분합니다.

Text(
  'Scaffold의 몸통(body)',
        style: TextStyle(
    color: Colors.white,
    fontSize: 26,
  ),
),

[객체의 메소드]

아래의 코드를 보면 정수형 객체인 ageInt에 toString() 메소드가 존재하여 정수형 자료형을 문자열 자료형으로 변환해 주고 있습니다.

int ageInt = 42;
String ageString = ageInt.toString();

[Flutter 프레임워크 코드 분석 I]

Instructor Note : 안드로이드 스튜디오의 Font 크기를 20으로 키우고, 브라우저의 화면도 글자가 충분히 크게 보이도록 키울 것.
Instructor Note : 코드를 작성하며 설명을 할 때에는 중간에 멈추고 수강생들에게 생각할 시간과 따라칠 시간을 주는 주기가 한화면을 넘지 않아야 함. → 중간에 따라 오다가 포기하는 경우가 많음.
안드로이드 스튜디오의 왼쪽 창을 보면 Flutter의 소스 파일을 가지고 있는 lib 폴더가 보입니다. lib 폴더 안에 있는 main.dart가 Flutter 프레임워크에 의하여 기본적으로 제공되는 소스 파일로 Flutter 프로젝트가 실행될 때 최초로 수행되는 파일입니다.

main.dart 소스 코드의 최상위 계층만 보이도록 우측 화살표(>) 모양의 아이콘을 눌러 코드들을 축소시켜 봅시다. 그러면 Flutter 프레임워크가 import 문장 하나와 main() 함수와 3개의 클래스로 구성되는 것을 이해할 수 있습니다.

이 상태에서 위의 코드를 보면 import 문장과 main() 함수는 Flutter App 만들기 기초에서 설명하였고, main() 함수가 최초로 실행되며 runApp(const MyApp()); 문장으로 MyApp 객체를 생성하여 실행시킵니다. 그래서 MyApp 객체안에서 MaterialApp 위젯 객체가 호출되어 Flutter 프레임워크가 실행됩니다.
그 뒤에 나오는 MyHomePage와 _MyHomePageState 2개의 클래스가 first_flutter 프로젝트 실행시 나타나는 화면을 제공해 줍니다.
Flutter 프레임워크에서 우리가 가장 관심을 가질 코드의 목적지는 _MyHomePageState 클래스입니다. Flutter 프레임워크는 main() 함수 → MyApp 객체 → MyHomePage 객체를 거쳐 최종적으로 _MyHomePageState 객체가 실행되게 만들어 놓았으며 _MyHomePageState 객체에 우리가 이뮬레이터를 통해서 보았던 화면을 구성하는 코드들이 들어 있기 때문입니다.
이번에는 _MyHomePageState 클래스의 코드를 확장하여 주석을 제외한 코드만 확인해 보겠습니다. _MyHomePageState 클래스는 아래 코드에서 확인할 수 있는 것과 같이 _counter 속성 변수 하나에 2개의 메소드 함수로 구성된 클래스입니다.
코드의 큰그림을 이해했으면 조금 더 세부적으로 이해해 봅시다.
숫자를 증가시키며 화면에 보여주는 기능을 가지고 있으니 숫자를 저장하기 위하여 int _counter = 0;와 같이 속성 변수가 하나가 정의되어 초기값을 0으로 설정하고 있습니다.
_incrementCounter() 메소드가 _counter 변수의 값을 증가시키는 기능을 합니다.
build() 메소드가 화면에 보여주는 역할을 하는데 화면에 보여지는 것은 Scaffold 객체입니다.

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

위의 코드는 직관적으로는 이해가 될지 모르나 이론적으로는 정확하게 모르는 것이 많을텐데 앞에서 여러번 강조했습니다. 프레임워크는 처음부터 모두 이해하려고 하지 않고 큰 그림 위주로 이해하기 바랍니다.
아무튼 코드의 이해도를 더 높이기 위하여 프로그램을 Pixel 8 Pro 가상 장치에서 실행한 화면과 코드 안의 객체들과 속성을 연관지어 이해해 보겠습니다. 코드의 객체와 실행화면의 객체을 연결하여 이해해 보고 가겠습니다.

Instructor Note : 객체의 최하위까지 코드를 풀어 가면서 코드의 객체와 실행화면의 객체를 연결해 볼 것. appBar 속성을 backgroundColor와 title을 모두 바꾸어 가면서 실행화면의 변화와 비교하여 설명하고, body 속성은 Text의 내용을 바꾸는 정도로 설명한 후 원복해 두고, floatingActionButton 속성은 플러스 버튼(+) 나타나게 해준다는 정도만 설명하고 넘어갈 것.
지금까지 설명한 코드와 화면들을 보면서 Flutter 프레임워크가 객체로 구성되어 있고 객체를 변경하는 것으로 화면이 모양과 동작이 달라지는 것을 이해하여야 합니다. 화면을 그려주는 HTML과 같은 보조 언어가가 없이 모두 객체의 속성으로 처리되며, CSS와 같이 화면에 보여지는 모습을 조절해 주는 보조 언어도없이 이 또한 모두 객체의 속성으로 처리됩니다. 우리는 Dart 언어 하나만 알면 앱프로그램을 만들 수 있습니다.
위에서 설명한 것을 그림으로 그려 보면 아래와 같습니다.

위의 그림으로는 객체의 계층이 보이지 않으니 속성은 제외하고 객체의 계층만 다시 그려 보겠습니다.

위의 그림을 보면 Flutter 앱은 객체들의 계층으로 구성된 객체지향프로그램이라는 것을 알 수 있습니다. 웹의 경우 Java 언어는 객체지향이었지만 HTML와 CSS는 객체지향이 아니었는데 Flutter는 화면의 구성요소와 Dart 언어를 포함하여 모든 것이 객체입니다.
예제. 앱바의 타이틀을 “나의 첫번째 Flutter 앱”이라고 수정해 보세요. Flutter 프레임워크의 규칙에 따르면 앱바의 타이틀을 MyApp 클래스의 home: const MyHomePage(title: 'Flutter Demo Home Page') 문장에서 수정하게 되어 있습니다.
예제. 화면의 중앙에 자신의 팀 이름과 수강생 여러분의 이름이 추가되도록 수정해 보세요.
예제. 화면 하단에서 + 버튼을 눌렀을 때 숫자가 2씩 증가하도록 수정해 보세요. 코드를 자세히 설명하지 않았지만 직관적으로 코드를 수정하여 구현할 수 있을 것입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: '나의 첫번째 Flutter 앱'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // _counter = _counter + 2;
      _counter += 2;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '팀 이름: [Flutter] 쉽게 배우는 플러터 앱 개발 실무',
              style: TextStyle(
                  fontSize: 18,
                  color: Colors.grey,
                  fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 10),
            const Text(
              '수강생: 이상호',
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.w500,
                color: Colors.grey,
              ),
            ),
            const SizedBox(height: 20),
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),

      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

[Widget이란?]

Widget 대하여 Flutter App 만들기 기초에서도 언급하였는데 어렵게 생각할 것이 없습니다. 화면을 구성하고 조작하기 위한 **객체(Object)**입니다. 대부분 Flutter 프레임워크가 제공하는 Widget을 사용하게 될 것이며 아주 특별한 경우에만 기존에 있던 Widget 객체를 상속받아 수정하여 사용하게 될 것입니다.
1. 화면에 보여지는 UI Widget

텍스트	이미지

아이콘들	버튼

앱 바

2. 화면의 배열 / 정렬 Widget

가운데 정렬	세로 배치

가로 배치	바둑판 배열

3. 화면의 뼈대

이 외에도 눈에 보이지 않는 수많은 것들이 위젯 객체로 이뤄져 있습니다!
Flutter Widget 카탈로그

Flutter Widget of the Week

Get your weekly Flutter widget tips here! Get started with Flutter → https://goo.gle/3IoQovn

www.youtube.com

Flutter Gems - A Curated List of Top Dart and Flutter packages

Flutter Gems is a curated list of top Dart and Flutter packages that are categorized based on functionality. Flutter Gems is also a visual alternative to pub.dev

fluttergems.dev

백문이 불여일견인데 first_flutter 앱코드를 수정하여 실행해 보며 Widget에 대한 이해를 높여 갑시다. 그동안 객체지향프로그램을 배운다고 고생이 많았는데 이번 경험을 통하여 객체지향프로그램이 얼마나 쉽고 강력한지 알게 될 것입니다.
Center Widget을 지우고 실행해 봅시다. Center Widget 위에 마우스 커서를 두고 Alter+Enter 키를 쳐 보세요. 그리고 화면에 나타나는 팝업 메뉴에서 Remove this widget을 선택합니다.

이제 main.dart 프로그램을 실행해 보세요. 실행된 화면을 보니 화면 중앙에 나타나던 글자(Text Widget)들이 왼쪽으로 치우쳐 나타나지요? 실행화면을 보니 Center Widget이 저절로 이해가 되지요?
Center Widget을 다시 추가하여야 하겠습니다. 이번에는 Column Widget 위에 마우스 커서를 두고 다시 Alter+Enter 키를 쳐 보세요. 그리고 화면에 나타나는 팝업 메뉴에서 Wrap with Center을 선택합니다.

Column Widget을 Row Widget으로 변경한 후 실행해 봅시다. 두 Widget의 특성이 비슷하니 Column을 Row로 변경하기만 하면 됩니다. 이제 main.dart 프로그램을 다시 실행해 보세요.
실행된 화면을 보니 상하로 배열되던 Text Widget들이 좌우로 배열되지요? 다시 Row Widget을 Column Widget으로 복원해 둡시다.
Text Widget의 색깔과 크기를 변경한 후 실행해 봅시다. 아래의 변경전 코드를 변경후 코드와 같이 변경합시다. 변경 후 코드에서 style 인자에 TextStyle 객체를 넘겨서 글자의 크기와 색깔을 바꾸는 것을 눈여겨 보기 바랍니다.

// 변경전 Text Widget
const Text(
  'You have pushed the button this many times:',
),

// 변경후 Text Widget
const Text(
  'You have pushed the button this many times:',
  style: TextStyle(color: Colors.pink, fontSize: 40),  // 추가되는 코드
),

실행해 보니 간단히 글자의 크기와 색상이 바뀌어 나타납니다. 웹을 만드는 기술에서는 CSS, HTML, JavaScript, Java 및 Spring으로 분리되어 구성되던 로직과 화면 구성이, Flutter에서는 하나의 객체로 아니 하나의 객체들의 계층으로 처리되어 코드가 매우 단순하고 직관적으로 변했습니다.
이것이 객체지향프로그램의 힘이고 언젠가는 웹 프로그램도 이런 기술들이 적용되며 진화해 갈 것으로 믿어 의심하지 않습니다. 아직은 미미한 움직임이지만 Flutter가 제공하는 플랫폼에 Android와 iOS 외에 웹이 추가되어 있는 것도 우연은 아니라고 생각합니다.
Icon Widget을 숫자 뒤에 추가한 후 실행해 봅시다. 이번에는 매번 실행 버튼을 누르지 말고 아래에 나오는 지침을 참조하여 실행해 보기 바랍니다.

    Text(
      '$_counter',
      style: Theme.of(context).textTheme.headlineMedium,
    ),
    Icon(Icons.access_alarm),   // 추가되는 코드
  ],

실행 아이콘을 누르면 앱이 재시작되어 오래 걸리지만

Flutter Hot Reload 아이콘을 누르면 단순한 화면 변경은 앱을 재시작하지 않고 빠르게 이뮬레이터에 Update해 줍니다.

이로써 Flutter 프레임워크가 처음으로 생성하여 넣어준 Widget들을 알아 보았습니다. 이와 같이 Scaffold, AppBar, Center, Text, Theme, Column, Icon 및 FloatingActionButton 등 아래 객체의 계층에 나오는 것들이 모두 Widget입니다.

그러면 이제 각각의 Widget들에 대하여 하나씩 알아 가도록 합시다.

[Scaffold Widget]

대부분의 스마트폰 앱들의 화면은 아래 그림과 같은 전형적인 구조를 가지는데 Scaffold Widget은 이런 화면의 구조를 지원하는 Widget입니다. Flutter가 기본적으로 제공하는 코드에서는 아래 화면에 나오는 bottomNavigationBar 속성 대신 floatingActionButton 속성이 사용되었습니다.

Scaffold Widget에는 appBar, body, floatingActionButton 및 bottomNavigationBar 속성 외에도 아래 Constructors 화면에서 보는 것과 같은 많은 속성들이 있습니다. 한번에 모두 배울 필요는 없고 필요한 것만 필요할 때 찾아서 쓰면 됩니다.

Widget에 대한 기본적인 개념과 원리와 의미를 설명한 후 상세한 설명에 대한 Link를 달아 놓겠습니다. 필요시 참조하기 바랍니다. docs.flutter.dev에서 개발 흐름과 기본 개념을 배우고, 필요한 경우 구체적인 클래스와 메서드의 사용법을 알아보려면 api.flutter.dev를 참고합니다.

Scaffold class - material library - Dart API

Implements the basic Material Design visual layout structure. This class provides APIs for showing drawers and bottom sheets. To display a persistent bottom sheet, obtain the ScaffoldState for the current BuildContext via Scaffold.of and use the ScaffoldSt

api.flutter.dev

Scaffold Widget에 대한 이해를 돕기 위하여 Flutter가 기본적으로 제공한 소스코드에서 Scaffold에 관련된 코드만 발췌해 보면 다음과 같습니다. 설명하지 않은 FloatingActionButton Widget을 제외하고는 이제 모두 이해가 될 것으로 믿습니다.

return Scaffold(
  appBar: AppBar(
    backgroundColor: Theme.of(context).colorScheme.inversePrimary,
    title: Text(widget.title),
  ),
  body: Center(
        ... 중략 ...
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: _incrementCounter,
    tooltip: 'Increment',
    child: const Icon(Icons.add),
        ),
);

[텍스트(Text) 관련 Widget]

Flutter의 기본 Widget들은 크게 다음과 같이 4개의 분류로 나눌 수 있습니다.

Text Widget에서 글자의 배치와 글씨 스타일과 배경색을 바꾸는 방법을 추가로 알아 보겠습니다. 글자의 배치는 Text Widget의 textAlign 속성으로 지정하는데 지정할 수 있는 종류는 TextAlign.center와 같이 지정할 수 있습니다. 글자의 배경색은 Text Widget의 style 속성으로 넘겨지는 TextStyle 객체의 backgroundColor 속성으로 지정합니다. 객체의 속성 지정이 많아지는 경우 한줄에 하나의 속성을 나열하는 것이 Flutter 프로그래머들의 관행입니다. 코드의 가독성이 매우 높은 습관입니다.
Instructor Note : 코드 전체를 완성하여 실행화면을 보여 주지 말고 실행화면이 달라지는 것을 보여줄 수 있다면 최대한 단계적으로 보여줄 것 → 여기서는 추가되는 코드를 한줄씩 모두 분리하여 보여줄 수 있음

// 변경전 Text Widget
const Text(
  'You have pushed the button this many times:',
  style: TextStyle(color: Colors.pink, fontSize: 40),
),

// 변경후 Text Widget
const Text(
  'You have pushed the button this many times:',
  textAlign: TextAlign.center,        // 추가되는 코드
  style: TextStyle(
      color: Colors.pink,
      fontSize: 40,
      backgroundColor: Colors.yellow, // 추가되는 코드
      fontStyle: FontStyle.italic,    // 추가되는 코드
  ),
),

실행해 보면 글자의 배경색과 글씨 스타일과 배치가 원하는대로 되는 것을 알 수 있습니다.

위의 코드에서 TextAlign과 Colors는 앞에서 설명했던 Icons와 같은 열거형(enum)인데 이름의 뒤에 점(.)을 찍으면 선택할 수 있는 모든 종류를 알 수 있습니다. 외우지 말고 찾아서 선택합시다. 열거형은 마치 속성만으로 구성된 객체처럼 보이고 코딩하는 방법도 그와 유사합니다.
Instructor Note : 코드 전체를 완성하여 실행화면을 보여 주지 말고 실행화면이 달라지는 것을 보여줄 수 있다면 최대한 단계적으로 보여줄 것 → TextAlign 열거형을 하나씩 바꾸면서 실행화면을 보여 줄 것 (start와 end는 아랍이나 예전의 한자와 같이 오른쪽에서 왼쪽으로 쓰기를 고려한 정렬이고 left와 right는 단순히 왼쪽과 오른쪽을 의미합니다.)

TextStyle 객체에 대한 전체적인 이해도 Scaffold Widget 객체와 같이 생성자(Constructor)를 보면 알 수 있습니다. 쉽게 표현해서 웹을 개발할 때에 지원되는 대부분의 기능들이 구현되어 있다고 보면 됩니다. 필요할 때 필요한 만큼 찾아서 사용하기 바랍니다.

TextStyle class - painting library - Dart API

An immutable style describing how to format and paint text. Bold Here, a single line of text in a Text widget is given a specific style override. The style is mixed with the ambient DefaultTextStyle by the Text widget. link content_copy const Text( 'No, we

api.flutter.dev

Text class - widgets library - Dart API

A run of text with a single style. The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints. The style argument is optional. Whe

api.flutter.dev

[디자인(Design) 관련 Widget]

Icon Widget
이번에는 Icon Widget을 살짝 개선해 보는 것으로 Icon Widget에 대한 설명을 대신합니다. 기술적인 사항들은 Text Widget을 설명할 때 했기 때문에 반복하지 않습니다.

// 변경전 Icon Widget
const Icon(Icons.access_alarm),

// 변경후 Icon Widget
const Icon(
    Icons.access_alarm,
    color: Colors.green,    // 추가되는 코드
    size: 100,              // 추가되는 코드
),

실행해 보면 아이콘의 색깔과 크기가 원하는대로 되는 것을 알 수 있습니다.

Icon class - widgets library - Dart API

A graphical icon widget drawn with a glyph from a font described in an IconData such as material's predefined IconDatas in Icons. Icons are not interactive. For an interactive icon, consider material's IconButton. There must be an ambient Directionality wi

api.flutter.dev

[Image Widget]

Image Widget을 사용할 때 Image.network() 메소드를 사용하면 Network 상의 Image를 가져다 보여줄 수 있습니다. Image.network()과 같이 객체를 생성해 주는 메소드를 팩토리 메소드(Factory Method) 혹은 팩토리 생성자(Factory Constructor)라고 부릅니다. 객체를 공장에서 만들어 주듯이 만들어 준다고 기억하면 될 것 같습니다. 실제로 객체를 공장에서 만들어 주는 것처럼, 객체 생성의 복잡한 로직을 캡슐화하여 간편하게 인스턴스를 생성할 수 있게 해줍니다.
Instructor Note : 구글링으로 “알라딘 서점”에 가면 도서 이미지의 URL을 복사해 오기 용이합니다.

// 변경전 코드
const Icon(
    Icons.access_alarm,
    color: Colors.green,
    size: 100,
),

// 변경후 코드
const Icon(
    Icons.access_alarm,
    color: Colors.green,
    size: 100,
),      // 추가된 코드 (아래 한줄)
Image.network("https://image.aladin.co.kr/product/34207/82/cover200/896088457x_1.jpg"),

Image.network() 대신 Image.asset() 메소드를 사용하면 PC에 있는 Image를 가져다 보여줄 수 있습니다.
그런데 개발 중인 프로젝트에서 Image File을 가져다 사용하려면 소정의 절차를 거쳐야 합니다. 자기가 사용 중인 PC에 위치한 Image File을 모두 가져다 사용할 수 있다면 언젠가 관리가 불가능한 상태 빠지겠지요. 그리고 사용할 이미지를 포함한 자원들을 한곳에 모아 놓으면 개발 환경에서 운영 환경으로 이관할 때에도 편리할 것입니다.
먼저 test와 lib 폴더와 같은 레벨로 images 폴더를 생성합니다.

그리고 pubspec.yaml 파일을 더블 클릭하여 편집기에서 열고 assets 설정 부분으로 이동합니다. pubspec.yaml은 Flutter를 사용하기 위한 설정을 하는 파일이고, assets은 개발 중인 프로젝트가 사용할 이미자나 폰트 등의 자원을 등록하는 설정입니다.

설정을 아래와 같이 변경합니다. yaml 파일은 시스템 설정을 위하여 고안된 언어인데실수를 하면 안되기 때문에 주의하여 수정하여야 합니다. 이미지 파일을 사용하는 절차를 거칠 때 파일별로 승인을 해 주는 것이 보안을 위해 좋은 방법인데 작업의 편의를 위하여 폴더 전체를 허용하겠습니다.

pubspec.yaml 파일을 수정하면 편집기의 상단에 Pub get 메뉴가 나타납니다. 설정이 변경되었으니 프로젝트에 반영하라는 의미입니다. Pub get 메뉴를 클릭합니다.

Pub get 메뉴를 누른 후에는 안드로이드 스튜디오의 하단에 Process finished with exit code 0 메세지가 나타나며 설정이 정상적으로 반영되는 것을 확인하여야 합니다. 안타깝게도 이런 설정 작업을 새로운 프로젝트를 만들때마다 반복하여야 합니다.

이제 만들어진 images 폴더에 사용할 이미지 파일을 복사해 넣읍시다. 저는 점프 투 파이썬.jpg 파일을 복사해 넣었습니다.

// 변경전 코드
const Icon(
    Icons.access_alarm,
    color: Colors.green,
    size: 100,
),
Image.network("https://image.aladin.co.kr/product/34207/82/cover200/896088457x_1.jpg"),

// 변경후 코드
const Icon(
    Icons.access_alarm,
    color: Colors.green,
    size: 100,
),
Image.network("https://image.aladin.co.kr/product/34207/82/cover200/896088457x_1.jpg"),
Image.asset("images/점프 투 파이썬.jpg"),   // 추가된 코드

지금까지 만들어진 화면의 형태는 아래와 같습니다. 책은 동일한 주제의 이미지이니 상하로 배치하지 말고 좌우로 배치해볼까요?

이번에는 아래 화면과 같이 image와 관련된 코드를 마우스로 선택하여 묶은 후 Alt+Enter 키를 친 후 Wrap with Row 메뉴를 선택합니다.

그러면 아래 화면과 같이 선택된 문장들을 모두 Row Widget이 감싸게 됩니다. 이때 Row Widget은 여러개의 하위 Widget을 가지게 되니 속성의 이름이 children으로 주어지고 Widget이 여러개이니 리스 기호 [ ]로 묶여지게 됩니다. 논리적으로 조금만 생각하면 당연합니다.

또 당연하겠지만 여러개의 하부 객체를 가지지 않고 하나의 객체를 가지는 경우 아래의 화면과 같이 속성의 이름이 child가 되고 또 당연하게 리스트 기호 [ ]로 묶어지지도 않습니다.

내친김에 이미지를 하나 더 추가해 보겠습니다. 이미지를 images 폴더에 복사해 넣고, 코드를 아래와 같이 추가합니다.

// 변경후 코드
Row(
  children: [
    Image.network("https://image.aladin.co.kr/product/34207/82/cover200/896088457x_1.jpg"),
    Image.asset("images/점프 투 파이썬.jpg"),
    Image.asset("images/생각하는 프로그래밍.jpg"),   // 추가된 코드
  ],
),

그리고 프로그램을 수행해 보면 아래 화면의 우측과 같이 공간이 부족한 곳에 빗금이 나타납니다. 웹 프로그램이었다면 화면의 공간이 넓어지며 자동으로 좌우 스크롤바가 나타났을텐데 말입니다.

Image Widget에 width 속성과 height 속성을 조정하여 해결해 봅시다. 코드를 두군데에서 수정하여야 합니다. 첫번째로 가상장치의 넓이를 알아내어 3등분하는 로직을 만들어 보겠습니다.

// 변경전 코드
  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(

MediaQuery는 장치의 화면 및 환경 정보를 제공하는 객체입니다. MediaQuery.of() 메소드를 사용하여 현재 사용 중인 장치의 화면을 의미하는 context의 장치 정보를 가지게 됩니다. 그중에서 size 속성 하부의 width 속성으로 화면의 넓이를 알 수 있습니다. 화면의 넓이를 3으로 나누어 세장의 이미지가 화면에 들어갈 수 있도록 이미지의 넓이를 구하여 imageWidth 변수에 저장하였습니다.

// 변경후 코드
  @override
  Widget build(BuildContext context) {
    double imageWidth = MediaQuery.of(context).size.width / 3;  // 추가된 코드

    return Scaffold(
      appBar: AppBar(

두번째로 화면의 넓이를 계산한 변수를 Image Widget의 width 속성에 추가해 보겠습니다. 높이에는 아직 별 문제가 없어서 height 속성은 지정하지 않았습니다.

// 변경후 코드
Row(
  children: [
    Image.network(
      "https://image.aladin.co.kr/product/34207/82/cover200/896088457x_1.jpg",
      width: imageWidth,  // 추가된 코드
    ),
    Image.asset(
      "images/점프 투 파이썬.jpg",
      width: imageWidth,  // 추가된 코드
    ),
    Image.asset(
      "images/생각하는 프로그래밍.jpg",
      width: imageWidth,  // 추가된 코드
    ),
  ],
),

이렇게 해서 오류가 해결되었고 우리의 Flutter에 대한 이해도도 함께 향상 되었습니다.

Image class - widgets library - Dart API

A widget that displays an image. Several constructors are provided for the various ways that an image can be specified: The following image formats are supported: JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, and WBMP. Additional formats may be s

api.flutter.dev

[Container Widget]

Container Widget은 자식(child) Widget의 크기를 지정하고 다양하게 꾸밀 수 있게 해 줍니다.
화면의 중앙에 작고 외롭게 고립되어 있는 카운트를 보여주는 Text Widget을 Container Widget으로 감싸서 꾸며 봅시다. 이제부터는 Alt+Enter 키를 쳐서 Widget을 추가하는 등의 설명은 반복하지 않습니다. Flutter 코드는 객체가 계층적으로 복잡하게 상호 연결되어 타이핑으로 Widget을 추가하거나 삭제하면 실수가 발생하기 쉬우니 Widget을 추가하거나 삭제할 때에는 꼭 Alt-Enter 키를 사용하기 바랍니다.
아래의 코드에서 Theme.of(context).textTheme.headlineMedium 코드는 앞에서 설명한 MediaQuery.of(context).size.width 코드에 비추어 이해할 수 있는데 현재 사용 중인 화면(context)의 테마(Theme) 중 텍스트 테마(textTheme)에서 headlineMedium 스타일을 가져다 사용하는 것 정도로 이해할 수 있습니다.

// 변경전 코드
Text(
  '$_counter',
  style: Theme.of(context).textTheme.headlineMedium,
),

아래 코드를 보면 Container의 배경색이나 테두리 등을 decoration 속성과 BoxDecoration 객체로 처리하고 있습니다. Container를 다양하게 꾸미기 위하여 객체의 계층을 하나 더 추가한 것으로 이해하면 됩니다. Border.all(), BorderRadius.all() 및 BorderRadius.only() 등이 팩토리 메소드 혹은 생성자 메소드라는 것을 주의깊게 이해하면 코드가 조금 길지만 속성 단위로 객체 단위로 떼어서 이해하면 큰 무리없이 이해할 수 있을 것입니다. 객체를 만드는 것은 어렵지만 객체를 사용하는 것은 어려운 일이 아닙니다.
Instructor Note : 코드 전체를 완성하여 실행화면을 보여 주지 말고 실행화면이 달라지는 것을 보여줄 수 있다면 최대한 단계적으로 보여줄 것 → 여기서는 추가되는 코드를 한줄씩 모두 분리하여 보여줄 수 있음

// 변경후 코드
Container(        // 추가된 Widget
  width: 100,                   // 추가된 코드
  height: 100,                  // 추가된 코드
  alignment: Alignment.center,  // 추가된 코드
  decoration: BoxDecoration(    // decoration 추가 시작
    color: Colors.blueAccent,
    border: Border.all(color: Colors.black,width: 8),


    borderRadius: BorderRadius.all(Radius.circular(10)),   // 추가된 코드
    //borderRadius: BorderRadius.all(Radius.circular(30)),
    //borderRadius: BorderRadius.all(Radius.circular(50)),

    //borderRadius: BorderRadius.horizontal(left: Radius.zero, right: Radius.circular(50)),
    //borderRadius: BorderRadius.vertical(top: Radius.circular(50), bottom: Radius.zero),

    //borderRadius: BorderRadius.only(topLeft: Radius.circular(50)),
    //borderRadius: BorderRadius.only(bottomRight: Radius.circular(50)),
  ),                            // decoration 추가의 끝
  child: Text(
    '$_counter',
    style: Theme.of(context).textTheme.headlineMedium,
  ),
),

Flutter에서 width: 100과 같은 숫자는 논리적 픽셀(Logical Pixel) 단위로 사용됩니다. 논리적 픽셀을 사용한다는 의미는 다양한 해상도와 화면 크기의 디바이스에 상관없이 화면 밀도에 맞추어 자동으로 크기가 조정되기 때문에 프로그래머가 디바이스를 신경쓰지 않고 코딩을 할 수 있다는 의미입니다. 그래도 장치마다 특성이 달라서 조금씩 다르게 화면에 나타나기 때문에 앞에서 MediaQuery 객체를 사용하는 예를 든 것과 같이 미세하게 조정하여야 합니다.
실행해 보면 화면의 중앙에 Container Widget이 나타납니다.

Instructor Note : 소스 코드에서 각각이 사용되는 위치를 보여줄 것
혹시 위의 코드에서 속성의 이름 alignment와 속성을 지정하기 위하여 사용된 Alignment 열거형의 이름이 첫번째 글자만 다른 것을 눈치챘나요? 이런 형태는 fontStyle과 FontStyle, textAlign과 TextAlign 등에서도 동일하게 나타나는 현상으로 이름을 부여하는 부담을 크게 줄여 줍니다.

앞에서 코딩해 보았던 것들 중에 오른쪽 화면이 마음에 들지 않습니다. 글자의 배경색이 글자 뒤에 만있고 좌우에 하얀색 공백이 영 눈에 거슬립니다. Container Widget을 사용해서 개선해 봅시다.

// 변경전 코드
const Text(
  'You have pushed the button this many times:',
  textAlign: TextAlign.center,
  style: TextStyle(
      color: Colors.pink,
      fontSize: 40,
      backgroundColor: Colors.yellow,
      fontStyle: FontStyle.italic,
  ),
),

Instructor Note : 코드 전체를 완성하여 실행화면을 보여 주지 말고 실행화면이 달라지는 것을 보여줄 수 있다면 최대한 단계적으로 보여줄 것 → 여기서는 Container Widget의 속성을 먼저 보여 주어 하늘색(cyan)과 노란색(yellow) 색상이 겹치는 것을 보여준 후, TextStyle 객체의 backgroundColor 속성을 주석처리한 후 color: Colors.cyan을 color: Colors.yellow으로 변경

// 변경후 코드
Container(
  width: double.infinity,       // 추가된 코드 (장치의 전체 넓이 사용)
                                              // height 속성 미사용시 child의 높이 사용
  alignment: Alignment.center,  // 추가된 코드
  //color: Colors.cyan,         // 추가된 코드
  color: Colors.yellow,         // decoration 속성 사용시 삭제(오류 발생)
  child: const Text(
    'You have pushed the button this many times:',
    textAlign: TextAlign.center,
    style: TextStyle(
        color: Colors.pink,
        fontSize: 40,
        //backgroundColor: Colors.yellow, // Container의 color 속성을 대신 사용
        fontStyle: FontStyle.italic,
    ),
  ),
),

실행화면에서 노란색 배경이 스마트폰의 좌우로 꽉 차니 훨씬 보기가 좋습니다.

Container Widget의 margin과 padding 속성을 차례로 적용해 보면 공란이 노란색 바탕의 바깥쪽에 생기면 margin이고, 노란색 바탕의 안쪽에 생기면 padding인 것의 차이를 가시적으로 확인할 수 있습니다.

// 변경후 코드
Container(
  width: double.infinity,
  alignment: Alignment.center,
  color: Colors.yellow,
  margin: EdgeInsets.all(50),   // 추가된 코드
  padding: EdgeInsets.all(50),  // 추가된 코드
  child: const Text(
    'You have pushed the button this many times:',
    textAlign: TextAlign.center,
    style: TextStyle(
        color: Colors.pink,
        fontSize: 40,
        fontStyle: FontStyle.italic,
    ),
  ),
),

오른쪽 실행화면의 노란색의 바깥 공간이 margin이고

오른쪽 실행화면의 노란색의 안쪽 공간이 padding입니다.

예제. Container Widget에 margin 속성을 부여하여 어떻게 변하는지 관찰해 보기 바랍니다. 아래에 몇가지 코드의 예를 들어 보았습니다.

// 상하좌우의 Margin이 모두 동일할 경우
margin: EdgeInsets.all(50), 

// 상하의 Margin이 동일하고, 좌우의 Margin이 각각 동일한 경우
margin: const EdgeInsets.symmetric(
  vertical: 10.0,    // 상하 margin
  horizontal: 20.0,  // 좌우 margin
),

// 상하좌우의 Margin이 모두 다른 경우 (좌 10, 상 20, 우 30, 하 40)
margin: EdgeInsets.fromLTRB(10.0, 20.0, 30.0, 40.0),

// 필요한 곳에만 Margin을 추가하는 경우
margin: EdgeInsets.only(
  right: 10,    // 오른쪽 여백
  bottom: 40,   // 하단 여백
),

예제. Container Widget에 padding 속성을 부여하여 어떻게 변하는지 관찰해 보기 바랍니다. 아래에 몇가지 코드의 예를 들어 보았습니다. Margin을 부여하는 방식과 Padding을 부여하는 방식이 동일하다는 점에 주목합시다.

// 상하좌우의 Padding이 모두 동일할 경우
padding: EdgeInsets.all(50), 

// 상하의 Padding이 동일하고, 좌우의 Padding이 각각 동일한 경우
padding: EdgeInsets.symmetric(
  vertical: 10.0,    // 상하 margin
  horizontal: 20.0,  // 좌우 margin
),

// 상하좌우의 Padding이 모두 다른 경우 (좌 10, 상 20, 우 30, 하 40)
padding : EdgeInsets.fromLTRB(10.0, 20.0, 30.0, 40.0),

// 필요한 곳에만 Padding을 추가하는 경우
padding: EdgeInsets.only(
  right: 10,    // 오른쪽 여백
  bottom: 40,   // 하단 여백
),

Flutter는 위의 BorderRadius나 EdgeInsets의 예와 같이 경우에 따라 팩토리 메소드(Factory Method) 혹은 생성자 메소드(Constructor Method)가 달라지는 코딩 패턴을 자주 사용합니다. 앞으로 유사한 사례가 나올 때 하나 하나 나열하여 설명하지 않을테니 위의 코딩 패턴을 파악하여 다른 곳에도 활용하기 바랍니다.
화면의 공간 확보를 위하여 Container Widget의 margin과 padding 속성을 주석처리합시다.

Container class - widgets library - Dart API

A convenience widget that combines common painting, positioning, and sizing widgets. A container first surrounds the child with padding (inflated by any borders present in the decoration) and then applies additional constraints to the padded extent (incorp

api.flutter.dev

SizedBox Widget

SizedBox Widget은 child Widget의 크기를 결정하거나 Widget들간의 여백을 조정하기 위하여 사용합니다. child Widget의 크기 조정은 Container Widget을 대신 사용할 수 있어서 주로 여백을 조정하기 위한 목적으로 사용합니다.
오른쪽의 화면에서 Column으로 나열된 Widget들과 Row로 나열된 Widget들 사이가 너무 좁아서 화면이 답답해 보입니다. 여백을 추가해 보겠습니다.

SizedBox Widget에서 여백을 주기 위하여 상하 여백에서는 height 속성만 부여하고, 좌우 여백을 주기 위해서는 width 속성만 부여합니다.
Instructor Note : 코드 전체를 완성하여 실행화면을 보여 주지 말고 실행화면이 달라지는 것을 보여줄 수 있다면 최대한 단계적으로 보여줄 것 → 여기서는 SizedBox Widget를 하나싹 추가하며 실행화면이 변하는 것을 보여 주면서 추가하는 방식으로 빗금 화면이 나오는 것을 확인한 후 double imageWidth = (MediaQuery.of(context).size.width - 30) / 3; 문장을 추가하여 조치하는 형태로 보여줄 것
그리고 이미지의 넓이를 계산할 때 여백을 고려하여 스마트폰의 넓이에서 여백의 총합을 빼고 계산해야 합니다. 여백을 부여하는 방식이 조금 촌스러워 보이지만 화면에 많은 Widget들이 들어가지 않는 앱의 특성을 고려할 때 크게 문제가 있어 보이지는 않습니다.

// 변경후
  @override
  Widget build(BuildContext context) {
    double imageWidth = (MediaQuery.of(context).size.width - 20) / 3;  // 수정된 코드
                                   // 좌우 여백의 총합인 20을 빼고 이미지의 넓이를 계산
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: double.infinity,
              alignment: Alignment.center,
              color: Colors.yellow,
              child: const Text(
                'You have pushed the button this many times:',
                textAlign: TextAlign.center,
                style: TextStyle(
                    color: Colors.pink,
                    fontSize: 40,
                    fontStyle: FontStyle.italic,
                ),
              ),
            ),
            SizedBox(height: 30),        // 추가된 코드
            Container(
              width: 100,
              height: 100,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.blueAccent,
                border: Border.all(color: Colors.black,width: 8),
                borderRadius: BorderRadius.only(topLeft: Radius.circular(50)),
              ),
              child: Text(
                '$_counter',
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ),
            SizedBox(height: 30),        // 추가된 코드
            const Icon(
                Icons.access_alarm,
                color: Colors.green,
                size: 100,
            ),
            SizedBox(height: 30),        // 추가된 코드
            Row(
              children: [
                SizedBox(width: 5),      // 추가된 코드
                Image.network(
                    "https://image.aladin.co.kr/product/34207/82/cover200/896088457x_1.jpg",
                    width: imageWidth,
                ),
                SizedBox(width: 10),     // 추가된 코드
                Image.asset(
                    "images/점프 투 파이썬.jpg",
                    width: imageWidth,
                ),
                SizedBox(width: 10),     // 추가된 코드
                Image.asset(
                    "images/생각하는 프로그래밍.jpg",
                    width: imageWidth,
                ),
                SizedBox(width: 5),      // 추가된 코드
              ],
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }

그래서 답답하던 Widget들 사이에 숨쉴 틈이 생겼습니다.

SizedBox class - widgets library - Dart API

A box with a specified size. If given a child, this widget forces it to have a specific width and/or height. These values will be ignored if this widget's parent does not permit them. For example, this happens if the parent is the screen (forces the child

api.flutter.dev

[배치(Layout) 관련 Widget]

Column Widget/Row Widget

앞에서 Row Widget과 Column Widget을 사용해 보면서 배웠습니다. 그래서 설명할 것이 많지 않지만 mainAxisAlignment 속성을 보고 가겠습니다.
아래 코드를 보면 Column Widget의 mainAxisAlignment 속성을 MainAxisAlignment.center에서 MainAxisAlignment.spaceAround로 바꾸고, Row Widget의 mainAxisAlignment 속성으로 MainAxisAlignment.spaceAround을 추가한 후 촌스럽던 SizedBox Widget을 모두 삭제하였습니다. (삭제한 곳을 표시하기 위하여 주석처리하였습니다.) 그렇다고 SizedBox Widget의 용도가 폐기되는 것은 아닙니다. 여백을 미세 조정할 때 여전히 효과적입니다.
Instructor Note : 코드 전체를 완성하여 실행화면을 보여 주지 말고 실행화면이 달라지는 것을 보여줄 수 있다면 최대한 단계적으로 보여줄 것 → Column을 먼저 보여 주고, Row를 나중에 보여줄 것

// 변경후
  @override
  Widget build(BuildContext context) {
    double imageWidth = (MediaQuery.of(context).size.width - 20) / 3;

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          //mainAxisAlignment: MainAxisAlignment.center,     // 주석 처리
          mainAxisAlignment: MainAxisAlignment.spaceAround,  // spaceAround로 변경
          children: <Widget>[
            Container(
              width: double.infinity,
              alignment: Alignment.center,
              color: Colors.yellow,
              child: const Text(
                'You have pushed the button this many times:',
                textAlign: TextAlign.center,
                style: TextStyle(
                    color: Colors.pink,
                    fontSize: 40,
                    fontStyle: FontStyle.italic,
                ),
              ),
            ),
            //SizedBox(height: 30),        // 추가된 코드 주석 처리
            Container(
              width: 100,
              height: 100,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.blueAccent,
                border: Border.all(color: Colors.black,width: 8),
                borderRadius: BorderRadius.only(topLeft: Radius.circular(50)),
              ),
              child: Text(
                '$_counter',
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ),
            //SizedBox(height: 30),        // 추가된 코드 주석 처리
            const Icon(
                Icons.access_alarm,
                color: Colors.green,
                size: 100,
            ),
            //SizedBox(height: 30),        // 추가된 코드 주석 처리
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,  // 추가된 코드
              children: [
                //SizedBox(width: 5),      // 추가된 코드 주석 처리
                Image.network(
                    "https://image.aladin.co.kr/product/34207/82/cover200/896088457x_1.jpg",
                    width: imageWidth,
                ),
                //SizedBox(width: 10),     // 추가된 코드 주석 처리
                Image.asset(
                    "images/점프 투 파이썬.jpg",
                    width: imageWidth,
                ),
                //SizedBox(width: 10),     // 추가된 코드 주석 처리
                Image.asset(
                    "images/생각하는 프로그래밍.jpg",
                    width: imageWidth,
                ),
                //SizedBox(width: 5),      // 추가된 코드 주석 처리
              ],
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }

그랬더니 코드가 더욱 간결해지면서 유사한 여백이 추가되는 효과를 얻게 되었습니다.

Instructor Note : 코드 전체를 완성하여 실행화면을 보여 주지 말고 실행화면이 달라지는 것을 보여줄 수 있다면 최대한 단계적으로 보여줄 것 → mainAxisAlignment 속성으로 표현할 수 있는 것들을 코드를 변경하면서 보여 주고 아래의 설명은 노션으로 제공할 것 ← Row는 감지하기 어려우니 Column으로 보여 줄 것
mainAxisAlignment 속성에 지정할 수 있는 속성들을 MainAxisAlignment 열거형(enum)에 맞게 정리해 보면 아래와 같습니다.

Column class - widgets library - Dart API

A widget that displays its children in a vertical array. To cause a child to expand to fill the available vertical space, wrap the child in an Expanded widget. The Column widget does not scroll (and in general it is considered an error to have more childre

api.flutter.dev

Row class - widgets library - Dart API

A widget that displays its children in a horizontal array. To cause a child to expand to fill the available horizontal space, wrap the child in an Expanded widget. The Row widget does not scroll (and in general it is considered an error to have more childr

api.flutter.dev

Stack Widget

Stack Widget은 Widget을 겹쳐 쌓아서(Stack) 다양한 효과를 내게 해 줍니다. 코드에 나오는 Widget의 순서대로 아래에서 위로 쌓입니다.
Instructor Note : 코드 전체를 완성하여 실행화면을 보여 주지 말고 실행화면이 달라지는 것을 보여줄 수 있다면 최대한 단계적으로 보여줄 것 → 한 문장씩 추가하며 실행화면을 보여줄 것

// Column의 child로 Stack Widget이 추가된 코드
Stack(
  children: [
    Container(width: 150,height: 150,color: Colors.red),
    Container(width: 100,height: 100,color: Colors.yellowAccent),
    Container(width: 70,height: 70,color: Colors.green),
    Container(width: 50,height: 50,color: Colors.blue),
  ],
),

실행해 보니 초록색이 맨 아래에 노란색이 그위에 그리고 그위에 빨간색 Widget이 쌓였습니다. 실행화면을 보니 아랫쪽에 쌓이는 Widget이 더 커야 한다는 것을 저절로 알게 됩니다.

Stack Widget의 alignment 속성을 사용하여 다양한 효과를 낼 수 있습니다.

// Stack Widget에 alignment 속성이 추가된 코드
Stack(
  alignment: Alignment.center,       // 추가된 코드
  children: [
    Container(width: 150,height: 150,color: Colors.red),
    Container(width: 100,height: 100,color: Colors.yellowAccent),
    Container(width: 70,height: 70,color: Colors.green),
    Container(width: 50,height: 50,color: Colors.blue),
  ],
),

예제. Alignment 열거형(enum)에 지원되는 값들이 어떤 것이 있는지 알아 보려면 안드로이드 스튜디오 편집기에서 어떻게 하면 되는지 생각해 봅시다. 그리고 위의 Stack 코드에 대입하여 실행화면을 확인해 봅시다. 이런 방법이 객체의 속성과 메소드에 어떤 것들이 있는지 알아 보는 것과 어떤 차이가 있을까요?

Stack Widget을 Positioned Widget과 함께 사용하면 아래 화면의 오른쪽에 빨간색으로 둘러싼 아이콘과 같은 효과를 낼 수 있습니다.

위에서 만들어 놓은 Stack Widget에 비슷한 효과를 내도록 만들어 보겠습니다. 아래 코드에서 Positioned Widget의 right 속성과 top 속성이 오른쪽과 윗쪽에서 0만큼 떨어진 위치라는 것을 이해하면 지금까지 배운 것으로 이해가 되는 코드입니다.
Instructor Note : 코드 전체를 완성하여 실행화면을 보여 주지 말고 실행화면이 달라지는 것을 보여줄 수 있다면 최대한 단계적으로 보여줄 것 → 아래 코드는 맨 하위의 Text → Positioned → Container → Center의 순으로 보여줄 것

// Stack Widget에 숫자 뱃지가 추가된 코드
Stack(
  alignment: Alignment.center,
  children: [
    Container(width: 150,height: 150,color: Colors.red),
    Container(width: 100,height: 100,color: Colors.yellowAccent),
    Container(width: 70,height: 70,color: Colors.green),
    Container(width: 50,height: 50,color: Colors.blue),

    Positioned(          // 추가된 Positioned Widget
      right: 0,          // 오른쪽에서 0 논리 픽셀만큼 떨어진 곳
      top: 0,            // 위에서 0 논리 픽셀만큼 떨어진 곳
      child: Container(
        width: 60,
        height: 60,                    
        alignment: Alignment.center,
        decoration: const BoxDecoration(
          color: Colors.blue,
          shape: BoxShape.circle,    // 원을 그리는 코드
        ),
        child: Center(
          child: Text(
            '1',
            style: TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.bold,    // 9 단계의 FontWeight 참조
              fontSize: 40,
            ),
          ),
        ),
      ),
    ),
  ],
),
            
  // 9단계의 폰트 굵기
  // w100: Thin
  // w200: Extra Light
  // w300: Light
  // w400: Regular (Normal)
  // w500: Medium
  // w600: Semi Bold
  // w700: Bold
  // w800: Extra Bold
  // w900: Black

실행해 보니 오른쪽과 같은 모양으로 변하였습니다.

예제. 위의 Stack Widget의 우측 상단에 배치된 뱃지를 좌측 하단, 우측 하단 그리고 좌측 상단에 각각 배치해 보세요.

Stack class - widgets library - Dart API

A widget that positions its children relative to the edges of its box. This class is useful if you want to overlap several children in a simple way, for example having some text and an image, overlaid with a gradient and a button attached to the bottom. Ea

api.flutter.dev

[실습] 코드 팩토리의 플러터 프로그래밍 - 7장 4절 연습용 앱 만들기 : 스플래시 스크린 앱 (175페이지)

프로젝트 이름 : splash_screen
설명 : 아래와 같은 화면을 만듭니다.

이미지를 저자의 깃허브(https://github.com/codefactory-co/flutter-golden-rabbit-novice-v2.git)에서 다운받아 images 폴더에 복사해 넣은 후 pubspec.yaml에 등록 후 Pub Get

GitHub - codefactory-co/flutter-golden-rabbit-novice-v2: Must Have 코드팩토리의 플러터 프로그래밍 3쇄 개정판

Must Have 코드팩토리의 플러터 프로그래밍 3쇄 개정판. Contribute to codefactory-co/flutter-golden-rabbit-novice-v2 development by creating an account on GitHub.

github.com

[제스처(Gesture) 관련 Widget]

제스처(Gesture) 관련 Widget을 배우기 위해서는 먼저 제스처에 대한 이해가 선행되어야 합니다. 제스처에 대한 이해를 하기 위해서는 이벤트(Event)를 이해하여야 합니다. 그런데 왠지 그게 그것 같아서 ChatGpt에게 제스처와 이벤트의 차이를 물어 보았습니다.

ChatGPT가 열심히 설명을 했는데 프로그래머인 제가 보기에는 “컴퓨터에 어떤 사건(Event)이 발생하는 것” 정도로 이해가 됩니다. 그리고 어떤 이벤트나 제스처가 발생하면 그 이벤트에 맞는 처리를 해 주어야 하는데 그것을 이벤트 처리기(이벤트 핸들러,Event Handler)라고 부르는데 이벤트 처리기는 이벤트를 처리할 목적으로 만들어진 함수입니다.
말로는 이해가 잘 안되지요? 그럴 때는 코드와 함께 실행화면을 확인해 보면 됩니다.

ElevatedButton Widget

Flutter에서 자주 사용하는 ElevatedButton Widget을 하나 만들어 보겠습니다. 어느덧 first_flutter 앱의 화면이 꽉차고 이벤트 처리(Event Handling)에 부담이 생기니 gesture_widgets 앱을 위한 프로젝트를 새로 만들겠습니다. Flutter App을 개발 중에 새로운 프로젝트를 만들 때에는 File > New > New Flutter Projects 메뉴를 선택해서 만들 수 있습니다.

저는 아래 화면과 같이 프로젝트 정보를 입력해 보았습니다.

이전에 사용하던 코드를 빈번하게 다시 보게 될테니 New Window로 프로젝트를 엽시다.

프로젝트를 하나 새로 만들었으니 main.dart의 _MyHomePageState 클래스(Class)를 찾아가 Flutter가 기본적으로 제공하는 코드들을 지웁시다. 아래에 지우고 코드를 추가해야 할 곳을 주석으로 표시해 놓았습니다. 주석도 코드의 가독성을 떨어지게 하니 모두 지웁시다.

// 삭제할 곳을 삭제 시작과 삭제 종료로 표기한 코드
class _MyHomePageState extends State<MyHomePage> {
  /* 삭제 시작
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }
  삭제 종료*/
  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // TRY THIS: Try changing the color here to a specific color (to
        // Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
        // change color while the other colors stay the same.
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          //
          // TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint"
          // action in the IDE, or press "p" in the console), to see the
          // wireframe for each widget.
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            /* 삭제 시작
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            삭제 종료 */
          ],
        ),
      ),
      /* 삭제 시작
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
      삭제 종료 */
    );
  }
}

잘 지우고 문제없이 동작하는지 실행하여 확인해 봅시다. 이뮬레이터의 안정적인 동작을 위하여 기존에 실행되던 first_flutter 프로젝트의 실행을 중단시킨 후 실행시킵시다.

이런!!! 타이틀 수정을 잊었네요. Flutter 프레임워크에 따르면 타이틀은 아래 코드에서 수정하여야 합니다. 프레임워크는 정확한 장소를 찾아 수정하는 것이 중요합니다.

Flutter 프레임워크가 제공하는 타이틀까지 정상화시켰으니 이제 우리 프로젝트의 코딩을 추가해 갑시다.

지울 코드를 다 지우고 나니 아래와 같이 코드가 간결해졌습니다. 주석으로 “// 여기가 코드를 추가할 곳”이라고 표현해 놓은 곳에 프로젝트의 코드를 추가하면 됩니다.

// Flutter 프레임워크에서 타이틀을 수정할 곳
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 여기가 코드를 추가할 곳
          ],
        ),
      ),
    );
  }
}

코드를 추가할 곳에 Ele까지만 쳐도 안드로이드 스튜디오가 ElevatedButton을 첫번째로 추천해 줍니다. 마우스로 클릭하거나 탭을 누릅시다. 그러면 ElevatedButton(onPressed: onPressed, child: child)까지 코드를 완성해 주는데 필요한 것만 수정합시다.

onPressed: () { print("ElevatedButton 버튼이 클릭되었습니다."); } 에서 onPressed는 탭 제스처와 클릭 이벤트에 해당합니다. () { print("ElevatedButton 버튼이 클릭되었습니다."); }는 함수를 단순화한 익명 함수입니다. print("ElevatedButton 버튼이 클릭되었습니다." 문장을 빼면 () {}만 남는데 이것은 빈 함수를 의미합니다. child: Text("Elevated Button"), 문장은 Text 객체 혹은 Widget으로 ElevatedButton에 나타날 글자를 추가해 주고 있습니다.

// ElevatedButton을 추가한 코드
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 여기가 코드를 추가할 곳
            ElevatedButton(
                onPressed: () { print("ElevatedButton이 클릭되었습니다."); }, 
                child: Text("Elevated Button"),
            ),
            // 여기까지 추가됨
          ],
        ),
      ),
    );
  }
}

실행화면의 중앙에 버튼이 나타났습니다. 클릭해 봅시다.

그러면 안드로이드 스튜디오의 하단에 이벤트 처리기(Event Handler)인 () { print("ElevatedButton이 클릭되었습니다."); } 함수가 실행된 결과가 나타납니다.

Functional Program의 관점에서 () {}와 같은 함수는 함수가 한문장이거나 비어있을때는 가독성이 매우 높지만 함수가 여러 문장으로 구성되면 코드가 길어지고 가독성도 무척 떨어지게 됩니다. 그래서 이벤트 처리기가 길어지면 별도의 함수로 분리하여야 합니다. 그러면 분리해 봅시다.
아래 코드를 보고 느끼겠지만 Dart는 함수의 정의형식이 매우 간소화되었습니다. 아무튼 아래와 같이 코드를 함수로 분리하면 되는데 형식은 한줄 함수와 거의 똑같고 함수의 이름을 만드는 수고만 더 하면 됩니다. 그리고 onPressed: _buttonClicked,와 같이 onPressed 이벤트에 _buttonClicked 이벤트 처리기의 이름을 연결해 주기만 하면 됩니다.

// 이벤트 처리기를 함수로 분리한 코드
class _MyHomePageState extends State<MyHomePage> {
	// 함수의 추가 시작
  _buttonClicked() {
    print("ElevatedButton이 클릭되었습니다.");
    print("한줄일때는 함수로 분리하지 않고, 여러줄일때는 함수로 분리하는 것이 좋습니다.");
  }
	// 함수 추가의 끝
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              //onPressed: () { print("ElevatedButton이 클릭되었습니다."); },
              onPressed: _buttonClicked,      // 수정된 코드
              child: Text("Elevated Button"),
            ),
          ],
        ),
      ),
    );
  }
}

실행해 보면 변경된 이벤트 처리가 동작하는 것을 확인할 수 있습니다.

ElevatedButton 외에도 음영을 처리하지 않는 단순한 버튼인 TextButton을 포함하여 경계선만 있는 OutlinedButton 등이 있습니다.
ElevatedButton은 TextButton과 달리 **음영(Shadow)**과 배경색을 포함하여 스타일을 쉽게 커스터마이징할 수 있는 버튼입니다. TextButton은 기본적으로 투명한 배경을 가지며, 강조되지 않은 액션을 위해 사용되지만, 여전히 style 속성을 통해 색상이나 다른 스타일을 지정할 수 있습니다. 여기서는 간단하게 색상 변경을 해 보겠습니다.

// 변경전 코드
ElevatedButton(
    onPressed: _buttonClicked,
    child: Text("Elevated Button"),
),

style 속성은 TextStyle 객체를 지정할 때 사용해 보았습니다. ButtonStyle 객체로 바뀌었을 뿐 코딩하는 형태는 동일합니다. 다만 ElevatedButton.styleFrom은 ButtonStyle 객체를 반환하는 팩토리 메서드 혹은 생성자 메소드(생성자처럼 객체를 쉽게 생성하는 메서드)로, 버튼의 스타일을 지정할 때 사용됩니다.

// 변경후 코드
ElevatedButton(
    style: ElevatedButton.styleFrom(  // ElevatedButton style로 
      backgroundColor: Colors.blue,   // 버튼 배경색 지정
    ),
    onPressed: _buttonClicked,
    child: Text("Elevated Button"),
),

실행해 보면 버튼의 색이 변경되는 것을 확인할 수 있습니다.

ElevatedButton class - material library - Dart API

A Material Design "elevated button". Use elevated buttons to add dimension to otherwise mostly flat layouts, e.g. in long busy lists of content, or in wide spaces. Avoid using elevated buttons on already-elevated content such as dialogs or cards. An elevat

api.flutter.dev

OutlinedButton class - material library - Dart API

A Material Design "Outlined Button"; essentially a TextButton with an outlined border. Outlined buttons are medium-emphasis buttons. They contain actions that are important, but they aren’t the primary action in an app. An outlined button is a label chil

api.flutter.dev

TextButton class - material library - Dart API

A Material Design "Text Button". Use text buttons on toolbars, in dialogs, or inline with other content but offset from that content with padding so that the button's presence is obvious. Text buttons do not have visible borders and must therefore rely on

api.flutter.dev

IconButton Widget

Button 종류의 Widget은 앞에서 설명한 ElevatedButton Widget과 크게 다르지 않습니다. IconButton Widget은 간단한 코드를 보여 주는 것으로 이해가 될 것입니다. Icon Widget과 IconButton Widget의 차이는 버튼 이벤트를 처리할 능력이 있느냐 없느냐 입니다.
ElevatedButton Widget은 child라는 속성의 이름을 사용하는데 IconButton Widget에서는 icon으로 변경되었습니다. 일관성이 없는 것으로 이해될 수도 있는데 속성의 이름을 구체화할 수 있어서 구체화했다고 받아 들이면 됩니다.

// IconButton Widget 코드
IconButton(
    onPressed: () { print("IconButton이 클릭되었습니다."); },
    icon: Icon(Icons.add_alert)
),

클릭해 보면 마찬가지로 이벤트 처리기 함수가 실행됩니다.

IconButton class - material library - Dart API

A Material Design icon button. An icon button is a picture printed on a Material widget that reacts to touches by filling with color (ink). Icon buttons are commonly used in the AppBar.actions field, but they can be used in many other places as well. If th

api.flutter.dev

FloatingActionButton Widget

FloatingActionButton Widget은 Scaffold Widget의 floatingActionButton 속성의 지정으로 주로 사용되는데 “객체 지향 Flutter 프레임워크”를 설명할 때 그냥 넘어 갔었습니다만 이제는 이해할 수 있습니다. 앞에서 이벤트와 이벤트 처리기를 배웠으니 코드를 다시 소환하여 보는 것으로 설명을 대신합니다. setState() 함수의 사용은 또 다시 설명하지 않고 넘어가고 설명하기 적절한 시점이 올 때 설명하겠습니다.

// 변수
  int _counter = 0;

// 이벤트 처리기 코드
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

FloatingActionButton Widget은 tooltip 기능을 가지고 있어서 기술되어 있습니다. tooltip은 FloatingActionButton을 지그시 누르고 있으면 나타납니다.

// Scaffold Widget의 floatingActionButton 속성의 지정 코드
floatingActionButton: FloatingActionButton(
    onPressed: _incrementCounter,
    tooltip: 'Increment',
    child: const Icon(Icons.add),
),

FloatingActionButton class - material library - Dart API

A Material Design floating action button. A floating action button is a circular icon button that hovers over content to promote a primary action in the application. Floating action buttons are most commonly used in the Scaffold.floatingActionButton field.

api.flutter.dev

GestureDetector Widget

GestureDetector Widget은 Gesture 관련 Widget이 아닌 Widget들에게 이벤트를 처리할 능력을 부여합니다. 아래 코드의 경우와 같이 이벤트를 처리할 Widget을 GestureDetector Widget의 child로 지정하면 됩니다.

GestureDetector(
	onTap: () {print("Image가 클릭되었습니다.");},
	child: Image.network("https://image.aladin.co.kr/product/34207/82/cover200/896088457x_1.jpg"),
),

이제 이벤트 처리 기능이 없는 이미지를 클릭하면 GestureDetector Widget을 통하여 이벤트 처리기가 동작하는 것을 확인할 수 있습니다.

GestureDetector class - widgets library - Dart API

A widget that detects gestures. Attempts to recognize gestures that correspond to its non-null callbacks. If this widget has a child, it defers to that child for its sizing behavior. If it does not have a child, it grows to fit the parent instead. By defau

api.flutter.dev

[실습] 코드 팩토리의 플러터 프로그래밍 - 7장 4절 연습용 앱 만들기 : 스플래시 스크린 앱 (175페이지)

프로젝트 이름 : splash_screen
설명 : 아래와 같은 화면을 만듭니다.

이미지를 저자의 깃허브에서 다운받아 images 폴더에 복사해 넣은 후 pubspec.yaml에 등록 후 Pub Get

GitHub - codefactory-co/flutter-golden-rabbit-novice-v2: Must Have 코드팩토리의 플러터 프로그래밍 3쇄 개정판

Must Have 코드팩토리의 플러터 프로그래밍 3쇄 개정판. Contribute to codefactory-co/flutter-golden-rabbit-novice-v2 development by creating an account on GitHub.

github.com

[실습] 자신의 가족을 소개하는 family_intro 앱을 개발하세요.

family_intro 프로젝트를 만들어 작업하시기 바랍니다.
지금까지 배운 것들을 기반으로 자신의 가족을 소개하는 하나의 화면으로 구성된 앱을 개발하기 바랍니다.
필수적으로 사용해야 할 Widget : Scaffold, Text, Image, Container, Column, Row, Stack, Positioned
디자인 기준 : 팀 구성원들의 이미지를 모두 추가, Children 3개인 Row와 Children 2개를 포함하는 Row를 모두 사용, 팀 고유의 배경 색상, 한글 Font 사용
Instructor Note : family_intro 앱의 실행 화면을 스마트폰에서 팀즈로 화면을 공유하여 수강생들에게 보여 줄 것

참고 문헌

[논문]

없음

[보고서]

없음

[URL]

없음

문의사항

[기상학/프로그래밍 언어]

sangho.lee.1990@gmail.com

[해양학/천문학/빅데이터]

saimang0804@gmail.com

[Flutter] 쉽게 배우는 플러터 앱 개발 실무 01강

shlee1990 — Sat, 21 Dec 2024 09:58:31 +0900

정보

업무명 : [Flutter] 쉽게 배우는 플러터 앱 개발 실무 01강
작성자 : 이상호
작성일 : 2024.12.14
설 명 :
수정이력 :

공유 파일

원본 파일

flutter-golden-rabbit-novice-v2-main.zip

drive.google.com

작업 파일

20241214_first_flutter.zip

drive.google.com

Flutter란?

[앱 개발 방식]

일반적으로 사용되는 앱개발 도구는 아래와 같이 분류됩니다.

구분	언어 레벨	iOS 앱	Android 앱
네이티브(Native) 앱	Low-Level	Objective-C
	Mid-Level		Java
	High-Level	Swift	Kotlin
하이브리드(Hybrid) 앱	High-Level	Dart/Flutter	Dart/Flutter
하이브리드(Hybrid) 앱	High-Level	ReactNative	ReactNative

네이티브 개발 방식과 하이브리드 개발 방식은 아래의 표와 같은 특징을 가집니다.

구분	장점	단점
네이티브(Native)	모바일 기기에 최적화돼있기 때문에 앱의 구동 속도가 빠르고 사용자들이 사용하기 편리하다	안드로이드 앱과 iOS앱을 개발할 때 각 언어가 다름으로 시간과 비용이 이중으로 발생한다.
네이티브(Native)	하이브리드 앱에 비해 구현할 수 있는 기능이 많고 보다 고급적인 기술들을 사용한다.
하이브리드(Hybrid)	안드로이드 앱과 iOS앱을 같은 언어로 개발할 수 있기 때문에 빠르게 앱 개발이 가능하고 유지보수 또한 용이하다.	네이티브 앱에 비해 성능이 떨어진다.

위와 같은 사유에 의하여 하이브리드 방식의 개발이 증가하고 있으며 주로 하이브리드 방식으로 개발하고 꼭 필요한 경우 네이티브 방식으로 튜닝하는 방법으로 앱 개발이 이루어지고 있습니다.
Flutter와 ReactNative는 크로스 플랫폼(Cross Platform) 혹은 멀티 플랫폼(Multi Platform) 개발 도구라고 불리기도 하며 iOS와 Android 앱의 한계를 넘어 Windows, Linux, MacOS 및 Web 앱으로 개발 영역을 확장하고 있습니다.

[Flutter의 구조]

Flutter 프레임워크(Framework)는 아래와 같은 구조로 되어 있습니다.
그러나 프로그래머의 관점에서는 프레임워크 구조의 최상단에 위치한 Dart라는 프로그래밍 언어와 Dart로 미리 만들어져서 제공되는 구조가 미리 정해진 코드들의 집합으로 이해할 수 있습니다.

[Dart와 Flutter]

Dart와 Flutter의 관계는 Java와 Spring의 관계와 같이 Dart와 Java는 프로그래밍 언어이고 Flutter와 Spring은 프레임워크로 Spring은 웹 프레임워크인데 Flutter는 앱 프레임워크라는 것에 차이가 있습니다.

프로그래밍 언어	프레임워크	용도
Java	Spring	웹 개발
Dart	Flutter	앱 개발

Flutter 개발 도구

Flutter 개발 도구에는 안드로이드 스튜디오와 Visual Studio Code와 IDX(Intel’s Developer Cloud)가 있습니다.

Project IDX

Project IDX is an entirely web-based workspace for full-stack application development, complete with the latest generative AI from Gemini, and full-fidelity app previews, powered by cloud emulators.

idx.dev

안드로이드 스튜디오, Visual Studio Code 및 IDX 중에서 어떤 개발 도구를 사용하여야 할까요?

구분	이뮬레이터	실제 기기 연결	안정성	설치 여부	기타
안드로이드 스튜디오	상	상	중	설치	프로젝트 생성시 Hang되는 현상 → Visual Studio Code로 열림 / 생성된 폴더를 지우고 다시 시도 / flutter create 명령으로 프로젝트 생성
Visual Studio Code	중	상	상	설치	다양한 이뮬레이터 사용 불가 → 안드로이드 스튜디오 연계 사용, flutter create 명령을 사용한 프로젝트의 생성만 가능함, 경고와 오류 메세지의 밑줄이 코딩을 방해할 수준으로 나타나기 때문에 analysis_options.yaml 파일에 예외처리를 일일이 해 주어야 함
IDX	하	하	중	설치 않음	iOS 앱 테스트 불가 → 폰에 설치 후 테스트 해야 함

제한된 교육용 : IDX + 이뮬레이터
- 안드로이드 이뮬레이터로 카메라 및 ios 등의 테스트 제약
교육용 : 안드로이드 스튜디오/Visual Studio Code + 이뮬레이터 + 실제 기기
개발용 : 안드로이드 스튜디오/Visual Studio Code + 실제 기기 + 이뮬레이터
- 이뮬레이터의 속도가 느리고 잦은 오류 / 특히 카메라 사용시
- 맥북 사용시 iOS 이뮬레이터로 증상이 완화되나 카메라 사용불가

Flutter App 만들기 기초

[학습목표]

Intel’s Developer Cloud (IDX)에서 Flutter 프로젝트/워크스페이스를 만들어 실행시켜 봅니다.
Flutter 프로젝트/워크스페이스를 구성하는 요소들을 이해합니다.
Dart 언어를 사용하여 기초적인 Flutter App을 만들어 봅니다.

[IDX에서 Flutter 프로젝트/워크스페이스 만들기]

Project IDX 사이트로 이동한 후 Google 계정으로 로그인한 후 화면 우측 상단의 New workspace에서 Flutter를 선택합니다.

Name your workspace 필드에 hello_flutter를 입력하고 Create 버튼을 누릅니다.

IDX Flutter 프로젝트/워크스페이스가 생성되면 왼쪽에 프로젝트 탐색기가, 중앙에 소스 코드 편집기가, 오른쪽에 안드로이드 이뮬레이터와 웹 이뮬레이터가, 그리고 하단에 콘솔과 터미널 등의 도구들이 나타납니다.

프로젝트 탐색기에 andriod 폴더가 추가되어 있으면 Android 앱코드를 만들 수 있고, ios 폴더가 추가되어 있으면 iOS 앱코드를 만들 수 있으며 web 폴더가 추가되어 있으면 웹을 만들 수 있습니다. 이때 프로그래머는 lib 폴더의 코드에만 모든 앱 혹은 웹에 공통적인 코딩을 하면 됩니다.

위에서 설명한 원리를 이해하기 위하여 안드로이드 이뮬레이터와 웹 이뮬레이터에서 화면 우측 하단의 플러스(+) 버튼을 눌러 봅시다.

[Flutter App 프로그래밍/코딩이란?]

프로그램을 개발 즉 프로그래밍 혹은 코딩하는 것은 코드조각과 화면조각들을 개발하고자 하는 목적에 맞게 조립해 가는 과정입니다.
이는 마치 레고 조각을 조립하여 어떤 형상을 만들어 가는 과정과 유사합니다. Flutter App을 개발하거나 코딩하는 것도 이와 같습니다.

Flutter App은 기본적으로 레고 블록에 해당하는 위젯(Widget)이라는 객체로 구성됩니다.
위젯은 화면에 표시되는 모든 요소를 포함하여 작은 버튼부터 전체 레이아웃까지 모든 것이 위젯입니다.
위젯(Widget)은 마치 레고 블록과 같습니다.

마치 다양한 레고 조각을 조립하여 어떤 형상을 만들어 가는 과정과 같이 기본적으로 제공되는 다양한 위젯들을 조합해서 앱의 화면을 만듭니다. 때로는 원하는 위젯을 직접 만들어 사용하기도 합니다.

가장 간단한 Flutter App 코드하기

Flutter가 기본적으로 제공하는 복잡한 코드들을 모두 지웁시다.
Flutter App을 만들기 위해서는 Android 앱 디자인을 지원하는 package:flutter/material.dart 패키지나, iOS 앱 디자인을 지원하는 package:flutter/cupertino.dart 패키지를 프로그램 내부로 import하여야 합니다. 일반적으로 Android 앱 디자인을 지원하는 package:flutter/material.dart 패키지를 import하여 사용합니다.

import 'package:flutter/material.dart';

Flutter App의 모든 것은 main() 함수로 부터 시작됩니다.

import 'package:flutter/material.dart';

void main() {

}

runApp() 함수는 Flutter App을 실제로 실행시켜주는 코드입니다.

import 'package:flutter/material.dart';

void main() {
  runApp();
}

MaterialApp() Widget은 앱의 제목(title), 테마 색상(theme), 첫 홈 페이지(home) 등 앱의 전반적인 설정을 담당하는 Widget입니다.

import 'package:flutter/material.dart';

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

위와 같은 간단한 코딩만으로 아래와 같은 Flutter App이 실행되는 것을 확인할 수 있습니다. Flutter의 Placeholder() 위젯은 앱 개발 중 UI 설계의 미완성 부분을 나타내기 위해 사용됩니다.

Material이란?

구글에서 만든 디자인 시스템 (Material Design)

디자인 시스템이란?

통일감 있는 디자인을 제공하기 위해, 자주 쓰이는 UI들을 표준화 해놓은 것 (ex. 버튼, 카드, 메뉴, 앱 바, 텍스트 입력창, 달력 등)
원래는 구글이나 안드로이드 앱에 적용됐으나, Flutter 덕분에 안드로이드 밖에서도 많이 사용하게 됨.

애플에는 휴먼 인터페이스 가이드 라인이 있음 UI에 관심 있는 분들은 꼭 읽어보기! 애플이 얼마나 디자인에 진심인지 알 수 있는 자료.

Foundations | Apple Developer Documentation

Understand how fundamental design elements help you create rich experiences.

developer.apple.com

Scaffold로 페이지의 뼈대 만들기

하나의 페이지를 만들기 위한 기초 뼈대

앱에서 페이지이란?

웹 사이트에서 페이지를 이동하는 것처럼, 앱도 각각의 화면들을 페이지라고 함.
유튜브 앱에서 각각의 탭을 눌렀을 때 이동하는 화면들이 페이지
빈화면을 나타내는 Placeholder() 위젯을 페이지를 나타내는 Scaffold() 위젯으로 교체하겠습니다. 배경색을 하얀색으로 바꾸기 위하여 Scaffold() 위젯 객체의 backgroundColor 속성을 회색(Colors.grey)으로 변경하였습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      //home: Placeholder(),
      home: Scaffold(
        backgroundColor: Colors.grey,
      ),
    ),
  );
}

그후 앱을 실행해 보면 회색 바탕의 빈화면이 나타나는 것을 확인할 수 있습니다.

페이지에는 상단바(appBar)-몸통(body)-하단바(bottomNavigationBar)가 있다

유튜브 앱에 들어가서 여러 페이지들을 들어가보세요. 페이지들마다 어떤 공통점이 있나요?

디자인마다 다를 수 있지만, 앱의 화면은 기본적으로 상단바-몸통-하단바가 있습니다.
Scaffold 위젯은 이러한 앱의 뼈대를 잡아주는 역할을 하며, 페이지는 통상적으로 Scaffold 위젯으로 구성합니다.

AppBar로 페이지의 헤더 만들기

AppBar 위젯은 앱의 상단에 위치하여 머리 역할을 하는 헤더 바입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
				appBar: AppBar(
			    title: Text('App Bar의 타이틀'),
					backgroundColor: Colors.blueGrey,
			  ),
        backgroundColor: Colors.grey,
      ),
    ),
  );
}

Text로 페이지의 몸통 만들기

Scaffold의 몸통(body)으로 Text 위젯을 출력해 보겠습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
        title: Text('App Bar의 타이틀'),
            backgroundColor: Colors.blueGrey,
      ),
backgroundColor: Colors.grey,
body: Text(
            'Scaffold의 몸통(body)',
            style: TextStyle(
                color: Colors.white,
                fontSize: 26,
            ),
          ),
      ),
    ),
  );
}

Scaffold의 몸통(body)이 화면의 상단에 배치된 것이 마음에 들지 않아 Text 위젯을 Center 위젯으로 감싸 보겠습니다. Center()로 Text 위젯을 둘러싼 후 child 속성으로 지정되도록 child: 을 Text 위젯 앞에 붙여 주면 됩니다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
        title: Text('App Bar의 타이틀'),
            backgroundColor: Colors.blueGrey,
        ),
        backgroundColor: Colors.grey,
        body: Center(
          child: Text(
            'Scaffold의 몸통(body)',
            style: TextStyle(
              color: Colors.white,
              fontSize: 26,
            ),
          ),
        ),
      ),
    ),
  );
}

[실습] IDX 개발 도구를 사용하여 자신의 첫번째 플러터 앱을 만들어 봅시다.

아래와 같은 화면을 만들어봅시다.
hello_flutter 프로젝트를 사용하지 말고 my_first_app 프로젝트를 별도로 만들어 사용하기 바랍니다.
그리고 hello_flutter 프로젝트의 코드를 복사하여 사용하지 말고 처음부터 다시 코드의 의미를 생각하며 코딩하기 바랍니다.

Dart 언어 I

[학습 목표]

Python, Java, Javascript로 배운 프로그래밍의 기본 원리와 개념과 의미를 기억해 봅니다.
이미 알고 있는 프로그래밍 지식을 확장하여 Dart 언어를 이해합니다.

[Hello Dart]

Dart 언어를 안드로이드 스튜디오, Visual Studio Code 및 IDX 등의 Flutter 개발도구에서 실행하면 Flutter 프레임워크로 개발된 프로젝트가 실행이 되어 결과가 이뮬레이터나 스마트폰에 나타나게 됩니다. 그래서 Dart 언어를 코딩하여 실행해 보려면 다른 방법을 생각해야 하는데 https://dartpad.dev 사이트로 이동한 후 쉽게 Dart 프로그램을 실행해 볼 수 있습니다.
아래 화면을 보면 왼쪽 창에 1부터 10까지 hello 숫자의 형태로 출력하는 Dart 코드가 만들어져 있어서 Run 버튼을 누르면 오른쪽 창에 결과가 나타나는 것을 확인할 수 있습니다

DartPad

dartpad.dev

동일한 코드를 IDX 개발도구의 main.dart 파일에 복사해 넣은 후 실행시켜보았더니, 아래화면과 같이 이뮬레이터에는 빈화면이 나타나고 하단의 DEBUG CONSOLE에 원하는 출력이 나타나는데 출력되는 문자열의 앞에 I/flutter ( 7893): 이 추가되는 것을 확인할 수 있습니다. 플러터 앱을 개발하다가 오류 수정 등의 목적을 위하여 print 문장을 자주 사용하게 되니 이런 차이를 기억해 둡시다.

개요 및 특징

구글이 개발하여 2011년 10월 GOTO 컨퍼런스에서 공개됨
UI(User Interface)를 개발하는데 최적화됨 - 완전한 비동기 언어이며 이벤트 기반
멀티 플랫폼에서 로깅 및 디버깅 가능

메인 함수

Dart는 프로그램 시작점인 엔트리 함수로 main() 함수를 사용합니다. void는 함수가 아무 값도 반환하지 않는다는 뜻입니다. Dart 언어의 문장은 세미콜론(;)으로 종료됩니다. 중괄호({})는 코드 블록의 시작과 끝을 나타내는데 여기서는 main() 함수의 시작과 끝을 나타냅니다.

void main() {  
		print("Hello Dart");
}

주석

주석은 코드로 실행되지 않으며 코드를 설명하기 위한 목적으로 사용됩니다. //는 한줄 주석, /* ~ */는 여러줄 주석으로 사용됩니다.

void main() {
// 한줄 주석

/* 여러줄
여러줄
여러줄
주석*/
}

변수와 상수의 구분

변경되는 변수의 현재값들은 print() 함수의 도움을 받아 출력해 볼 수 있습니다.

Dart는 const와 final 키워드를 사용하여 상수를 명시적으로 지정합니다. final은 상수의 변경 가능성을 제거하여 코드의 안정성을 높여 주며, const는 메모리 최적화까지 지원하여 성능 상의 이점까지 가지게 됩니다.

void main() {
    // 변수
    String nameVar = "변경 가능한 이름 변수";
    nameVar = "변경된 이름 변수";
    print(nameVar);

    // 상수
    const String nameConst = "변경 불가능한 상수-주로 불변 객체를 만들 때 사용";
    final String nameFinal = "변경 불가능한 상수-주로 인자를 받을 때 사용";
}

Instructor Note : Flutter 앱 프로젝트로 이동하여 const와 final이 있거나 없을 경우 경고나 오류가 나는 것을 보여 주고 해결하는 것을 보여 줄 것.

자료형(데이터 타입,Data Type)

Dart의 자료형은 Java처럼 기본형과 객체형으로 나뉘지 않고, 모든 자료형이 객체로 처리되어 일관성을 유지합니다.

Dart 언어에서 문자 타입의 자료형에 단일인용부호(’)와 이중인용부호(”)가 모두 사용될 수 있습니다.

void main() {
  String singleQuote = '단일 인용부호로 만든 문자열';
  String doubleQuote = "이중 인용부호로 만든 문자열";

  print(singleQuote);
  print(doubleQuote);
}

Dart 언어에서는 Python의 f 문자열과 유사하게 $ 부호를 사용한 포맷팅이 가능합니다. 최근에 개발되는 언어들, 예를 들어 Dart, Python, JavaScript(ES6 이후), Swift 등에서는 C 언어 스타일의 %d, %f, %s와 같은 포맷팅 기법 대신 $ 와 {}를 사용하는 문자열 보간 방식으로 전환하는 경향이 뚜렷해지고 있습니다. {}를 사용하면 변수만이 아니라 수식의 결과값도 문자열에 포함시킬 수 있습니다. 그러나 일부 언어에서는 여전히 C 스타일의 포맷팅 기법이 사용되기도 합니다.

void main() {
    String lang = "Dart";
    String framework = "Flutter";
    String formatted = "$framework 프레임워크의 $lang 언어";
    print(formatted);

    int num1 = 10;
    int num2 = 20;
    formatted = "$num1 + $num2 = ${num1+num2}";
    print(formatted);
}

예제. 문자열안에 단일인용부호(’)와 이중인용부호(”)가 아래와 같은 형태로 출력되도록 코드해 보세요.

'singleQuote'
"doubleQuote"
single'Quote
double"Quote

null은 숫자의 0과 같이 없거나 존재하지 않는 것을 의미합니다. 0의 개념이 숫자 이외의 자료형으로 확장된 형태로 이해하면 됩니다. 0으로 다른 숫자를 나눌 수 없는 것과 같이 null을 사용할 때에는 값이 있는지 없는지 확인하는 습관을 가져야 합니다.

객체

앞에서 Dart의 자료형(Data Type)이 객체(Object)이고, Flutter의 레고블럭에 해당하는 위젯(Widget)도 객체(Object)라고 설명했습니다.
하나의 객체는 객체의 상태(State)나 속성(Property)을 나타내는 멤버 변수(Variable)와 객체의 행동(Behavior)을 나타내는 멤버 함수(Function) 혹은 메소드(Method)로 구성됩니다.
객체를 만드는 것은 어려우나 만들어진 객체를 사용하는 것은 쉬운데, 먼저 앞에서 설명한 코드들 중에서 객체를 만들어 사용하는 예를 들어 객체를 만들어 사용하는 법을 설명하겠습니다.
객체는 클래스(Class)를 사용하여 객체를 만들어 사용합니다. 클래스의 이름은 변수나 속성과 달리 대문자로 시작합니다.

객체의 생성 - 속성이 없는 경우

아래의 코드에서 Placeholder는 int나 String과 같은 클래스(Class)입니다. Placeholder()과 같이 클래스 이름에 괄호를 붙이면 객체가 생성됩니다.

Placeholder()

객체의 생성 - 속성을 특정 위치에 부여하는 경우

아래의 코드를 보면 'App Bar의 타이틀' 문자열을 Text 클래스의 첫번째 속성으로 넘겨주고 있습니다.

Text('App Bar의 타이틀')

객체의 생성 - 속성을 이름으로 부여하는 경우

아래의 코드를 보면 home:과 같이 속성의 이름을 소문자로 주고 그뒤에 Placeholder() 값을 주어 MaterialApp() 객체를 생성하고 있습니다. Placeholder()와 같은 객체도 정수나 문자열 등의 다른 자료형과 같이 값으로 사용될 수 있습니다.

MaterialApp(
	home: Placeholder(),
)

객체의 생성 - 속성을 여러개 지정하는 경우

위치로 지정하는 속성을 앞에 오게 하고, 이름으로 지정하는 속성을 뒤에 배치하는데 이름으로 지정하는 속성간의 순서는 상관없습니다. 속성들은 콤마(,)로 구분합니다.

Text(
  'Scaffold의 몸통(body)',
	style: TextStyle(
    color: Colors.white,
    fontSize: 26,
  ),
),

객체의 메소드

아래의 코드를 보면 정수형 객체인 ageInt에 toString() 메소드가 존재하여 정수형 자료형을 문자열 자료형으로 변환해 주고 있습니다.

int ageInt = 42;
String ageString = ageInt.toString();

환경설정(Flutter/안드로이드 스튜디오)

[학습목표]

Flutter 프로그램 개발 환경을 구축합니다.

[JDK 사용 환경 확인]

JDK가 설치되어 있어야 합니다. 현재 가장 안정된 버전은 17 버전인 것으로 확인되고 있습니다. 그리고 JAVA_HOME 환경변수가 C:\Program Files\Java\jdk-17와 같이 설정되고 Path 환경 변수에C:\Program Files\Java\jdk-17\bin와 같은 폴더가 추가되어 있어야 합니다. 명령어 프롬프트를 열어서 java —version 명령어를 수행하여 정상적으로 설치되었는지 확인합니다.

[설치 파일 다운로드]

Flutter 프로그램을 개발하기 위해서는 **Flutter SDK(Software Development Kit)**와 **안드로이드 스튜디오 통합개발환경(IDE,Integrated Development Environment)**를 설치해야 합니다.
Flutter SDK(Software Development Kit)의 설치 URL과 설치를 위하여 클릭해야 할 위치 화면은 아래와 같습니다.

Start building Flutter Android apps on Windows

Configure your system to develop Flutter mobile apps on Windows.

docs.flutter.dev

위의 링크를 클릭한 후 아래로 스크롤해서 내려가서 Download and Install 링크를 클릭하면 아래 화면과 같이 flutter_windows_3.24.3-stable.zip과 같은 형태의 다운로드 버튼이 보입니다.

안드로이드 스튜디오 통합 개발 환경의 설치 URL과 설치를 위하여 클릭해야 할 위치 화면은 아래와 같습니다.

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자 | Android Studio | Android Developers

Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.

developer.android.com

아래와 같은 화면 중의 한가지 방법으로 확장자가 .exe인 Windows 64 비트용 설치 실행 파일을 다운로드합니다.

[Flutter SDK 설치]

flutter_windows_3.22.2-stable.zip 파일의 압축을 풀어 c:\ 폴더에 위치시킵시다. 이 위치가 아니면 안드로이드 스튜디오로 프로젝트를 만들 때 Hang되는 등 이해할 수 없는 오류가 발생하는 경우가 발생합니다.

그리고 아래 화면과 같은 방식으로 시스템 환경 변수 편집 화면으로 이동한 후

화면 하단의 환경변수 버튼을 클릭하여

path 환경 변수에 c:\flutter\bin을 추가합니다.

명령 프롬프트에서 where flutter 명령어를 수행하여 아래 화면과 같이 Flutter 명령어가 찾아져야 Flutter SDK가 정상적으로 설치된 것입니다.

[안드로이드 스튜디오 통합개발환경 설치]

android-studio-2024.1.1.11-windows.exe 파일을 실행하여 안드로이드 스튜디오 통합개발환경(IDE,Integrated Development Environment)를 설치합니다. 아래와 같은 화면이 나타나면 라이센스 동의 화면이 나올 때까지 Next 버튼, Install 버튼, Finish 버튼 및 OK 버튼만 클릭하여 기본(디폴트,Default) 설정값대로 설치하도록 합시다.

라이센스 동의 화면에서 android-sdk-license와 intel-android-extra-license 두가지 모두에 대하여 Accept 라디오 버튼을 눌러야 Finish 버튼이 나타납니다.

Finish 버튼을 누른 후 설치에 매우 긴 시간이 소요되니 인내심을 가지고 기다립니다.

아래와 같은 화면이 나타나면 드디어 설치가 완료된 것입니다.

Finish 버튼을 누른 후 아래와 같은 화면이 나타나면 화면의 좌측에서 Plugins 메뉴를 누른 후 Marketplace에서 flutter 플러그인을 찾아 설치(install)합니다.

Flutter 플러그인을 설치한 후 Restart IDE 버튼을 클릭해 안드로이드 스튜디오를 재실행해야 설치한 플러그인이 반영됩니다.

안드로이드 스튜디오가 다시 실행되어 아래와 같은 화면이 나타나면 드디어 Flutter App의 개발 환경이 구축된 것입니다.

[안드로이드 스튜디오로 첫 Flutter App 만들기]

안드로이드 스튜디오의 초기화면에서 Projects 메뉴를 선택한 후 New Flutter Project 버튼을 클릭합니다. New Project 버튼을 클릭하면 Flutter 앱이 아니라 Java나 Kotlin으로 Android 앱을 만들게 되니 꼭 New Flutter Project 버튼을 클릭하여야 합니다.

화면 좌측의 Generator 하단에서 Flutter를 선택한 후 화면 우측 상단의 Flutter SDK path 란에 설치한 Flutter SDK의 경로인 c:\flutter를 선택하여 입력합니다. 그리고 Next 버튼을 누릅니다.

Project 이름을 first_flutter로 입력하고, 나머지는 기본값으로 유지한 후에 Platforms는 Android와 iOS만 남기고 나머지는 선택을 해제하였습니다. 입력된 값들을 확인한 후 Create 버튼을 누릅니다.
프로젝트를 만드는 화면에 나오는 입력항목들은 기존에 배운 통합개발도구들과 유사하여 설명을 생략합니다만 실제 업무 환경에서는 개발할 응용프로그램의 목적에 맞는 값들로 채워 넣어야 할 것입니다.

생성된 first_flutter 프로젝트의 화면을 보니 Spring Boot 프로젝트를 gradle/groovy 빌드 환경으로 생성했을 때의 화면과 유사합니다. 좌측에 폴더 구조의 형태로 코드들이 프레임워크(Framework)로 제공되고 있고 화면의 중간에 main.dart 코드가 보입니다.

앞에서 설명한 Flutter의 개념적 구조와 비교해 봅시다. 그렇습니다. 시스템 프로그래머가 아닌 우리들 응용프로그래머가 우선적으로 알아야 하는 것은 아래의 그림에 나오는 Flutter 구조 전체가 아니라 위의 안드로이드 스튜디오에 나타나는 것들 입니다.
그럼 자동으로 만들어진 앱을 실행해 보겠습니다.
Flutter 앱은 기본적으로 스마트폰에서 실행되기 위해 만들어지기 때문에 Flutter 앱을 실행하기 위해서는 별도의 장치(Device)가 필요합니다. 다행히 실물 장치를 대신하도록 소프트웨어적으로 만들어 놓은 가상의 장치(Virtual Device)만들어져 있어서 실제 장비를 안드로이드 스튜디오와 연결하지 않고도 앱을 실행해 볼 수 있습니다. 이와 같은 가상의 장치를 이뮬레이터(Emulator)라고 부릅니다.
안드로이드 스튜디오 화면의 우측에서 장치관리자(Device Manager) 아이콘을 클릭한 후

기본적으로 사용할 환경이 구성되어 있는 이뮬레이터의 우측에 있는 시작(Start) 버튼을 클릭합니다.

그러면 폰이 부팀되는 시간만큼을 기다리면 아래와 같이 우측 하단에 가상의 폰이 하나 실행되는 화면이 나타납니다. 안드로이드 스튜디오에서 기본적으로 제공되는 이뮬레이터가 버전마다 조금씩 다르니 아래와 다른 화면이 나타나도 상관없습니다.

Pixel Fold 가상 장치가 실행되어 안드로이드 스튜디오의 우측 화면에 나타나고, 화면의 상단에 시작한 가상 장치의 이름이 나타나면

화면의 상단에서 실행(Run) 버튼을 누릅니다.

그러면 앱이 실행되어 가상 장치에 나타나는 것을 확인할 수 있습니다. 실행되는 앱 화면에서 우측 하단에 있는 플러스(+) 버튼을 눌러 화면의 중앙에 있는 숫자가 증가하는 것도 확인해 봅시다.
그리고 앱이 실행될 때 화면의 하단에 나타나는 메세지에도 관심을 가집시다. 프로그램이 실행되는 상태를 파악하는데 크게 도움이 되며 혹시 오류가 발생할 때에도 로그에 관심을 기울이면 오류의 원인을 파악하는데에도 크게 도움이 됩니다.

생성된 프로젝트는 c:\Users\user\StudioProjects 폴더 안에 프로젝트의 이름과 동일한 폴더에 위치합니다.

[가상장치(이뮬레이터) 관리]

안드로이드 스튜디오에서는 개발한 실제 기기와 유사한 가상 장치를 여러개 만들어 테스트할 수 있습니다.
안드로이드 스튜디오의 우측에서 Device Manager 화면으로 이동한 후 플러스(+, Add a new device)아이콘을 클릭한 후 Create Virtual Device 메뉴를 선택합니다.

아래 화면에서 Pixel 8 Pro 장치를 선택한 후 Next 버튼을 눌러 기본(Default,디폴트) 설정값을 유지하면서 설치를 완료합니다.

그러면 선택된 가상 장치가 Device Manager 화면에 추가되는 것을 확인할 수 있습니다.

Medium Phone API 35가 일부 PC에서 이뮬레이터가 실행되지 않고 Hang되는 현상이 발생합니다. 본인의 PC에서도 이런 현상이 발생한다면 Medium Phone API 35 이뮬레이터를 지웁시다. 생성된 이뮬레이터를 삭제하려면 … 버튼을 누른 후 Delete 메뉴를 선택합니다.

예제. Pixel 7 Pro 가상 장치를 추가한 후 First_flutter 앱을 2개 이상의 가상 장치를 바꾸어 가며 실행해 보세요. 동시에 2개의 이뮬레이터를 동시에 기동하는 것이 어려우니 다른 이뮬레이터를 기동할 때에는 기존에 실행 중이던 이뮬레이터는 중단(ㅁ) 버튼을 눌러 중단시키기 바랍니다.

[Flutter 개발 환경 설치 마무리]

명령 프롬프트에서 flutter doctor 명령어를 실행합니다. 3군데에 X 표시가 나오며 오류가 발생하고 있습니다.

안드로이드 스튜디오에서 File > Tools > SDK Manager 메뉴를 클릭합니다.

SDK Tools 탭을 선택한 후 Android SDK Command-line Tools (latest)를 선택하여 설치합니다.

flutter doctor --android-licenses 명령어를 실행한 후 y를 반복하여 입력하여 라이센스 조건을 수용합시다.

다시 flutter doctor 명령어를 실행해 보면 Visual Studio를 제외한 모든 문제들이 사라진 것을 확인할 수 있습니다. Visual Studio를 활용한 개발은 하지 않을 것이니 하나의 오류가 남아 있는 것은 무시하여도 됩니다.

Instructor Note : 이뮬레이터 실행시 CPU가 폭주하며 Hang되는 현상이 자주 발생함. 이런 현상을 예방하기 위하여 Path에서 Github를 제거할 것과 팀즈와 안드로이드 스튜디오 외에 카카오톡 등 수업에 필요하지 않은 프로그램들을 종료하라고 안내할 것. 특히 팀즈로 화면 공유하면서 이뮬레이터를 동시에 기동할 때 Hang이 심하게 발생함.
Instructor Note : 아래 상황을 모든 수강생에 대하여 일일히 점검할 것
- Flutter가 c:\flutter에 설치되었는지 where flutter로 확인
- path 환경변수에서 Github가 제거되었는지 확인
- Flutter Doctor에서 X 표시가 Visual Studio를 제외하고 모두 해결되었는지 확인
- Github의 사용이 불가피하고 폰을 연결하여 테스트할 수 있는 환경이라면 Visual Studio Code에 폰을 연결하여 테스트하는 것도 괜찮은 선택임. 대신 프로젝트를 만들 때 flutter create project_name 명령어를 사용하여야 함.
- 맥북을 사용하여 iOS 이뮬레이터를 사용하는 것도 괜찮은 선택임

[실습을 위한 준비물]

가족을 대표하고 상징할만한 이미지 파일들
가족 구성원들의 사진들
안드로이드폰과 PC를 연결하기 위한 데이터 케이블 (충전 기능만 있는 케이블이 있으니 주의)

참고 문헌

[논문]

없음

[보고서]

없음

[URL]

없음

문의사항

[기상학/프로그래밍 언어]

sangho.lee.1990@gmail.com

[해양학/천문학/빅데이터]

saimang0804@gmail.com

[IDE] PowerMockup 파워 목업 화면 설계서 편집기 소개 및 라이센스 발급 방법

shlee1990 — Thu, 19 Sep 2024 16:56:01 +0900

정보

업무명 : PowerMockup 파워 목업 화면 설계서 편집기 소개 및 라이센스 발급 방법
작성자 : 이상호
작성일 : 2024.09.20
설 명 :
수정이력 :

내용

[개요]

안녕하세요? 기상 연구 및 웹 개발을 담당하고 있는 해솔입니다.
최근 다양한 웹/앱 화면 설계를 위한 GUI 도구 (Figma, PowerMockup 등)를 제공 중입니다.
특히 Figma의 경우 UI/UX 전문가 및 프론트엔드 개발자들이 많이 사용하나 일반 사용자에게는 적합하지 않습니다.
따라서 MS PPT에서 유용하게 사용할 수 있는 PowerMockup 파워 목업 화면 설계서 편집기 소개뿐만 아니라 라이센스 발급 방법을 공유합니다.

PowerMockup 화면 설계서 편집기

[소개]

PowerPoint를 확장하는 설치형 와이어프레임 작성 도구로서 Windows 환경 내 MS Office 사용자 추천
일반적으로 유료 라이센스를 통해 사용해야 하나 특정 사용자 (블로거, 기자, MS MVP 등)에게 제공 중

[일반 사용자] 유료 라이센스

Plan	Price (USD)	Users	Discount	Expiration	Updates	Money-Back Guarantee
Individual	69.99	1 User	None	Never Expires (No Subscription)	Free Updates for Version 4	30-Day Money-Back Guarantee
Small Team	324.95	5 Users	Save 10%
Team	599.9	10 Users	Save 20%
Enterprise	2799.5	50 Users	Save 30%

Pricing | PowerMockup

How can I upgrade to version 4? If you have purchased a PowerMockup 3 license after October 1, 2014, the upgrade is free of charge—your license code remains valid and you simply have to install the new version. Otherwise, you may buy an upgrade for 50% o

www.powermockup.com

[특정 사용자] 무료 라이센스

(블로거) 정기적인 포스팅, 적당한 방문자 수, 개발 관련 내용이 포함된 독창적인 리뷰를 게시하고 링크를 제출
(기자) 언론사 카드 사본을 제출
(MS MVP) MVP 프로필 링크 제출

Free License | PowerMockup

Are you a blogger, journalist, or a Microsoft MVP? Here’s how you can apply for a free PowerMockup license. Bloggers If you write a blog post about your experiences with the trial version of PowerMockup, we will be happy to provide you with a free single

www.powermockup.com

[특징]

PowerMockup 플러그인 형태로서 다운로드 및 설치하기 쉬움

사용자 측면에서 Powerpoint 고속 디자인 소프트웨어 인터페이스를 지원
즉 사용자 인터페이스 78종 및 와이어프레임 아이콘 84종을 포함하여 각 객체 요소마다 수정/보완 가능

일반적으로 고객에게 설계 화면을 전달 시 다양한 버전에 따라 시안을 제공해야 함
이때 단일 PPT에서 개별 슬라이드로 관리되기 때문에 효과적으로 수정하기 용이할 뿐만 아니라 타 PPT에서 재사용 가능

PPT에서 다양한 아이콘을 제공하지 않기 때문에 주로 인터넷에서 아이콘 이미지를 사용함
그러나 PowerMockup의 경우 그래픽 테마별로 다양한 아이콘을 제공함

무료 라이센스 발급 방법

[메일 양식] 국문

받는사람 support@powermockup.com
제목 [Bloggers] PowerMockup 무료 라이센스 발급 신청

powermockup support 담당자 님께,

안녕하세요? 티스토리 블로그에서 기상 연구 및 웹 개발을 담당하고 있는 해솔입니다.

PowerMockup 무료 라이센스 발급 신청을 위한 게시물 링크를 보내드리오니 확인 부탁드립니다.
- https://shlee1990.tistory.com/1153

즐거운 하루 보내세요.

해솔 올림.

[메일 양식] 영문

받는사람 support@powermockup.com
제목 [Bloggers] Request for PowerMockup Free License

Dear PowerMockup Support Team,

Hello, my name is Haesol, and I manage a blog on Tistory where I focus on meteorological research and web development.

I would like to apply for a free PowerMockup license.
- https://shlee1990.tistory.com/1153

Thank you for your time, and I hope you have a great day!

Best regards, Haesol

[답변 메일]

48시간 내로 라이센스 (Name, License code) 전달 받음

[라이센스 인증]

상단 PowerMockup 메뉴 내 Enter License Code 선택

Name 및 License Code 입력 및 활성화

상단 PowerMockup 메뉴 내 About 선택
라이센스 활성화 확인

영문 매뉴얼

참고 문헌

[논문]

없음

[보고서]

없음

[URL]

없음

문의사항

[기상학/프로그래밍 언어]

sangho.lee.1990@gmail.com

[해양학/천문학/빅데이터]

saimang0804@gmail.com

[자격증] 데이터분석 준전문가 (ADsP) Ⅲ 데이터 분석 : 01~08강

shlee1990 — Sat, 15 Jun 2024 12:13:56 +0900

정보

업무명 : 데이터분석 준전문가 (ADsP) Ⅲ 데이터 분석 : 01~08강
작성자 : 이상호
작성일 : 2024.06.15
설 명 :
수정이력 :

01강Ⅲ-1-1 R프로그래밍

(1) 기본적인 프로그램

컴퓨터에 명령을 내리는 데 필요한 컴퓨터의 언어를 프로그래밍 언어 (programming language)
전통적으로 Basic, Cobol, Fortran, C, C++등이 활용
GAUSS (Matrix programming language), Matlab, S-plus, R 등의 사용자가 증가

(2) 현재 시중에서 이용되는 통계 프로그램

R
SAS (StatisticaI AnalysisSystem)
SPSS (StatisticaI Package for the Social Sciences)
Stata (StatisticsData)
WinRats-32 (Regression Analysis for Time Series)
EViews (Econometric Views)
Limdep (Limited Dependent model)

(3) R이란?

컴퓨터로 통계 및 계량분석이 가능하도록 계산 과정을 정리해 놓은 프로그램을 통계 배기지
R은 프로그래밍 언어로 구성된 통계분석 도구로 다양한 분석 기능을 가지고 있음
좋은 기능을 가짐에도 불구하고 무료로 제공
세계적으로 많은 분석가들이 사용

(4) R의 역사

R은 오글랜드대학교의 Robert Gentleman과 Ross Ihaka에 의해 1995년에 처음으로 개발
현재는 R core team 이 R 프로젝트를 운영
R은 데이터 의 조작 (manipulation)과 연산 (calculation). 그래픽 표현 (graphical display)을 활용하는 통합 패기지
금융공학. 생명공학. 행정학, 의학, 자연과학 등 여러 전문분야에서 활용

(5) R의 장점

R은 간단한 명렁어만으로 복잡한 계산을 수행할 수 있는 프로그램
분석을 빠르게 수행
R은 Linux, UNIX, MAC OS X, Windows 등 모든 운영체제에서 실형 가능
각종 DBMS (Database Management System) 데이터에 접근이 가능
별도의 패키를 사용하여 R의 소스를 Java, Python, C, C# 등의 언어와 호환/사용 가능
R은 공개 소프트웨어로 모든 소스가 공개되므로 자유로운 수정 및 변경이 가능
다양하고 정일한 분석을 할 수 있다.
경제학, 행정학, 의학, 생물학 등 다양한 학문 분야에서 사용
다양한 통계분석 방법이 패키지 형태로 공개되므로 사용자가 복잡한 계산식을 일일이 입력하여 분석하야 하는 수고가 불필요

(6) R의 단점

R을 사용하기 위해서는 R 언어를 배워야 하며, 새로운 기능이 빠르게 추가되고 있기때문에 지속적으로 새로운 기능을 습득하야 하는 어려움이 있다.

2. RStudio란

RStudio는 R의 통합개발환경 소프트웨어
RStudio를 사용하기 위해서는 반드시 R이 설지되어 있어야 함.

〈참조〉 통합개발환경
소프트웨어 개발 과정에서 필요한 코팅 (coding), 디버깅 (debugging), 컴파일 (compile)의 과정을 하나로 패키지화한 소프트웨어를 통합개발환경 (Integrated Development Environment: IDE)이라고 한다.

(1) 기본용어

코팅: 프로그래밍 언어를 이용하여 구체적인 컴퓨터 프로그램을 만드는 기술
디버깅: 코드상의 오류를 찾아내어 수정하는 과정
컴파일: 컴퓨터가 처리한 언어를 사람이 읽을 수 있는 언어나 그림으로 변환하는 프로그램

(2) RStudio의 장점

RStudio 역시 모든 운영체제에서 실행이 기능
모든 R 버전과 호환이 가능
코딩작업에 필요한 콘솔 (console), 디버깅 작업에 필요한 소스 에디터 (source editor), 그리고 데이터 뷰어 (data viewer) 및 도표 이력 (plot history) 등 통합개발환경의 주요 요소들이 잘 통합되어 편히라고 신속한 작업이 가능
표시되는 구문을 종류별로 구문 (예를 들이 입력문과 출력문, 함수 등)
여러 가시 다른 색으로 강조하며 표시하는 구문 강조 (syntax highlight) 기능 탑재
함수의 첫 글자로 함수를 자동으로 검색하거나 함수예 포함될 요소들을 표시해 주는 코드 완성 (code completion) 기능 탑재
코드 입력 시 괄호나 따옴표가 자동으로 입력되는 기능 등이 추가되어 수식 입력 과정에서 사용자의 편의를 기함

RStudio 시작하기

RStudio 아이콘을 클릭하면 Sources 창, Console 창, Environment/History 창, Files, Packages/Plots, Help, Viewer 창 등 4개의 창이 나타난다.
Source 창: 프로그램 Sources를 편집, 프로그램 내의 R 명령어에 커서를 두고 <Ctrl+R>로 실행
Console 창: 명령어를 입력하고 결과를 학인 , 상하 화살표를 이용하여 이전 명령어를 편집 및 실행
Environment/History 창: 변수 또는 객체의 목록과 값 확인
History 창: 명령어 History를 확인 및 검색하고 더불클력하여 Console 창으로 보냄
Files, Packages/Plots, Help, Viewer 창
- Files, Packages 창: 파일과 폴더 및 패키지 목록
- Plots, Help, Viewer 창: 그래프, 도움말, HTML 등 명령어 실행 결과

3. 명령어 실행방법

R에서 명렁어를 실행시키는 방법에는 직접 명령문과 할당 명령문이 있다.

(1) 직접 명렁문

Console 창에서 직접 입력하여 엔터를 쳐서 실행
print() 함수를 사용하여 실행할 수도 있음
R을 마치 계산기처럼 사용할 수 있음
콘솔의 환영 메시지는 Edit> Clear Console (또는 <Ctrl+L>)을 선택하여 지운 후 명령어를 입력하여 엔터를 치면 실행 결과를 보여줌

(2) 할당 명령문

특정한 데이터 또는 연산 결과를 새로운 문자열에 할당하여 하나의 객체를 정의하는 명렁문으로 작업 결과의 반환을 요구하지 않는다.
할당 명령문의 형태는 할당 연산자인 <- 또는 =를 사용하는 형태와 할당 함수인 assign() 을 사용하는 형태 존재
모두 동일한 기능을 수행
할당 명령문에 의해 생성된 객체를 제거하려면 rm0 함수를 이용

(3) 코드 입력 및 실행

Source 창에서 프로그램 Source를 작성, 편집, 저장, 실행. 불러오기 등을 할 수 있음
작성된 프로그램을 한 줄씩 실행하는 방법은 Run을 클릭 (또는 <Ctrl+Enter>)
여러 줄을 동시에 실행하는 방법은 여러 줄을 선택하고 Run을 클릭
작성된 프로그램 Source를 저장하기 위해서는 File/Save As 선택한 후 본인이 원하는 디렉토리에 따일이름을 입력
저장된 파일을 불러오기 위해서는 File/Open File을 선택한 후 대상 파일이 위지한 디렉토리에서 불리오기

(1) 수학함수

R에서는 다양하고 광범위한 내장함수를 제공하고 있음
사용자는 분석 과정에서 빈번하게 사용되는 수식을 단순화한 함수로 사용
결과적으로 작업의 효율성을 높일 수 있다.

02강Ⅲ-1-2 데이터마이닝

데이터 마이닝의 개요

데이터마이닝은 대용량 데이터에서 의미있는 패턴을 파악하거나 예측하여 의사결정에 활용하는 방법이다.

통계분석과의 차이점

통계 분석은 가설이니 가정에 따른 분석이나 검증을 하지만 데이터마이닝은 다양한 수리 알고리즘을 이용해 데이터베이스의 데이터로부터 의미있는 정보를 찾아내는 방법을 통칭한다.

사용분야

병원에서 환자 데이터를 이용해 해당 환자에게 발생 가능성이 높은 병을 예측
기존 환자가 응급실에 왔을 때 어떤 조치를 먼저 해야 하는지를 결정
고객 데이터를 이용해 해당 고객의 우량/불량을 예측해 대출적격 여부 판단
세관 검사에서 입국자의 이력과 데이터를 이용해 관세물품 반입 여부를 예측

데이터마이닝을 위한 데이터 분할

모델 평가용 테스트 데이터와 구축용 다이터로 분할하여 구축용 데이터로 모형을 생성하고 테스트 데이터로 모형이 일마다 적합한지를 판단한다.

03강Ⅲ-1-3 분석방법

분류 모델의 검증 지표

04강Ⅲ-1-4 분석방법2

05강Ⅲ-1-5 분석방법3

06강Ⅲ-1-6 분석방법4

07강Ⅲ-1-7 분석방법5

08강Ⅲ-1-8 분석방법6

참고 문헌

[논문]

없음

[보고서]

없음

[URL]

없음

문의사항

[기상학/프로그래밍 언어]

sangho.lee.1990@gmail.com

[해양학/천문학/빅데이터]

saimang0804@gmail.com

[자격증] 데이터분석 준전문가 (ADsP) Ⅱ 데이터 분석 기획 : 01~17강

shlee1990 — Sat, 15 Jun 2024 12:12:59 +0900

정보

업무명 : 데이터분석 준전문가 (ADsP) Ⅱ 데이터 분석 기획 : 01~17강
작성자 : 이상호
작성일 : 2024.06.15
설 명 :
수정이력 :

01강Ⅱ-1-1 데이터 분석의 계획 수립 방향성

(1) 분석기획이란?

실제 분석을 수행하기에 앞서 분석을 수행할 과제를 정의하고, 의도했던 결과를 도출할 수 있도록 이를 적절하게 관리할 수 있는 방안을 사전에 계획하는 일련의 작업
- (문제 정의) 분석하고자 하는 문제나 질문을 명확히 정의함
- (목표 설정) 분석 결과를 통해 달성하고자 하는 주요 목표임
- (자원 파악) 필요한 데이터 출처를 파악하고, 분석에 사용될 도구와 기술을 결정함. 또한 프로젝트를 수행할 인력의 역량도 고려함
- (계획 수립) 데이터 수집, 데이터 정제, 모델링, 분석, 결과 검토 및 보고 등의 단계가 포함함
- (시간 관리 및 일정 수립) 프로젝트를 효율적으로 관리하고, 시간 내에 목표를 달성하기 위해 각 단계마다 시작일/종료일 설정
- (위험 관리) 잠재적인 위험 목록을 사전에 식별하고, 이에 대한 대비함

(2) 분석 대상과 방법

분석은 분석의 대상(What)과 분석의 방법(How)에 따라서 4가지로 나누어진다.
- (최적화) 주어진 매개변수와 제약 조건 내에서 최고의 결과를 달성하기 위해 알려진 방법을 적용
- (통찰) 알려진 분석 방법을 사용하여 이해되지 않은 현상이나 데이터에서 숨겨진 패턴을 발견하는 과정
- (해법) 알려진 문제에 대해 새로운 해결 방법을 찾는 과정
- (발견) 알려지지 않은 문제를 새롭고 알려지지 않은 방법으로 탐색

(3) 목표 시점별 분석 기획 방안

①과제 중심적인 접근방식 : 목표시점 별로 당면한 과제를 빠르게 해결하는 방식 (단기 목표)
②장기적인 마스터 플랜 방식 : 지속적인 분석 내재화를 위한 방식 (장기 목표)
- 의미있는 분석을 위해 분석기술, IT 및 프로그래밍, 분석 주제에 대한 도메인 전문성, 의사소통이 중요
- 분석 대상 및 방식에 따른 다양한 분석 주제를 과제 단위 혹은 마스터플랜 단위로 도출

(4) 분석 기획시 고려사항

① 가용 데이터에 대한 고려
- 분석을 위한 데이적용 가능한 솔루션, 분석 방법을 위한 유형터의 확보가 우선적
- 유형에 따라 에 대한 분석
② 분석을 통해 가치가 창출될 수 있는 적절한 활용방안과 유즈 케이스 탐색
- (유즈케이스) 소프트웨어나 시스템이 사용자(또는 다른 시스템)의 요구를 충족하기 위해 수행하는 기능 명세임. 즉 시스템이 어떤 상황에서 어떻게 사용될 수 있는지를 구체적으로 설명함.
③ 분석 수행시 발생하는 장애요소들에 대한 사전계획 수립
- 데이터 품질 문제, 기술적 한계, 자원의 부족 등

연습문제1

분석은 분석의 대상(What)과 분석의 방법(How)에 따라서 4가지로 나누어진다. 그것에 해당하는 것이 아닌 것은?
① 최적화 (Optimization)
② 해법 (Solution)
③ 통찰(Insight)
④ 발명(invention)

연습문제2

목표 시점별 분석 기획 방안중 장기적인 마스터 플랜 방식에 해당하는 내용이 아닌 것은?
①목표시점 별로 당면한 과제를 빠르게 해결하는 방식
②지속적인 분석 내재화를 위한 방식
③의미있는 분석을 위해 분석기술, IT 및 프로그래밍, 분석 주제에 대한 도메인 전문성, 의사소통이 중요
④분석 대상 및 방식에 따른 다양한 분석 주제를 과제 단위 혹은 마스터플랜 단위로 도출

02강Ⅱ-1-2 분석 방법론

(1) 분석 방법론 개요

① 개요
- 데이터 분석이 효과적으로 기업내에 정착하기 위해서는 이를 체계화한 절차와 방법이 정리된 데이터 분석 방법론의 수립이 필수적
- 방법론은 상세한 절차(Procedures), 방법(Methods), 도구와 기법(Tool&Techniques), 템플릿과 산출물(Templates&Outputs)로 구성되어 어느 정도의 지식만 있으면 활용이 가능
  - (상세한 절차 Procedures) 목표 설정에서부터 데이터 수집, 분석, 결과 해석, 보고서 작성에 이르기까지의 전 과정을 포함
  - (방법 Methods) 데이터 수집에서 특정 샘플링 기법을 사용, 분석 과정에서 통계 모델이나 알고리즘을 적용 방안 등
  - (도구와 기법 Tools & Techniques) 데이터 분석에 필요한 소프트웨어 도구, 프로그래밍 언어 (R, Python 등), 기술적 기법 등을 포함
  - (템플릿과 산출물 Templates & Outputs) 분석 과정에서 생성되는 문서나 보고서의 포맷을 표준화 제공

② 데이터 기반 의사결정의 필요성
- 경험과 감에 따른 의사결정 > 데이터 기반의 의사결정
- 합리적 의사결정을 가로막는 장애요소
  - 고정관념
  - 편향된 생
  - 프레이밍 효과(문제의 표현 방식에 따라 동일한 사건이나 상황임에도 불구하고 개인의 판단이나 선택이 달라지는 현상) 등

③ 방법론의 생성과정
- 암묵지: 학습과 경험을 통해 개인에게 내재되어 있지만 겉으로 드러나지 않는 지식
  - 예제) 김치담그기, 자전거 타기
- 형식지: 문서나 매뉴얼처럼 형상화된 지식
  - 예제) 교과서, 비디오, DB
  - 즉 지식 생성의 사이클을 구성하여 방법론이 단순한 지침서에 그치지 않고, 실제 작업 환경에서 유용하고 효과적인 도구 활용

④ 방법론의 적용 업무의 특성에 따른 모델
- (ⅰ) 폭포수 모델(Waterfall Model)
  - 단계를 순차적으로 진행하는 방법이다.
- (ⅱ) 프로토타입 모델(Prototype Model)
  - 폭포수 모델을 보완한 모델로서 점진적으로 시스템을 개발해 나가는 접근 방식이다.
  - 고객의 요구를 완전하게 이해하고 있지 못하거나 완벽한 요구 분석의 어려움을 해결하기 위해 일부분을 우선 개발하여 사용자에게 제공.
- (ⅲ) 나선형 모델(Spiral Model)
  - 반복을 통해 점증적으로 개발하는 방법으로, 처음 시도하는 프로젝트에 적용이 용이하지만 관리체계를 효과적으로 갖추지 못한 경우 복잡도가 상승하여 프로젝트 진행이 어려울 수 있다.

⑤ 방법론의 구성

구분	설명
단계	최상위 계층으로서 프로세스 그룹을 통하여 완성된 단계별 산출물이 생성
태스크	단계를 구성하는 단위 활동으로서 물리적 또는 논리적 단위로 품질검토의 항목
스텝	입력자료(input), 처리 및 도구, 출력자료(output)로 구성된 단위 프로세스

[15회 기출]

다음 분석 방법론 중 순차적으로 진행되면서 이전 단계가 완료된 후 다음 단계로 진행하는 하향식(Top Down)으로 진행되는 특징을 가지고 있는 모델은?
①프로토타입(Prototype) 모델
②폭포수(Waterfall) 모델
③나선형(Spiral) 모델
④애자일(Agile) 모델

[18회 기출]

분석 기획 고려사항 중 장애요소에 대한 설명으로 부적절한 것은?
① 비용대비 효과의 적정한 비용
② 분석 모형의 안정적 성능 확보
③ 이해도 높은 모형보다는 복잡하고 정교한 모형
④ 조직 역량으로 내재화를 위한 변화 관리

03강Ⅱ-1-2 분석 방법론2

(2) KDD 분석 방법론

① 개요
- 기업들은 매월/매년마다 주기적으로 분석하며 이때 새롭게 분석 기획을 하는 것이 비효율적임
- 따라서 분석 작업의 효율성을 높이고 일관성을 유지하는 체계화된 분석 방법론의 도입이 필요함
- KDD(Knowledge Discovery in Database)는 1996년 프로파일링 기술을 기반으로 데이터로부터 통계적 패턴이나 지식을 찾기 위해 체계적으로 정리한 데이터 마이닝 프로세스이다.

② 분석절차

데이터셋 선택	→	데이터 전처리/준비	→	데이터 변환	→	데이터마이닝	→	결과 평가
데이터베이스 또는 원시 데이터에서 분석에 필요한 데이터 선택하는 단계 목표데이터를 구성하여 분석에 활용		데이터 셋에 포함되어 있는 잡음, 이상치, 결측치를 식별 필요시 제거하여 의미있는 데이터로 재처리하여 데이터 셋을 정제하는 단계이다.		데이터의 원본을 축소하여 효율적으로 데이터마이닝을 할 수 있도록 데이터 변경 데이터마이닝 프로세스를 진행하기 위해 학습용 데이터 (training data)와 검증용 데이터 (test data)를 분리		데이터마이닝 기법을 선택하고 적절한 알고리즘을 적용하여 데이터 마이닝 작업을 실행하는 단계이다. 데이터 전처리와 변환 프로세스를 추가로 실행하여 최적의 결과를 산출		데이터마이닝 결과에 대한 해석과 평가 분석 목적과의 일치성

(2) KDD 분석 방법론

<참조> KDD, 데이터 마이닝
- 데이터 마이닝(data mining)은 대규모로 저장된 데이터 안에서 체계적이고 자동적으로 통계적 규칙이나 패턴을 찾아 내는 것이다.
- 다른 말로는 KDD(데이터베이스 속의 지식 발견, knowledge-discovery in databases)라고도 일컫는다.
- (1) 개요
  - 데이터 마이닝은 통계학에서 패턴 인식에 이르는 다양한 계량 기법을 사용한다. 데이터 마이닝 기법은 통계학쪽에서 발전한 탐색적자료분석, 가설 검정, 다변량 분석, 시계열 분석, 일반선형모형 등의 방법론과 데이터베이스 쪽에서 발전한 OLAP (온라인 분석 처리:On-Line Analytic Processing), 인공지능 진영에서 발전한 SOM, 신경망, 전문가 시스템 등의 기술적인 방법론이 쓰인다.
  - 데이터 마이닝의 응용 분야로 신용평점 시스템(Credit Scoring System)의 신용평가모형 개발, 사기탐지시스템(Fraud Detection System), 장바구니 분석(Market Basket Analysis), 최적 포트폴리오 구축과 같이 다양한산업 분야에서 광범위하게 사용되고 있다.
    단점으로는, 자료에 의존하여 현상을 해석하고 개선하려고 하기 때문에 자료가 현실을 충분히 반영하지 못한 상태에서 정보를 추출한 모형을 개발할 경우 잘못된 모형을 구축하는 오류를 범할 수가 있다.
- (2) 적용 분야
  - 데이터마이닝은 데이터 분석을 통해 아래와 같은 분야에 적용하여 결과를 도출할 수 있다.
  - 분류(Classification): 일정한 집단에 대한 특정 정의를 통해 분류 및 구분을 추론한다 (예: 경쟁자에게로 이탈한 고객)
  - 군집화(Clustering): 구체적인 특성을 공유하는 군집을 찾는다. 군집화는 미리 정의된 특성에 대한 정보를 가지지 않는다는 점에서 분류와 다르다 (예 : 유사 행동 집단의 구분)
  - 연관성(Association): 동시에 발생한 사건간의 관계를 정의한다. (예: 장바구니안의 동시에 들어 가는 상품들의 관계 규명)
  - 연속성(Sequencing): 특정 기간에 걸쳐 발생하는 관계를 규명한다. 기간의 특성을 제외하면 연관성 분석과 유사하다 (예: 슈퍼마켓과 금융상품 사용에 대한 반복 방문)
  - 예측(Forecasting): 대용량 데이터집합 내의 패턴을 기반으로 미래를 예측한다 (예: 수요예측)

연습문제1

대규모로 저장된 데이터 안에서 체계적이고 자동적으로 통계적 규칙이나 패턴을 찾아 내는 것을 일컫는 말은?
①데이터 마이닝
②기계학습
③지도학습
④준지도학습

연습문제2

데이터마이닝은 데이터 분석을 통해 일정한 집단에 대한 특정 정의를 통해 분류 및 구분을 추론하는 결과를 도출할 수 있다. 무엇에 관한 설명인가?
①분류(Classification)
②군집화(Clustering)
③연관성(Association)
④연속성(Sequencing)

04강Ⅱ-1-2 분석 방법론3

(3) CRISP-DM 분석 방법론

① 개요
- CRISP-DM(Cross Industry Standard Process for Data Mining)은 데이터 마이닝에 사용되는 일반적인 접근 방식 설명하는 열린 표준 과정 모델이다. 가장 널리 사용되는 분석 모델이다.
- CRISP-DM은 1996년 유럽연합의 ESPRIT에서 있었던 프로젝트에서 시작되었으며, 계층적 프로세스 모델로서 4개의 레벨로 구성된다.

② CRISP-DM 4레벨 구조

단계 (Phases)	최상위 레벨은 여러 개의 단계(Phases)로 구성
일반 과제 (Generic Tasks)	데이터마이닝의 단일 프로세스를 완전하게 수행하는 단위
세부 과제 (Specialized Tasks)	일반 과제를 다시 구체적인 수행 레벨은 세분화 태스크로 구성
프로세스 실행 (Process Instances)	데이터마이닝을 위한 구체적인 실행을 포함

③ 분석절차
- 6단계 반복 수행

단계	업무 이해	데이터 이해	데이터 준비	모델링	평가	전개
내용	도메인 지식을 데이터 분석을 위한 문제정의를 변경하고 초기 프로젝트 계획을 수립하는 단계	분석을 위한 데이터를 수집하고 속성을 이해하기 위한 단계	분석을 위하여 수집된 데이터에서 분석기법에 적합한 데이터를 편성하는 단계	모델링 기법과 알고리즘을 선택하고 모델링 과정에서 사용되는 파라미터를 최적화해 나가는 단계	프로젝트 목적에 부합하는지 평가하는 단계로 데이터마이닝 결과를 최종적으로 수용할것인지 판단	모델링과 평가 단계를 통하여 완성된 모델을 실 업무에 적용하기 위한 계획을 수립하는 단계
수행 업무	업무목적파악, 데이터마이닝 목표 설정, 프로젝트 계획수립	초기 데이터 수집, 데이터 기술분석, 탐색, 풀질확인	분석용 데이터셋선택, 데이터 정제	모델링 기법선택, 모델 테스트 계획 설계, 모델작성, 모델평가	분석결과평가, 모델링과정평가, 적용성 평가	전개 계획 수립, 모니터링과유지보수 계획 수립

연습문제1

다음 중 CRISP-DM 방법론의 모델링 단계에서 수행하는 테스크(task)로 적절하지 않은 것은 무엇인가?
①모델 테스트 계획 설계
②모델 평가
③모델링 기법 선택
④모델 적용성 평가

연습문제2

CRISP-DM 4레벨 구조중 데이터마이닝의 단일 프로세스를 완전하게 수행하는 단위에 해당하는 것은?
①단계
②일반 과제
③세부 과제
④프로세스 실행

05강Ⅱ-1-2 분석 방법론4

(4) 빅데이터 분석 방법론

① 3단계 프로세스

구분	설명
단계	프로세스 그룹을 통하여 완성된 단계별 산출물이 생성된다. 각 단계는 기준선으로 설정되어 관리되어야 하며, 버전관리 등을 통하여 통제가 이루어져야 한다.
과제 (태스크)	단계를 구성하는 단위 활동으로서 물리적 또는 논리적 단위로 품질검토의 항목
스텝	입력자료(input), 처리 및 도구, 출력자료(output)로 구성된 단위 프로세스

② 분석 방법론

분석기획 (Planning)	→	데이터준비 (Preparing)	→	데이터분석 (Analyzing)	→	시스템구현 (Developing)	→	평가 및 전개 (Deploying)
∙비즈니스 이해 및 범위 설정 ∙프로젝트 정의 및 계획 수립 ∙프로젝트 위험 계획 수립	→	∙필요데이터 정의 ∙데이터 스토어 설계 ∙데이터 수집 및 적합성 점검	→	∙분석용 데이터 준비 ∙텍스트 분석 ∙탐색적 분석 ∙모델링 ∙모델 평가 및 검증 ∙모델 적용 및 운영방안 수립	→	∙설계 및 구현 ∙시스템테스트 및 운영	→	∙모델 발전 계획 수립 ∙프로젝트 평가 및 보고

(4) 빅데이터 분석 방법론

③ 분석기법
- 상기 특징을 가진 빅데이터의 분석, 활용을 위한 빅데이터 처리 기법은 크게 분석 기술, 표현 기술로 나뉜다.
- 분석 기술
  - 빅데이터를 다루는 처리 프로세스로서 병렬 처리의 핵심은 분할 점령(Divide and Conquer)이다. 즉 데이터를 독립된 형태로 나누고 이를 병렬적으로 처리하는 것을 말한다.
  - 빅데이터의 데이터 처리란 이렇게 문제를 여러 개의 작은 연산으로 나누고 이를 취합하여 하나의 결과로 만드는 것을 뜻한다. 대용량의 데이터를 처리하는 기술 중 가장 널리 알려진 것은 아파치 하둡과 같은 Map-Reduce 방식의 분산 데이터 처리 프레임워크이다.
  - 대부분의 빅 데이터 분석 기술과 방법들은 기존 통계학과 전산학에서 사용되던 데이터마이닝, 기계 학습, 자연 언어 처리, 패턴 인식 등이 해당한다. 소셜 미디어등 비정형 데이터의 증가로 인해 분석기법 중에서 텍스트 마이닝, 오피니언 마이닝, 소셜네트워크 분석, 군집분석 등이 주목받고 있다.
  - 아파치 하둡(Apache Hadoop) : 대량의 자료를 처리할 수 있는 큰 컴퓨터 클러스터에서 동작하는 분산 응용 프로그램을 지원하는 프리웨어 자바 소프트웨어 프레임워크
  - 텍스트 마이닝: 비/반정형 텍스트 데이터에서 자연 언어 처리 기술에 기반을 두어 유용한 정보를 추출, 가공
  - 오피니언 마이닝: 소셜미디어 등의 정형/비정형 텍스트의 긍정, 부정, 중립의 선호도를 판별
  - 소셜 네트워크 분석: 소셜 네트워크의 연결 구조 및 강도 등을 바탕으로 사용자의 명성 및 영향력을 측정
  - 군집 분석: 비슷한 특성을 가진 개체를 합쳐가면서 최종적으로 유사 특성의 군집을 발굴
  - 대규모의 정형/비정형 데이터를 처리하는 데 있어 가장 기본적인 분석 인프라로 하둡이 있으며 데이터를 유연하고 더욱 빠르게 처리하기 위해 NoSQL 기술이 활용되기도 한다.
- 표현 기술
  - 빅데이터 분석 기술을 통해 분석된 데이터의 의미와 가치를 시각적으로 표현하기 위한 기술로 대표적인 것으로는 R (프로그래밍 언어), 파이선 등이 있다.

연습문제1

빅데이터 분석 방법론의 분석기획 단계 순서가 바르게 연결된 것은?
①프로젝트 범위설정-데이터분석 프로젝트정의-프로젝트 수행계획 수립-데이터분석 위험식별
②프로젝트 범위설정-데이터분석 프로젝트정의-데이터분석 위험식별-프로젝트 수행계획 수립
③데이터분석 위험식별-프로젝트 범위설정-프로젝트 수행계획 수립-데이터분석 프로젝트정의
④데이터분석 위험식별-프로젝트 범위설정-데이터분석 프로젝트정의-프로젝트 수행계획 수립

연습문제2

소셜 미디어등 비정형 데이터의 증가로 인해 다양한 빅데이터 분석방법이 주목받고 있다. 이 부합하는 분석방법이 아닌 것은?
① 지도학습
② 오피니언 마이닝
③ 소셜네트워크 분석
④ 군집분석

06강Ⅱ-1-3 분석 과제 발굴

(1) 분석 과제 발굴 방법론

① 분석 과제 발굴 방법론이란?
- 분석 과제는 하향식 접근 방법이나 상향식 접근 방법을 이용하여 풀어야 할 다양한 문제를 해결함
- 이를 데이터 분석 문제로 전환하여 관계자들이 이해하고 프로젝트로 수행할 수 있는 형태로 도출하는 이론
- (하향식 접근 방법) 분석대상을 알고 있음
- (상향식 접근 방법) 분석대상을 모르고 있음

② 하향식 접근법(Top Down Approach)
- (비즈니스 모델기반 문제탐색) 기업의 기존 비즈니스 모델을 깊이 분석하면서 문제의 원인을 찾아 해결
- (외부사례 기반 문제탐색) 다른 기업이나 산업의 성공 사례를 분석하여 자신의 비즈니스 문제를 해결

1.문제 탐색 (Problems Discovery)	2.문제 정의 (Problems Definition)	3.해결방안탐색 (Solution Search)	4.타당성검토 (Feasibility study)
•비즈니스 모델기반 문제탐색 •외부사례 기반 문제탐색(=벤치마킹)	데이터 분석 문제 변환	수행 옵션 도출	•타당성 평가 •과제 선정

(ⅰ) 문제 탐색(Problem Discovery)
- 전체적인 관점에서 빠짐없이 문제를 도출하고 식별하는 것이 중요하고,
- 과제 발굴 단계에서는 세부적인 구현 및 솔루션에 초점을 맞추는게 아니라, 문제를 해결함으로써 발생하는 가치에 중점을 두는 것이 중요하다.
- 비즈니스 모델 기반 문제 탐색
  - 기업 내부, 외부 환경을 포괄하고 있는 비즈니스 모델이라는 틀을 활용하여 문제 탐색

각 과제 발굴방법과 예시는 다음과 같습니다.

과제 발굴 방법	업무 (operation)	제품 (product)	고객 (customer)	규제와 감사	지원 인프라
내용	제품 및 서비스를 생산하기 위해서 운영하는 내부프로세스 및 주요 자원 관련 주제 도출	생산 및 제공하는 제품, 서비스를 개선하기 위한 관련 주제 도출	제품, 서비스를 제공하는 사용자 및 고객, 이를 제공하는 채널의 관점에서 관련 주제 도출	제품 생산 및 전달 과정 프로세스 중 발생하는 규제 및 보안의 관점에서 주제 도출	분석을 수행하는 시스템 영역 및 이를 운영 관리하는 인력의 관점에서 주제 도출
예	생산 공정 최적화	제품의 주요기능 개선	영업점 위치 최적화	제공 서비스 품질의 이상 징후 관리	적정 운영 인력 도출

외부사례 모델 기반 문제 탐색
- 유사, 동종 사례 벤치마킹을 통한 분석 기회 발굴은 제공되는 산업별, 업무 서비스별 분석 테마 후보 그룹을 통해 필요한 분석 기회가 무엇인지에 대한 아이디어를 얻고, 기업에 적용할 분석 테마 후보 목록을 워크숍 형태의 브레인스토밍(Brain storming)을 통해 빠르게 도출하는 방법이다.

(ⅱ) 문제 정의(Problem Definition)
- 식별된 비즈니스 문제를 데이터 분석 문제로 변환하여 정의하는 단계이다.
- 다음과 같은 예시를 생각해볼 수 있다.

비즈니스 문제	→	데이터 분석문제
			구매자 감소	구매자 감소에 미치는 요인을 찾고, 구매자 수 예측

(ⅲ) 해결방안탐색(Solution Search)
- 정의된 데이터 분석 문제를 해결하기 위한 다양한 방안이 탐색
- 기존 정보 시스템의 단순한 보완으로 분석이 가능한지 고려
- 교육 및 채용을 통하여 역량확보
- 전문업체를 통하여 과제해결

(ⅳ) 타당성 검토(Feasibility study)
- 도출된 분석 문제나 가설에 대한 대안을 과제화하기 위해서는 다각적인 타당성 분석 수행

타당성	내용
경제적 타당성	비용대비 편익 분석관점 접근 비용:데이터, 시스템, 인력, 유지보수 편익:실질적 비용절감, 추가적 매출, 수익
데이터 타당성	데이터의 존재여부, 분석 시스템 환경
기술적 타당성	역량 확보 방안을 사전에 수립하고 효과적으로 평가

연습문제1

비즈니스 모델 캔버스의 채널에 대한 기능으로 가장 부적절한 것은?
① 해당고객에게 접근하는 유통 채널을 공급한다.
② 고객에게 밸류 프로포지션을 전달한다.
③ 구매 고객에 대한 에프터서비스(A/S)를 제공한다.
④ 기업이 제공하는 상품이나 서비스에 대한 고객의 이해를 높여준다.

연습문제2

비즈니스 모델 캔버스는 문제 탐색단계에서 사용하는 도구이다. 이를 구성하는 단위로 적절한 것은?
① 영업-고객-제도-업무-IT인프라
② 업무-제품-고객-규제와 감사-지원인프라
③ 프로세스-제품-고객-영업-IT인프라
④ 비용-수입-고객-상품-감사

07강Ⅱ-1-3 분석 과제 발굴2

(1) 분석 과제 발굴 방법론

② 상향식 접근법(Bottom Down Approach)

(ⅰ) 개요
- 다양한 원천 데이터를 대상으로 분석을 수행하여 모든 문제를 도출하는 일련의 과정이다.
- 전통적인 하향식 방식에 대비하여 기업에서 보유하고 있는 다양한 데이터로부터의 분석을 통하여 통찰력과 지식을 얻는 방식이다.

(ⅱ) 하향식 VS 상향식
- 기존 하향식 접근법은 문제의 구조가 분명하고 문제를 해결하고 해결책을 도출하기 위한 데이터 분석가 및 의사 결정자에게 주어져 있는 경우에 유용
- 최근 복잡하고 다양한 환경에서 발생하는 문제의 경우 하향식 접근법의 한계성
- 해결책으로 디자인사고(Design thinking) 접근법 고려

<참조> 디자인 사고(Design thinking)

경영에 대한 두 관점
분석적 사고 (Analytical thinking)		직관적 사고 (intuitive thinking)
영역적, 귀납적 추리로 무장한 엄밀한 분석과정을 통한 사고		분석에 기반을 두지 않고 순간적인 영감과 창조적인 직감을 중시하는 사고
↓		↓
이미 시도되고 검증된 것을 철저하게 고집	대안	사업체계화 역량 부족으로 성장과 지속의 문제에 봉착
↳	디자인 사고 (Design thinking)	↲
	분석적 사고에 기반을 둔 완벽한 숙련과 직관적 사고에 근거한 창조성이 역동적으로 상호작용하면서 균형유지

(1) 디자인 사고의 요소

①공감(Empathy): 관찰, 인터뷰, 감정이입을 통해서 사용자의 입장에서 공감하고 영감을 얻는 것이 중요하고, 나의 생각을 검증하는 것이 아니라 상대의 경험을 있는 그대로 받아들이는 것이 중요하다.
②정의(Define): 새로운 컨셉을 디자인하는 것으로 현장 관촬을 통해 얻은 영감을 바탕으로 실제(real), 유용성(valuable), 고무(inspiring) 관점에 입각한 문제 정의
③상상(IDEATE): 문제 해결을 위한 대안을 생각하는 것으로 사용자를 위한 해결책을 탐색하기 위해 아이디어 구성
④프로토타입(PROTOTYPE): 가장 좋은 아이디어로 시험 제품을 제작하는 단계로서 시간 내에 머릿속에 있는 추상적인 아이디어를 구체적으로, 시각적으로 표현
⑤테스트(TEST): 사용자에게 프로토타입을 사용할 기회를 제공하여 해결책을 정제하고 발전시킬 수 있는 기회를 만듬

연습문제1

데이터 분석에서는 하향식 접근 방식과 상향식 접근 방식으로 분석과제를 발굴하게 되는데, 다음 중 하향식 접근 방식의 단계에서 타당성 평가에 대한 설명으로 가장 부적절한 것은?
①도출된 분석 문제에 대한 대안을 과제화하기 위해서는 다각적 타당성 검토가 필요하다.
②경제적 타당성은 비용대비 효익의 관점에서 평가한다.
③데이터 타당성 확보를 위하여 문제발생 포인트에 대한 데이터 확보가 중요하다.
④기술적 타당성 분석 시 적용 가능한 요소기술 확보 방안에 대한 사전 고려가 필요하다.

연습문제2

디자인 사고 요소 중 관찰, 인터뷰, 감정이입을 통해서 사용자의 입장에서 공감하고 영감을 얻는 것이 중요하고, 나의 생각을 검증하는 것이 아니라 상대의 경험을 있는 그대로 받아들이는 것이 중요한 요소는 무엇인가?
①공감
②책임
③상상
④프로토타입

08강Ⅱ-1-3 분석 과제 발굴3

(ⅲ) 비지도 학습과 지도 학습

지도학습(Supervised Learning)
- 훈련 데이터(Training Data)로부터 하나의 함수를 유추해내기 위한 기계 학습(Machine Learning)의 한 방법이다.
- 훈련 데이터는 일반적으로 입력 객체에 대한 속성을 벡터 형태로 포함하고 있으며 각각의 벡터에 대해 원하는 결과가 무엇인지 표시되어 있다.
- 이렇게 유추된 함수 중 연속적인 값을 출력하는 것을 회귀분석(Regression)이라 하고 주어진 입력 벡터가 어떤 종류의 값인지 표식하는 것을 분류(Classification)라 한다.
- 이 목표를 달성하기 위해서는 학습기가 "알맞은" 방법을 통하여 기존의 훈련 데이터로부터 나타나지 않던 상황까지도 일반화하여 처리할 수 있어야 한다. 사람과 동물에 대응하는 심리학으로는 개념 학습(Concept Learning)을 예로 들 수 있다.

<참조> 회귀분석

(1) 회귀분석이란?
- 통계학에서, 회귀 분석(regression analysis)은 관찰된 연속형 변수들에 대해 두 변수 사이의 모형을 구한뒤 적합도를 측정해 내는 분석 방법이다.
- 회귀분석은 시간에 따라 변화하는 데이터나 어떤 영향, 가설적 실험, 인과 관계의 모델링등의 통계적 예측에 이용될 수 있다.

(2) 회귀 분석의 표준 가정
- 회귀분석은 다음의 가정을 바탕으로 한다.
  - 1. 오차항은 모든 독립변수 값에 대하여 동일한 분산을 갖는다. (선형성)
  - 2. 오차항의 평균(기대값)은 0이다. (정규성)
  - 3. 수집된 데이터의 확률 분포는 정규분포를 이루고 있다.
  - 4. 독립변수 상호간에는 상관관계가 없어야 한다. (독립성)
  - 5. 시간에 따라 수집한 데이터들은 잡음의 영향을 받지 않아야 한다.
  - 독립변수들 간에 상관관계가 나타나는 경우 다중공선성 문제라고 한다.
(3) 회귀 모형 적합도
- 회귀모형의 적합도는 잔차 검정을 통해 확인한다.
- 잔차 검정은 정규성과 등분산성 가정을 만족하는지에 대한 검토 과정이다.

비지도 학습(Unsupervised Learning)
- 지도 학습과는 달리 정답을 알려주지 않고 비슷한 데이터를 군집화하여 미래를 예측하는 학습 방법이다. 라벨링이 되어 있지 않은 데이터로부터 패턴이나 형태를 찾기 쉽지 않다.
- 실제로 지도 학습에서 적절한 특징(Feature)을 찾아내기 위한 전처리 방법으로 비지도 학습을 사용하기도 한다.
- 비지도 학습은 대표적으로 군집화(Clustering)가 있다.
- 일반적으로 상향식 접근방식의 데이터 분석은 비지도 학습방법에 의해 수행된다.

<참조> 클러스터 분석

주어진 데이터들의 특성을 고려해 데이터 집단(클러스터)을 정의하고 데이터 집단의 대표할 수 있는 대표점을 찾음
클러스터 분석을 통해 수백만의 데이터를 직접 확인하지 않고 각각 클러스터의 대푯값만 확인해 전체 데이터의 특성을 파악할 수 있다.

연습문제1

훈련 데이터(Training Data)로부터 하나의 함수를 유추해내기 위한 기계 학습(Machine Learning)의 한 방법에 해당하는 것은?
①지도학습
②비지도 학습
③심화 학습
④강화 학습

연습문제2

주어진 데이터들의 특성을 고려해 데이터 집단을 정의하고 데이터 집단의 대표할 수 있는 대표점을 찾는 것으로 데이터 마이닝의 한 방법을 뜻하는 것은?
①ANOVA
②클러스터 분석
③다중 회귀 분석
④선형 회귀 분석

09강Ⅱ-1-3 분석 과제 발굴4

(ⅳ) 프로토타이핑 접근법

프로토타입이란?
- 프로토타입(prototype)은 원래의 형태 또는 전형적인 예, 기초 또는 표준이다. 시제품이 나오기 전의 제품의 원형으로 개발검증과 양산 검증을 거쳐야 시제품이 될 수 있다.
- 프로토타입은 '정보시스템의 미완성 버전 또는 중요한 기능들이 포함되어 있는 시스템의 초기모델’이다.
- 이 프로토타입은 사용자의 모든 요구사항이 정확하게 반영할 때까지 계속해서 개선/보완 된다. 실제로 많은 애플리케이션들이 지속적인 프로토타입의 확장과 보강을 통해 최종 설계가 승인된다.
프로토타이핑 접근법이란?
- 사용자가 요구사항이나 데이터를 정확히 규정하기 어렵고 데이터 소스도 명확히 파악하기 어려운 상황에서 일단 분석을 시도해 보고 그 결과를 확인해 가면서 반복적으로 개선해 나가는 방법이다.
- 프로토타이핑은 시스템의 초기모델을 세우고 다듬고, 다시 세우고 다듬고 하는 반복적인 과정을 통해서 이루어진다.
- 그러나 프로토타이핑은 무계획적인 반복과정을 지양하고 계획된 반복과정을 통해서 한 과정이 끝날 때마다 사용자의 요구를 좀더 정확하게 반영한 버전이 나오게 된다.

하향식 접근법 VS 프로토타이핑
- 하향식 접근법은 문제가 정형화되어 있고 문제 해결을 위한 데이터가 완벽하게 조작에 존재할 경우에 효과적임
- 반면에 프로토타이핑 접근법은 비록 완전하지 못하다 해도 신속하게 해결책이나 모형을 제시함으로써 이를 바탕으로 문제를 좀 더 명확하게 인식하고 필요한 데이터를 식별하여 구체화할 수 있게 하는 유용한 상향식 접근방법

프로토타이핑 단계
- 프로토타이핑의 과정은 4단계로 구분된다.
- [프로토타이핑 1단계]
  - 기본적인 사용자 요구사항을 분석한다. 시스템 설계자는 기본적인 요구사항이 도출되기까지 사용자와 함께 작업한다.
- [프로토타이핑 2단계]
  - 시스템 설계자가 위에 단계에서 도출된 요구사항을 만족시키는 프로토타입을 4세대 언어(4GL : Forth-Generation Language)로 알려진 프로그래밍 언어 또는 CASE 도구를 이용하여 개발한다.
  - 이때 프로토타입은 앞으로 개발될 시스템의 가장 핵심적인 기능 위주로 개발된다.
- [프로토타이핑 3단계]
  - 사용자가 개발된 프로토타입을 실제 사용함으로써 요구사항이 이행되고 있는지를 확인하며 프로토타입의 보완을 위한 여러 가지 제안을 하게 된다.
- [프로토타이핑 4단계]
  - 프로토타입의 수정과 보완이 이루어진다. 시스템 설계자는 사용자가 요구한 모든 제안사항과 이에 따르는 보완작업을 하게 된다. 프로토타입이 수정된 후에는 3단계로 돌아간다.
  - 사용자가 만족할 때까지 3단계와 4단계는 계속 반복된다.

프로토타이핑의 장단점
- 장점
  - 프로토타이핑은 사용자 중심의 개발 방법이다. 프로토타이핑의 중요한 목적 중의 하나가 바로 최종사용자의 요구를 극대화하는 것이다.
  - 개발시간을 줄일 수 있다. 전통적인 방법으로는 운영 가능한 시스템이 나오기까지 오랜 시간이 걸리지만 프로토타이핑은 비교적 빠른 기간 안에 사용자가 평가할 수 있을 만한 결과를 만들어낸다.
  - 오류를 초기에 발견할 수 있다. 전통적인 방법으로는 시스템이 완성된 후에야 오류를 발견할 수 있다. 따라서 시스템 개발기간이 3년이라면 오류를 발견하기까지 적어도 3년의 시간이 소요될 수 있다. 그러나 프로토타이핑은 개발 초기단계에서 오류를 판별 할 수 있도록 해준다.
  - 변경이 용이하다. 사용자나 관리자는 현재까지의 개발 진행된 프로토타입을 직접 운영함으로써 여러 가지 제안과 변경할 점을 파악할 수 있고, 이러한 사항들은 진행되고 있는 개발과정에 반영하게 된다.
- 단점
  - 시스템의 유지보수에 필수적인 시스템의 문서화 과정이 지나치게 축소되거나 생략될 수 있다. 단기적으로 볼 때는 이런 문서들이 별로 도움이 되지 않을 수 있다. 그러나 시간이 흐름에 따라 시스템의 수정과 보수가 필요하게 될 때, 시스템에 관련된 문서가 없다면 유지보수에 불필요한 노력이 따른다.
  - 최종적으로 시간과 비용이 훨씬 많이 들 수 있다. 프로토타이핑은 언제든지 변경이 용이하지만 이러한 시스템의 변경이 계속 될수록 시간과 비용은 많아지게 된다.
  - 프로토타이핑으로 완성된 시스템은 컴퓨터 자원의 활용 측면에서 볼 때 효율적이지 못하다. 이 개발방법은 자원의 효율성보다는 사용자 요구에 의해 개발되기 때문에 저장장치, 파일시스템, 중앙처리장치 등 하드웨어나 주변기기의 효율성이 무시되기 쉽다. 그러나 최근 컴퓨터 관련 기기들의 성능은 좋아지는 반면 가격은 하락하면서 이 문제의 비중은 크게 감소되고 있다.

빅데이터 분석 환경에서 프로토타이핑의 필요성
- 문제에 대한 인식 수준
  - 문제 정의가 불명확하거나 새로운 문제일 경우에 사용자 및 이해 관계자는 프로토타입을 이용하여 문제를 이해하고, 이를 바탕으로 구체화하는데 도움을 받을 수 있다.
- 필요 데이터 존재 여부의 불확실성
  - 문제 해결을 위해 필요한 데이터의 집합이 모두 존재하지 않을 경우, 그 데이터의 수집을 어떻게 할 것인지 또는 그 데이터를 다른 데이터로 대체할 것인지 등에 대한 사용자와 분석자간의 반복적이고 순환적인 협의 과정이 필요.
- 데이터 사용 목적의 가변성
  - 데이터의 가치는 사전에 정해진 수집목적에 따라 확정되는 것이 아니고, 그 가치가 지속적으로 변화할 수 있다. 따라서 조직에서 보유중인 데이터라 하더라도 기존의 데이터 정의를 재검토하여 데이터 사용 목적과 범위를 확대할 수 있을 것이다.

④분석 과제 정의
- 분석 과제 정의서를 통해 분석 별로 필요한 소스데이터, 분석 방법, 데이터 입수 및 분석의 난이도, 분석 수행주기, 분석 결과에 대한 검증, 상세 분석 과정 등을 정의한다.

연습문제

프로토타이핑 단계 중 기본적인 사용자 요구사항을 분석하고 시스템 설계자는 기본적인 요구사항이 도출되기까지 사용자와 함께 작업하는 단계는?
①1단계
②2단계
③3단계
④4단계

10강Ⅱ-1-4 프로젝트 관리방안

(1) 주요영역

영역	내용
데이터 복잡도 (Data complexity)	비정형 데이터의 통합 분석과 모델 선정 필요
데이터 크기 (Data Size)	분석하고자 하는 데이터의 양
속도 (Speed)	작업 종류에 따른 모델 분석 속도와 활용 시나리오 (분석이 적용됐을 시의) 속도 고려
정확도/정밀도 (Accuracy& Precision)	Accuracy 정확도와 Precision 정밀도는 Trade Off 관계에 있기 때문에 모델 해석 및 적용에 유의
분석 복잡도 (Analytic complexity)	정확도와 모델 복잡성 사이의 기준을 정해 모델 해석 용이한 최적점 도출

(2) 분석 프로젝트의 특성과 관리방안

① 분석 프로젝트의 특성
- 분석 프로젝트는 도출된 결과의 재해석을 통한 지속적인 반복 및 정교화가 수행되는 경우가 대부분이므로 프로토타이핑 방식의 섬세한 프로젝트 관리방식에 대한 고려가 필요하다.
- 데이터 분석의 지속적인 반복 및 개선을 통하여 의도했던 결과에 더욱 가까워지는 형태로 프로젝트가 진행될 수 있도록 적절한 관리 방안 수립이 사전에 필요하다.
- 또한 분석 프로젝트는 데이터 영역과 비즈니스 영역에 대한 이해뿐만 아니라 지속적인 반복이 요구되는 분석 프로세스의 특성을 이해한 프로젝트 관리방안을 수립하는 것이 중요하다.
- 분석 과제정의서를 기반으로 프로젝트를 시작하되 지속적인 개선 및 변경을 염두해 두고 기간내에 가능한 최선의 결과를 도출할 수 있도록 프로젝트 구성원들과 협업하는 것이 분석 프로젝트의 특징

② 관리 방안

주제 그룹	개념 및 관련 프로세스
범위 Scope	데이터의 형태와 양 또는 적용되는 모델에 따라 알고리즘 범위 변동 가능
시간 Time	프로젝트 일정 관리
원가 Cost	데이터 분석 비용
품질 Quality	품질관리 (QC), 품질보증 (QA)에서 프로젝트 수행
통합 Integration	프로젝트 통합 운영관리
조달Procurement	외부 소싱 운영 (인프라 구매 또는 클라우드)
자원 Resource	인력 공급, 아키텍처, 전문가 확보
리스크 Risk	위험 식별 및 대응, 목표달성 미달 대응
의사소통 Communication	원활한 프로젝트 진행을 위한 의사소통 체계 구축
이해관계자 Stakeholdere	데이터, 비즈니스, 분석, 시스템 등의 전문가의 이해관계 식별 관리 중요

연습문제1

프로젝트 관리방안의 주요영역 중 텍스트, 오디오, 비디오 등의 비정형 데이터 및 다양한 시스템에 산재되어 있는 원천 데이터를 통합해서 분석 프로젝트를 진행할때는 초기 데이터의 확보와 통합 뿐 아니라 해당 데이터에 잘 적용될 수 있는 분석 모델의 선정 등에 대한 사전 고려가 필요한 것은 무엇에 관한 설명인가?
① 데이터 복잡도
② 분석 복잡도
③ 데이터 크기
④ 정확도

연습문제2

분석 프로젝트의 관리방안 중 분석에 필요한 데이터 미확보로 분석 프로젝트 진행이 어려울 수 있으므로 관련 위험을 식별하고 대응방안을 사전에 수립해야 해야하는 것은 무엇에 관한 설명인가?
① 리스크
② 자원
③ 의사소통
④ 이해관계자

11강Ⅱ-2-1 마스터 플랜 수립 프레임 워크

(1) 마스터 플랜 수립

① 마스터 플랜 수립이란?
- 도출된 분석기회와 과제에서 우선순위를 평가하는 기준이 중요하다.
- 우선순위, 적용범위/방식을 고려하여 플랜을 수립한다.

ISP와 같은 일반적인 IT 프로젝트의 과제 우선 순위 평가기준
- 전략적 중요도
  - 전략적 필요성 : 전략적 목표 및 본원적 업무에 직접적인 연관 관계가 밀접한 정도
  - 시급성 : 사용자 요구사항, 업무능률 향상을 위해 시급히 수행되어야 하는지에 대한 정도
- 실행 용이성
  - 투자 용이성 : 기간, 인력, 비용, 투자예산 확보
  - 기술 용이성 : 기술의 안정성, 유지보수 등 고려

용어 정리

투자자본수익률 (Return on investment, ROI): 투자자의 어떤 자원 투자로 인해 얻어진 이익을 말한다. 즉 높은 ROI는 투자비용 대비 좋은 성과 지표임
ISP: 조직의 목표 성공을 위한 전략적 측면과 조직의 목표 달성을 위한 정보화 계획, 절차 및 정보기술 적용 등과 같은 시스템 측면의 모형을 기획하고 설정하는 단계

연습문제1

전사 정보시스템을 기획하는 단계, 조직의 목표 성공을 위한 전략적 측면과 조직의 목표 달성을 위한 정보화 계획, 절차 및 정보기술 적용 등과 같은 시스템 측면의 모형을 기획하고 설정하는 단계를 나타내는 것은?
① ISP (Information Strategy Planning)
② ROI (Return on investment)
③ 비지도 학습(Unsupervised Learning)
④ 프로토타입(Prototype)

연습문제2

우선순위 평가 방법 및 절차 중 기간 및 인력 투입 용이성 정도, 비용 및 투자예산 확보 가능성 정도에 해당하는 내용으로 옳게 선택한 것은?
①실행 용이성 - 전략적 필요성
②전략적 중요도 - 투자 용이성
③실행 용이성 - 투자 용이성
④실행 용이성 - 기술 용이성

12강Ⅱ-2-1 마스터 플랜 수립 프레임 워크2

(1) 마스터 플랜 수립

ROI 관점에서 빅데이터의 핵심 특징

4V	3V 난이도	크기 (Volume)	데이터 규모, 양	→	투자비용 요소
		다양성 (Variety)	데이터 종류, 유형
		속도 (Velocity)	데이터 생성속도, 처리속도
	+
	1V 시급성	가치 (Value)	분석 결과 활용 및 실행을 통한 비즈니스 가치	→	비즈니스 효과

우선순위 평가 기준

우선순위 평가기준	내용	비고
시급성 Investment	전략적 중요도와 목표가치에 부합하는지에 따른 시급성이 가장 중요한 기준이다. 시급성의 판단 기준은 전략적 중요도가 핵심이고 분석과제의 목표가치(KPI)를 함께 고려하여 시급성 여부 판단 데이터 수집/가공/관리 비용, 분석 비용 및 수준	비즈니스 효과
난이도 Return	현 시점에서 과제를 추진하는 것이 비용 측면과 범위 측면에서 바로 적용하기 쉬운 것인지 또는 어려운 것인지에 대한 판단 기준으로서 적합성 여부	투자비용 요소

우선순위 선정
- 포토폴리오 사분면 분석을 통하여 과제 우선순위 선정 (4가지 유형)

③ 이행계획 수립
- 로드맵 수립
  - 분석과제에 대한 포트폴리오 사분면 분석을 통해 과제의 1차적 우선순위를 결정
  - 분석 과제별 적용 범위 및 방식을 고려하여 최종적인 실행 우선순위를 결정한 후 단계적 구현 로드맵수립
  - 추진 과제별 선/후행 관계를 고려하여 단계별 추진 내용을 정렬
- 세부 이행계획 수립
  - 각 단계마다 순차/반복 수행 필요
  - 수집/분석 데이터를 준비 단계를 순차적으로 진행
  - 모델링 단계는 반복적으로 수행하는 혼합형을 많이 적용

연습문제1

<15회기출> 다음 중 분석 마스터플랜의 세부 이행계획 수립시 고려해야 할 데이터 분석체계(분석방법론)에 대한 설명으로 가장 적절한 것은?
① 데이터 분석 체계는 이해도가 높은 폭포수 모델이 가장 적정하다.
② 반복적 정렬 방식은 데이터 수집 및 확보 단계를 반복적으로 수행한다.
③ 프로토타입(Prototype) 모델은 데이터 분석체계로는 적절하지 못한다.
④ 프로젝트의 세부 일정계획도 데이터 분석체계를 고려하여 작성한다.

연습문제2

<16회기출> 다음 중 빅데이터 특징 4V를 고려한 분석 ROI에서 비즈니스 효과에 해당하는 것은?
① Volume
② Variety
③ Velocity
④ Value

13강Ⅱ-2-2 분석 거버넌스 체계 수립

(1) 거버넌스 체계란?

① 거버넌스 체계란?
- 거버넌스는 일반적으로, 그리고 학문적으로 빈번히 사용됨에도 불구하고, 그 다양한 의미로 인해 정의가 쉽지 않다. 이는 다양한 학문 분야에서 서로 다른 맥락으로 사용되고 있기 때문이다.
- 존 피에르(Jon Pierre)와 피터스(B. Guy Peters)는 “정책 결정에 있어 정부 주도의 통제와 관리에서 벗어나 다양한 이해당사자가 주체적인 행위자로 협의와 합의 과정을 통하여 정책을 결정하고 집행해 나가는 사회적 통치 시스템”으로 정의했다.
- 유엔 개발 계획은 “거버넌스란 한 국가의 여러 업무를 관리하기 위하여 정치, 경제 및 행정적 권한을 행사하는 것을 뜻한다. 거버넌스는 또한 시민들과 여러 집단이 자신들의 이해관계를 밝히고 그들의 권리를 행사하며, 자신들의 의무를 다하고, 그들 간의 견해 차이를 조정할 수 있는 복잡한 기구와 과정 등의 제도로서 구성된다.”라고 거버넌스를 정의했다.
- 거버넌스 예시
  - (정책 결정 과정) 정부는 시민, 기업, 비정부 조직(NGO) 등 다양한 이해관계자의 의견을 수렴하여 정책을 결정. 예를 들어, 환경 정책을 수립할 때 환경 단체, 산업계, 학계 등과 협의하여 최종 결정을 내림
  - (투명성과 참여) 정부는 예산 편성 과정에서 시민들이 참여할 수 있도록 공개하고, 의견을 수렴하는 공청회를 개최

② 거버넌스 분석 체계란?
- 거버넌스 분석 체계는 기업에서 데이터를 이용한 의사 결정이 강조될수록 데이터 분석과 활용을 위한 체계적인 관리가 중요해짐
- 따라서 단순히 대용량 데이터를 수집, 축적하는 것보다는 어떤 목적으로 어떤 데이터를 어떻게 분석에 활용할 것인가가 고려한 분석체계이다.

③ 구성요소 5종
- 지속적인 데이터 분석 고도화를 위하여 거버넌스 체계는 다음과 같은 구성요소들을 가진다.
  - 분석기획 및 관리 수행조직
  - 과제 기획 및 운영 프로세스
  - 분석관련 시스템
  - 데이터
  - 분석교육, 마인드 육성체계

(2) 데이터 분석 수준진단

① 개요
- 기업들은 데이터 분석의 도입 여부와 활용에 명확한 분석 수준을 점검할 필요가 있기 때문에 데이터 분석의 수준 진단을 통하여 데이터 분석 기반을 구현할 수 있다.
- 즉 데이터 분석을 위해 수준 진단 필요
  - (분석 준비도 6종) 업무, 인력/조직, 기법, 데이터, 문화, 인프라
  - (분석 성숙도 4종) 도입, 활용, 확산, 최적화
- 분석의 유형/방향 결정

연습문제1

기업에서 데이터를 이용한 의사 결정이 강조될수록 데이터 분석과 활용을 위한 체계적인 관리가 중요해짐에 따라서 단순히 대용량 데이터를 수집, 축적하는 것보다는 어떤 목적으로 어떤 데이터를 어떻게 분석에 활용할 것인가가 고려한 분석체계는 무엇에 관한 설명인가?
① 거버넌스 분석 체계
② 회기 분석 체계
③ 데이터 마이닝
④ 머신러닝

연습문제2

데이터 분석 수준진단 중 분석준비도에 해당하지 않은 내용은?
① 분석업무
② 분석데이터
③ 분석기법
④ 분석확산

14강Ⅱ-2-2 분석 거버넌스 체계 수립2

분석 준비도 모델

준비도 목표
- 기업의 데이터 분석 도입의 수준을 파악하기 위한 진단 방법
준비도 분류
- 분석업무, 인력 및 조직, 분석 기법, 분석 데이터, 분석문화, IT인프라
진단 과정
- ⅰ) 영역별로 세부 항목에 대한 수준 파악
- ⅱ) 진단결과 전체 요건 중 일정 수준 이상 충족하면 분석업무 도입
- ⅲ) 충족하지 못할 시 분석 환경 조성

분류	내용
분석업무	발생한 사실 분석업무 , 예측 분석업무, 시뮬레이션 분석업무, 최적화 분석업무, 분석업무 정기적 개선
인력 및 조직	분석 전문가 직무 존재, 분석 전문가 교육 훈련 프로그램, 관리자들의 기본적 분석 능력, 전사 분석업무 총괄 조직 존재, 경영진의 분석업무 이해 능력
분석 기업	업무별 적합한 분석기법 사용, 분석업무 도입 방법론, 분석기법 라이브러리, 분석기법 효과성 평가, 분석기법 정기적 개선
분석 데이터	분석업무를 위한 데이터 충분성/신뢰성/적시성 비구조적 데이터 관리 외부 데이터 활용 체계, 기준 데이터 관리
분석 문화	사실에 근거한 의사결정, 관리자의 데이터중시 정도, 회의 등에서 데이터 활용 상황, 데이터 공유 및 협업 문화
IT 인프라	운영시스템 데이터 통합, EAI, ETL 등 데이터 유통 체계, 분석 전용 서버 및 스토리지, 빅데이터 분석 환경, 통계 분석 환경, 비주얼 분석 환경

분석 성숙도 모델

<참조> 조직의 성숙도 평가도구 CMMI 모델
- 능력 성숙도 통합 모델(Capability Maturity Model Integration, CMMI)은 소프트웨어 개발 및 전산장비 운영 업체들의 업무 능력 및 조직의 성숙도를 평가하기 위한 모델을 말한다.
- CMMI는 기존 능력 성숙도 모델(CMM)을 발전시킨 것으로서, 기존에 소프트웨어 품질보증 기준으로 사용되언 SW-CMM과 시스템 엔지니어링 분야의 품질보증 기준으로 사용되던 SE-CMM을 통합하여 개발한 후속 평가 모델이다.
- CMMI는 1~5단계까지 있으며, 5단계가 가장 높은 수준이다. CMMI는 소프트웨어 개발 및 전산장비 운영 분야의 품질 관련 국제 공인 기준으로 사용되고 있다
- 성숙도 수준분류
  - 도입 단계, 활용 단계, 확산 단계, 최적화 단계

단계	도입	활용	확산	최적화
비즈니스	실적분석 및 통계 정기보고 수행 운영 데이터 기반	미래 결과 예측 시뮬레이션 운영 데이터기반	전사 성과 실시간 분석규칙 관리 이벤트 관리	외부 환경분석 활용 최적화 업무 적용 실시간 분석 비즈니스 모델 진화
조직,역량	일부 부서에서 수행 담당자 역량에 의존	전문 담당부서에서 수행 분석기법 도입 관리자가 분석수행	전사 모든 부서 수행 분석 COE조직 운영 데이터 사이언티스트 확보	데이터 사이언스 그룹 경영진 분석활용 전략 연계
IT부문	데이터 웨어하우스 데이터 마트 ETL/EAI OLAP	실시간 대시보드 통계분석 환경	빅데이터 관리 환경 시뮬레이션, 최적화 비주얼 분석 분석 전용 서버	분석 협업환경 분석 sandbox 프로세스 내재화 빅데이터 분석

<참조> (1) ETL
- 추출, 변환, 적재(Extract, transform, load, ETL)는 컴퓨팅에서 데이터베이스 이용의 한 과정으로 특히 데이터 웨어하우스에서 다음을 아우른다:
  - 동일 기종 또는 타기종의 데이터 소스로부터 데이터를 추출한다.
  - 조회 또는 분석을 목적으로 적절한 포맷이나 구조로 데이터를 저장하기 위해 데이터를 변환한다.
  - 최종 대상(데이터베이스, 특히 운영 데이터 스토어, 데이터 마트, 데이터 웨어하우스)으로 변환 데이터를 적재한다.
<참조> (2) EAI
- 기업 응용 프로그램 통합(영어: Enterprise Application Integration, EAI) 또는 기업 애플리케이션 통합은 기업용 응용 프로그램의 구조적 통합 방안을 가리킨다. 전사적 응용 프로그램 통합이라고도 한다.
<참조> (3) OLAP
- 온라인 분석 처리(Online Analytical Processing, OLAP)는 의사결정 지원 시스템 가운데 대표적인 예로, 사용자가 동일한 데이터를 여러 기준을 이용하는 다양한 방식으로 바라보면서 다차원 데이터 분석을 할 수 있도록 도와준다.
- OLAP는 1993년 에드거 F. 커드에 의해 처음 제안된 것
- OLAP을 사용자가 다차원 정보에 직접 접근하여 대화 형태로 정보를 분석하고 의사결정에 활용하는 과정이라고 정의하였다.
- OLAP란 최종 사용자가 다차원 정보에 직접 접근하여 대화식으로 정보를 분석하고 의사결정에 활용하는 과정에서 등장하였다.
- 사용자는 온라인상에서 직접 데이터에 접근하며, 대화식으로 정보를 분석하므로 사용자가 기업의 전반적인 상황을 이해할 수 있게 하고 의사결정을 지원하는 데 그 목적이 있다.

분석 수준 진단 결과

기업의 현재 분석 수준을 객관적으로 파악
경쟁사의 분석 수준과 비교하여 분석 경쟁력 확보 및 강화를 위한 목표수준 설정 가능
분석 관점에서의 사분면 분석
- (정착형) 준비도는 낮으나 인력/조직, 분석기법 등을 기업 내부에서 제한적으로 사용 중
- (준비형) 기업에 필요한 데이터, 인력/조직, 분석업무, 분석기법 등이 미 적용
- (확산형) 기업이 필요한 6가지 분석 구성요소를 갖추고 있고 부분적으로 도입/확산 중
- (도입형) 기업에서 활용하는 분석업무, 기법 등은 부족하나 준비도가 높아 즉시 도입 가능

(3) 분석지원 인프라 방안 수립

① 개요
- 분석과제 단위별로 별도의 분석시스템을 구축하는 경우, 관리의 복잡도 및 비용의 증대라는 부작용이 나타날 수 있음
- 따라서 분석 마스터 플랜을 기획하는 단계에서부터 장기적이고 안정적으로 활용할 수 있는 확장성을 고려한 플랫폼 구조를 도입하는 것이 적절하다

개별 시스템	플랫폼 구조
시스템간 자체적 데이터 교환	분석 플랫폼을 활용한 공동기능 활용
시스템별 독립적인 데이터 관리	중앙집중적 데이터 관리
확장시 시스템간 인터페이스 폭증	확장시 시스템간 인터페이스 최소화

② 플랫폼
- 단순한 분석 응용프로그램 뿐만 아니라 분석 서비스를 위한 응용프로그램이 실행될 수 있는 기초를 이루는 컴퓨터 시스템을 의미
- 일반적으로 하드웨어에 탑재되어 데이터 분석에 필요한 프로그래밍 환경과 실행 및 서비스 환경을 제공하는 역할을 수행

연습문제1

분석지원 인프라 방안 수립의 플랫폼 구조에 해당하는 내용이 아닌 것은?
① 분석 플랫폼을 활용한 공동기능 활용
② 중앙집중적 데이터 관리
③ 확장시 시스템간 인터페이스 최소화
④ 시스템간 자체적 데이터 교환

연습문제2

분석 성숙도 진단 분류의 IT부문의 ‘도입’에 해당하는 내용이 아닌 것은?
① 데이터 웨어하우스
② 데이터 마트
③ ETL
④ 통계분석 환경

15강Ⅱ-2-2 분석 거버넌스 체계 수립3

(4) 데이터 거버넌스 체계 수립

① 데이터 거버넌스 체계란?
- 회사 전체에서 사용하는 모든 데이터를 효과적으로 관리하기 위해서 규칙, 지침 (가이드), 조직을 포함함
- 이를 위해 표준화 관리 체계를 수립하고 프레임워크 및 저장소를 운영/구축
- 프레임워크: 데이터 관리의 전반적인 가이드라인 제공
- 저장소: 데이터 효율적인 운영을 위한 인프라
- 인프라: 비정형/정형/반정형 데이터, 하드웨어, 소프트웨어 등 의미

체계	내용
데이터 표준화	데이터 표준용어 설정, 명명규칙 수립, 메타 데이터 구축, 데이터 사전 구축 등의 업무 데이터 표준 용어 설정: 고객 데이터베이스에서 고객 이름을 저장할 때, "First_Name", "Last_Name" 형식 명명 규칙 수립: 제품 테이블의 이름을 "product_table"로, 주문 테이블의 이름을 "order_table"로 명명 메타 데이터 구축: 고객 데이터 필드에 대해 "Customer_ID", "Customer_Name" 각 필드의 의미 전달 데이터 사전 구축: 모든 데이터 필드와 테이블에 대한 정의와 규칙을 기록한 데이터 사전을 작성
데이터 관리 체계	정합성 및 활용성 확보: 고객 데이터를 정기적으로 검증하여 중복된 데이터를 제거하고, 이메일 주소 형식을 일관되게 유지 항목별 상세한 프로세스 마련: 고객 데이터를 수집할 때, 데이터를 입력하는 절차와 검증 단계를 명확히 정의 데이터 생명 주기 관리: 고객 데이터의 생성, 업데이트, 삭제 시점을 명확히 정의하고, 보존 기간이 지난 데이터는 자동으로 삭제하는 정책을 수립 비용 관리: 데이터 압축 기술을 사용하여 저장 공간을 절약하고, 아카이브 시스템을 도입하여 오래된 데이터를 효율적으로 관리합니다.
데이터 저장소 관리	메타데이터 및 표준 데이터 저장소 구성: 중앙 집중형 데이터 웨어하우스를 구축하여 모든 데이터를 중앙에서 관리하고 분석 워크플로우 및 소프트웨어 지원: 데이터 통합 도구를 사용하여 다양한 소스에서 데이터를 수집하고, 일관된 형식으로 변환하여 저장 시스템 통제: 모든 데이터 접근은 중앙 관리 시스템을 통해 이루어지도록 하여 데이터의 무결성을 유지 사전 영향 평가: 데이터베이스 스키마 변경 시, 테스트 환경에서 사전 평가를 통해 영향을 분석하고, 실제 시스템에 적용합니다.
표준화 활동	표준 준수 여부 점검: 매 분기마다 데이터 관리 감사(audit)를 실시하여 표준 준수 여부를 점검 조직 내 안정성 유지: 새로운 데이터 관리 정책이 도입될 때마다 전체 시스템에 적용하고, 모든 관련자들에게 교육을 실시 교육 및 개선 활동: 정기적인 데이터 관리 교육 프로그램을 운영하여 모든 직원이 데이터 거버넌스 체계를 이해하고 준수하도록 합니다.

<참조> (1) 메타데이터
- 데이터에 관한 구조화된 데이터로, 다른 데이터를 설명해 주는 데이터
- 대량의 정보 가운데에서 찾고 있는 정보를 효율적으로 찾아내서 이용하기 위해 일정한 규칙에 따라 콘텐츠에 대하여 부여되는 데이터
- 어떤 데이터 즉 구조화된 정보를 분석, 분류하고 부가적 정보를 추가하기 위해 그 데이터 뒤에 함께 따라가는 정보를 말함
- 예제) 디지털 카메라에서는 사진을 찍어 기록할 때마다 카메라 자체의 정보와 촬영 당시의 시간, 노출, 플래시 사용 여부, 해상도, 사진 크기 등의 사진 정보를 화상 데이터와 같이 저장하게 되어 GPS 기능을 사용하여 위치 정보까지 사진의 메타데이터에 입력할 수도 있다.
<참조> (2) 데이터 사전
- 데이터 사전(data dictionary)는 시스템 전체에서 나타나는 데이터 항목들에 대한 정보를 지정한 중앙 저장소이다.
- 이 정보에는 항목을 참조하는데 사용되는 식별자, 항목에 대한 엔티티의 구성요소, 항목이 저장되는 곳, 항목을 참조하는 곳 등을 포함한다.

② 데이터 거버넌스 구성요소
- 데이터 거버넌스 체계는 구성요소인 원칙, 조직, 프로세스가 유기적으로 조합하여 최적의 정보 서비스를 제공

구분	내용	예시
원칙	데이터를 유지, 관리하기 위한 지침과 가이드 보안, 품질기준, 변경관리	데이터 유지 및 관리: 회사는 모든 고객 데이터를 매일 백업하고, 최소 5년간 보존 보안: 고객 데이터는 암호화된 상태로 저장되며, 데이터베이스 접근은 관리자만 가능 품질 기준: 데이터 입력 시 필수 필드가 누락되지 않도록 검증 절차를 도입 변경 관리: 데이터베이스 구조 변경 시, 사전 검토 회의를 거쳐 승인 후 변경
조직	데이터를 관리할 조직의 역할과 책임 데이터 관리자, 데이터베이스 관리자, 데이터 아키텍트	데이터 관리자: 고객 데이터베이스에 새로운 고객 정보를 추가하고, 오류를 수정 데이터베이스 관리자(DBA): 데이터베이스 백업을 수행하고, 성능 저하 문제를 해결 데이터 아키텍트: 신규 데이터 분석 요구사항에 맞춰 데이터 모델을 설계
프로세스	데이터 관리를 위한 활동과 체계 작업 절차, 모니터링 활동, 측정 활동	작업 절차: 고객 정보를 수집할 때, 웹 양식을 통해 데이터를 입력 및 검증 수행 모니터링 활동: 매주 데이터 품질 보고서를 작성하여 데이터 오류를 검토/보완 측정 활동: 분기별로 데이터 정확성 평가하여 개선 작업 수행

연습문제1

데이터 거버넌스 체계는 구성요소인 원칙, 조직, 프로세스가 유기적으로 조합, 효과적으로 관리하여 데이터를 비즈니스 목적에 부합하도록 하고 최적의 정보 서비스를 제공할 수 있도록 한다. 데이터를 유지, 관리하기 위한 지침과 가이드에 해당하는 구성요소는?
①원칙
②조직
③프로세스
④태스크

연습문제2

다음 중 아래의 데이터 거버넌스 체계가 설명하는 항목은?

메타데이터 관리, 데이터 사전관리, 데이터 생명주기 관리

①데이터 표준화
②데이터 관리 체계
③데이터 저장소 관리
④표준화 활동

16강Ⅱ-2-2 분석 거버넌스 체계 수립4

(5) 데이터 분석 조직 및 인력방안 수립

① 데이터 분석 조직의 개요
- 데이터 분석 조직은 기업의 경쟁력 확보를 위해 데이터 분석의 가치를 발견하고, 이를 활용하여 비즈니스를 최적화하는 목표를 갖고 구성되어야 한다.
  - 수익 창출 > 안정적인/고정적인 수익 극대화
- 다양한 분야의 지식과 경험을 가진 인력과 업무 담당자 등으로 구성된 전사 또는 부서 내 조직으로 구성할 수 있다.

분류	내용
목표	기업의 경쟁력 확보를 위하여 비즈니스 질문(question)과 이에 부합하는 가치(Value)를 찾고 비즈니스를 최적화(Optimization)하는 것
역할	전자 및 부서의 분석 업무를 발굴하고 전문적 기법과 분석 도구를 활용하여 기업 내 존재하는 빅데이터 속에서 인사이트(insight)를 전파하고 이를 행동화 하는 것 분석 업무 발굴: 마케팅 부서에서는 고객에게 맞춤형 마케팅 캠페인을 제공하기 위해 고객 세분화 필요 전문적 기법: 클러스터링 알고리즘을 사용하여 고객을 유사한 그룹으로 분류 도구 활용: Python의 scikit-learn 라이브러리를 사용하여 K-평균 클러스터링을 수행합니다. 인사이트 도출: 고객을 나이, 구매 패턴, 관심사 등을 기준으로 여러 그룹으로 분류 인사이트 전파: 분석 결과를 마케팅 팀에 공유하여 각 고객 그룹에 맞춤형 마케팅 전략을 제안 행동화: 캠페인 성과를 모니터링하고, 피드백을 통해 캠페인 전략을 지속적으로 개선
구성	기초통계학 및 분석 방법에 대한 지식과 분석 경험을 가지고 있는 인력으로 전사 또는 부서 내 조직으로 구성하여 운영

② 조직 및 인력 구성 시 고려사항
- 조직구조의 고려사항
  - 비즈니스 질문을 선제적으로 찾아 낼 수 있는 구조인가?
  - 분석 전담조직과 타 부서간 유기적 협조와 지원이 원활한 구조인가?
  - 효율적인 분석 업무를 수행하기 위한 분석 조직의 내부 조직 구조는?
  - 전사 및 단위부서가 필요시 접촉하여 지원할 수 있는 구조인가?
  - 어떤 형태의 조직으로 구성하는 것이 효율적인가?
- 인력구성의 고려사항
  - 비즈니스 및 IT 전문가의 조합으로 구성되어야 하는가?
  - 어떤 경험과 어떤 스킬을 갖춘 사람으로 구성해야 하는가?
  - 통계적 기법 및 분석 모델링 전문 인력을 별도로 구성해야 하는가?
  - 전사 비즈니스를 커버하는 인력이 없을 때 대책은?
  - 전사 분석업무에 대한 적합한 인력 규모는 어느 정도인가?

집중 구조	기능 구조	분산 구조

전사, 분석업무를 별도의 분석전담 조직에서 담당 전략적 중요도에 따라 분석조직이 우선순위를 정해서 진행가능 현업 업무부서의 분석업무와 이중화/이원화 가능성 높음	일반적인 분석 수행구조 별도 분석조직이 없고 해당 업무 부서에서 분석 수행 전사적 핵심분석이 어려우며, 부서 현황 및 실적 통계 등 과거 실적에 국한된 분석 수행 가능성	분석조직 인력들을 현업부서로 직접 배치하여 분석업무 수행 전사차원의 우선순위 수행 분석결과에 따른 신속한 액션가능 부서 분석업무와 역할 분담은 명확히 해야함

③ 분석조직의 인력구성
- 전문역량을 갖춘 각 분야의 인재들을 모아 조직을 구성하여 분석조직의 경쟁력을 극대화
  - 비즈니스 인력: 해당 비즈니스를 잘 이해하고 분석 요소를 찾고 협의 인력
  - IT 기술 인력: 분석에 필요한 IT 기술 동향 및 기술 아키텍처를 수립 인력
  - 분석 전문 인력: 고급 통계 분석 기법을 이해하고 다양한 예측 모델링을 설계/검증 인력
  - 변화 관리 인력: 경영층 대상으로 분석 문화 확산을 위한 변화 관리를 담당 인력
  - 교육담당 인력: 분석조직에게 다양한 분석기법에 대한 심도 있는 교육 인력

연습문제1

인력구성의 고려사항이 아닌 것은?
① 비즈니스 질문을 선제적으로 찾아 낼 수 있는 구조인가?
② 비즈니스 및 IT 전문가의 조합으로 구성되어야 하는가?
③ 어떤 경험과 어떤 스킬을 갖춘 사람으로 구성해야 하는가?
④ 통계적 기법 및 분석 모델링 전문 인력을 별도로 구성해야 하는가?

연습문제2

분석 조직 구조중 ‘집중구조’에 해당하는 설명이 아닌 것은?
①전사, 분석업무를 별도의 분석전담 조직에서 담당
②전략적 중요도에 따라 분석조직이 우선순위를 정해서 진행가능
③현업 업무부서의 분석업무와 이중화/이원화 가능성 높음
④부서 분석업무와 역할 분담은 명확히 해야함

17강Ⅱ-2-2 분석 거버넌스 체계 수립5

(6) 분석 과제 관리 프로세스 수립

① 개요
- 분석 마스터 플랜이 수립되고 데이터 분석 과제가 성공적으로 수행되는 경우, 지속적인 분석 니즈 및 기회가 도출됨
- 이러한 분석 과제를 효과적으로 기획/운영이 요구되기 때문에 체계적인 분석 과제 관리 프로세스 수립 필요
② 과제 관리 프로세스
- 과제 발굴
  - 개별 조직이나 개인이 도출한 분석 아이디어를 발굴하고 이를 과제화하여 분석 과제 풀(Pool)로 관리하면서 분석 프로젝트를 선정하는 작업을 수행한다.
- 과제 수행
  - 분석을 수행할 팀을 구성하고 분석 과제 실행시 지속적인 모니터링과 과제결과를 공유하고 개선하는 절차를 수행한다.
  - 해당 과제를 진행하면서 만들어진 시사점을 포함한 결과물을 풀에 잘 축적하고 관리함으로써 향후 유사한 분석과제 수행시 시행착오를 최소화하고 프로젝트를 효율적으로 진행할 수 있다.

(7) 분석 교육 및 변화 관리

① 개요
- 빅데이터의 등장으로 많은 비즈니스 영역에서 시시각각 변화를 적극 대응하기 위해서는 기업에 맞는 적합한 분석 업무를 도출하고, 가치를 높여줄 수 있도록 분석 조직 및 인력에 대한 지속적인 교육과 훈련을 실시해야 한다.
- 또한 경영층이 사실 기반 의사결정을 할 수 있는 문화를 정착시키는 등 지속적인 변화관리를 계획하고 수행해야 한다.
② 분석 교육 목표

분류	내용	예시
분석 기획자	데이터 분석 큐레이션 교육	데이터 큐레이션 교육을 통해 다양한 데이터를 통합 분석 목적에 맞는 데이터를 수집/전처리 방법
분석 실무자	데이터 분석 기법 및 도구에 대한 교육	Python, R, SQL 등 데이터 분석 도구의 사용법 통계 분석, 머신 러닝 등의 기법을 배우는 교육
업무 수행자	분석기회 발굴, 구체화, 시나리오 작성법	분석 결과를 바탕으로 비즈니스 전략을 수립 이를 실현하기 위한 구체적인 시나리오 작성법 배움

<참조> 빅데이터 시대의 변화에 적극적인 대응방법
- 기업에 맞는 적합한 분석업무의 수행
- 분석조직 및 인력에 대한 지속적인 교육과 훈련 실시
- 경영층이 사실기반 의사결정을 할 수 있는 문화 정착
- 지속적인 변화관리를 계획하고 수행, 업무 수행자에 대한 분석기회 발굴, 구체화, 시나리오 작성법 등을 고려

연습문제1

분석 교육의 목표 중 데이터 분석 큐레이션 교육을 목표로 하는 담당자는?
①분석 기획자
②분석 실무자
③업무 수행자
④취업 교육자

연습문제2

빅데이터 시대의 변화에 적극적인 대응방법으로 옳지 못한 것은?
①기업에 맞는 적합한 분석업무의 수행
②분석조직 및 인력에 대한 지속적인 교육과 훈련 실시
③경영층에 대한 의사결정 관여하지 않음
④지속적인 변화관리를 계획하고 수행

참고 문헌

[논문]

없음

[보고서]

없음

[URL]

없음

문의사항

[기상학/프로그래밍 언어]

sangho.lee.1990@gmail.com

[해양학/천문학/빅데이터]

saimang0804@gmail.com

[자격증] 데이터분석 준전문가 (ADsP) Ⅰ 데이터 이해 : 01~15강

shlee1990 — Sat, 24 Feb 2024 10:45:04 +0900

정보

업무명 : 데이터분석 준전문가 (ADsP) Ⅰ 데이터 이해 : 01~15강
작성자 : 이상호
작성일 : 2024.06.15
설 명 :
수정이력 :

주요 목차

01강 목록 및 강의 계획
02강Ⅰ-1-1 데이터의 개념
03강Ⅰ-1-1 데이터의 개념2
04강Ⅰ-1-2 데이터베이스의 개념
05강Ⅰ-1-3 데이터베이스의 활용
06강Ⅰ-1-3 데이터베이스의 활용2
07강Ⅰ-2-1 빅데이터의 개념
08강Ⅰ-2-1 빅데이터의 개념2
09강Ⅰ-2-2 비즈니스 모델
10강Ⅰ-2-3 빅데이터의 문제점과 해결방안
11강Ⅰ-3-1 데이터 사이언스란
12강Ⅰ-4-1 DBMS와 SQL
13강Ⅰ-4-2 데이터에 관련된 기술
14강Ⅰ-4-3 빅데이터 분석기술
15강Ⅰ-4-4 데이터 관한 기타 내용

01강 목록 및 강의 계획

[데이터 분석 준전문가 자격증 과목 소개]

구분	시험과목	과목별 세부항목	비고
1과목	데이터의 이해	1.데이터의 이해 2.데이터의 가치와 미래 3.가치 창조를 위한 데이터사이언스와 전략 인사이트
2과목	데이터 분석 기획	1.데이터 분석 기획의 이해 2.분석 마스터 플랜
3과목	데이터 분석	1.R기초와 데이터 마트 2.통계분석 3.정형 데이터 마이닝

[데이터 분석 준전문가 시험안내]

총점 60점 이상시에 자격증 취득
과목별 40% 미만 취득시 과락
응시료 50,000원

구분	시험과목	문항수	배점	시험시간
필기		객관식	객관식	90분 (1시간30분)
	1. 데이터의 이해	10	100 (각 2점)
	2. 데이터분석 기획	10
	3. 데이터분석	30
	계	50	100

[데이터 분석 준전문가 시험 일정]

02강Ⅰ-1-1 데이터의 개념

(1) 데이터의 정의

① 데이터라는 용어는 1646년 영국의 문헌에서 처음 등장, 라틴어 dare(주다)의 과거 분사형으로 ‘주어진 것’ 이란 의미로 사용
② 데이터는 추론과 추정의 근거를 이루는 사실

(2) 데이터의 분류

① 일차데이터(primary data)
- 연구조사자에 의하여 직접 수집된 데이터를 말합니다.
- 조사연구, 실험과 관측연구는 가장 널리 쓰이는 일차데이터 수집방법입니다.
② 이차데이터(secondary data)
- 연구조사자의 문제와는 다른 목적으로 다른 사람에 의하여 수집된 데이터입니다.
- 이차데이터는 데이터를 수집한 사람이 연구조사자와 같은 기관에 있는 사람인가 아닌가에 따라 다시 내부 또는 외부 데이터로 나눕니다.

(3) 데이터 웨어하우스(data warehouse)

데이터 사이의 관계나 패턴을 확인하는 세밀한 분석을 할 수 있도록, 기업 내부와 외부의 모든 데이터를 정리하여 저장하는 데이터 저장소이다.

(4) 데이터 마이닝(data mining)

분석적 기법을 적용하는 과정을 데이터 마이닝이라고 합니다.
기술통계, 교차제표, 회귀분석, 상관관계 등이 데이터 채집 도구로써 사용되는 상태입니다.
그 외 다양한 기법
- 인자분석(factor analysis)
- 군집분석(cluster analysis)
- 판별분석(discriminant analysis)
- 다차원척도법(multidimensional scaling)

03강Ⅰ-1-1 데이터의 개념2

(2) 데이터의 분류

① 일차데이터(primary data)
- 일차 데이터(primary data)는 연구조사자에 의하여 직접 수집된 데이터를 말합니다.
- 조사연구, 실험과 관측연구는 가장 널리 쓰이는 일차데이터 수집방법입니다.
- 내가 측정 장비 (온도계 등)로부터 직접 수집한 데이터를 사용
② 이차데이터(secondary data)
- 이차데이터는 연구조사자의 문제와는 다른 목적으로 다른 사람에 의하여 수집된 데이터입니다.
- 이차데이터는 데이터를 수집한 사람이 연구조사자와 같은 기관에 있는 사람인가 아닌가에 따라 다시 내부 또는 외부 데이터로 나눕니다.
- 동일 회사 내 내부 사람이 수집한 데이터를 사용
- 다른 회사 내 외부 사람이 수집한 데이터를 사용

(3) 데이터의 특성

① 존재적 특성 : 객관적인 사실로서의 의미를 가진다.
- 2024년 02월 17일 10시 0분 0초 인천 송도의 온도는 10도이다.
- 측정 장비 (온도계)를 통해 직접 측정하여 사실이 실제로 존재
② 당위적 특성 : 추론, 예측, 추정의 근거를 가진다.
- 현재의 기상 조건과 과거 데이터를 바탕으로 내일 인천 송도의 평균 온도는 15도 예상된다.
- 단순한 사실을 넘어서 미래 가능성에 대한 근거를 제공 ]

(4) 데이터의 유형

구분	형태	예	특징
정성적 데이터	언어, 문자 등	회사의 매출이 증가	비용 소모가 큼 주관적 내용 비정형 데이터
정량적 데이터	수치, 도형, 기호 등	나이, 몸무게, 주가 등	비용 소모가 작음 객관적 내용 정형 데이터

04강Ⅰ-1-2 데이터베이스의 개념

데이터베이스의 정의

데이터베이스 (영어: DataBase, DB)는 여러 사람이 공유하여 사용할 목적으로 체계화해 통합, 관리하는 데이터의 집합이다.
작성된 목록으로써 여러 응용 시스템들의 통합된 정보들을 저장하여 운영할 수 있는 공용 데이터들의 묶음이다.
- 예를 들면 다음과 같은 정보가 데이터베이스에 기록됨
- 카카오톡 메시지
- 인스타그램에 등록한 사진
- 버스/지하철에서 찍은 교통카드
- 카페에서 구매한 커피 영수증
  …

데이터베이스 관리 시스템 (DBMS): 데이터베이스를 운영하고 관리하는 소프트웨어
예를 들면 은행에서 예금/대출 등의 데이터베이스를 통해 다양한 방법 (자신, 은행 직원, 인터넷 뱅킹, ATM)으로 동시 접근 및 데이터 공유 가능

DBMS	제작사	작동 운영체제	기타
MySQL	Oracle	Unix, Linux, Windows, Mac	오픈 소스(무료), 상용
MariaDB	MariaDB	Unix, Linux, Windows	오픈 소스(무료), MySQL 초기 개발자들이 제작
PostgreSQL	PostgreSQL	Unix, Linux, Windows, Mac	오픈 소스(무료)
Oracle	Oracle	Unix, Linux, Windows	상용 시장 점유율 1위
SQL Server	Microsoft	Windows	주로 중/대형급 시장에서 사용
DB2	IBM	Unix, Linux, Windows	메인프레임 시장 점유율 1위
Access	Microsoft	Windows	PC용
SQLite	SQLite	Android, iOS	모바일 전용, 오픈 소스(무료)

(1) 데이터베이스의 정의

분류	내용
1차 개념 확대 (정형 데이터 관리)	소재를 체계적으로 배열 또는 구성한 편집물로서 개별적으로 그 소재에 접근하거나 그 소재를 검색할 수 있도록 한것 숫자, 문자 등이 명확하게 정의, 구조화된 형태를 지님
2차 개념 확대 (빅데이터의 출현으로 비정형데이터 포함)	문자, 기호, 음성, 화상, 영상 등 상호 관련 된 다수의 콘텐츠를 정보 처리 및 정보 통신 기기에 의하여 체계적으로 수집, 축적하여 다양한 용도와 방법으로 이용할 수 있도록 정리한 정보의 집합체 1차 개념 확대에서와 달리 다양한 형태 (문서, 이미지, 비디오, 이메일 등) 존재

(2) 데이터베이스의 특성

① 통합된 데이터: 이는 중복된 데이터가 존재하지 않는 것을 말합니다.
고객이 여러 개의 계좌를 가지고 있더라도 각 계좌 정보는 고유한 계좌 번호를 통해 식별되며, 고객의 개인 정보는 중복되지 않게 연결
② 저장된 데이터: 컴퓨터가 접근할 수 있는 자기 디스크나 자기 테이프와 같은 저장 매체에 저장되는 것
은행 시스템에 의해 언제든지 접근할 수 있으며, 고객이 온라인 뱅킹을 통해 계좌 이체를 요청할 때 신속하게 처리
③ 공용 데이터: 여러 사용자가 서로 다른 목적으로 데이터를 공동으로 이용하는 것
고객이 계좌 이체를 할 때, 은행 직원, 온라인 뱅킹 시스템, 모바일 앱 등 다양한 접점에서 동일한 데이터에 접근 가능
④ 변화되는 데이터: 기존 데이터의 삭제 및 갱신으로 변화하면서도 현재의 정확한 데이터를 유지
한 고객이 다른 고객에게 돈을 이체하면, 송금하는 고객의 계좌에서는 해당 금액만큼 차감되고, 수령인의 계좌에는 그 금액이 추가

(3) 데이터베이스의 장단점

① 데이터베이스 장점
- 데이터 중복 최소화
- 데이터 공유
- 일관성, 무결성, 보안성 유지
- 최신의 데이터 유지
- 데이터의 표준화 가능
- 데이터의 논리적, 물리적 독립성, 용이한 데이터 접근
- 데이터 저장 공간 절약
② 데이터베이스 단점
- 데이터베이스 전문가 필요
- 많은 비용 부담
- 데이터 백업과 복구가 어려움
- 시스템의 복잡함
- 대용량 디스크로 접근이 집중되면 과부하 발생

05강Ⅰ-1-3 데이터베이스의 활용

(1) 기업관련 데이터베이스

① 1980년대
- (ⅰ) OLTP(On-line Transaction Processing)
  - 호스트 컴퓨터가 데이터베이스를 액세스하고, 바로 처리 결과를 돌려주는 형태이다.
  - 그러므로 데이터베이스의 데이터를 수시로 갱신하는 상태를 가지게 된다.
  - 특징: 실시간 처리, 실시간 갱신
  - 대상: 일반 사용자
    사례: 은행 거래, 온라인 쇼핑, 예약 시스템 등 일상적인 거래 처리
- (ⅱ) OLAP(On-line Analytical Processing)
  - 다양한 비즈니스 관점에서 쉽고 빠르게 다차원적인 데이터에 접근하여 의사 결정에 활용할 수 있는 정보를 얻을 수 있게 해주는 형태이다.
  - 특징: 다차원적 데이터 분석, 의사결정지원
  - 대상: 데이터 분석가, 경영진과 같은 의사 결정자
  - 사례: 재고 관리, 재무 분석, 시장 연구 등에서 전략 수집
② 2000년대
- (ⅰ) CRM(Customer Relationship Management)
  - 일명 ‘고객 관계 관리’라고 하며 기업이 고객과 관련된 내,외부 자료를 분석, 통합하여 고객 중심 자원을 극대화하고, 이를 토대로 고객특성에 맞게 마케팅 활동을 계획, 지원, 평가하는 과정을 말한다.
  - 특징: 고객 중심의 데이터 관리, 개인 맞춤형 마켓팅, 고객 서비스 개선
  - 대상: 소비자, 기업
  - 사례:
    - 아마존: 고객의 구매 이력과 검색 이력을 분석하여 개인 맞춤형 상품 추천
    - 스타벅스: 모바일 앱을 통해 고객의 주문 이력을 관리하고, 맞춤형 쿠폰을 제공 서비스
- (ⅱ) SCM(Supply Chain Management)
  - 일명 ‘ 공급망 관리’라고 하며 기업에서 원재료의 생산, 유통 등 모든 공급망 단계를 최적화하여 수요자가 원하는 제품을 원하는 시간과 장소에 제공하는 것을 말한다.
  - 특징: 공급망 최적화, 재고관리, 수요 예측
  - 대상: 제조업, 유통업
  - 사례:
    - 월마트: 고도의 SCM 시스템을 통해 재고를 최적화하고, 물류 비용을 절감하여 낮은 가격으로 상품을 제공
    - 자라: 신속한 패션 트렌드 반영을 위해 공급망을 통한 빠른 디자인, 생산, 배송 시스템을 구축하여 경쟁 우위를 확보
③ 분야별 데이터베이스

분야	내용
제조 분야	ERP(Enterprise Resource Planning): 경영자원을 하나의 통합 시스템으로 재구축 BI(Business Intelligence): 의사 결정에 활용하는 비즈니스 프로세스 CRM(Customer Relationship Management): 고객관계관리이라고 하며 고객 중심 자원을 극대화하여 고객 특성에 맞게 마케팅 활동을 계획, 지원, 평가하는 과정이다. RTE(Real-Time Enterprise): 회사의 주요 경영정보를 통합관리하는 실시간 기업의 시스템
금융 분야	EAI(Enterprise Application Integration): 정보를 중앙 집중적으로 통합, 관리, 사용할 수 있는 환경 구현 EDW(Enterprise Data Warehouse): 기존 데이터 웨어하우스의 확장된 버전

[12회 기출문제]

다음 중 기업내부 데이터베이스인 고객관계관리(CRM)에 대한 설명으로 적절한 것은 무엇인가?
① 부품의 설계, 제조, 유통 등의 공정포함
② 외부 공급업체와의 정보시스템 통합으로 시간과 비용 최적화
③ 기업의 내부 고객들만을 대상으로 한 정보시스템
④ 단순한 정보의 수집에서 탈피, 분석 중심의 시스템 구축 지향

[19회 기출문제]

아래는 데이터베이스를 기반으로 기업 내 구축되는 주요 정보시스템 중 하나를 설명한 것이다. 보기에서 가장 적절한 것을 고르면?

기업 전체를 경영자원의 효과적 이용이라는 관점에서 통합적으로 관리하고 경영의 효율화를 기하기 위한 시스템

① ERP
② CRM
③ SCM
④ KMS

06강Ⅰ-1-3 데이터베이스의 활용2

(2) 사회기반구조 관련 데이터베이스

① 개념

사회 각 부문의 정보화가 본격화되면서 데이터베이스 구축이 활발히 추진
정부를 중심으로 무역, 통관, 물류, 조세, 국세, 조달 등 사회간접자본 차원에서 정보망 구축
주요 장점
- 사회기반구조의 문제점을 파악하고 개선하여 더 나은 사회를 만듬
- 다양한 서비스를 제공하여 우리 삶을 더욱 편리함
- 새로운 사업을 창출하고 경제 발전에 기여

② 분류

(ⅰ) EDI(electronic data interchange)
- 무역에 필요한 각종 서류를 표준화된 양식을 통해 컴퓨터통신망을 이용하여 거래처에 전송하는 시스템 친구에게 편지를 보내는 기능과 유사함
- 즉 서류를 전자 파일로 변환해서 빠르고 정확하게 전송
(ⅱ) VAN(Value Added Network)
- 부가가치통신망이라 부르며 공중 전기통신사업자로부터 통신회선을 차용하여 독자적인 네트워크를 형성하는 서비스
- 인터넷보다 더 안전하고 빠르게 정보를 주고받을 수 있는 특별한 네트워크 공간
(ⅲ) CALS(Commerce At Light Speed)
- 전자상거래 구축을 위해 기업 내에서 비용 절감과 생산성 향상을 추구할 목적으로 시작한 서비스
- 제품의 라이프 사이클 전반에 관련된 데이터를 통합하고 공유, 교환할 수 있도록 한 경영통합정보 시스템
- 제품 생산 과정에서 필요한 모든 정보를 하나의 시스템에 담아 관리하는 시스템

③ 분야별 데이터베이스

분야	내용	설명
물류	CVO(Commercial Vehicle Operation System) 화물운송정보	트럭의 위치, 운행 경로, 화물 정보 등을 알려주는 시스템
	PORT-MIS 항만운영정보시스템	배의 입출항 정보, 화물 처리 정보 등 항만 운영 정보를 관리하는 시스템
	KROIS 철도운영정보시스템	열차의 운행 시간, 노선, 지연 상황 등 철도 운영 정보를 알려주는 시스템
	LIS (Logistics Information System) 물류 정보 시스템	물류 관련 정보를 수집, 저장, 처리, 분석하는 시스템
지리	GIS(Geographic information System) 지리정보시스템	도로, 건물, 산, 강 등 지리 정보를 보여주는 시스템
지리	RS(Remote Sensing) 원격탐사	위성 사진으로 지구 표면을 관찰하고 변화를 파악하는 시스템
의료	UH(Ubiquitous-Health)	건강 정보를 관리하고 질병 예방 및 건강 증진을 돕는 시스템
교육	NEIS(National Education Information System) 교육행정정보시스템	학생 정보, 교사 정보, 교육 과정 등 교육 관련 정보를 관리하는 시스템

④ LIS (Logistics Information System) 물류 정보 시스템

물류의 과정을 시스템화 또는 전산화하여 운송, 보관, 포장 등 전반적인 물류과정이 효율적으로 관리될 수 있도록 만들어진 정보 처리 시스템
물류 비용을 절감시키고 물류 서비스 품질 향상을 목표

물류의 첫 단계인 주문내역, 결제확인, 주문취소, 반품 등 소비자의 주문을 관리하고 통합적으로 처리하는 주문 관리
판매자는 OMS에 기록된 데이터를 바탕으로 상품의 재고 파악, 입고 예정일 등을 쉽게 확인할 수 있으며, 다수의 채널을 운영하는 대상에게 적합한 시스템
- ① 예측 가능한 재고관리 및 재고파악의 용이
- ② 업무 시간 단축 및 효율성 증대
- ③ 고객의 소비패턴 파악과 고수요 제품 확인
- ④ 고객의 주요 데이터 활용

배송 센터 또는 자재∙재고 창고 내에서 물류 및 자재∙재고를 관리하면서 발생하는 모든 활동을 관리하는 창고 통합 관리 시스템
입고, 적치, 재고, 피킹, 출고 등을 통합 관리하여 고객 기업의 물류 관리 및 운영 능력을 향상
- ① 적정한 인원계획 수립 가능
- ② 창고공간의 효율적인 관리
- ③ 노동 생산성의 향상
- ④ 자재에 대한 실시간 정보 제공

제품을 배송하여 고객에게 전달되는 운송 수단을 배정하고 그 운송 일정을 계획, 관리하여 최종적으로는 성과/지표를 전반적으로 관리하는 시스템
운송 계획을 수립하고 실행하여 물류 프로세스의 최적화를 지원
- ① 운송비 절감 기회 분석 가능
- ② 물류 적재율 향상
- ③ 물류 프로세스 최적화
- ④ 탄소 배출 감소

공급망 관리로, 제품 생산을 위한 원재료 구매부터 최종 소비자까지 전체적인 물류 프로세스를 하나의 통합망으로 관리하는 경영전략시스템
단순한 물류 관리만이 아닌, 소비자의 만족도를 위한 높은 효율성을 높임
- ① 체계화된 물류 시스템 구축
- ② 소비자의 만족도 극대화
- ③ 기업의 경쟁력 강화
- ④ 물류비용 절감

[13회 기출문제]

다음 중 사회기반 구조로서의 데이터베이스에 대한 설명으로 가장 부적절한 것은?
① 물류, 무역, 조세 등 사회간접자본 차원에서 정보망을 통해 유통, 이용된 정보가 데이터베이스로 구축
② 지리, 교통 부문에서 데이터베이스가 보다 고도화되어 데이터베이스를 구축
③ 인터넷의 보편화로 데이터베이스가 사회 전반의 인프라로 자리매김
④ 의료, 교육, 행정 부분에서는 데이터베이스 구축과 활용이 활성화되지 못함

07강Ⅰ-2-1 빅데이터의 개념

(1) 빅데이터의 정의

① 가트너 그룹(Gartner Group)의 더그 래니(Doug Laney) 최초 제안

3V
양/규모 (Volume)	다양성(Variety)	속도(Velocity)
센서 측정 데이터, 비정형 데이터	영상, 사진 등	원하는 데이터의 추출 및 분석속도

② 정의

(좁은 의미) 3V로 요약되는 데이터 자체
(중간 의미) 데이터 자체뿐 아니라 처리, 분석 기술적 변화 또한 빅데이터로 정의
(넓은 의미) 인재, 조직 변화까지 포함하여 빅데이터를 정의

(2) 빅데이터의 출현배경

(산업계) 고객 데이터를 축적하여 보유하여 데이터의 숨어있는 가치를 발굴하고 출현
- 쿠팡에서 물건 구매 시 회원정보 필요  데이터 수집/축적/적재  자주 구매한 상품, 연관 상품 (고기-쌈장-채소 등)
(학계) 거대 데이터를 다루는 학문 분야가 늘어나면서 기술 아키텍처 및 통계 도구 발전
- 목표: 내일 온도 예측
- 과거: 사람에 의해 수작업으로 온도 측정/기록  예보관에 의해 추론
- 현재: 측정 장비에 의해 자동화 측정/기록  슈퍼컴퓨팅 및 통계 기술에 의해 예측
(기술발전) 디지털화, 저장 기술의 발달, 인터넷의 보급 등의 기술 발전
- 과거: 편지, 사진 촬영 시 종이 보관
- 현재: 이메일, USB 외장하드 등의 전자 문서 > 클라우드 활용 (구글 드라이브 등)

(3) 빅데이터의 기능

구분	설명
사전처리 ▶ 사후처리	①필요한 정보만 수집 형태에서 가능한 다양한 많은 데이터를 모으고 ②데이터를 다양한 방식으로 조합해 주요한 정보를 찾는 것 ①온라인 쇼핑몰의 구매 데이터, 고객 리뷰, 제품 조회 기록 등을 모두 수집하여 고객의 구매 패턴, 선호도를 분석하고 개인 맞춤형 상품 추천 ②금융 데이터, 거래 데이터, 소셜 미디어 데이터 등을 분석하여 사기 행위를 예측
표본조사 ▶ 전수조사	표본을 조사하여 모집단을 추정하는 형태에서 전수조사 형태로 변화 일부 고객에게 온라인 설문조사 대신 모든 고객 데이터를 분석하여 고객 만족도를 정확하게 파악하고 개선 방향을 설정
질 ▶ 양	데이터가 추가될 경우 양질의 정보가 오류 정보를 포함되나 더 좋은 예측 결과 도출 초기에는 선택된 소수의 댓글 분석하여 대중의 감정을 예측할 때, 분석된 데이터의 질이 전체 대중의 실제 감정을 반영하는 데 한계가 있음 최근 빅데이터 (데이터의 양)이 크게 증가해서 대규모 데이터를 분석함으로써 얻어진 통찰력은 보다 정확하게 대중의 감정과 트렌드를 반영
인과관계 ▶ 상관관계	상관관계를 통하여 특정 현상에 대한 분석 온도와 아이스크림 판매량 사이의 상관관계를 분석하고, 미래의 판매량을 예측하기 위한 모델을 개발 즉 기계학습 알고리즘을 활용하여 온도 변화가 아이스크림 판매에 미치는 영향을 보다 정확히 예측

[14회 기출문제]

다음 중 글로벌 기업의 빅데이터 활용사례로 그 연결이 부적절한 것은?
① 구글 – 실시간 자동 번역시스템을 통한 의사소통의 불편해소
② 라쿠텐 – 이용자의 콘텐츠 기호를 파악하여 새로운 영화를 추천해주는 씨네매치 (Cinematch) 시스템 운영
③ 월마트 – 소셜 미디어를 통해 고객 소비 패턴을 분석하는 월마트랩(Wallmart Labs) 운영
④ 자라 – 일일 판매량을 실시간 데이터 분석으로 상품 수요를 예측

08강Ⅰ-2-1 빅데이터의 개념2

(4) 빅데이터의 가치 산정의 어려움

① 데이터 활용방식 : 데이터의 활용방식이 재사용, 재조합, 다목적용 데이터 개발 등이 일반화되면서 가치 산정이 어려워 졌다.
- (재사용) 온라인 쇼핑몰 내 구매 데이터 분석 > 고객에게 맞춤형 상품 추천
- (재조합) 고객 리뷰 데이터, 구매 데이터 분석 > 만족에 따른 상품 제공
- (다목적 활용) 구매 데이터, 날씨 데이터, 교통 데이터를 함께 분석하여 최적의 배송 경로 도출
② 새로운 가치 창출 : 빅데이터 시대에는 기존에 없던 가치를 창출함에 따라 측정의 어려움이 생김
- 유튜브 스트리밍 서비스 > 시청 기록 기반 영화 추천 (개인별 선호도 취향 급변, 개인정보 수집 윤리 문제 등)
③ 분석 기술 발전 : 현재는 가치 없는 데이터일지라도 추후에는 새로운 분석 기술을 통하여 거대한 가치를 가질 수 있다.
- 이미지 분석 기술 발전 > 사진 속 사물 인식/분류 > 얼굴 표정 내 감정 인식 > 텍스트 (좋음, 나쁨, 슬픔 등) 추출

(5) 빅데이터의 영향

대상	내용
기업	빅데이터를 활용해 소비자의 행동을 분석하고 시장변동을 예측하여 비즈니스 모델을 발전 넷플릭스: 시청 기록 분석하여 개인에게 맞춤형 콘텐츠 추천 아마존: 구매 패턴 분석하여 상품 추천 및 쇼핑 경험 개선
정부	기상, 인구이동 등의 데이터를 수집하여 사회 변화를 추정 대한민국 정부24: 국민 데이터 분석하여 맞춤형 공공 비대면 서비스 제공 및 민원 해결 대한민국 복지로: 다양한 복지 서비스 (초중고 교육비 지원, 청년월세지원 등)를 비대면 신청 가능
개인	개인의 목적에 따라 빅데이터를 활용 멜론 음원: 빅데이터 기반으로 제공 중인 개인화 서비스 (TOP100 외 아티스트 추천) 제공

[15회 기출문제]

다음 중 빅데이터가 만들어 내는 변화로 가장 부적절한 것은?
① 사전처리에서 사후처리 시대로의 변화
② 대면조사에서 표본조사로의 변화
③ 데이터의 질보다 양의 중요도 증가
④ 인과관계에서 상관관계의 중요도 증가

[12회 기출문제]

다음 중 데이터의 가치 측정이 어려운 이유로 적절하지 않은 것은 무엇인가?
① 데이터 재사용의 일반화로 특정 데이터를 언제 누가 사용했는지 알기 힘들기 때문이다.
② 빅데이터 전문 인력의 증가로 다양한 곳에서 빅데이터가 활용되고 있기 때문이다.
③ 분석기술의 발전으로 과거에 분석이 불가능했던 데이터를 분석할 수 있게 되었기 때문이다.
④ 빅데이터는 기존에 존재하지 않던 새로운 가치를 창출하기 때문이다.

[13회 기출문제]

다음 중 빅데이터의 수집, 구축, 분석의 최종 목적으로 가장 적절한 것은?
① 새로운 통찰과 가치를 창출
② 데이터 중심 조직 구성
③ 초고속 데이터 처리 기술 개발
④ 데이터 관리 비용 절감

09강Ⅰ-2-2 비즈니스 모델

(1) 빅데이터 활용 기본 테크닉

구분	지도	지도	지도	지도/비지도	비지도	기타
테크닉	회귀 분석	분류 분석	감정 분석	소셜네트워크 분석	연관규칙 학습	유전자 알고리즘
내용	두 변인의 관계를 파악할 때 사용	특성에 따라 분류	특정주제에 대해 저자의 감정분석	특정인과 관 계도	변인들 간에 주목할 만한 상관관계 찾는 방법	최적화가 필요한 문제의 해결책 제시 점진적으로 진화

[회귀 분석] 최고 기온을 이용하여 판매량 예측
- (질문) 날씨가 더우면 아이스크림이 더 많이 팔릴까?
- (입력 데이터) 최고 기온
- (출력 데이터) 아이스크림 판매량
- (학습 모형) 선형회귀모형

[분류 분석] 최고 기온을 이용하여 판매량 범주 예측
- (질문) 날씨가 더우면 아이스크림 2개 분류 (많은, 적음)로 나타낼 수 있을까?
- (입력 데이터) 최고 기온
- (출력 데이터) 아이스크림 분류 범주 (많음, 적음)
- (학습 모형) 로지스틱회귀모형

감정분석

소셜네트워크 분석

유전자 알고리즘
- 생물 유전학에 기반을 둔 진화 과정을 모방한 알고리즘
- 6단계 (생성, 선택, 교차, 변이, 대치, 연산) 과정을 거쳐 최적화 결과 제공

연관규칙 학습
- https://yozm.wishket.com/magazine/detail/2098 링크 참조

[쉽게 배우는 AI] 11. 연관 규칙 학습이란? | 요즘IT

연관 규칙 학습은 이름에서도 알 수 있듯 서로 연관된 특징을 찾는 학습 방법입니다. 이러한 연관 규칙 학습은 쉽게 추천 관련 알고리즘을 떠올리면 되는데요. 영화를 예매했을 때 비슷한 장르

yozm.wishket.com

[14회 기출문제]

다음 중 감성분석에 대한 설명으로 가장 부적절한 것은?
① 특정 주제에 대한 사용자의 긍정, 부정, 의견을 분석한다.
② 주로 온라인 쇼핑물에서 사용자의 상품평에 대한 분석이 대표적 사례이다.
③ 사용자간의 소셜 관계를 알아내고자 할 때 이용한다.
④ 사용자가 사용한 문장이나 단어가 분석 대상이 된다.

[12회 기출문제]

아래와 같은 비즈니스 문제가 있다면 각 문제를 해결하기 위해 주로 사용되는 기법과 연결이 적절하지 않은 것은?
① 맥주를 사는 사람은 콜라도 같이 구매하는 경우가 많다 - 연관규칙학습
② 고객의 만족도는 충성도에 어떤 영향을 미치는가? - 회귀분석
③ 친분관계가 승진에 어떤 영향을 미치는가? - 소셜 네트워크 분석
④ 택배차량은 어떻게 배치하는 것이 비용측면에서 효율적인가? - 유형분석

[17회 기출문제]

아래 빅데이터 활용을 위한 기본테크닉 중 어떤 사례에 해당하는가?

A마트는 금요일 저녁에 맥주를 사는 사람은 기저귀도 함께 구매했다는 사실을 발견하고, 두가지 상품을 가까운 곳에 진열하기도 결정했다

① 회귀분석
② 연관분석
③ 유형분석
④ 구문분석

10강Ⅰ-2-3 빅데이터의 문제점과 해결방안

(1) 빅데이터의 문제점

① 사생활 침해
- 개인정보 유출과 같은 사생활 침해를 받을 수 있다
  - 소셜 미디어 플랫폼 (인스타그램 등)에서 사용자의 게시물, 좋아요, 팔로우 목록 등을 분석하여 개인적 취향, 정치적 성향, 심지어 건강 상태까지도 반영하여 예측
- ② 데이터 오용
  - 잘못된 지표를 사용하는 것은 빅데이터를 통해서 피해를 받을 수 있다.
    특정 지역의 교통량 데이터를 잘못 분석하여 불필요한 도로 확장 프로젝트에 막대한 예산을 투입하는 경우
- ③ 책임 원리의 훼손
  - 범죄 예측 프로그램에 의해 범행을 저지르기 전에 체포와 같은 명확한 결과에 대한 책임 원리의 훼손
    미국의 재범 예측 프로그램 (COMPAS)는 범죄 재발 확률을 예측하여 판사와 교도관이 보석, 석방, 감옥에서의 처우 결정을 내리는 데 도움을 줌
  - 그러나 백인보다 흑의 재범 위험률을 높게 보는 편향된 예측 결과를 제공함
  - 이는 법적 판단에 영향을 미쳐 사람들이 불공평한 대우를 제공

(2) 문제점의 해결방안

① 사생활 침해의 해결방안
- 익명화 기술의 발전이 필요하다.
  - 사용자의 개인정보를 수집 기업은 데이터를 익명화 (삭제, 블라, 마스킹 등)하여 개인을 식별할 수 없게 만든 후에 데이터 분석함
② 데이터 오용
- 불이익을 당한 사람들을 대변할 전문가(알고리즈미스트) 필요
- 알고리즘에 대한 접근권을 제공하여 예측 알고리즘의 부당함을 반증할 방법 명시
  - 데이터 오용 신고를 위한 플랫폼 또는 신고보상 프로그램 제공 (페이스북 참조: https://www.facebook.com/data-abuse/faq)
③ 책임 원리의 훼손
- 잘못된 예측 알고리즘을 통한 판단을 근거로 불이익을 최소화하는 장치 마련
  - 미국의 재범 예측 프로그램 (COMPAS)을 사용 시 결정적인 판단의 근거 대신 보조 도구로 한정적으로 조치

[17회 기출문제]

다음 중 사생활 침해를 막기 위해 개인정보를 무작위 처리하는 등 데이터가 본래 목적 외에 가공되고 처리되는 것을 방지하는 기술은 무엇인가?
① 정규화
② 난수화
③ 익명화
④ 일반화

[14회 기출문제]

다음 중 빅데이터 시대에 발생할 수 있는 위기 요인으로 가장 부적절한 것은?
① 재산권 침해
② 데이터 오용
③ 책임원칙 훼손
④ 사생활 침해

[13회 기출문제]

다음 중 빅데이터 시대 위기 요인 중 사생활 침해 문제를 해결하기 위해 개인 정보를 사용하는 자가 적극적인 보호장치를 강구하게 하는 방법으로 가장 적절한 것은?
① 알고리즘에 대한 접근을 허용해 부당함을 반증할 방법을 명시해 공개할 것을 주문
② 개인정보 제공자가 허락하는 동의제의 도입
③ 개인정보를 사용하는 사람이 직접 책임지는 책임제의 도입
④ 정보 사용자에게 수집된 내용을 공개하고 접근하는 권리 부여

11강Ⅰ-3-1 데이터 사이언스란

(1) 데이터 사이언스의 개념

데이터 사이언스는 수학, 통계학, 데이터 공학, 컴퓨터 공학 등의 전문지식을 종합한 학문이다
데이터로부터 의미있는 정보를 추츨해내는 학문으로 정형 또는 비정형을 막론하고 다양한 유형의 데이터를 대상으로 분석뿐만 아니라 효과적으로 구현하고 전달하는 과정

(2) 데이터 사이언스의 영역

타 분야 영역이 결합된 다학제적 분야
- ① 분석 영역 : 수학, 확률모델, 통계, 머신러닝, 불확실성 모델링 등
- ② IT 영역 : 프로그래밍, 데이터 엔지니어링, 데이터 웨어하우스 등
- ③ 비즈니스 영역 : 프레젠테이션, 스토리텔링, 시각화 등

(3) 데이터 사이언티스트의 요구역량

① 빅데이터에 대한 이론적 지식
- 다양한 머신러닝 알고리즘 원리 이해
② 분석 기술에 대한 숙련
- 데이터 전처리 (결측값 처리, 이상치 제거 등) 등 기술 필요
③ 통찰력 있는 분석
- 고객의 요구사항 (도로 확장 프로젝트 시 교통량 분석 등)에 맞게 데이터 분석 필요
④ 설득력 있는 전달
- 데이터 시각화 도구를 활용하여 이해하기 쉬운 형태 정리
⑤ 다분야간 협력
- 타 분야 영역이 결합된 다학제적 분야로서 협업 필요

(4) 데이터 사이언스; 과학과 인문의 교집합

분석기술보다 더 중요한 것은 소프트 스킬
전략적 통찰을 주는 분석은 단순 통계나 데이터 처리와 관련된 지식
그 외에 스토리텔링, 커뮤니케이션, 창의력, 열정, 직관력, 비판적 시각, 대화능력 등 인문학적 요소가 필요하다.

[18회 기출문제]

데이터 사이언스에서 인문학적 사고는 반드시 필요한 요소이다. 다음 중 인문학 열풍을 가져오게 한 외부 환경 요소로 가장 부적절한 것은?
① 디버젼스 동영학이 작용하는 복잡한 세계화
② 비즈니스 중심이 제품생산에서 체험 경제를 기초로 한 서비스로 이동
③ 경제의 논리가 생산에서 최근 패러다임인 시장 창조로 변화
④ 빅데이터 분석 기법의 이해와 분석 방법론 확대

[17회 기출문제]

데이터 사이언스에 대한 설명으로 가장 부적절한 것은?
① 데이터 사이언스는 데이터로부터 의미 있는 정보를 추출하는 학문이다.
② 주로 분석의 정확성에 초점을 두고 진행한다.
③ 정형데이터 뿐만 아니라 다양한 데이터를 대상으로 한다.
④ 기존의 통계학과는 달리 총체적 접근법을 사용한다.

[14회 기출문제]

다음중 데이터 사이언티스트의 필요 역량으로 가장 부적절한 것은?
① 설득력 있는 스토리텔링
② 통찰력 있는 분석
③ 네트워크 최적화
④ 다분야 간 협력을 위한 커뮤니케이션

12강Ⅰ-4-1 DBMS와 SQL

(1) DBMS의 개념과 종류

① DBMS(Data Base Management System)란 무엇인가?
- 데이터베이스를 관리하여 응용프로그램들이 데이터베이스를 공유하며 사용할 수 있는 환경을 제공하는 소프트웨어이다.

DBMS	제작사	작동 운영체제	기타
MySQL	Oracle	Unix, Linux, Windows, Mac	오픈 소스(무료), 상용
MariaDB	MariaDB	Unix, Linux, Windows	오픈 소스(무료), MySQL 초기 개발자들이 독립해서 만듬
PostgreSQL	PostgreSQL	Unix, Linux, Windows, Mac	오픈 소스(무료)
Oracle	Oracle	Unix, Linux, Windows	상용 시장 점유율 1위
SQL Server	Microsoft	Windows	주로 중/대형급 시장에서 사용
DB2	IBM	Unix, Linux, Windows	메인프레임 시장 점유율 1위
Access	Microsoft	Windows	PC용
SQLite	SQLite	Android, iOS	모바일 전용, 오픈 소스(무료)

② DBMS의 종류
- (ⅰ) 관계형 DBMS: 80년대 초반
- (ⅱ) 객체지향 DBMS: 80년대 후반 객체 지향 프로그래밍 + 네트워크 DBMS
- (ⅲ) 네트워크 DBMS, (ⅳ) 계층형 DBMS: 60~70년대 DBMS

(ⅰ) 관계형 DBMS
- 데이터를 칼럼, 로우를 이루는 하나 이상의 테이블로 정리하며, 고유키가 로우를 식별한다.
- 로우는 레코드나 튜플로 부르며 일반적으로 각 테이블/관계는 하나의 엔티티 타입을 대표한다.
- 대부분의 DBMS에서 속함

(ⅱ) 객체지향 DBMS
- 일반적으로 사용되는 테이블 기반의 관계형 DB와 다르게 정보를 ‘객체’ 형태로 표현하는 모델

(ⅲ) 네트워크 DBMS
- 레코드들이 노드로, 레코드들 사이의 관계가 간선으로 표현되는 그래프를 기반으로 하는 데이터베이스 모델

(ⅳ) 계층형 DBMS
- 트리구조를 기반으로 하는 계층 데이터베이스 모델이다

(2) SQL의 개념과 주요함수

① SQL(Structured Query Language)이란 무엇인가?
- 데이터베이스에 접근할 수 있는 데이터 베이스의 하부 언어로, 단순한 질의 기능 뿐만 아니라 완전한 데이터의 정의와 조작 기능을 갖추고 있다.

② SQL 주요 함수

함수명	설명
AVG	평균값
COUNT	특정 조건의 맞는 개수
SUM	총합
STDDEV	분산
MIN	가장 작은 값
MAX	가장 큰 값

[17회 기출문제]

다음 중 사용자 정의 데이터 및 멀티미디어 데이터 등 복잡한 데이터 구조를 표현, 관리할 수 있는 데이터베이스 관리 시스템은 무엇인가?
① 관계형 DBMS
② 객체지향 DBMS
③ 네트워크 DBMS
④ 계층형 DBMS

[15회 기출문제]

SQL은 다양한 집계함수를 제공하는데, 다음 집계함수 중 어떠한 데이터의 타입에도 사용이 가능한 것은?
① AVG
② COUNT
③ SUM
④ STDDEV

13강Ⅰ-4-2 데이터에 관련된 기술

(1) 개인정보 비식별 기술

데이터 셋에서 개인을 식별할 수 있는 요소를 전부 또는 일부를 삭제하거나 다른값으로 대체하는 등의 방법으로 개인을 알아볼 수 없도록 하는 기술
(예제) 데이터마스킹, 가명처리, 총계처리, 데이터값 삭제, 데이터 범주화

(2) 데이터 무결성(Data Integrity)

데이터베이스 내의 데이터에 대한 정확한 일관성, 유효성, 신뢰성을 보장하기 위해 데이터 변경/ 수정시 여러 가지 제한을 두어서 데이터의 정확성을 보증
- 기본 키(Primary Key) 제약 조건: 각 행이 고유하게 식별되도록 합니다. 은행 계좌 데이터베이스에서 각 계좌는 고유한 계좌 번호를 기본 키로 가지며, 중복이 허용되지 않습니다.
- 외래 키(Foreign Key) 제약 조건: 두 테이블 간의 관계를 정의하고, 참조 무결성을 유지합니다. 주문 테이블의 고객 ID가 고객 테이블의 기본 키를 참조함으로써, 주문이 유효한 고객에 의해서만 생성되도록 합니다.
- 체크(Check) 제약 조건: 특정 조건을 만족하는 데이터만 테이블에 삽입되도록 합니다. 직원 테이블에서 나이가 18세 이상인 경우에만 데이터를 추가하도록 하는 체크 제약 조건을 설정할 수 있습니다.
- 유일(Unique) 제약 조건: 특정 컬럼의 모든 값이 유일함을 보장합니다. 사용자 이메일 주소가 모두 다르도록 합니다.

(3) 데이터 레이크(Data Lake)

많은 정보 속에서 의미있는 내용을 찾기 위해 방식에 상관없이 데이터를 저장하는 시스템
- 웹사이트, 소셜 미디어, IoT(사물 인터넷) 기기 등 다양한 소스로부터 생성된 정형 데이터, 비정형 데이터, 반정형 데이터 등 모든 형태의 데이터

[13회 기출문제]

아래에서 설명하고 있는 ( )는 무엇인가? 데이터 레이크

지난 몇 년간 여러 사일로 대신 하나의 데이터 소스를 추구하는 경향이 생겼다. 전사적으로 쉽게 인사이트를 공유하는데 도움이 되기 때문이다. 다시 말해 별도로 정제되지 않은 자연스러운 상태의 아주 큰 데이터 세트인 ( )을/를 기업들이 구현하는 것은 2017년 새롭게 등장한 트랜드가 아니다. 그러나 2017년은 이를 적절히 관리해 운영하는 첫해가 될 전망이다.

14강Ⅰ-4-3 빅데이터 분석기술

(1) 하둡(Hadoop)

여러 개의 컴퓨터를 하나인 것처럼 묶어 대용량 데이터를 처리하는 기술
- 여러 컴퓨터를 하나의 시스템처럼 묶어 대용량 데이터를 처리하는 오픈 소스 소프트웨어 프레임워크
- 저렴한 하드웨어를 사용하여 대규모 데이터를 처리할 수 있도록 설계되었으며, 분산 파일 시스템(HDFS)와 MapReduce 프로그래밍 모델을 기반으로 합

(2) 아파치 스파크(Apache Spark)

실시간 분산형 컴퓨팅 플랫폼으로써 스칼라로 작성이 되어 있으나 스칼라/자바/R/파이썬 API를 지원한다.
- 실시간 분산 컴퓨팅을 위한 오픈 소스 프레임워크
- 하둡보다 빠른 처리 속도를 제공하며, 메모리 기반 컴퓨팅을 통해 데이터 처리 성능을 향상

(3) 스마트 팩토리(Smart Factory)

사물 인터넷(IoT) 기술을 활용하여 공장의 생산 시스템을 자동화하고 최적화
- 센서, 데이터 분석, 머신러닝 등을 통해 공장 내 설비와 기계의 상태를 실시간으로 모니터링하고, 데이터 기반 의사결정을 통해 생산성을 향상시키고 품질을 개선

(4) 기계학습(Machine Learning), 심화학습(Deep Learning)

기계학습은 인공지능의 연구 분야 중 하나로 데이터를 통해 학습하여 예측이나 판단을 하는 기술
심화학습은 기계학습의 한 종류로, 인공 신경망을 사용하여 데이터에서 복잡한 패턴을 학습하는 기술

머신러닝(Machine Learning)이란?

1959년, 아서 사무엘은 기계 학습을 다음과 같이 정의
"기계가 일일이 코드로 명시하지 않은 동작을 데이터로부터 학습하여 실행할 수 있도록 하는 알고리즘을 개발하는 연구 분야“
알고리즘 유형
- 지도 학습
- 자율 학습 (기계 학습)
- 준 지도 학습
- 강화 학습
- 심화 학습
일반적으로 기계 학습은 훈련 이후 새롭게 들어온 데이터를 정확히 처리할 수 있는 능력을 말한다.

심화학습(deep learning)이란?

심층 학습(深層學習) 또는 딥 러닝(영어: deep structured learning, deep learning 또는 hierarchical learning)
- 여러 비선형 변환기법의 조합을 통해 높은 수준의 추상화(abstractions, 다량의 데이터나 복잡한 자료들 속에서 핵심적인 내용 또는 기능을 요약하는 작업)를 시도하는 기계 학습 알고리즘의 집합
- 큰 틀에서 사람의 사고방식을 컴퓨터에게 가르치는 기계학습의 한 분야라고 이야기할 수 있다.

15강Ⅰ-4-4 데이터 관한 기타 내용

(1) B2B (Business to Business)

기업과 기업 사이의 거래를 기반으로 한 비즈니스 모델
- 제조업체가 유통업체에 상품을 공급하거나, 소프트웨어 회사가 다른 회사에 솔루션을 제공하는 경우

(2) B2C (Business to Consumer)

기업과 고객 사이의 거래를 기반으로 한 비즈니스 모델
- 온라인 쇼핑몰에서 제품을 구매하거나, 택배 회사에서 배송 서비스를 이용하는 경우

(3) 블록체인 (Blockchain)

거래 정보를 암호화하여 하나의 블록이라는 덩어리로 묶고, 이 블록들을 순서대로 연결하여 만든 거래 장부이다.
- 탈중앙화된 방식으로 운영되기 때문에 중개자 없이, 거래 정보의 위변조가 어려움
- 암호화폐, 금융, 공급망 관리, 의료 등 다양한 분야에서 활용

(4) 데이터의 유형

유형	내용	예시
정형 데이터	형태(고정된 필드)가 있으며 연산이 가능함 데이터 수집 난이도가 낮고 형식이 정해져 있어 처리가 쉬운 편	관계형 데이터베이스, 스프레드시트, CSV 등
반정형 데이터	형태(스키마, 메타데이터)가 있으며 연산이 불가능함 데이터 수집 난이도는 중간	XML, HTML, JSON, 로그형태 등
비정형 데이터	형태가 없고, 연산이 불가능 데이터 수집 난이도는 높고 처리가 어려움	소셜데이터, 영상, 이미지, 음성, 텍스트 등

[12회 기출문제]

다음 중 데이터에 대한 설명으로 가장 적절하지 않는 것은 무엇인가?
① 양질의 데이터를 확보하지 못하면 잘못된 분석 결과를 얻음
② 창의적인 데이터 매시업은 기존에 풀기 어려웠던 문제 해결에 도움
③ 비정형 데이터는 데이터 내부에 데이터를 갖고 있으며 일반적으로 파일 형태로 저장
④ 공공부문에서 개방하고 있는 대표적인 데이터는 교통 데이터, 물가 데이터, 의료 데이터이다.

참고 문헌

[논문]

없음

[보고서]

없음

[URL]

없음

문의사항

[기상학/프로그래밍 언어]

sangho.lee.1990@gmail.com

[해양학/천문학/빅데이터]

saimang0804@gmail.com

[일상생활] 2023년 주요 교육 및 공모전 소식

shlee1990 — Tue, 23 May 2023 17:56:11 +0900

정보

업무명 : 2023년 주요 교육 및 공모전 소식
작성자 : 이상호
작성일 : 2023-05-23
설 명 :
수정이력 :

내용

[개요]

안녕하세요? 기상 연구 및 웹 개발을 담당하고 있는 해솔입니다.
오늘 포스팅은 2023년 주요 교육 및 공모전 소식을 소개합니다.

교육

[메디치교육센터] 정보관리/컴퓨터시스템응용기술사 자격증 취득과정(일반)_6/17(토)개강!

교육 목적
- 정보처리 분야 최고의 전문가로 인정받는 기술사 자격을 취득할 수 있도록 출제 분야와 관련된 전반의 지식을 습득
교육 특징
- 정보처리기술사 양성을 위해 14주에 최적화 된 이론 학습과정
- 전/현직 정보처리분야 기술사 협회 소속 기술사 위원으로 구성된 국내 최강의 강사진
- 최단기간 기술사 자격 취득이 가능한 학습 비법 제공
교육대상
- 정보처리 분야 실무 6년 이상 종사하였거나, 자격증 응시 및 취득 시점에 6년 이상 실무 경력이 될 것으로 예상 되는 분
- 정보처리 기사 취득 후 4년 이상 실무에 종사 한 자로서 기술사 자격 취득을 원하는 분
- 실무 경력과 상관없이 정보처리분야 전반의 지식 및 기술 동향을 체계적으로 학습하기를 원하는 분
- 정보처리 관련 사업 발굴 업무를 수행하기 위해 과제 도출 및 해결 방법에 대해 역량을 향상 하고자 하는 분
교육비용 안내
교육시간 교육비(부가세 없음) 정부지원금 자비부담금
112H 1,120,672 원 451,520원 669,152원
* 정부지원금은 교육생 유형에 따라 변경될 수 있으며, 취성패Ⅰ, Ⅱ및 근로장학생은 HRD-net사이트를 통한 확인이 가장 정확합니다.

[메디치교육센터] 정보관리/컴퓨터시스템응용기술사 자격증 취득과정(심화)_5/27(토)개강!

교육 특징
- 정보처리기술사 양성을 위해 12주에 최적화 된 심화 이론 학습과정
- 전/현직 정보처리분야 기술사 협회 소속 기술사 위원으로 구성된 국내 최강의 강사진
- 최단기간 기술사 자격 취득이 가능한 학습 비법 제공
기대 효과
- 정보처리 분야의 응용S/W개발, DB설계, 프로젝트관리와 관련된 심화된 공학지식을 습득
- 응용SW 실행 환경의 기반이 되는 컴퓨터 구조, N/W 관련 심화된 이론 지식을 습득
- 안전한 응용 S/W 개발 및 운영을 위한 심화된 정보보안 지식을 습득
- 변화하는 정보기술 동향에 대응하고 실무에 적용하기 위한 융합 IT 동향과 이를 비즈니스 관점에서 접목하고 관리하기 위한 IT경영 관련 심화된 지식 및 기법을 습득
- 정보기술 분야의 주요 당면과제와 이를 분석하고 해결방법을 제시하기 위한 심화된 문제해결 방법을 습득
교육대상
- 정보처리 분야 실무 7년 이상 종사하였거나, 자격증 응시 및 취득 시점에 7년 이상 실무 경력이 될 것으로 예상 되는 분
- 정보처리 기사 취득 후 5년 이상 실무에 종사 한 자로서 기술사 자격 취득을 원하는 분
- 본 기관의 정보관리 기술사 자격증 취득과정(일반)을 수료하신 분 혹은 해당 수준의 타 교육 이수자
교육비용 안내
교육시간 교육비(부가세 없음) 정부지원금 자비부담금
96H 963,072 원 349,522원 613,550원
* 정부지원금은 교육생 유형에 따라 변경될 수 있으며, 취성패Ⅰ, Ⅱ및 근로장학생은 HRD-net사이트를 통한 확인이 가장 정확합니다.

[한국기상산업기술원/한국기상산업협회] 2023년 제1회 기상장비관리사 자격취득 교육생 모집 안내

한국기상산업기술원과 한국기상산업협회에서는 기상관측장비의 전반적인 원리 및 기술 이해와 인재 양성을 위하여,「2023년 제1회 기상장비관리사 자격취득 교육」을 운영합니다.
자세한 내용은 아래와 첨부를 참고해 주시기 바랍니다.

1. 교육대상: 기상관측장비에 관심이 있는 전 국민
2. 수강비: 무료
3. 교육 장소 및 일정 (* 오프라인 교육은 한국기상산업기술원 14층 교육실에서 진행 / 운영상황에 따라 변동될 수 있습니다.)
4. 신청 기간: ~5월 10일(수) 까지
5. 신청 방법: 이메일 접수(한국기상산업협회 사무국 kmia@kmia.biz)
6. 문의사항: 한국기상산업협회 사무국 김동형 주임(02-362-3737, hdkim@kmia.biz)

공모전

[통계청] 2023년 통계데이터 활용대회 안내

□ (목적) 통계데이터를 활용한 다양한 연계 분석사례 발굴 및 대중적 데이터 분석 활용성 제고를 통한 통계데이터센터 이용 활성화
□ (부제) “데이터분석, 어디까지 해봤니?”
ㅇ 다양한 데이터를 연계·분석하여 경제·사회 현황파악 및 정책 의사결정 모델, 창업 아이디어 발굴 등 데이터 기반의 의사결정 문화 확산
□ (실시기관) 주최 통계청 / 주관 한국통계진흥원
□ (공모분야) ① 데이터분석 보고서(7쪽 내) / ② 데이터분석 포스터(1쪽, A1)
□ (신청자격) 개인 또는 팀(3명 이하)의 형태로 누구나 참여 가능
※ 단 외국인의 경우 개인 참여는 어려우며, 한국인이 포함된 팀원으로 참가 가능

□ (대회기간) ‘23. 5. 11.(목) ~ 8. 29.(화)
ㅇ 센터 방문분석의 경우 팀 당 분석기간 6일 배정, 홈페이지에서 방문일 사전예약(선착순)
□ (신청서 제출) ’23. 5. 11.(목) ~ 6. 21.(화)
ㅇ (제출방법) 홈페이지를 통한 접수 및 담당자 승인 후 참여
- 신청기간 중 1회에 한하여 신청서 변경 가능
- 센터 방문분석 팀은 방문일 사전예약 필수(분석기간 중 6일)
- 방문센터는 대전, 서울(중구, 강남), 부산, 광주, 대구, KDI, 전북, 제주센터 중 선택
※ 제출방법의 경우 변동 시 공지사항을 통해 별도 안내 예정
ㅇ (활용 데이터) 통계청, 통계데이터센터 제공자료 외 타출처의 공공 및 민간데이터 연계하여 분석에 활용 가능
ㅇ 보고서 및 포스터 작성 시 아래 출처 데이터 중 1건 이상 필수활용

[기상청] 2023 날씨 빅데이터 콘테스트 개최 안내

기상청에서 기상과 타 분야 빅데이터 간 융합·분석에 국민 아이디어를 접목해 기상 관련 현안을 해결하는「2023 날씨 빅데이터 콘테스트」를 개최합니다.

자세한 내용은 아래와 첨부파일을 참고해 주시기 바랍니다.
1. 대회명: 2023 날씨 빅데이터 콘테스트
2. 대회기간: 2023년 5월 ~ 8월 (4개월)
3. 참가접수: 5월 8일(월) ~ 6월 9일(금) 17:00
4. 공모과제
- 생활안전: 기상에 따른 계절별 지면온도 산출기술 개발
- 해양안전: 기상에 따른 선박 닻 끌림 예측
5. 참가대상: 일반 국민 누구나(개인 또는 팀) ※ 과제별 중복 참여 가능
6. 신청방법: 누리집(기상청 빅데이터 콘테스트 (kma.go.kr)) 또는 첨부의 참가 신청서 작성 후 이메일 제출(운영사무국: weather
contest@gmail.com)

참고 문헌

[논문]

없음

[보고서]

없음

[URL]

없음

문의사항

[기상학/프로그래밍 언어]

sangho.lee.1990@gmail.com

[해양학/천문학/빅데이터]

saimang0804@gmail.com

[Ajax] 에이잭스 비동기 통신 기술 소개 및 예시

shlee1990 — Wed, 17 May 2023 00:34:05 +0900

정보

업무명 : 에이잭스 비동기 통신 기술 소개 및 예시
작성자 : 이상호
작성일 : 2023-05-16
설 명 :
수정이력 :

내용

[개요]

안녕하세요? 웹 개발 및 연구 개발을 담당하고 있는 해솔입니다.
오늘 포스팅에서는 에이잭스 비동기 통신 기술을 소개해 드리고자 합니다.

[특징]

웹 개발을 위해서 에이잭스 (Ajax)기술이 요구되며 이 프로그램은 이러한 목적을 달성하기 위한 기술서

[기능]

Ajax 기술
XMLHttpRequest 이해
Ajax 작동 방식

[활용 자료]

없음

[자료 처리 방안 및 활용 분석 기법]

없음

[사용법]

없음

[사용 OS]

Windows 10

[사용 언어]

Java Script
Ajax

세부 내용

[Ajax 기술]

XML, HTML, CSS 및 Java Script를 결합하여 웹 어플리케이션을 효율/반응을 극대화 기술

Ajax는 XHTML을 콘텐츠로 사용하고, CSS를 동적 콘텐츠 표시, Document Object Model 및 JavaScript와 함께 사용
전통적인 웹 애플리케이션은 동기식 요청을 사용하여 서버와 정보를 주고 받음. 예를 들어 사용자가 양식을 작성하고 제출을 선택하면 서버에서 새 정보로 새 페이지를 가져옴
반면에 Ajax를 사용하면 제출을 클릭하면 Java Script가 서버에 요청을 보내고 결과로 받은 응답 결과를 현재 화면에 업데이트함.
XML은 일반적으로 서버 데이터를 수신하는 형식으로 사용되나 모든 형식(JSON 및 일반 텍스트 등 포함)을 사용 가능
웹 서버 소프트웨어와 독립적인 웹 브라우저 기술로서 클라이언트 프로그램이 백그라운드에서 서버에 정보를 요청하는 동안 사용자는 애플리케이션을 계속 사용 가능
또한 직관적이고 자연스러운 사용자 상호 작용이 가능하며 클릭없이 마우스 움직임만으로도 충분한 이벤트 트리거 제공
페이지 중심이 아닌 데이터 중심의 접근 방식을 제공

풍부한 인터넷 응용 기술

지금까지 가장 실행 가능한 RIA(Rich Internet Application) 기술
업계에서 엄청난 추진력을 얻고 있으며 여러 툴킷과 프레임워크가 등장
그러나 Ajax에는 몇가지 단점이 존재
- (브라우저 간 호환성 문제) 각 브라우저가 JavaScript와 관련된 사항들을 다르게 해석/구현
- (JavaScript 의존) Java Script를 비활성화하거나 지원하지 않는 브라우저에서는 Ajax 기능을 사용 못함
- (유지관리/디버깅 어려움) Java Script로 작성된 코드는 복잡성이 높아질수록 어려움 존재

[XMLHttpRequest 이해]

클라이언트에서 서버 백그라운드로 데이터를 전송
서버에서 데이터를 수신
페이지를 다시 새로고침을 하지 않고 웹 페이지를 업데이트 수행

XMLHttpRequest 개체의 속성

onReadyStateChange : readystate 속성이 변경될 때마다 호출 (동기식 요청에서는 미 작동)
readyState : 요청 상태 구분(0~4 범위 값)
- 0 : open() 메서드가 미 호출
- 1 : open() 메서드가 호출되었으나 send() 메서드가 미 호출
- 2 : send() 메서드가 호출되고 헤더 및 상태가 사용 가능
- 3 : 응답의 일부 받음. 즉 responseText 속성에 데이터 저장
- 4 : 요청 완료
reponseText : 응답의 본문을 텍스트로 반환
responseXML : 응답의 본문을 XML 문서 객체로 반환 (미 응답/파싱 오류 시 null)

XMLHttpRequest 개체의 메서드

메서드	설명
void open(method, URL)	지정된 HTTP 메서드 (GET, POST 등) 및 URL에 대한 요청
void open(method, URL, async)	위와 동일하나 비동기 여부를 지정
void open(method, URL, async, username, password)	위와 동일하나 사용자 이름과 비밀번호를 지정
void send()	서버로 비동기 요청
void send(string)	서버로 문자열을 포함한 요청
setRequestHeader(header,value)	요청 헤더 추가

[Ajax 작동 방식]

사용자는 화면 UI에서 특정 버튼을 선택
Java Script에서 XMLHttpRequest 객체를 생성하고, 서버에 HTTP 메서드 (GET, POST 등) 및 필요한 데이터 요청
서버는 서버 사이드 스크립트 언어 (JSP, PHP, Servlet, ASP.net 등) 등을 사용하여 데이터베이스와 상호 작용
서버는 처리 결과를 데이터 형식 (XML 데이터 또는 JSON 데이터)으로 클라이언트로 반환 (XMLHttpRequest 객체에 연결된 콜백 함수)
콜백 함수는 이 데이터를 받아서 웹페이지의 특정 부분을 업데이트

참고 문헌

[논문]

없음

[보고서]

없음

[URL]

없음

문의사항

[기상학/프로그래밍 언어]

sangho.lee.1990@gmail.com

[해양학/천문학/빅데이터]

saimang0804@gmail.com

[일상생활] 야놀자 출장 증빙용 영수증 (매출전표) 인쇄

shlee1990 — Tue, 14 Mar 2023 09:29:18 +0900

정보

업무명 : 야놀자 출장 증빙용 영수증 (매출전표) 인쇄
작성자 : 이상호
작성일 : 2023.03.14
설 명 :
수정이력 :

내용

[개요]

안녕하세요? 기상 연구 및 웹 개발을 담당하고 있는 해솔입니다.
오늘 포스팅은 야놀자 출장 증빙용 영수증 (매출전표) 인쇄 방법을 소개합니다.

매출전표 인쇄

[야놀자] 접속

야놀자 | 여행의 모든 것, 한 번에 쉽게

국내 호텔 모텔 펜션/풀빌라는 물론 레저/액티비티에 해외 숙소까지 모두 초특가! 지금 야놀자로 최대 80% 할인받으세요.

www.yanolja.com

[마이] 선택

[로그인] 하기

예약 내역에서 [국내 여행] 선택

예약 내역에서 [상세보기] 선택

예약 내역의 상세에서 [영수증 조회] 선택

영수증 조회에서 [결재 영수증] 선택

카카오페이에서 [인쇄] 선택

참고 문헌

[논문]

없음

[보고서]

없음

[URL]

없음

문의사항

[기상학/프로그래밍 언어]

sangho.lee.1990@gmail.com

[해양학/천문학/빅데이터]

saimang0804@gmail.com

[자격증] 데이터분석 전문가 (ADP) 필기 : 기초, 핵심 요약, 문제풀이

shlee1990 — Tue, 14 Feb 2023 12:35:15 +0900

정보

업무명 : 데이터분석 전문가 (ADP) 필기 : 기초, 핵심 요약, 문제풀이
작성자 : 이상호
작성일 : 2023.02.14
설 명 :
수정이력 :

내용

[통계 분석]

가장 정확한 조사 방법 : 모집단을 대상으로 조사하는 것
그러나 대부분 표본으로 조사를 진행
확률적 표본추출 방법 (probability sampling method)
- 표본추출의 방법은 동일한 확률 하에서 표본을 구성

비확률적 표본추출 방법 (non-probability sampling method)
- 확률과는 상관없이 조사자가 자신의 의지로 표본을 뽑거나 조사 대상이 자발적으로 표본을 구성

[표준화]

원시 데이터
- 평균 : 60
- 표준편차 : 4.47

번호	x
1	61
2	59
3	60
4	67
5	53

표준화 데이터
- 평균 : 0.00
- 표준편차 : 1

번호	z
1	0.22
2	-0.22
3	0.00
4	1.57
5	-1.57

[데이터웨어하우스 구성]

ODS (Operational Data Store) : 다수의 OLTP(뱅킹) 시스템에서 추출한 데이터를 통합적으로 관리하는 데이터베이스
ETL : 추출, 정제, 적재
- Extraction : 획득
- Transformation : 데이터 클렌징, 형식 변환, 표준화
- Loading : 적재
OLAP (Online Analytical Processing) : 다차원 분석
데이터마이닝 : 분류, 회귀, 클러스터링, 연관분석

[데이터 변환 방법]

정규분포화
- 로그 변환 : 입력되는 데이터가 멱함수 분포를 나타내는 경우 log를 사용해서 정규분포로 변환
- 제곱근 변환 : 정규분포가 아닌 데이터를 제곱근을 사용해서 정규분포 변환
범주화
- 이산형 (discretization) : 다수의 구간으로 연속형 변수를 범주화
- 이항변수화 (binarization) : 0과 1의 두개의 값으로 더미 변수화 한다.
개수 축소
- 단순 임의 추출
- 체계적 추출
- 층화 임의 추출
- 군집 추출
- 다단계 추출
차원축소
- 요인분석 : 잠재적인 변수를 찾는 방법으로 공통적인 요인을 찾아냄
- 주성분 분석
시그널 데이터 변환
- 푸리에 변환
- 웨이블릿 변환
  - wavelet(작은 파)를 패턴으로 하여 이것을 천이하거나 확대
  - 축소의 스케일을 사용해서 임의의 파형으로 표현

[데이터분석기초] 정규화, 표준화

정규화 (Normalization)
- 데이터의 범주를 변경
- 즉 여러 개의 변수가 있어 서로간의 범위가 다를 경우 (100~200, -10~10 등) 범주를 일치시킨다 (주로 0~1
표준화 (Standardization)
- 표준정규분포를 통해 계산
- 즉 z 변환 (transformation) 또는 z 스코어 (score)를 의미

[파동의법칙] 푸리에

푸리에는 인간 음성의 수수께끼를 단계적으로 풀어가는 기술
복잡한 파동은 단순한 파동의 집합체

파동의 특성
- 파동이 높아지는 곳 -> 공기가 진해진 상태
- 파동이 낮아지는 곳 -> 공기가 엷어진 상태
- 목소리가 크면 파동은 세로로 높다
- 목소리가 높으면 파동의 한 패턴은 폭이 좁다

[핵심 요약]

핵심 내용	세부 내용
데이터 데이터와 정보의 관계(DIKW) 데이터의 유형	데이터는 객관적인 사실, 추론, 예측, 전망, 추정을 위한 근거 유형 : 정성(문자) / 정량(수치) 지식 창조 메커니즘 암묵지 → 형식지 (표출화) 형식지 → 암묵지 (내면화) 공통화 표출화 내면화 연결화(새로운 형식지를 창조)
정의(통합,저장,운영,공용) 데이터웨어하우스 데이터베이스 활용	데이터베이스 특징(실시간,지속적 변환,동시 공유,내용에 의한 참조) 데이터웨어하우스 특징(주제지향적, 통합적,시계열성,비소멸성(갱신이 발생하지 않는 조회전용) KMS / ERP / SCM / CRM / EAI 클라우드 컴퓨팅 ISP(Information Strategy Planning)
빅데이터 / 빅데이터의 미래	TPEZY 3V(volume,variety,velocity) 4V(Veracity) 5V(Value) 렌즈 역할/플랫폼 역할/표본조사->전수조사/질보다는양,인과관계보다는 상관관계가 더 중시 연관규칙 / 유형분석 / 유전 알고리즘 / 기계학습 / 회귀 분석 감성분석 / 소셜 네트워크 분석
빅데이터 활용을 위한 3대요소 빅데이터 처리 프로세스 빅데이처 처리 프로세스별 관련 기술	자원 / 기술 / 인력 데이터 소스 -> 수집 -> 저장 -> 처리 -> 분석 -> 시각화
빅데이터 서비스 모델 원시 데이터 구성 및 보관 방식	data lakes : 막대한 원시 데이터를 본연의 형식 그대로 저장하는 것 빅데이터 저장 방식(RDB, NoSQL, 분산파일시스템(HDFS))
빅데이터 위기요인과 통제 비식별화 조치	위기요인 사생활 침해(분석자 또는 사용자 책임을 져야함 책임원칙 훼손(분석이 되는 사람들은 예측 알고리즘으로 희생양이 되기 때문에 기존의 책임원칙 강화) 데이터 오용(데이터에 대해 잘못된 인사이트를 얻어서 비즈니스에 직접적인 손실되므로 데이터 알고리즘에 대한 접근 권한 허용, 객관적인 인증 방안 도입) 통제방안 책임제 전환/책임원칙 강화/알고리즘에 대한 접근허용 비식별화 조치방안(가명처리/총계처리,평균값 대체/데이터값삭제/범주화/데이터마스킹)
분석 목적 설정 빅데이터 분석의 기본 원칙 빅데이터 분석 주제 유형(최통솔발) 목표 시점별 분석 기획 빅데이터 분석 기획 시 고려사항	데이터사이언티스트(하드/소프트 스킬) 대상 O X O 최 통 방법 X 솔 발
데이터의 특징 데이터 확보계획 수립 데이터 분석 방안 설정
ODS 구성 : 인터페이스-스테이징-프로파일링-클렌징-데이터통합-익스포트	데이터웨어하우스 특징 : 주제중심,영속성,통합성,시계열성 스타스키마/스노우플레이크스키마
데이터베이스 내 데이터에 대한 변경을 식별해 필요한 후속처리(데이터 전송/공유)를 자동화하는 기술 또는 설계기법이자 구조	구현 기법 : Time stamp on Rows, Version Numbers on Rows, Status on Rows, Time/Version/Status on Rows Triggers on Tables, Event Programming, Log Scanner on Database
분산 파일 시스템(GFS), 하둡 분산 파일 시스템(HDFS),Luster :객체 기반 클러스터 파일 시스템	데이터베이스 클러스트(Oracle RAC, IBM DB2 ICE, MS SQL 서버,MySQL) NOSQL(구글 빅테이블,아마존 Simple DB,MS SSDS)
MapReduce, 병렬쿼리시스템(구글 Sawzall, 아파치 피그, 아파치 하이브)	SQL on Hadoop(임팔라)
cpu 가상화(완전 가상화, 하드웨어 지원 완전 가상화, 반가상화, 호스트 기반, 컨테이너 기반)	메모리 가상화 I/O 가상화
분석 기획의 특징 분석 기획시 고려사항	수학/통계 + 정보기술 + 도메인 지식 분석 대상 O X O 최 통 분석방법 X 솔 발 //최적화.통찰.솔루션.발견 데이터에 대한 고려/가치가 창출될 수 있는 적절한 활용 방안 및 활용가능한 유스케이스의 탐색
폭포수 모델(계획수립-요구분석-설계-구현-시험-적용-유지보수) 프로토타이핑 모델 반복점증형 모델 나선형 모델(폭포수+프로토타이핑)	KDD : 선정 - 전처리 - 변환 - 데이터마이닝- 해석 및 평가 CRISP-DM : 비즈니스 이해-데이터 이해-데이터 준비-모델링-평가 빅데이터 분석 방법론 ( 분석 기획 - 데이터 준비 - 데이터 분석 - 시스템 구현 - 데이터 평가 및 전개)
하향식 : 비지니스모델 캔버스, 외부참조모델 기반(산업별) 상향식
분석과제 관리영역(data complexity, size,speed,accuracy&precision,analytic complexity)
우선순위 고려요소(전략적 중요도,비즈니스 성과/ROI, 실행용이성)
		통계 분석 개요	기술/추론 모수/비모수
		인사이트 : 예리한 관찰력으로 사물을 환희 꿰뚫어 봄	시각화와 인사이트 : 삼찰(관찰,성찰,통찰)
사용 가능한 데이터 확인 연결 고리의 확인(공통 요소 찾기, 공통 요소로 변환, 탐색 범위 설정) 관계의 탐색	데이터 명세화(차원과 측정값), 데이터 구성 원리 ( 이벤트 기록으로서 접근, 객체 지향 관점에서 접근) 이상값 처리, 차원과 측정값 유형에 따른 관계 파악 시각화, 잘라보고 다르게 보기, 내려다 보고 올려다보기, 척도 조정
분석 대상의 구체화 분석과 시각화 도구 지표 설정과 분석	2차 탐색, 분석 목표에 따른 분석 기법
1. 내부에서 적용 2. 외부에 대한 설명, 설득, 시각화 도구 3. 인사이트의 발전과 확장
데이터 시각화의 중요성 시각 이해와 시각화 시각화 분류와 구분 빅데이터 시각화 영역
정보 디자인 프로세스 빅데이터 시각화 프로세스	데이터 수집-모든것을 읽기 - 내러티브 찾기-문제정의 -계층 구조 만들기-와이어프레임 그리기 - 포맷 선택-시각 접근 방법 결정
정보 구조화(수집, 분류, 배열, 관계 맺기) 정보 시각화 정보 시각표현 - 정보 표현을 위한 그래픽 요소(위치, 크기, 모양, 색, 명도, 기울기,질감) 시각정보 디자인 7원칙(시각적 비교 강화/인과관계/다중변수표시/조화/연관성과진실성/시간순이아닌공간순/정량성을 제거하지 말아라)	시각 시각화(막대, 누적 막대, 점그래프) 분포 시각화(원,도넛차트,트리맵,누적 연속 그래프) 관계 시각화(산점도,버블차트,히스토그램) 비교 시각화(히트맵, 체르노프페이스,스타차트,평행좌표계, 다차원척도법,공간시각화) 배경을 지워라-범례를 지워라-테두리를 지워라-색깔을 지워라-특수효과를 지워라-굵은글씨 지워라-라벨을 흐리게 처리-라벨을 직접 표시

[문제풀이] 제1과목 데이터 이해

문제	보기1	보기2	보기3	보기4	정답
데이터에 대한 설명으로 부적절한 것은?	데이터를 단순한 객체로서 가치뿐만 아니라 다른 객체와의 상호 관계 속에서 가치를 갖는 것으로 설명할 수 있다.	데이터는 그 형태에 따라 언어,문자등으로 기술되는 정량적 데이터와 수치, 기호, 도형으로 표시되는 정성적 데이터로 구분된다.	설문조사와 주관식 응답, 트위터나 페이스북, 블로그 등에 올린 글 등과 같은 정성 데이터의 경우 그 형태와 형식이 정해져 있지 않아 비정형데이터라고도 한다.	지역별 온도, 풍속, 강수량과 같이 수치로 명확하게 표현되는 데이터를 정량 데이터하고 한다.	2
DIKW에 대한 설명으로 적절한 것은?	지식은 근본 원리에 대한 깊은 이해를 바탕으로 도출되는 창의적 아이디어	정보는 상호 연결된 정보 패턴을 이해하고 이를 토대로 예측한 결과물	지혜는 데이터의 가공 및 상관관계간 이해를 통해 패턴을 인식하고 그 의미를 부여한 데이터	데이터는 존재형식을 불문하고 타 데이터와의 상관관계가 없는 가공하지 전의 순수한 수치나 기호	4
데이터베이스의 일반적인 특징, 부적절?	통합	저장	공용	변환되지 않는 데이터	4
데이터베이스의 일반적인 특성, 부적절 모두 ?	정보의 축적 및 전달 측면에서 대량의 정보를 일정한 형식에 따라 정보처리기기가 읽고 쓰고 검색할 수 있도록 하는 기계가독성과 검색가능성, 그리고 정보통신망을 통하여 원거리에서도 즉시 온라인으로 이용할 수 있는 원격조작성을 갖는다.	정보 관리 측면에서는 이용자의 정보 요구에 따라 다양한 정보를 신속하게 획득할 수 있고 원하는 정보를 적확하고 경제적으로 찾아낼 수 있다는 특성을 지니다.	정보 이용측면에서는 정보를 일정한 질서와 구조에 따라 정리 저장하고 검색 관리할수 있도록하여 정보를 체계적으로 축적하고 새로운 내용의 추가나 갱신이 용이하다.	정보 기술의 발전 측면에서 정보처리, 검색관리 소프트웨어, 관련 하드웨어, 정보 전송을 위한네트워크 기술 등의 발전을 견인할 수 있다.	2,3
빅데이터의 특징에 해당되지 않는 것?	규모의 증가	복잡성의 증가	단순성의 증가	가치의 증가	2
다음 설명은? 그림, 동영상, 로그, 센서 데이터 등 형태나 구조가 정형화 되지 않고 다양한 형식	정형	반정형	비정형	스트리밍	3
빅데이터가 기업에게 주는 가치가 아닌것?	혁신 수단 제공	경쟁력 강화	생상성 제고	환경 탐색	4
빅데이터가 만들어 내는 변화가 아닌것?	데이터의 질보다는 양	데이터의 사전 처리보다 사후 처리에 비중을 둠	새로운 것에 대한 발견법으로 상관관계보다 인과관계에 비중을 둠	조사방법으로서 표본조사보다 전수조사에 비중을 둚	3
커피를 사는 사람들이 탄산 음료도 많이 구매하는지를 알아보기 위해 사용되는 분석?	회귀분석	기계학습	유전알고리즘	연관규칙학습	4
구글이 제공하는 Ngram Viewer 서비스는 빅데이터 역할 중 무엇에 해당?	렌즈 역할	차세대 산업혁명에서 철이나 석탄의 역할	21세기의 원유	플랫폼	1
데이터 사이언스의 핵심 구성 요소는?	Analytics	IT	비즈니스 분석
데이터 사이언티스트의 요구 역량?	하드 스킬:빅데이터에 대한 이론적 지식, 분석 기술에 대한 숙련 소프트 스킬:통찰력 있는 분석, 설득력 있는 전달, 다분야간 협력(커뮤니케이션)
맞는 것?	빅데이터 과제의 주된 걸림돌은 비용이 아니라 분석적 방법에 대한 이해 부족이다.	분석을 다방면에 많이 사용하는 것이 경쟁우위를 가져다 주는 첫번째 요소	빅데이터 분석에서 가치 창출은 데이터의 크기에 의해 좌우	성과가 높은 기업들은 대부분 폭넓은 가치 분석적 통찰력을 갖추고 있다.	1
전략적 가치 기반 분석을 위해 고려해야 할 요소가 아닌 것은?	사업에 영향을 미치는 트렌드에 대해 큰 그림을 그려야 한다.	사업 성과를 견인하는 핵심요소에 집중	기존 성과를 유지하기 위해 필용한 것이 무엇인지에 주의	경쟁의 본질에 영향을 미치는 단계에까지 나아가야 한다.	3
틀린 것?	강력한 호기심은 데이터 사이언티스트의 중요한 특징	과학적 분석 과정에는 가정과 인간의 해석이 개입하지 않는다.	분석은 미세한 관점에서 접근할 때 큰 효과를 보기 어렵다.	뛰어난 분석적 리더들은 의사결정에서 과학과 직관을 혼합한다.	2
빅데이터 요소 기술 시각화	데이터 공유	처리	분석	시각화	4
빅데이터 분석, 기획 업무 중 프로젝트 계획 및 설계 단계에서 프로젝트 수행을 위한 예산, 소유기간 및 현재의 IT환경 등을 고려하여 작성하는 문서로 옳은 것?	빅데이터 요건 정의서	빅데이터 분석목표 정의서	As/Is-To/Be분석 문서	Work BreakDown Structure 설계문서	4
빅데이터 분석목표정의서에 작성되는 요소로 부적합?	테이블정보 및 메타 정보	과거의 빅데이터 분석 방법	데이터 수집의 난이도	분석목표에 부합된 분석기법과 기술	2
WBS 설계절차	데이터 분석과제 정의->데이터 준비,탐색->산출물 정리->데이터분석모델링,검증

[문제풀이] 제2과목 데이터 처리 기술 이해

문제	보기1	보기2	보기3	보기4	정답
ETL	Extract-Transformation-Load				1
ODS			Operational Data Store		3
데이터 모델링 기법				스타스키마-스노우플레이크스키마	4
데이터 웨어하우스의 특징	주제중심,영속성,통합성,시계열성				1
CDC 옳은 것은?	일괄 작업 중심	정보 시그템과 정보 시스템 간 통제 시그널 전송이 주목적	실시간 또는 근접실시간 데이터 통합을 목적	데이터웨어하우스구축에는 사용할 수 있으나, ODS 구축에는 사용할 수 없다.	3
EAI 옳은 것은	Point to Point 방식	메시지 기법만 사용할 수 있다.	웹 서비스 기반만을 사용할 수 있다.	Hub and Spoke 방식	4
비정형 데이터로 보기 어려운 것?	텍스트	스프레드시트	오디오	센서데이터	2
맞는 것?	하둡 분산 파일시스템은 작은 파일	GFS는 오픈 소스 프로젝트	데이터를 저장하고 관리하는데에는 관계형 데이터베이스만 있으면 된다.	하둡분산파일시스템을 구성하는데 중/저가 서버들이 주로 사용된다.	4
데이터베이스 솔루션 중 특성이 다른 것?	아파치 Hbase	구글 빅테이블	MySQL 클러스터	아마존 심플 DB	3
하이브에 대한 설명으로 맞는것?	관계형 데이터베이스 조회	모든 표준 ANSI SQL 지원	직접 코딩하지 않고 맵리듀스 작업을 수행	아마존 개발한 분산 병럴 처리 기술	3
SQL on 하둡	하둡과 하이브에서 처리 가능한 데이터보다 더 큰 데이터를 처리하기 위한 기술	데이터 웨어하우징 용도로 사용할 수 있는 데이터 분석 기술	클라우데라에서 개발한 임파라는 오라클 데이터베이스에 저장된 데이터를 처리할 수 있다.	SQL on Hadoop 원조 기술은 구글에서 개발한 빅테이블이다.	2
가상화	전가상화/반가상화 VMWare	현재 가상화는 CPU 자원만 지원	클라우드 컴퓨팅의 SaaS를 구현하기 필수 기술	전 가상화에서는 운영체제를 수정하지 않은 채 그대로 사용할 수 있다.	4

[문제풀이] 제3과목 데이터 분석기획

문제	보기1	보기2	보기3	보기4	정답
데이터 분석을 통한 가치 발굴에서 필요한 주요 요소가 아닌것?	Data	Hadoop	Analiytic Model	Analyst	2
분석 기획은 단기적으로는 ( 분석 과제 )를 도출하여 프로젝트화 한 후 관리를 수행하여 분석 결과를 도출 중장기적으로는 (분석 마스터 플랜 )를 수행하여 지속적인 ( 분석 마스터 플랜 ) 수행을 지원할 수 있는 가버넌스 체계를 수립
분석가가 가져야 할 주요 역량	문제에 대한 전문성 역량	수학/통계적 지식 등 분석 역량	프로그래밍 등 기술 역량	1,2,3 포괄하는 역량	4
데이터 분석 단계 모델링 태스크 중 모델 적용 및 운영방안 스텝의 주요한 산출물은?	알고리즘 설명서	모델 검증 보고서	모델 발전 계획서	프로젝트 범위 정의서	1
분석 주제 유형 중 문제를 잘 알고 있으면서 기존에 수행하고 있는 방법이 존재하는 경우에 해당하는 유형?	Optimization	Solution	Discovery	Insight	1
분석 과제를 도출하기 위한 방식은 문제가 주어진 경우 해답을 찾기 위하여 절차적으로 수행하는 ( 하향식 ) 방식과 문제의 정의 자체가 어려운 경우 데이터를 기반으로 탐색하고 이를 지속적으로 개선해나가는 방식인 ( 상향식 )로 분류된다.
비즈니스 모델 캔버스를 활용한 분석 기획 발굴 시에 탐색하는 주요 영역이 아닌것은?	경쟁자	업무	제품	고객	1
분석 프로젝트는 IT 프로젝트와 달리, 앞서 분석 방법론에서 살펴본 (폭포수) 방식 같은 초기 의도했던 결과에 안정적인 이관을 수행하는 것이 아니라, 도출된 결과의 재해석을 통한 지속적인 반복 및 정교화가 수행되는 경우가 대부부이므로 프로토타이핑 방식의 ( 애자일) 프로젝트 관리방식에 대한 고려도 필요.
분석 프로젝트 수행시 "Data, Business, 분석 등 다양한 영역의 사람들이 프로젝트에 참여하며, Project Sponser 및 향후 분석 결과를 활용할 User 등 다양한 사람들의 니즈를 고려해야 한다.라는 관리 포인트에 대한 부분을 고려해야 하는 영역은?	원가	이해관계자	범위	품질	2
빅데이터 특징 중 투자비용 측면의 요소가 아닌것은?	데이터 규모	데이터 다양성	데이터 속도	데이터 가치	4
분석 과제의 우선 순위 선정 메트릭스에서 일반적으로 데이터 분석 과제를 가장 먼저 추진해야 하는 영역?			시급성-현재, 난이도-쉬움		3
분석 가버넌스 체계의 주요 구성 요소가 아닌것?	시스템	데이터	비용	조직	3
데이터 가번너스 구성요소가 아닌것?	원칙	조직	프로세스	활동	4
분석 성숙도 모델 환경이 갖추어지고, 전사 차원에서 분석 관리, 공유, 전문 조직 운영	도입	활용	확산	최적화	3
기업 내 별도의 독립적인 전담 조직이 전략적 중요도에 따라 분석 우선순위를 정해서 추진할 수 있는 조직 구조?	집중형 구조	기능형	분산형	복합형	1
업무 최적화를 위한3가지	데이터 지연시간 줄이기	분석 지연시간 줄이기	의사결정 지연시간 줄이기
하향식	분석 요건 정의 -> 분석 요건 식별-> 프로세스 흐름 분석 -> 프로세스 분류
빅데이터의 특징에 해당되지 않는 것?	규모의 증가	복잡성의 증가	단순성의 증가	가치의 증가	3
그림, 동영상, 로그, 센서	정형	반정형	비정형	스트리밍데이터	3
차트와 데이터 사이의 관계등을 시각화	데이터 공유	데이터 처리	데이터 분석	데이터 시각화(Visualization)	4
빅데이터 분석,기획 업무 중 프로젝트 계획 및 설계 단계에서 프로젝트 수행을 위한 예산, 소요기간 및 현재의 IT 환경 등을 고려하여 작성하는 문서	빅데이터 요건 정의서	빅데이터 분석목표 정의서	As/Is -To/Be 분석	Work BreakDown Structure 설계문서	4
여러명의 사용자들이 컴퓨터에 저장된 많은 자료들을 쉽고 빠르게 조회, 추가, 수정, 삭제할 수 있도록 해주는 소프트웨어	Big Data	Database Management System	Database	Data	2
빅데이터의 분석의 활용분야(Use Case)로 적합하지 않은 것은?	빅데이터의 효율적인 수집 및 저장	고객이 구매한 상품의 선호도 분석	고객이 원하는 디지털 제품 및 서비스 제공방안 도출	제품의 생산 및 유통 과정의 효율성 제고	1
빅데이터 분석 목표 정의서에 작성되는 요소로 부적합한 것?	테이블 정보 및 메타 정보 등 데이터 정보 조사 결과	과거의 빅데이터 분석 방법 및 주요 기술	데이터 수집 난이도	분석목표에 부합된 빅데이터 분석기법과 기술	2
WBS 설계절차	데이터 분석과제 정의 -> 데이터 준비,탐색 -> 산출물 정리 -> 데이터 분석 모델링, 검증
장바구니 구매 패턴	Association Analysis				1
정형+비정형	빅데이터				1
빅데이터 주요 특징	Volume	Variety	Virtue	Value	3
3V가 아닌것?	Volume	Volatility	Variety	Velocity	2
빅데이터 특징	규모 증가	다양성 증가	복잡성 증가
알맞은 것	Volume - 대용량성 확보	Variety - 적응성 확보	Velocity - 실시간성 확보
옳지 않은 것?		실시간 처리가 중요하지 않다.			2
옳지 않은 것?		주로 텍스트 위주의 정형화된 데이터 집합			2
부적합한 것?		관리가 비교적 용이			2
옳지 않은 것?	ERP-비정형				1
적합하지 않은 것?				정형화	4
옳지 않은 것?				컴퓨터 생산기술의 발달	4
옳지 않은 것?	1980				1
가장 필요로 하는 인력?			데이터 분석가		3
참여 인력이 아닌?	현업 담당자	자바 개발자	Hive	R 모델러	2
데이터 분석가 역량	수학적 역량	전략적 역량	전문적 지식 역량	프로그래밍 역량	2
분석 시 필요한 태도	창의적 사고	논리적 사고	침착함	대범함	4
데이터 크기	bit -byte -KB -MB- GB-TB - PB-EB-ZB-YB (TPEZY)
공공 데이터 플램폼		data.go.kr
데이터 공개 장점			업무의 과중		3
옳지 않은 것?				개인차원 효용이 어렵다	4
빅데이터 주요 요소 기술	수집	저장	분석	분할	4
차트, 관계도, 그래프				시각화	4
데이터 처리 방법에 옳지 않응 것?			반드시 존재한다		3
추출, 변환, 적개		ETL
ETL 기능	도메인 생성
WBS			프로젝틑 계획
대용량 데이터 예측		빅데이터 분석 직무
데이터베이스 정의
데이터베이스 장점			중복된 자료의 맵핑을 이용하여 연관성을 쉽게 파악		3
데이터베이스 특징	stored	shared	unchanged	integrated	3
빅데이터 영향				기업 - 제품 차별화	4
빅데이터 활용가치			고객의 개인정보 파악		3
적합하지 않은 것?				비용이 아니다	4
정보의 주요 특징	균등성	정확성	적시성	관련성	1
정보의 주요 특징	정확성	적시성	관련	적당	비용가치(정보 산출의 가치가 비용을 넘어서지 말아야 함)
DIKW
빅데이터 분석에 대한 세부 계획			WBS
데이터 확보 계획 수립 절차	분석 목표 정의 -> 요구사항 도출 ->예산안 수립 -> 데이터 확보 계획 수립
데이터 분석 프로젝트 수행 과정	분석 과제 정의 -> 준비 및 탐색 -> 모델링 검증 -> 산출물 정리
빅데이터 분석 프로세스	요구사항 분석 -> 모델링 -> 검증 및 테스트 -> 적용
분석을 위한 예산 수립 업무 관련이 적은것?	데이터 확보 비용	거래처리 시스템 개발 비용	시스템 운영 예산	외부 컨설팅 비용	2
데이터마이닝 정의
데이터마이닝 기법에 해당되지 않는 것?	T-test	Decision Tree	k-means clustering	Text Mining	1
빅데이터 분석 프로세스 순서	문제인식-관련 요구 조사-모형화-자료수집-자료분석-분석결과 제시
빅데이터 분석 절차 순서	도메인 이슈 도출 - 분석 목표 수립 - 프로젝트 계획 수립 - 보유 데이터 자산 확인 - 분석 결과 시각화
분석 비용	인건비	하드웨어 구입 사용	산출물 관리 및 하드웨어 유지보수 비용	성과측정 자문료	3
복잡한 현상을 제어 가능한 변수들로 출려서 단순화 과정		모형화
제어 가능한 변수 선정		모형화
변수 선정				가능한 많은 수의 변수를 고려	4
도메인 이슈 도출 과정에서 작성되는 문서	빅데이터 요건 정의서
분석목표정의서			기획의도		3
비즈니스 모델	수익 창출 사업
비즈니스 모델의 적합성 판별 기준			수익성		3
컨설팅 관련 빅데이터 비즈니스 모델로 적합하지 않은 것?				소셜네트워크분석	4
SNA 링크	노드 -행위자 , 링크 - 우정, 조직력, 연대감
가공	Information
DIKW
데이터마이닝	지도(분류,회귀)비지도(클러스터링, 연관분석)
빅데이터 분석 과정	수집-저장-처리-분석-시각화-이용-폐기
데이터베이스 특징	Atomicity	Consistency	Isolation	Durability
빅데이터 용어 최조 정의 IBM
도메인 이슈 도출 : 개선사항을 도출하기 위해 분석하고자 하는 과제의 현황을 파악 분석하고 이를 통한 개선 과제 정의하면, 빅데이터 요건 정의서를 작성한다.
빅데이터 분석 목표 정의서 작성은 분석 목표 수립시 작성
크론바하 알파(Cronbach Alpha)값은 설문 문항 답변에 대한 신뢰도 평가
플랫폼
데이터 수집 비용은 프로젝트 계획 단계에서 수립
분석	PM	팀원		의사결정자
프로젝트 평가위원회의 구성인원	리더	참여위원	자문	검수위원
로드맵	비용배분-WBS-업무분장 계획 및 배문

[문제풀이] 제4과목 데이터 분석

문제	보기1	보기2	보기3	보기4	정답
서로 다른 성격의 프로그램	S-Plus	R	C	SAS	3
R의 특징	패키지의 사용을 통한 기능 확장	서버 프로그램을 이용해 설치하지 않고도 웹에서 사용	강력한 그래픽 기능	복잡한 행렬 계산을 빠르게 수행	2
	R-Studio
벡터 생성 코드 중 제대로 동작하지 않는 코드는?
반복 구문에 설명 중 옳은 것은?	for 구문은 괄호 안의 조건이 만족되어 있는 동안 이후의 구문을 반복한다.	while 구문은 반복되는 구문 내에서 반복변수 i를 변화시켜 주어야 한다.	for 구문이 반복되는 횟수는 실행시키기 전까지는 알 수 없다.	while 구문은 for 구문보다 더 빠르게 실행된다.	2
R의 데이터 형식으로 올바르지 않은 것은?	numeric	character	functional	logical	3
마트 생성을 편리하게 해주는 패키지	ggplot2	party	mart	reshape	4
key 값이 존재하는 object	vector	list	data.table	data.frame	3
data에 대한 전체적인 기초통계량을 보고자 할 때 함수	head	summary	inform	str	2
data에 포함된 변수의 이름과 결과 값의 일부인 첫 6줄을 볼 수 있는 함수?	head	summary	inform	str	1
hi라는 데이터에서 birth라는 칼럼의 평균을 알고자 할 때 명령어?	mean(hi$birth)
산점도(scatter plot)를 만들고 확인해 볼 점으로 옳지 않은 것?	두 변수 사이에 선형 관계가 성립	이상값 존재 유무	집단의 개수	인과관계 유무	4
단계적 변수 선택 방법이 아닌것?	전진선택	후진제거	순차적 방법	단계별	3
ARIMA 모형 차분이나 변환을 통해 나올 수 없는 모형	ARMA	AR	MA	RIM	4
분해시계열 시계열을 구성하는 요인이 아닌것은?	계절요인	불변요인	추세요인	순환요인	2
로지스틱회귀모형 설명	모수 추정을 위해 초기값 설정	예측변수는 모두 연속형이어야 한다.	연속형 반응변수에 대해서도 적용할 수 있다.	분류의 목적	4
의사결정나무분석에서 분류 기준 변수의 선택에 사용되는 기준이 아닌것?	일반화 분산	엔트로피 지수	F 검정통계량의 P값	지니 지수	1
역전파 알고리즘을 이용하여 모수를 추정	인공신경망	로지스틱회귀	혼한분포모형	랜덤포레스트	1
여러 분류기들의 결과를 종합하여 예측의 성능을 높이는 방법이 아닌것?	배깅	부스팅	다층신경망	랜덤포레스트	3
모형평가에 앞서 과적합 문제를 해결하기 위해 사용되는 방법이 아닌것?	부트스트랩	이익도표	홀드아웃	교차검증	2
오분류표를 통해 계산할 수 있는 평가지표가 아닌것은?	정분류율	특이도	향상도	재현율	3
R 함수 중 고객세분화의 목적으로 사용될 수 없는 함수	agnes()	nnet()	kmeans()	hclust()	2
EM 알고리즘에 대한 설명으로 틀린것?	최대가능도추정을 위한 수치적 방법	초기값 설정이 필요하다.	잠재변수의 도입	정규분포에 대한 모수 추정기법	2
해킹을 당하는 컴퓨터를 발견할 때 사용되는 데이터마이닝	혼합분포군집	인공신경망	로지스틱회귀	앙상블	1
지도학습	계층적군집	의사결정나무	신경망	서포트벡터	1
고차원의 데이터를 이해하기 쉬운 저차원의 뉴런으로 정렬하여 지도의 형태로 형상화하는 군집 분석 방법	의사결정나무	신경망	자기 조직화 지도	svc	3
연관성 분석 평가지표	지지도	오분류표	신뢰도	향상도	2
텍스트마이닝에 대한 설명으로 옳지 않은 것은?	특정 집단에 대한 반응	sales lead에 대한 정보 획득	타 브랜드에 대한 모니터링을 통해 경쟁 전략을 수립	다양한 언어에 같은 방법을 적용	4
텍스트마이닝의 어려운 점	해당언어에 대한 폭넓은 이해와 지식이 필요	keyword가 명확하지 않다.	insight를 얻기 힘든 경우가 많다.	활용하는데 한계가 많다.	1
감성분석에 대한 설명으로 맞지 않는 것	문장에서 사용된 긍정과 부정의 점수를 매긴다.	브랜드 평판의 추이 분석	긍정 단어사전과 부정 단어 사전이 필요	긍정사전과 부정사전은 모든 분야에서 공통적으로 사용할 수 있다.	4
자신의 커뮤니티와 다른 커뮤니티에 모두 연결이 높은 사람을 무엇이라고 하는가?	queen	inflencer	leader	boss	2
소셜 네트워크의 활용방안으로 옳지 않은 것은?	네트워크가 몇 개의 집단으로 구성되는지 알수 있다.	영향력 있는 고객을 알 수 있다.	시간의 흐름에 따른 변화를 알 수 있다.	고객이 다음번에 이탈여부	4

[문제풀이] 제5과목 데이터 시각화

문제	보기1	보기2	보기3	보기4	정답
시각적 이해의 위계 구도 상에서 인간의 경험이 본격적으로 개입되는 단계	데이터	정보	지식	지혜	3
시각과 인사이트 프로세스에 대한 설명 중 틀린 것 두개	통찰을 얻기 위해 살펴봐야할 대상은 외부와 내부(사람)의 두 가지다.	지혜는 개인화된 지식	분석 단계에서는 그래프를 이용하지 않고 수치 분석 기법 사용	통찰의 활용에는 프리젠테이션도 포함	1,3
계층형 구조를 만들 수 없는 것	경위도	YYYY-MM-DD	행정구역	일반 텍스트 데이터	4
데이터를 명세화하기 위한 개념 관계가 없는것	데이터형	로그 데이터	클래스	메서드	2
공간 데이터의 처리와 직접적인 관계가 없는 것 두개	코로플레스 지도	지오코딩	워들	vlook함수	3,4
시간에 따른 다차원 데이터의 변화를 직관적으로 살펴볼 수 있는 기법	트리맵	모션차트	산포도	피벗테이블	2
결과에 영향을 미치는 요인들 사이의 관계와 핵심 요인을 선별하는 통계적 분석 기법 두가지	요인 분석	상관분석	판별분석	주성분 분석	1,4
분석 및 지표에 대한 설명 중 맞는 것	빅데이터 분석에서는 표본데이터에 기반한 분석 모델링	결정 계수는 모델의 설명력을 의미	원본 데이터에서 여러 지표를 잘 추출하여 모델에 많이 반영할수록 설명력이 유의미하게 커진다.	지표간의 설명력에 대한 효과는 요인분석을 통해 확인해볼 수 있다.	2,4
통찰을 활용하는 방법 중 성격이 다른것	조기 경보 체계의 구축	설명력을 강화하는 변인의 추가	설명과 설득을 위한 스토리텔링 콘텐츠 제작	기존 모델에 대한 전면적인 재검토	3
인사이트의 발정과 확장 틀린것				복잡한 분석	4
틀린 것	데이터-원자재	생산자와 사용자 같게	지식은 다른 영역의 정보가 자기 조직화해 획득할 수 있다.	지혜는 자기 내면화한 지식	2
데이터 수집-모든것을 읽기 - 내러티브 찾기-문제정의 -계층 구조 만들기-와이어프레임 그리기 - 포맷 선택-시각 접근 방법 결정-정제와 테스트
LATCH (location, alphabet,time,category,hierarchy)
관계 시각화 구현			스캐터플롯		3
데이터를 시각화하는 이유	인사이트
시각화에 쓰이는 패키지	ggplot2
그래프의 x축과 y축을 지정하는 함수	aes
데이터가 분류유형이 많은 경우	선그래프	원그래프	히스토그램	점그래프	3
그래프의 내부 색상을 바꿔주는 옵션	fill
D3.js에서 scale 입력값의 범위 지정 함수	domain()
D3.js에서 축의 눈금 단위 지정 함수	ticks()
시각화 라이브러리 아닌 것	Gephi	jqPlot	D3.js	Flot	1
D3.js의 특징	항상 SVG 객체를 기반으로 동작	오페라브라우저	오픈소스	CSS활용	1
D3.js에서 시각화 요소의 위치 변경 속성	transform
히트맵 활용	분포 시각화

참고 문헌

[논문]

없음

[보고서]

없음

[URL]

없음

문의사항

[기상학/프로그래밍 언어]

sangho.lee.1990@gmail.com

[해양학/천문학/빅데이터]

saimang0804@gmail.com

[강릉원주대 대기환경과학과] 2015년 1학기 전선 지구환경융합과학 과제물

shlee1990 — Thu, 5 Jan 2023 07:47:25 +0900

정보

업무명 : 2015년 1학기 전선 지구환경융합과학 과제물
작성자 : 이상호
작성일 : 2023.01.05
설 명 :
수정이력 :

내용

[특징]

지구환경융합과학 과제물에 대한 이해를 돕기위해 작성

[목차]

CCD 현상
CCD 현상의 실태
CCD 현상의 가설
CCD 현상의 피해

[활용 자료]

인터넷 기술조사

[과제물 작성 요령]

과제물 작성 계획 세우기
- 과제물 작성을 위하여 계획 및 준비, 글쓰기, 제출과 같이 3 단계로 구성
- 1 단계는 우선 계획 및 준비로서 공고 확인, 제출 기간 확인, 과제물 문제를 파악
- 2단계의 경우 글쓰기로서 자료 검색 수집 및 개요 작성 그리고 본문 쓰기 및 수정
- 끝으로 제출 마감일뿐만 아니라 파일 용량 검사 및 온라인시스템 제출
과제물 문제 파악 요령
- 과제물 문제에서 교수님의 지시사항을 정확히 간파하여 작성
- 특히 제출 파일의 양식/용량 및 스타일 형식 그리고 작성 분량에 유의
나만의 글쓰기 전략
- 앞서 작성 계획에서와 같이 단계별로 수행이 필연
- 추가로 각 과제물마다 한글 또는 워드 양식에서 각자만의 스타일을 바탕으로 글의 내용 작성
- 또한 각종 인터넷 검색 및 도서를 참조하여 내용을 제시할 뿐만 아니라 그에 따른 판단의 근거에 대한 명확한 인용 및 출처가 정확하게 표시
학술 검색을 위한 유용한 방법
- 인터넷은 1950대에 컴퓨터의 개발과 더불어 너무 많은 정보의 바다에서 살고 있기 때문에 자신에게 필요한 정보 발굴 능력 요구
- 인터넷 검색이 익숙하지 않을 경우 네이버 검색을 추천하고 익숙하면 구글 검색이 유용
- 그러나 일반적으로 네이버 또는 구글로 검색할 경우 다수의 블로그에서 중복되는 정보를 확인할 수 있고 이러한 정보들은 대부분 복사 붙여넣기로 인해 남용되고 있는 실정
- 따라서 이 보다는 전 세계 검색엔진 2위를 차지한 Yahoo! JAPAN (https://www.yahoo.co.jp)에서 검색하여 구글 번역할 경우 원하는 정보를 쉽게 얻음
- 연구 보고서 또는 SCI/SCIE 논문을 보기 위해서 대학교에서 저널을 구독하는 것이 일반적이나 모든 저널을 구독하기에는 상당한 경제적 부담이 되기 때문에 SCI-HUB (https://sci-hub.tw/)을 통해 보는 것을 추천

[사용법]

과제물 서식을 바탕으로 작성

[사용 OS]

Windows 10

[사용 언어]

파워포인트 365

과제물

[토의사항]

CCD현상에 대한 가설의 타당성여부 조사 $\rightarrow$ 대기, 화학, 생물 관점에서의 토의 $\rightarrow$ 가설에 대한 적정성
CCD현상이 계속 진행하였을 때의 문제점은 무엇이 있는지에 대해 토의
우리가 현시점에서 할 수 있는 것들에 대해 토의

[CCD 현상]

꿀벌의 폐사 $\rightarrow$ 군집붕괴현상
군집 붕괴, 벌떼 폐사로 번역되는 CCD는 먹이를 구하러 간 벌들이 사라지면서 벌통에 남아있던 여왕벌이나 애벌레들이 떼죽음을 당하는 현상

[CCD 현상의 실태]

2006년 11월 미국 플로리다 주에서 발생한 의문의 꿀벌 실종 사건 (최초 사례)

서양의 CCD현상 실태

[CCD 현상의 가설]

휴대전화 전자파 : Cell phones and radiation
유전자 재조합 식물 : Genetically modified organism
농약 살충제 : Pesticides
바이러스 : Virus
지구 온난화 : Global Warming
자기장 : magnetic field

지구 자기장에 따른 꿀벌과의 관계

가상 꿀벌 나침반의 magnetoreceptor의 단면

자기장의 크기에 따라 꿀벌의 의사소통수단인 춤을 표현

일정한 자기장에서 꿀벌이 되돌아 올려는 제어능력이 벌집과의 거리가 멀어질수록 계속해서 감소함

지구의 대기권 외에 양성자 플럭스 강도는 꿀벌들의 귀소능력을 감소함

지구의 자기권에서 변화와 벌집과의 거리에 따른 꿀벌들이 되돌아오는 비율 (귀소본능 비율)을 의미
- 즉 자기장 강도에 따라 귀소본능 비율의 설명력은 88~92%를 의미함 (결정계수 참조)

[CCD 현상의 피해]

지구 온난화에 의한 꿀벌 피해

지구온난화 현상
- 지구 표면의 평균온도가 상승하는 현상이다.
- 땅이나 물에 있는 생태계가 변화하거나 해수면이 올라가서 해안선이 달라지는 등 기온이 올라감에 따라 발생하는 문제를 포함

지구온난화 원인

꿀벌 주요 활동
- 꿀샘에서 화밀 (단맛이 나는 끈끈한 액체 화밀: 꽃꿀)을 분비하여 곤충이나 새를 유인하고 이때 꽃가루를 묻게 하여 꽃가루를 멀리 퍼뜨림
- 벌이 꿀을 채집하여 수분 공급 (수민활동)

수밀 활동

밀원식물 성장하기에 좋은 조건
- 일광 : 광합성에 의해 많은 영양분 제고, 충분한 유밀이 이루어지게 된다.
- 온도 : 낮에는 온도가 높고 밤에는 저온으로 일교차가 큰 지역의 꽃들이 유밀이 잘되며 향기가 좋아진다.(주간 27 ℃ ~30 ℃, 야간 15 ℃ 내외 일 때 유밀 잘됨)
- 습도 : 습도가 높으면 수분이 많이 축적되어 화밀이 다량의 수분을 함유하여 당분 함량이 적어지며 너무 낮으면 화밀의 분비량 감소.
- 토양 : 석회분이 많은 토양이 산성토양보다 유밀이 잘된다.

직접적인 꿀벌 피해
- 지구온난화의 기온상승 영향으로 유밀이 잘 되지 않고, 강수량의 증가로 수분이 너무 높아짐 $\rightarrow$ 화밀 분비량 감소로 인한 꿀벌 먹이 감소
- 따뜻한 겨울의 지속으로 원돌 꿀벌 봉군의 불안정 초래 $\rightarrow$ 봄으로 착각하여 아무 수확 없이 돌아온다 꿀벌들 지침
- 고온, 저온, 홍수, 가뭄 등과 같은 이상기후 증가 현상반복으로 꿀벌들의 스트레스 증대와 번식장애로 개체수가 줄어 들고 있다.
- 예외 상황에서 분봉을 하는 경우
  - 일반적으로 분봉은 최종적으로 종의 번식 생존을 의미
  - 그러나 최근에 지구 자기장 및 지구온난화, 서식지 감소로 인해 꿀벌에게 위협적인 환경 변화가 발생 $\rightarrow$ 하기 때문에 있다고 볼 수 있다.

서식지감소에 의한 꿀벌 피해

서식지 감소
- 인류 생존을 위해 농경지 확보를 위한 산지개간
- 목재생산, 가축사육
- 연료채취
- 본격적으로 산업화 도시화 가속되면서 산림파괴 가속

서식지 감소로 인한 피해
- 서식지 감소로 여러 생물종이 멸종위기, 멸종
- 꿀벌들의 먹이인 꿀과 꽃가루를 제공해주는 여러 식물들이 점점 감소

참고 문헌

[논문]

없음

[보고서]

없음

[URL]

없음

문의사항

[기상학/프로그래밍 언어]

sangho.lee.1990@gmail.com

[해양학/천문학/빅데이터]

saimang0804@gmail.com