ram2 🚗

🚨 이슈

책을 따라하다 보니, 버전이 맞지 않아서 그렇구나 하고 넘어갔던 부분 중, 그래서는 안되는 부분이 있었다.

책에서 storyboard를 언급하고, 이를 사용하는데, 생각보다 중요한 역할을 하고 있었다.

이 부분은 처음 프로젝트를 생성할 때, User interface 설정을 'SwiftUI''가 아닌, 'Storyboard'로 설정해야 했다.

그렇게 하니, 이름은 조금 다르지만, storyboard를 사용할 수 있었다 !

💻 문법 정리

아웃렛 변수 (Outlet Variable)

객체에 대한 속성을 지정할 때 연결

@IBOutlet weak var lblHello: UILabel!

@IBOutlet : @IBOutlet으로 정의된 변수를 아울렛 변수라고 부른다.

• IB는 Interface Builder의 약자이며, @IB로 시작되는 변수나 함수는 인터페이스 빌더와 관련된 변수나 함수라는 것을 의미.
• @IBOutlet은 객체를 소스 코드에서 참조하기 위해 사용하는 키워드.
• 주로 색상, 크기, 모양, 선의 두께, 텍스트 내용 등 객체의 속성 제어에 사용됨.

var lblHello : 변수를 선언할 때 var 키워드 사용. 그 뒤에 변수 이름을 지정하여 선언한다.

UILabel! : 선언하고자 하는 변수 타입을 나타냄.

• 위 코드에서는 레이블 객체에 대한 변수를 선언하므로 UILabel 클래스 타입 선택. (UI=User Interface)

strong / weak : 아웃렛 변수를 추가할 때 나타나는 팝업 창의 'Storage' 에서 선택할 수 있음.

• 메모리 회수 정책을 나타내는 키워드
• 일반적으로 객체를 참조하기 위한 아웃렛 변수는 strong 사용. (default)
• weak는 변수 정의 앞에 추가된다.
• strong으로 선언된 변수는 다른 곳에서 참조하고 있는 경우, 메모리에서 제거되지 않지만, weak는 다른 곳에서 참조하고 있더라도 시스템이 임의적으로 메모리에서 제거할 수 있음.
• 메모리 관리 이슈 때문에 두 가지 정책을 사용.
  • strong으로 선언된 변수끼리 상호 참조하는 일이 생길 경우, 앱이 종료되기 전까지 메모리에서 제거되지 않기 때문에 메모리 누수 발생.
  • 이런 경우, 둘 중 하나를 weak로 지정하면, 시스템에서 임의 제거가 가능하므로 상호 참조할 때도 사용하지 않는 경우에는 메모리 삭제될 수 있음.

액션 함수 (Action Function)

객체에 이벤트를 넣고 싶을 때 연결

@IBAction func btnSend(_ sender: UIButton) {
        lblHello.text = "Hello, " + txtName.text!
    }

@IBAction : @IBAction으로 정의된 함수를 액션 함수라고 부른다.

• 객체의 이벤트를 제어하기 위한 키워드 이다.
• 버튼을 누르거나, 피커가 선택되는 등 특정 객체에서 원하는 이벤트가 발생했을 때 정해진 작업을 실행하기 위해 사용.

func btnSend : 함수를 선언할 때 func 키워드를 사용해서 선언한다.

(_ sender: UIButton) : 액션 함수가 실행되도록 이벤트를 보내는 객체. 

• 여기에서는 버튼 객체에서 이벤트가 발생했을 때 해당 액션 함수를 실행시킬 것이므로 UIButton 클래스 타입 선택.

lblHello.text : 레이블 객체가 가지고 있는 속성 중 텍스트 내용을 의미하는 속성.

txtName.text! : 텍스트필드 객체가 갖고 있는 속성 중 텍스트 내용을 의미하는 속성.

• 끝에 붙는 !는 옵셔널 변수의 강제 언래핑을 의미
• 스터디에서는 !를 사용하지 말라고 했다...

📍 swift에서는 문장 끝에 ';' 새미콜론을 붙이지 않는다. 하지만 붙인다고 해서 에러가 나진 않는다 ^^

📍 상수와 변수, 함수, 메서드의 이름 지정 규칙은 다음과 같다.

• 숫자로 시작할 수 없음
• 예약어나 키워드로 등록된 단어는 이름으로 사용할 수 없음
• 이름에서 어떤 역할인지 알 수 있어야 함.
• 명사+동사 또는 전치사로 이루어진 단어를 연결해서 사용
• 클래스의 이름은 대문자로 시작
• 변수, 상수, 메서드는 소문자로 시작

이로써 첫째 마당 끝 !!

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var lblHello: UILabel!
    @IBOutlet weak var txtName: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    
    @IBAction func btnSend(_ sender: UIButton) {
        lblHello.text = "Hello, " + txtName.text!
    }
}

📱 결과

🍎 정리

swift를 하면서 가장 놀랐던 점 중 하나는, 변수와 함수를 추가하는 방식이었다.

Storyboard에서 객체를 끌어 코드 편집기로 연결하면, 자동으로 일부 코드가 생성된다.

또한 이름과 Connection, type을 지정할 수 있다는 것...

굉장히 신선하면서도 충격적이면서도 편리했다. 약간 재미있기도 했다..🫠

Swift에 대하여

swift는 ios, macOS, watchOS, tvOS의 앱 개발을 위한 프로그래밍 언어이다.

C와 Objective-C 개발과 비슷하게 느낄 수 있다.

swift는 C와 굉장히 비슷하다. 왜냐! C의 기본적인 type들을 제공하기 때문이다.

integers -> int
floating-point -> Double, Float
Boolean -> Bool
textual data -> String
Collection Types -> Array, Set, Dictionary

swift는 C처럼 변수를 사용하여 값을 저장한다. 여기에는 Constants가 있는데, swift에서의 constants는 c보다 더 강하다.

constants는 본래 값이 변하지 않는 변수로 이해하면 되는데, 이 constant 변수는 swift에서 코드를 더 안전하고 명확하게 해준다. 

Tuple은 value들을 그룹화 하여 전달, 생상할 수 있으며 여러 value들을 함수로부터 return 해야할 때 사용할 수 있다.

다음은 swift의 가장 강력한 powerful한 특징이다. 바로 Optional이다. 이는 값이 있으면 값을, 없다면 nil을 사용한다. 이 타입은 클래스 뿐 아니라 모든 유형에 대해 사용할 수 있다. 

swift는 type-safe 언어이다. 즉, 우리가 짠 코드에서 잘못된 타입을 사용하면 이에 대한 경고를 주어 인지하게 해준다. 

그 예로, 일반 String 변수에 optional string 변수를 사용할 때 오류를 발생시킨다.

