패스트캠퍼스 환급챌린지 5일차 미션(2월 5일): 15개 프로젝트로 실무까지 끝내는 Dart & Flutter 앱 개발 강의 후기

그러면 지금까지 배운 Dart 문법을 활용해서 간단한 가위바위보 게임을 만들어보자. 조건문 예제 중에 가위바위보 만한게 없다.

import 'dart:convert';
import 'dart:io';
import 'dart:math';

void main() {
  print('가위, 바위, 보 중 하나를 정해서 입력해주세요.');
  final String userInput = stdin.readLineSync(encoding: utf8) ?? 'Error';

  const selectList = ['가위', '바위', '보'];
  final cpuSelect = selectList[Random().nextInt(3)];
  print('컴퓨터의 선택: $cpuSelect');
  print(getResult(userInput, cpuSelect));
}

String getResult(String userInput, String cpuInput) {
  String result = '';
  String cpuWin = "CPU가 승리했습니다!";
  String userWin = "Player가 승리했습니다!";
  String draw = "비겼습니다.";

  switch(userInput) {
    case '가위':
      if (cpuInput == '바위') {
        result = cpuWin;
      } else if (cpuInput == '가위') {
        result = draw;
      } else {
        result = userWin;
      }
    case '바위':
      if (cpuInput == '가위') {
        result = userWin;
      } else if (cpuInput == '바위') {
        result = draw;
      } else {
        result = cpuWin;
      }
    case '보':
      if (cpuInput == '가위') {
        result = cpuWin;
      } else if (cpuInput == '바위') {
        result = userWin;
      } else {
        result = draw;
      }
  }
  return result;
}

이렇게 간단하게 switch-case, if-elseif-else문을 활용해서 가위바위보 로직을 완성할 수 있고, 처음 보는 것은 사용자의 표준 입력을 받을 때 사용하는 stdin.readLineSync() 메서드, 컴퓨터의 선택을 고를 때 사용하는 Random().nextInt(n)이다. 잘 기억해두자.

이렇게 잘 작동하는 것을 확인할 수 있다.

 

이제 적당한 프로그램도 만들었겠다, Flutter에 대해 본격적으로 알아보자.

우선 기본 개념 중에 위젯(Widget)이라는게 있다. 이건 Flutter에서 UI를 구성하는 기본 단위이고, 웹 FE 개발에서의 '컴포넌트'와 비슷한 개념이라고 할 수 있다. 이 위젯을 레이아웃 안에서 어떻게 구성하면 되는지 알려주는 간단한 디자인 가이드도 있고, 이미 SDK 안에서나 오픈소스에서나 많은 위젯들이 구현돼있어서 수려한 UI를 가진 웹 / 앱 / 프로그램을 빠르게 만들어낼 수 있다.

 

위젯 트리는 위젯들 간 부모-자식 관계를 가질 때 나타낼 수 있는 트리 구조로, 리액트에서 컴포넌트 트리랑 비슷한 개념이라고 할 수 있다.

강의 들으면 들을 수록 이게 웹 개발 강의인지 웹 개발 강의인지 헷갈리지만 뭐 괜찮다. 친숙한 개념이 마구 등장해서 빠른 속도로 학습할 수 있기 때문이다.

 

그리고 Stateless Widget / Stateful Widget은 각각 정적인 위젯과 상태를 활용하는 동적인 위젯을 말한다.

 

이제 Flutter 기초를 다루기 위한 프로젝트를 생성해주고, main.dart를 싹 비워서 텅 빈 main함수 안에 코드를 작성해보자.

우선 Flutter에서 앱을 실행할 때는 runApp()이라는 함수를 활용한다.

이 runApp 함수는 Material Design과 Cupertino Design에서 제공하는데, 이 둘의 차이점은 다음 글에서 다뤄보겠다.

일단 예제에서는 Material Desgin을 선택했다. 완성된 예제 코드는 아래와 같다.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: SafeArea(
        child: Text(
          "Hello, Flutter",
          style: TextStyle(
            color: Colors.black,
          ),
        ),
      ),
    ),
  ));
}

그러면 이렇게 MaterialApp()이라는 생성자 안에 home이라는 프로퍼티를 갖는 객체를 인자로 넘기고, 또 home 프로퍼티는 Scaffold()라는 생성자를 갖는 것을 볼 수 있다.

이 MaterialApp은 리액트로 치면 main.js이고, Scaffold는 app.js에 해당한다.

Scaffold는 Viewport를 담당하고, body 프로퍼티에 우리가 원하는 위젯을 삽입해줄 수 있다.

예제에서는 위젯 Text를 삽입해보았다. 이 때 아무런 스타일을 주지 않으면 보이지 않게되니, 글자 색상이라도 꼭 지정해주자.

그러면 아래와 같이 플러터 앱이 잘 빌드되어서 시뮬레이터 상에 띄워지는 것을 확인할 수 있다.

Hello Flutter!

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://bit.ly/48sS29N