Constants and Variables

Constant와 variable의 이름을 지을 때는 해당 값과 비슷하게 정하는 것지 좋다.

Constant(상수)는 일단 설정되면 변경할 수 없지만, Variable(변수)는 나중에 다른 값으로 설정할 수 있다.

Constants와 Variable을 사용하기 위해서는 사용 전에 선언 해야 한다. 상수와 변수는 각각 선언에 사용하는 키워드가 다르다.

정리하면 다음과 같다.

const -> let
variable -> var

변수 선언의 예를 보면 이러하다. (공식 문서에서 제시한 예시이다.)

let maximumNumberOfLoginAttempts = 10 // 최대값이 변경되지 않는다.
var currentLoginAttempt = 0 // 초기 값을 설정한다.
var x = 0.0, y = 0.0, z = 0.0 // 이렇게 한 줄에 구분해서 선언할 수 있다.

type annotations

상수나 변수를 선언할 때 type annotiation을 사용하여 어떤 유형의 값을 저장할 수 있는지 명확하게 할 수 있다.

다음과 같이 welcomMessage에 String 변수가 들어갈 수 있음을 지정하는 것이다. 여기에서 ':' 즉 콜론은 ~의 유형이다 라는 의미를 나타낸다.

var welcomeMessage: String // String value만 저장할 수 있다.

welcomeMessage = "Hello" // 다음과 같이 String 값을 에러 없이 저장할 수 있다.

var red, green, blue: Double // 이렇게 콤마로 구분하여 한 줄에 선언할 수 있다.

Naming Constants and Variables

이제 Step 6 !!!

지금까지 우리가 만든 앱은, next 버튼을 누르면 이전에 나왔던 단어를 볼 수 없었다.

그래서 이번 단계에서는 'Like' 버튼을 눌러, 원하는 단어를 기억해보려고 한다.

이번 목표는 다음 화면과 같다.

Add the business logic

MyAppState 에서 다음과 같이 코드를 수정해보자.

lib/main.dart

// ...

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();

  void getNext() {
    current = WordPair.random();
    notifyListeners();
  }

  // ↓ Add the code below.
  var favorites = <WordPair>[];

  void toggleFavorite() {
    if (favorites.contains(current)) {
      favorites.remove(current);
    } else {
      favorites.add(current);
    }
    notifyListeners();
  }
}

// ...

• 지금 우리는 favorites 라고 불리는 property를 MyAppState에 추가한 것이다. 이 property는 빈 리스트 [] 로 초기화된다.
• 또한, generics를 사용하여 목록에 단어쌍인 <WordPair>[]만 포함할 수 있도록 지정한 것이다. 이는 우리 앱을 더 강력하게 만드는 데 도움을 주는데, Dart가 WordPair 이외의 것을 추가하려고 할 때 우리 앱을 실행하는 것조차 거부하기 때문이다. 
  즉, WordPair 이외의 것은 추가하지 못하도록 하는 것이다. 이렇게 하면, favorites 목록을 통해 우리가 원하는 개체(ex. null)가 숨겨질 수 없음을 알 수 있다.
  List 대신 Set을 사용해도 된다. Set은 []가 아닌, {}을 통해 표현한다.
• 또한, toggleFavorite() 메소드를 추가할 수 있는데, 이는 만약 favorites 리스트에 현재 단어가 있는 경우 이를 없애거나, 만약 리스트에 없다면 추가할 수 있다. 이 두 경우, 코드는 notifyListerners();를 호출해야 한다.

Add the button

이제 좋아요 버튼을 만들어서 'Next' 버튼 왼쪽에 만들어줄 것이다. 버튼을 Next 옆에 두기 위해서는 Row 위젯이 필요하다.

먼저 현재 존재하는 버튼을 Row로 감싼다.

MyHomePage의 build()메소드로 가서, ElevatedButton 위에 커서를 두고 Refactor 메뉴를 열어 Wrap with Row를 선택한다.

이를 저장하면, Column을 적용했을 때와 비슷하게 children이 왼쪽에 치우져진 것을 확인할 수 있다. (Column은 위로..!)

이를 우리가 원하는 모양으로 수정하기 위해서는 Column에서 한 것과 비슷하게 center를 맞춰주면 된다.

Row에서는 mainAxisAlignment를 통해 맞출 수 있다.

이를 적용한 코드이다.

lib/main.dart

// ...

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();
    var pair = appState.current;

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BigCard(pair: pair),
            SizedBox(height: 10),
            Row(
              mainAxisSize: MainAxisSize.min,   // ← Add this.
              children: [
                ElevatedButton(
                  onPressed: () {
                    appState.getNext();
                  },
                  child: Text('Next'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

// ...

다시 Row를 적용하기 전으로 돌아간 것을 볼 수 있다. 즉, 센터가 맞춰진 것을 확인할 수 있다.

이제, 우리는 Like button을 추가해서 이를 toggleFavorites()와 연결할 것이다.

이를 위해, 코드랩에서는 다음과 같이 직접 도전해보길 권장하고 있다.

모두 직접 한 번 해보길..!

• MyHomePage에 버튼을 추가한다.
• ElevatedButton.icon()을 사용한다.
• build 메소드의 가장 윗 부분에 word pair가 favorite으로 선택됐는지의 여부에 따라 적절한 icon을 선택한다.
• SizedBox를 사용해서 두 버튼 사이의 여백을 둔다.

코드랩에서 제공한 코드는 이러하다

lib/main.dart

// ...

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();
    var pair = appState.current;

    // ↓ Add this.
    IconData icon;
    if (appState.favorites.contains(pair)) {
      icon = Icons.favorite;
    } else {
      icon = Icons.favorite_border;
    }

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BigCard(pair: pair),
            SizedBox(height: 10),
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [

                // ↓ And this.
                ElevatedButton.icon(
                  onPressed: () {
                    appState.toggleFavorite();
                  },
                  icon: Icon(icon),
                  label: Text('Like'),
                ),
                SizedBox(width: 10),

                ElevatedButton(
                  onPressed: () {
                    appState.getNext();
                  },
                  child: Text('Next'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

// ...

이렇게 하면, 다음과 같은 결과를 얻을 수 있다!!

이제 step 6이 끝났다!!!

다음 스텝에서는 우리가 좋아요 한 단어가 무엇인지를 보여주도록 할 예정 !!

전체 코드를 첨부한다 !

lib/main.dart

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: MaterialApp(
        title: 'Namer App',
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();

  void getNext() {
    current = WordPair.random();
    notifyListeners();
  }

  var favorites = <WordPair>[];

  void toggleFavorite() {
    if (favorites.contains(current)) {
      favorites.remove(current);
    } else {
      favorites.add(current);
    }
    notifyListeners();
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();
    var pair = appState.current;

    IconData icon;
    if (appState.favorites.contains(pair)) {
      icon = Icons.favorite;
    } else {
      icon = Icons.favorite_border;
    }

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BigCard(pair: pair),
            SizedBox(height: 10),
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                ElevatedButton.icon(
                  onPressed: () {
                    appState.toggleFavorite();
                  },
                  icon: Icon(icon),
                  label: Text('Like'),
                ),
                SizedBox(width: 10),
                ElevatedButton(
                  onPressed: () {
                    appState.getNext();
                  },
                  child: Text('Next'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class BigCard extends StatelessWidget {
  const BigCard({
    Key? key,
    required this.pair,
  }) : super(key: key);

  final WordPair pair;

  @override
  Widget build(BuildContext context) {
    var theme = Theme.of(context);
    var style = theme.textTheme.displayMedium!.copyWith(
      color: theme.colorScheme.onPrimary,
    );

    return Card(
      color: theme.colorScheme.primary,
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Text(
          pair.asLowerCase,
          style: style,
          semanticsLabel: pair.asPascalCase,
        ),
      ),
    );
  }
}

지난 스텝까지 잘 따라왔다면 다음과 같은 결과가 나왔을 것이다.

하지만 모두 느끼듯, 현재는 패딩도 맞지 않고, 우리가 중요하게 보여줘야 할 데이터인 word가 한 눈에 들어오지 않는다.

우리는 사용자가 느끼기에 조금 더 쉽게, 원하는 정보를 얻을 수 있도록 해야한다. 

그래서 이번 스텝에서는 이러한 시각적인 요소(디자인) 에 조금 신경을 써보려고 한다.

코드랩에서 제시한 다음 우리의 목표는 이 이미지와 같다.

Extract a widget

현재 우리 코드에서는 word pair를 다음과 같이 나타내고 있다.

Text(appState.current.asLowerCase)

이 코드를 조금 더 복잡하게 바꿔보려고 한다. 이 코드를 별도의 위젯으로 빼는 것이 좋다고 한다. 

이처럼 UI의 각 요소에 대해 별도의 위젯을 갖는 것은 Flutter에서 코드의 복잡성을 관리하는 중요한 방법이다. 

(+ 내 경험에 비추어보면, 이를 따로 위젯으로 빼서 만들어두면 나중에 또 쓰일 때 다시 코드를 짜거나, 이전 코드를 찾아 복붙하는 일을 하지 않아도 된다. 또한, 수정사항이 있을 때도 쉽게 찾아서 수정할 수 있다. 그래서 작은 단위로 위젯을 만드는 것을 추천한다 !!)

물론 Flutter에서는 위젯을 extract 하기 위한 도구가 있지만, 위젯을 사용하기 전에 extract되는코드가 필요한 것에만 접근하는지를 확인해야 한다. 우리 코드를 예로 보면, 현재 appState에 접속하지만, 우리가 원하는 정보는 현재 단어 쌍만 알면 되는 것이다.

그래서 이제  MyHomePage  위젯의 코드를 다음과 같이 바꿔보자..!!

lib/main.dart

// ...

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();  
    var pair = appState.current;                 // ← Add this.

    return Scaffold(
      body: Column(
        children: [
          Text('A random AWESOME idea:'),
          Text(pair.asLowerCase),                // ← Change to this.
          ElevatedButton(
            onPressed: () {
              appState.getNext();
            },
            child: Text('Next'),
          ),
        ],      // ← 7
      ),
    );
  }
}

// ...

이제 Text 위젯은 더이상 appState를 언급하지 않아도 된다.

그리구, 이제 Refactor 메뉴를 통해 다음과 같이 위젯 extract를 해볼 것이다.

두 가지 방법이 있다.

1. refactor 하고 싶은 위젯에서 우클릭 -> Refactor 메뉴를 선택 -> "BigCard" 입력 -> 엔터

2. Move your cursor to the piece code you want to refactor (Text, in this case), and press Ctrl+. (Win/Linux) or Cmd+. (Mac). (나만 헷갈렸나.. Cmd랑 .을 같이 누르면 된다..!!!)

이후 방법은 위 영상을 따라하면 된다 ! 

이처럼 extract widget 하는 방법을 잘 따라했다면, 다음과 같은 클래스가 하나 생성됐음을 확인할 수 있다 !

// ...
class BigCard extends StatelessWidget {
  const BigCard({
    Key? key,
    required this.pair,
  }) : super(key: key);

  final WordPair pair;

  @override
  Widget build(BuildContext context) {
    return Text(pair.asLowerCase);
  }
}
// ...

이제 이 refactoring을 통해 앱이 어떻게 작동하는지 확인해볼 것이다.

Add a Card

이제 우리가 목표라고 했던 그 화면을 기억 하는가...?

이 이미지를 보면 vastweb이 파란색 카드 안에 있는 것을 확인할 수 있다.

이제 카드를 만들어볼 것이다 !

아까 사용했던 refactor 메뉴를 이용할 것인데, 이번에는 extract 하지 않고, Wrap with Padding을 해볼 것이다.

위에서 언급한 두 가지 방법보다 내가 자주 사용하는 방법을 잠깐 언급해보려 한다.

refactor 메뉴를 불러오는 또 다른 방법은 vscode 좌측에 있는 전구 아이콘을 누르는 것이다.

이렇게 전구 아이콘 -> Wrap with Padding 을 선택하면, 자동으로 Padding이 위젯을 감싸는 것을 볼 수 있다.

그리고, Padding 크기를 8.0 -> 20 으로 바꿔준다.

이제, 위에서 만든 Padding 위젯을 Card 위젯으로 감싸줄 것이다. 즉, Padding 위젯의 상위 위젯으로 Card 위젯을 만드는 것이다.

padding 옆에 있는 전구 아이콘을 눌러서 (위에서 언급한 두 가지 방법을 사용해도 된다.) Wrap with widget...을 선택한다.

그리고, 만들어진 widget 텍스트를 지우고, Card를 입력한다. 그렇게 하면 빨간 줄도 사라질 것이다 !

중간점검을 해보자..!

여기까지 잘 따라 왔다면 다음과 같은 화면을 볼 수 있다.

Theme and style

이제 카드 색을 바꿔줄 건데, 일관된 색 구성을 유지하는 것이 좋기 때문에, 앱의 테마를 사용해서 색을 선택할 것이다.

main.dart에서 BigCard 클래스를 다음과 같이 수정한다.

lib/main.dart

// ...

  @override
  Widget build(BuildContext context) {
    var theme = Theme.of(context);         // ← Add this.

    return Card(
      color: theme.colorScheme.primary,    // ← And also this.
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Text(pair.asLowerCase),
      ),
    );
  }

// ...

이렇게 위에서 추가한 두 코드는 굉장히 많은 일을 한다.

• 먼저, 첫번째 코드는 앱의 현재 테마를 Theme.of(context)로 불러온다.
• 두 번째 코드는 테마의 colorScheme 속성과 동일하게 카드의 색상을 정의한다. 
  • 색 구성표는 많은 색을 포함하고 있으며, 기본 색은 앱의 primary color(앱을 정의하는)이다.

즉, 우리는 두 코드를 추가함으로써 MyApp 클래스에서 정의한 theme color를 불러온 것이다.

만약, 위의 seedColor를 바꾸면, 해당 카드의 색도 같이 바뀌게 된다.

이렇게 theme color를 사용하면, 앱의 전체적인 메인 색을 바꿔야 할 때, 그 색이 사용된 코드를 하나씩 찾지 않고, MyApp의 theme에서 색만 바꿔주면, 모두 바뀌게 된다.

TextTheme

지금까지 완성한 화면을 보면 이러하다.

하지만, 카드 안에 있는 글씨가 검은색이며, 크기가 너무 작아 읽기 힘들다.

이제 BigCard의 build() 메소드를 고쳐서 이러한 문제를 해결해볼 것이다.

다음과 같이 BigCard의 코드를 수정해보자

lib/main.dart

// ...

  @override
  Widget build(BuildContext context) {
    var theme = Theme.of(context);
    // ↓ Add this.
    var style = theme.textTheme.displayMedium!.copyWith(
      color: theme.colorScheme.onPrimary,
    );

    return Card(
      color: theme.colorScheme.primary,
      child: Padding(
        padding: const EdgeInsets.all(20),
        // ↓ Change this line.
        child: Text(pair.asLowerCase, style: style),
      ),
    );
  }

// ...

• theme.textTheme을 사용함으로써 app의 font theme에 접근할 수 있다. 이 클래스는 bodyMedium(medium size의 텍스트를 위한), caption(이미지를 위한), headlineLarge(large headlines를 위한)과 같은 속성들을 포함하고 있다.
• displayMedium property는 공식 문서에, "짧고 중요한 텍스트를 사용할 때" 라고 나와있다. 우리가 사용한 경우와 같다 !
• displayMedium 는 이론적으로 null이 될 수 있다. 하지만 Dart는 null-safe이기 때문에 null이 되도록 내버려두지 않는다.. 그래서, 이런 경우에는 ! 연산자를 사용해서 우리가 뭘 하고 싶은지 Dart가 알 수 있도록 해야 한다. 우리가 사용한 것은 이 경우에 해당하지 않는당..ㅎㅎ
• displayMedium 에 copyWith() 를 호출하면, 우리가 정의한 수정사항과 함께 텍스트 스타일의 복사본이 return 된다. 우리가 했던 경우를 살펴보면, 우리는 텍스트 색상만 변경한 것이다.
• 또 다른 새로운 색상을 얻고 싶다면, 앱의 테마에 다시 접근하면 된다. 

지금까지 한 결과이다..!!

후... step 5... 생각보다 길다.....

하지만...! 벌써 50%는 했으니.. 괜찮다....!!!!!!

계속 가보자구...

Improve accessibility

flutter는 기본적으로 앱에 엑세스 할 수 있다. 예를 들어서, flutter 앱은 앱의 모든 텍스트들을 올바르게 표시해서 TalkBack 및 VoiceOver와 같은 것들이 접근할 수 있다.

pair.asLowerCase보다는 upper camel case가 screen reader가 정확하게 단어를 인식하는 것에 도움이 될 수 있다.

자세한 부분은 코드랩을 보시길...... (절대 귀찮아서 생략하는게 맞습니다..ㅎㅎ)

그래서..! 결국 다음과 같이 코드를 수정해보자.

그러면, 이제 screen readers가 명확하게 각 단어 쌍들을 읽을 수 있다. (물론, UI에는 변화가 없을 것이다!)

// ...

  @override
  Widget build(BuildContext context) {
    var theme = Theme.of(context);
    var style = theme.textTheme.displayMedium!.copyWith(
      color: theme.colorScheme.onPrimary,
    );

    return Card(
      color: theme.colorScheme.primary,
      child: Padding(
        padding: const EdgeInsets.all(20),

        // ↓ Make the following change.
        child: Text(
          pair.asLowerCase,
          style: style,
          semanticsLabel: pair.asPascalCase,
        ),
      ),
    );
  }

// ...

변화를 확인하고 싶다면, screen reader를 직접 사용해보시길...!!

Center the UI

이제..!! UI의 센터를 맞춰서 시각적인 불편함을 해소해 볼 것이다.

먼저, BigCard 는 Column의 부분임을 기억해야 한다. Column은 기본적으로 자식들을 top으로 한번에 두지면, 이를 쉽게 override 할 수 있다.

MyHomePage의 build() 메소드로 가서, 다음과 같이 바꿔보자..!

// ...

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();
    var pair = appState.current;

    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,  // ← Add this.
        children: [
          Text('A random AWESOME idea:'),
          BigCard(pair: pair),
          ElevatedButton(
            onPressed: () {
              appState.getNext();
            },
            child: Text('Next'),
          ),
        ],
      ),
    );
  }
}

// ...

이렇게 하면, Column 안에 있는 children들이 main(vertical=수직) axis에 맞춰 center가 된 것을 확인할 수 있다.

사실 Column 안에 있는 children들은 이미 main axis 방향의 center가 맞춰져 있다. 즉, 가로 센터로 설정되어 있는데, 적용되지 않은 것처럼 보인다.

그 이유는, Column 자체가 센터가 아니기 때문이다. 그래서, Column의 센터를 맞춰주면 우리가 원하는 센터 위치로 둘 수 있다.

Column에서 전구 아이콘을 누르거나, cmd . 또는 ctrl . 을 눌러 Refactor menu를 열어준다.

Refactor menu -> Wrap with Center

그 결과, 화면의 센터에 위치한 결과를 확인할 수 있다 !!!

이제 조금 디테일적인 UI를 수정할 차례이다.

• 일단, 카드 위에 있는 "A random AWESOME idea:" 텍스트는 없애도 되므로 지워주겠다.
• 카드와 "Next" 버튼 사이에 여백이 있으면 더 좋을 것 같으므로, SizedBox 위젯을 사용해서 두 위젯 사이에 '공간'을 만들어준다

MyHomePage에서 다음과 같이 코드를 수정하면 된다.

lib/main.dart

// ...

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();
    var pair = appState.current;

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BigCard(pair: pair),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                appState.getNext();
              },
              child: Text('Next'),
            ),
          ],
        ),
      ),
    );
  }
}

// ...

이제, 다음과 같은 결과를 얻을 수 있다.

우리가 처음에 목표한 이미지와 일치하다 !!!!!

이렇게.. 길었던 step5가 끝났다..!!!

그저 보고 만들기만 했다면, 빨리 끝났을테지만, 이해하고, 이를 정리하다보니 굉장히 길게 느껴졌다...

그만 적고 싶은 순간도 많이 있었지만...!!!!

그래도 step 5 끝 !!

아참! 혹시 몰라 필요한 사람들을 위한 전체 코드...!!

lib/main.dart

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: MaterialApp(
        title: 'Namer App',
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();

  void getNext() {
    current = WordPair.random();
    notifyListeners();
  }
}

// ...

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();
    var pair = appState.current;

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BigCard(pair: pair),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                appState.getNext();
              },
              child: Text('Next'),
            ),
          ],
        ),
      ),
    );
  }
}

class BigCard extends StatelessWidget {
  const BigCard({
    Key? key,
    required this.pair,
  }) : super(key: key);

  final WordPair pair;

  @override
  Widget build(BuildContext context) {
    var theme = Theme.of(context);
    var style = theme.textTheme.displayMedium!.copyWith(
      color: theme.colorScheme.onPrimary,
    );

    return Card(
      color: theme.colorScheme.primary,
      child: Padding(
        padding: const EdgeInsets.all(20),

        // ↓ Make the following change.
        child: Text(
          pair.asLowerCase,
          style: style,
          semanticsLabel: pair.asPascalCase,
        ),
      ),
    );
  }
}

// ...

1. Introduction

학습할 내용은!

✅  flutter가 어떻게 작동하는지의 기초

✅  flutter에서 layout 만들기

✅  앱 동작과 user interaction의 연결 (좋아요 버튼 누르는 것이 그 예)

✅  flutter 코드를 정갈하게 짜는 것

✅  반응형 앱을 만드는 것 (screen 크기에 따라 다른게 반응할 수 있음 !)

✅  앱의 일관된 형태와 느낌을 주도록 

2. Set up your Flutter environment (flutter 환경 설정)

📍 Visual Studio Code 사용

codelab 공식 문서에서 vscode를 다운받을 수 있도록 연결해두었다!

공식문서 링크 ⬇️ 

https://codelabs.developers.google.com/codelabs/flutter-codelab-first#1

개발 타깃 설정하기 (다음 중 원하는 os를 선택하면 된다.)

flutter의 가장 큰 장점이자 특징인 부분이다.

multi-platform toolkit이기 때문에 같은 코드로 서로 다른 os를 실행할 수 있다.

os는 주로 개발하고 싶은 os를 선택하면 된다.

• iOS
• Android
• Windows
• macOS
• Linux
• web

이때 직접 기기를 연결해서 사용해도 되고, simulator를 통해 개발해도 된다.

(나는 약 80%를 simulator로 개발한다!)

Flutter 설치하기

Flutter SDK 설치는 다음 공식 문서에 자세하게 설명되어 있다.

https://docs.flutter.dev/

codelab을 진행하기 위해서는 다음의 3가지만 있으면 된다.

1. Flutter SDK

2. Visual Studio Code (Flutter plugin이 설치된)

3. 개발 타깃에 요구되는 software (예를 들어, Visual Studio Code는 Windows, Xcode는 macOS)

(이 외에, flutter SDK 설치나 환경 설정에 어려움이 있다면, codelab 2단계에서 보여주는 StackOverflow를 참고하길 !)

3. Create a project

• Visual Studio Code를 실행하고 command palette를 Open. (  F1  또는  ctrl+Shift+P  또는  Shift+Cmd+P  )
• "flutter new"를 입력하고 그 결과 검색된 Flutter: New Project 를 선택한다.
  • 만약 flutter 환경 설정이 제대로 이루어졌다면, 다음과 같이 잘 뜨는 것을 확인할 수 있다.
• Flutter: New Project 를 선택하고 Appliction을 선택한다.
• 다음으로 폴더를 생성하고자 하는 위치와, 프로젝트 이름을 설정해주면 된다.
• 만약 다음과 같이 신뢰와 관련한 창이 뜬다면 Yes~~를 선택 !

여기까지 했다면 이제 바로 Flutter 개발을 시작할 수 있다 !!

codelab을 따라하기 위해 죄측 상단에 있는 아이콘을 누르고, pubspec.yaml 파일을 선택한다.

해당 폴더에 있는 내용 중, 가장 위 두 줄을 제외한 코드를 모두 지운 뒤, 이 코드를 복사해서 붙여넣어준다.

(name과 description부분은 그대로 둔다 !)

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 0.0.1+1

environment:
  sdk: '>=2.18.4 <3.0.0'

dependencies:
  flutter:
    sdk: flutter

  english_words: ^4.0.0
  provider: ^6.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true

이 pubspec.yaml은 앱에 대한 정보를 담고 있는 파일이다. 이 앱의 현재 버전, dependencies, assets 등의 정보가 있다.

• 다음은 같은 아이콘 내에 있는 analysis_options.yaml 파일을 바꿔준다.
  • 안에 있는 코드를 모두 지우고, 다음 코드를 붙여넣어준다.

include: package:flutter_lints/flutter.yaml

linter:
  rules:
    prefer_const_constructors: false
    prefer_final_fields: false
    use_key_in_widget_constructors: false
    prefer_const_literals_to_create_immutables: false
    prefer_const_constructors_in_immutables: false
    avoid_print: false

이 파일은 얼마나 엄격하게 우리가 짠 코드를 분석해야 하는지를 결정한다. 이 부분은 언제든지 바꿀 수 있으며, 현재는 우리가 처음 하는 것이기 때문에 쉽게 넘어가줘~ 하고 이야기하는 것과 같다.

- 마지막으로 main.dart 파일을 바꿔준다. (위치는 lib/main.dart)

파일에 있는 코드를 모두 지우고, 다음 코드를 붙여넣기 한다.

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: MaterialApp(
        title: 'Namer App',
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();

    return Scaffold(
      body: Column(
        children: [
          Text('A random idea:'),
          Text(appState.current.asLowerCase),
        ],
      ),
    );
  }
}

이제 모든 setting이 끝났다 !!!!

오예 !! 🎉

본격적으로 다양한 위젯들을 사용해서 직접 코드를 짜보자 !!

4. Add a button

이제 Next button을 만들어보자 !

.

.

그 전에 앱을 Launch해봐야 한다. 

먼저  lib/main.dart  를 열어 target device가 선택되었는지 확인해본다.

vscode의 우측 하단을 보면 현재 지정된 target device를 확인할 수 있다. 바꾸고 싶다면, 이를 클릭해서 바꾸면 된다.

나는 기존에 연결해둔 기기가 있어 바로 그 기기로 설정이 되어있었다. 맥이라면 시뮬레이터를 열어 ios 기기를 사용할 수 있고, android studio를 통해 안드로이드 기기를 만들어 실행할 수 있다.

기기를 연결했다면 ! 한 번 실행해보자 !!

우측 상단에 있는 실행버튼을 눌러 실행하면 된다!

다음과 같이 뜨면 아주아주 잘 따라온 것이다 !!!!

만약 코드를 바꾸었다면, Command+s 또는 Ctrl+s를 하면 바로바로 결과가 바뀌는 것을 확인할 수 있다.

그렇지 않는다면, 코드랩에서 제시한 Hot Reload에 대한 stack overflow를 참고하길 !

이제 진짜 진짜 진짜 버튼을 만들어볼거다 !!!

lib/main.dart

// ...

    return Scaffold(
      body: Column(
        children: [
          Text('A random AWESOME idea:'),
          Text(appState.current.asLowerCase),

          // ↓ Add this.
          ElevatedButton(
            onPressed: () {
              print('button pressed!');
            },
            child: Text('Next'),
          ),

        ],
      ),
    );

// ...

다음과 같이 scaffold 내에 있는 Column에 ElevatedButton을 추가해준다.

이때 버튼을 누르면 콘솔에 다음과 같이 뜨는 것을 확인할 수 있다.

이제 main.dart가 어떻게 실행되는지를 이해해보자

lib/main.dart의 가장 상단에서 우리는 다음과 같은 코드를 찾아볼 수 있다.

// ...

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

// ...

우리는 main() 이라는 이름의 함수를 찾을 수 있는데, 이 함수 내에 있는 코드는 MyApp에 정의된 앱을 실행하도록 Flutter에 알려주는 것이다.

MyApp 클래스는 StatelessWidget을 확장한다. 위젯은 우리가 만든 모든 flutter app의 요소들인데, 앱 그 자체도 위젯이다.

MyApp에 있는 코드는 전체 앱을 구성한다. 이는 app-wide state(나중에 다룰 예정!) 를 생성하고, 앱의 이름을 짓고, 시각적 theme을 정의하고, "home" 위젯(그러니까, 앱의 시작 지점)을 설정할 수 있다.

lib/main.dart

// ...

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();
}

// ...

flutter에는 app state를 관리하는 많은 방법들이 있다. 가장 쉽게 이야기할 수 있는 방법 중 하나는 ChangeNotifier이다.

MyAppState는 function에 앱이 필요로 하는 data를 정의한다. 

• state class는 변화를 알리는 ChangeNotifier를 확장한다. 예를 들어, 만약 현재 단어가 바뀌었다면, 앱에 있는 어떤 위젯이 이를 알 필요가 있는 것이다. 
• MyApp에 사용했듯이, ChangeNotifierProvider를 사용해서 상태를 생성하고, 앱에 정보를 제공한다. 이는 앱에 있는 어떤 위젯이라도 이 상태를 알 수 있게 한다.
• 즉, 쉽게 이야기하면 ChangeNotifier를 MyAppState에 사용하면, 앱에서 발생하는 변화들을 다른 위젯들이 알 수 있다는 것이다.
  • MyApp이 가장 상위 위젯이며, ChangeNotifier는 변화를 인지하고 이를 위젯에 알리는 역할임을 이해하면 더 쉽다

마지막으로 MyHomePage에 대해 알아보자.

이 위젯은 우리가 이미 수정한 위젯이다. 공식문서에서 설명한 내용을 그대로 가져와서 조금 쉽게 설명할 것이다.

// ...

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {           // ← 1
    var appState = context.watch<MyAppState>();  // ← 2

    return Scaffold(   // ← 3
      body: Column(    // ← 4
        children: [
          Text('A random AWESOME idea:'),        // ← 5
          Text(appState.current.asLowerCase),    // ← 6
          ElevatedButton(
            onPressed: () {
              print('button pressed!');
            },
            child: Text('Next'),
          ),
        ],      // ← 7
      ),
    );
  }
}

// ...

1. 모든 위젯은 위젯의 환경이 변경될 때마다 자동으로 호출되어 위젯이 항상 최신 상태를 갖도록 하는 build() method를 정의한다.
2. watch method를 사용하여 앱의 변화를 추적하고, 앱의 현 상태를 유지한다.
3. 모든 build 메서드는 위젯 또는 중첩된 위젯 트리를 반환해야 하는데, 이 경우 최상위 위젯은 Scaffold이다. Scaffold는 실제로 굉장히 자주 사용되며, main.dart에서 볼 수 있듯이, 다음과 같이 사용된다.  return Scaffold(); 
4. Column은 아주 자주 쓰이면서 가장 기본적인 layout widget이다. 이 위젯은 많은 수의 children을 가질 수 있으며, 위에서부터 아래로 배치한다. default로 column은 좌측 상단부터 시작하는데, 이를 center로 바꿔줄 수 있다. (뒤에서 다룰 예정)
5. Text("")의 형태로 쓰이며, "" 안에 원하는 문자열을 넣으면 그대로 화면에 그려진다.
6. 이 Text 위젯은 appState를 가지고 있으며, 이 클래스의 member에만 접근할 수 있다. (여기에서는 current). 
   WordPair은 asPascalCase, asLowerCase 또는 asSnakeCase와 같이 유용한 getter를 제공한다.
7. flutter에는 괄호가 굉장히 많이 쓰이는데, 쉼표는 사용하지 않아도 된다. 하지만, vscode에서는 쉼표를 사용할 경우, 다음과 같이 구분하기 쉽게 자동정렬이 되기 때문에 선택에 따라 사용하면 된다. 나는 경우에 따라 다른데, 코드가 길어지는게 싫은 경우 사용하지 않고, 구분이 필요할 경우 사용하는 편이다.

직접 해보자

MyAppState로 가서 getNext method를 추가해보자.

lib/main.dart

// ...

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();

  // ↓ Add this.
  void getNext() {
    current = WordPair.random();
    notifyListeners();
  }
}

// ...

getNext() 메소드는 current에 새로운 랜덤 WordPair를 재할당해준다. 또한 이를 notifyListeners()라 부르는데, (ChangeNotifier의 메소드 중 하나이다.)이는 MyAppState를 보고 있는 모든 사용자에게 알림을 준다.

lib/main.dart

// ...

    ElevatedButton(
      onPressed: () {
        appState.getNext();  // ← This instead of print().
      },
      child: Text('Next'),
    ),

// ...

이제 Next 버튼을 누를 때마다 단어가 바뀌는 것을 볼 수 있다 !!!

생각보다 너무 길어져서 다음 단계는 다음 글에 적어야겠다 !!

필요한 사람이 있을지 몰라 codelab의 step1~step4까지의 lib/main.dart 전체 코드이다.

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: MaterialApp(
        title: 'Namer App',
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();

  void getNext() {
    current = WordPair.random();
    notifyListeners();
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();

    return Scaffold(
      body: Column(
        children: [
          Text('A random idea:'),
          Text(appState.current.asLowerCase),
          ElevatedButton(
            onPressed: () {
              appState.getNext(); // ← This instead of print().
            },
            child: Text('Next'),
          ),
        ],
      ),
    );
  }
}

리엑트.. js, html, css 이 중 그 어느 것도 배운 적, 접한 적 없었지만... 굉장히 짧은 시간에 리엑트를 공부해야만 했다.

주어진 시간에 js부터 배우고, 차근차근 강의를 들으며 공부했다.

하지만.... 제대로 이해하고, 실전에 사용하기에는 자신감과 지식이 턱없이 부족했다.

이번 프로젝트를 돌아보면 거의 실전에 부딪히며 배웠던 것 같다.

그 중 리엑트로 마크다운 에디터와 뷰어 구현하는 부분을 정리해보려고 한다.

너무나 다행히 많은 사람들이 포스팅을 해두었고, 너무나 편리한 패키지가 있었기에 아주 쉽고 간단하게 사용할 수 있었다.

물론 뷰어를 하는 것에 있어 아주 오랜 시간 삽질을 했다는 것...은 잊지 못할 것 같다...하하

1. install

npm i @uiw/react-md-editor

2. import

import MDEditor from '@uiw/react-md-editor';

3. editor 사용하기

다음과 같이 사용하면 된다.

<div className="markarea">
	<div data-color-mode="light">
		<MDEditor height={865} value={mdinfo} onChange={setMD} />
	</div>
</div>

4. viewer 사용하기

사실 이 부분에서 삽질을 꽤 오래했다... 해당 패키지에 뷰어가 같이 있었는데 그걸 보지 못하고 자꾸 다른 viewer 패키지를 찾아 적용해봤던 것.... 그렇다보니 마크다운이 제대로 보여지지 않았다...

이렇게 .Markdown을 사용하고, source에 보여주고 싶은 마크다운 String을 가져오면 된다!!!

<div className="markdownDiv" data-color-mode="light" style={{padding:15}}>
	<MDEditor.Markdown
		style={{ padding: 10 }}
		source={mkdStr}
    />
</div>

이렇게 첫 웹 경험이자 리엑트 경험을 성공적으로 마무리했다!!!

많은 우여곡절이 있었지만.. 팀원들이 없었다면.......정말....난 아무것도 할 수 없었을거다...

리엑트 조금 더 친해져보자구.. 내가 잘 할게...🥹

state

props

.

.

특정 코드들이 첫 번째 component render에서만 실행되게 하자.

처음 한 번만..!!

나중에는 상태가 변해도 실행되지 않도록.

우리가 state를 변경할 때 모든 code가 다시 실행된다. 

하지만 그럴 필요가 없을 경우!! 어떻게 해야할까?

useEffect를 사용한다. 이 useEffect는 두 개의 argument를 가지는데, 첫 번째는 우리가 딱 한 번만 실행하고 싶은 코드이다.

ex) useEffect(function1, [])

두번째는 ... 마법같다....?

결국, useEffect에 대해 배웠다. 이 함수는 계속 실행되지 않도록 하는 것. 

한 번만 실행해도 되는 것들을 다루는 함수이다.

두 번째 argument는..

이럴 때 사용한다. 특정한 부분이 변했을 때만 다시 찍히도록 하고 싶은 경우!

예를 들어, 검색 창에서 문자를 검색하고, 검색 아이콘을 누른다면 같은 단어를 입력하고 그 상태에서 버튼을 여러번 클릭하면 클릭 할 때마다 상태가 변한다. 즉, 텍스트 필드는 변하지 않지만 버튼을 눌렀기 때문에 계속 찍어내는 것이다.

버튼을 누름으로써 counter가 변화할 때도 영화를 검색하고 있는 것이다.

이 때 다음과 같이 코드를 작성하면 된다.

useEffect(() => {
 console.log("SEARCH FOR", keyword); //keyword가 변화할 때만 실행된다.
}, [keyword]);

이렇게 하면 keyword가 변화할 때 코드를 실행할 거라고 react.js에게 알려주는 것이다.

우리가 두 번째 argument를 []로 비워뒀을 때 한 번만 실행됐던 이유는 비어있으므로 지켜볼 변화가 없기 때문이다.

즉, 두 번째 argument를 채우면, '해당 argument가 변화하는지 지켜봐줘' 라고 말하는 것과 같다.

복습!!!!

리엑트에서는 새로운 데이터가 들어올 때마다 UI를 refresh 한다는 특징이 있다.

그래서 우리가 직접 하지 않아도 되므로 편하다.

하지만! 한 번만 실행하고 싶은 코드가 있는 경우, 혹은 한 번만 실행해야 하는 경우! 어떻게 해야하는가!!

이 때 useEffect를 사용하면 된다.
이 함수는 두 개의 argument를 갖는데,

첫 번째 argument는 우리가 실행시키고 싶은 코드이고,

두 번째 argument는 dependencies라고 불린다. 이는 react.js가 지켜봐야 하는 것이다. 이것이 변화할 때 첫 번째 argument를 refresh 하는 것이다. 

 두 번째 argument는 array이므로 여러 개의 component를 넣어도 된다.

결론

useEffect는 원하는 state이 변할 때만 원하는 코드를 실행할 수 있다!!

react.js는 변화가 있을 때마다 refresh 하는데, useEffect를 사용해서 원하는 경우에만 refresh 할 수 있다.

[ 필수는 아니지만, 자주 쓰이는 것은 아니지만 ]

Cleanup function

이 함수는 그냥 함수인데, 우리의 component가 destroy될 때 뭔가 할 수 있도록 해주는 것이다.

Cleanup function은 따로 이 이름의 함수가 있는 것이 아니라 useEffect에서 component가 없어질 때 무언가를 return하는 것.

이는 component가 없어질 때 어떤 분석 결과를 보내고 싶은 경우 사용할 수 있다.

이를 통해 언제 component가 create 됐는지, 언제 destroy 됐는지 알 수 있다.

function Hello() {
 function byFn() {
  console.log("bye :(");
 }
 function hiFn() {
  console.log("created :)");
  return byFn; // React.js가 hiFn을 실행하고, hiFn이 파괴될 때 byFn을 실행한다.
 }
 useEffect(hiFn, []);
 return <h1>Hello</h1>;
}

물론 문자 그대로 적을 수도 있다.

function Hello() {
 useEffect(() => {
  console.log("hi :)");
  return () => console.log("bye :(");
 }, []);

 useEffect(function () {
  console.log("hi :)");
  return function() {
   console.log("bye :(");
  };
 }, []);
 return <h1>Hello</h1>;
}

처음으로 react를 공부하고 나서 css 사용에 익숙치 않고, 아직 흐름을 제대로 잡지 못한 상태에서 개발에 참여하게 되었다.

그렇기에 component 이름을 어떻게 정하는지도 잘 알지 못해 혼란스러웠다.

일단 해봐야한다는 생각, html, css, js 모두 처음 시작하는 만큼 결과물이 있어야 한다는 생각에 일단 뛰어들었다.

그 결과 나로 인해 style 간섭이 일어나버렸다...

결국 나는 잠시 프로젝트에 손을 떼게 되었지만 이번 일을 통해 style 간섭이 무엇인지 확실하게 알게 되었고,

다시는 같은 실수를 반복하지 않겠다는 다짐을 했다.

공유 받은 styled components에 대한 글을 공부하고, 정리한 내용이다.

styled components의 필요성

중복된 클래스명을 만들게 되면, 다른 컴포넌트 스타일에 영향을 줄 수 있다.

다른 목적을 위해 만든 클래스가 같은 이름으로 만들어지면, 각각에 간섭하게 되어 영향을 끼치게 되는 것이다.

이러한 문제를 해결하기 위한 방법 중 하나가 styled components 이다.

Styled components

styled components는 특정 스타일이 첨부된 컴포넌트를 구성할 수 있도록 도와주는 패키지이다.

이 패키지를 적용하면 해당 스타일이 첨부되는 컴포넌트에만 영향을 미치고, 다른 것에는 영향을 미치지 않는다.

styled components 사용 방법

1. styled components를 npm 설치 한다.

2. 사용하려는 컴포넌트에서 해당 패키지 import

styled.태그(백틱) 과 같은 구문을 사용한다.  (styled.태그`` )

백틱 관련 구문을 tagged template literal이라고 한다는데,이 부분은 그냥 넘어간다.

(백틱은 ' (작은 따옴표)와 비슷하게 생긴 문자이다. 이것조차 몰랐던 나...)

styled는 import하는 객체이고, 그 옆에 명시한 '태그'의 메소드에 접근할 수 있다.

즉, 백틱 사이에 들어간 부분이 전달하는 것인데, 이 백틱 사이에 있는 것이 결국 해당 메소드로 전달된다는 것이다.

그리고 해당 태그 메소드가 새로운 태그 컴포넌트를 반환한다고 한다.

글을 계속 읽다 보니 styled components는 어떻게 만들어지는지 궁금했다.

이름을 어떤 식으로 생성하는건지, 어떻게 코드를 만드는지 의문이 생겼다.

-> styled components로 만들어진 것들의 class 명은 해당 패키지에 의해 '동적'으로 생성이 된다.

-> 모든 클래스는 고유한 이름을 갖게 된다. 그렇기에 다른 컴포넌트에 영향을 주지 않는다.

styled components에서 css pseudo 선택자 및 중첩 선택자

이 부분을 정리하기 전에 css pseudo 선택자에 대해 조금 알고 싶었다.

pseudo는 보통 가상인 것에 이름이 붙는데, 이 또한 그러했다. 우리 말로는 '가상 선택자'라고도 부른다.

css pseudo 선택자는 html요소를 직접적으로 선택하지 않고 요소의 상태에 따라 선택하여 꾸며주는 것을 의미한다.

css pseudo 선택자에 대한 구체적인 정보는 이 글에서 배울 수 있다. (https://bio-info.tistory.com/67)

다시 돌아와 styled components에서 css pseudo 선택자 및 중첩 선택자를 사용하는 방법이다.

이 경우, & 이렇게 생긴 기호를 사용한다. &:hover 처럼 사용할 수 있다.

중첩 선택자의 경우, & label 혹은 &.invalid와 같은 방식을 사용한다.

& 기호는 생성된 컴포넌트를 참조한다. 

styled components에서 props 전달하기

styled components에 props를 추가하여 백틱 안에서 그 props를 사용할 수 있다.

이 방법을 사용하면 스타일을 동적으로 쉽게 바꿀 수 있다.

이는 백틱 사이에 $ 기호와 중괄호를 사용할 수 있으며, 다음과 같이 서로 다른 세 가지 방식을 통해 나타낼 수 있다.

<CircleStyled invalid={true}/>

// case 1
const CircleStyled = styled.div`
  border-radius: 100%;
  background-color: ${({ invalid }) => invalid ? 'red' : 'black'};
`;

// case 2
const CircleStyled = styled.div(({ invalid ) => `
  border-radius: 100%;
  background-color: ${invalid ? 'red' : 'black'};
`);

// case 3
const CircleStyled = styled.div`
  ${({ invalid }) => `
    border-radius: 100%;
    background-color: ${invalid ? 'red' : 'black'};
  `}
`);

styled component에서 미디어 쿼리

빈응형을 위해 미디어 쿼리를 사용하는데, 이를 styled component에서 사용하는 방법이다.

이 때는 @media와 옆 조건을 (min-width: 700px)처럼 적고, 해당 중괄호 안에 조건을 만족할 시 적용될 스타일을 적는다.

const Button = styled.button`
	width: 100%;

	@media (min-width: 700px) {
		// 브라우저 폭이 700px 이상인 경우에 적용되는 코드
		width: auto;
	}
`

이렇게 styled component에 대한 다음 글을 읽고 공부하며 정리해 보았다.

https://velog.io/@jangws/%EC%8A%A4%ED%83%80%EC%9D%BC-%EA%B0%84%EC%84%AD%EC%9D%84-%EB%B0%A9%EC%A7%80%ED%95%98%EA%B8%B0-%EC%9C%84%ED%95%9C-styled-components%EC%99%80-css-module

이제는 조금 더 익숙하게, 흐름을 파악하여 즐겁게 코딩하고 싶다...

(웹을 너무 만만하게 봤던 나... 반성해...)

javac 클래스명.java
java 클래스명

이렇게 하면 자바 파일을 실행할 수 있다.

외주를 하다 보니 무선 디버깅을 해야할 일이 자주 있었다.

하지만 ios 14인가 15부터는 '$ flutter run'으로는 무선으로 실행할 수 없었다.

flutter run -d 기기번호 --release

기기번호 자리에 실행하고자 하는 기기의 번호를 입력하면 휴대폰에 앱이 설치되는 것을 확인할 수 있다.

몇 가지 에러가 뜬다면, xcode에서 기기를 선택하고 빌드한 뒤 다시 시도하면 된다.

앱이 설치되고 나서는 선을 제거하고도 무선으로 앱 실행이 가능하다.