노마드 코더의 강의를 보며 환전 앱 메인 화면을 개발해 보았다.

• Columns와 Rows의 구조
• 위젯의 개념
• 커스텀 위젯

같은 개념을 익혔는데 이후에 따로 정리함

flutter는 native 코드와 다르게 직접 운영체제가 코드를 실행하지 않는다.

운영체제는 내가 짠 dart 코드를 컴파일하는 C#언어의 엔진을 실행한다.

그 엔진이 flutter의 dart 코드를 실행한다.

이러한 구조로 인해 flutter에서 만들어지는 ui들은 운영체제가 만들어낸 것이 아닌 flutter가 그려낸 가짜 ui이다.

그러므로 native에서 제공하는 ui의 디자인과는 다르지만 모든 픽셀에 접근할 수 있으며 다양한 애니메이션을 사용할 수 있는 것도 이 덕분이다.

Hello Flutter

flutter는 모든 구조가 위젯으로 되어있고 어떤 것을 만들어도 위젯으로 만든다. 기본 구조로는 main과 App 위젯이 root라고 할 수 있다.

위젯은 class로 만들 수 있으며 SDK에 있는 4가지 위젯 중 하나를 상속 받고 build를 추가해야 위젯이 된다. App 위젯에서는 build 후 MaterialApp(구글 디자인)과 CupertinoApp(ios 디자인) 중 하나를 리턴해야한다.

또한 home 안에 Scaffold로 구조를 잡아주어야한다.

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Hello Flutter"),
        ),
        body: Center(
          child: Text("Hello World!"),
        ),
      ),
    );
  }
}

기본적으로 class property 변경하려면 아래와 같이 작성해야한다.

class Player {
  String name;  // 'final'을 제거
  int age;
  String country;

  Player({
    required this.name,
    required this.age,
    required this.country,
  });
}

void main() {
  var player1 = Player(name: 'jinjin', age: 25, country: 'seoul')

  player.name = 'geegee';
  player.age = 12;
}

하지만 dart의 cascade notation을 사용하면 간단하게 접근하여 변경할 수 있다.

class Player {
  String name;  // 'final'을 제거
  int age;
  String country;

  Player({
    required this.name,
    required this.age,
    required this.country,
  });
}

void main() {
  var player1 = Player(name: 'jinjin', age: 25, country: 'seoul')
    ..name = "jin"    // 이제 'name'을 변경 가능
    ..age = 12
    ..country = "jui";

  print(player1.name); // 출력: jin

  player1
    ..name = "123";
}

Enum

enum은 개발자가 코드를 실수하지 않도록 규정해주는 역할을 한다.

enum Country { seoul, daegu } // 따옴표는 사용하지 않음

class Player {
  String name;  // 'final'을 제거
  int age;
  Country country; // 타입은 String이 아닌 enum으로

  Player({
    required this.name,
    required this.age,
    required this.country,
  });
}

void main() {
  var player1 = Player(name: 'jinjin', age: 25, country: Country.daegu) // enum의 속성으로 설정
    ..name = "jin"    // 이제 'name'을 변경 가능
    ..age = 12
    ..country = "jui";

  print(player1.name); // 출력: jin

  player1
    ..name = "123";
}

Abstract Classes

추상화 클래스는 직접 사용할 수 없고 내용이 없는 매서드를 구현하여 하위 클래스들이 해당 매서드를 반드시 구현하도록 강요한다.

abstract class Animal {
  void makeSound(); // 추상 메서드: 소리를 내는 방법은 정해지지 않았음
}

class Dog extends Animal {
  @override
  void makeSound() {
    print('Bark'); // Dog 클래스에서 소리를 내는 방법을 정의함
  }
}

class Cat extends Animal {
  @override
  void makeSound() {
    print('meow'); // Cat의 소리
  }
}

void main() {
  var dog = Dog();
  dog.makeSound(); // 출력: Bark

  var cat = Cat();
  cat.makeSound(); // 출력: Meow
}

Inheritance

상속의 클래스에서 가장 중요한 개념으로 상속 받은 자식 클래스는 부모 클래스에 접근할 수 있게 된다.

// 부모 클래스 정의
class Animal {
  String name;

  // 부모 클래스 생성자
  Animal(this.name) {
    print('Animal created: $name');
  }

  void makeSound() {
    print('$name makes a generic animal sound');
  }
}

// 자식 클래스 정의, Animal 클래스를 상속받음
class Dog extends Animal {
  int age;

  // 자식 클래스 생성자
  Dog(String name, this.age) : super(name) {
    print('Dog created: $name, Age: $age');
  }

  @override
  void makeSound() {
    super.makeSound();
    print('$name barks');
  }
}

void main() {
  var dog = Dog('Buddy', 3);
  dog.makeSound();  // 출력: Buddy barks
}

이렇게 상속을 받아 같은 코드를 줄일수도, 부모 클래스의 기능을 확장하거나 변경할 수도 있다.

mixin

mixin은 dart의 기능 중 하나로, 다른 여러 클래스를 참조 할 수 있다. mixin은 상속과 다른 개념으로 부모와 자식의 참조 관계가 아닌 단순히 mixin의 매서드를 가져온다는 개념으로 생각해야한다.

// Mixin으로 사용할 클래스 정의
class CanFly {
  void fly() {
    print("I can fly!");
  }
}

// 다른 클래스에서 mixin 사용
class Bird with CanFly {
  void chirp() {
    print("Chirp chirp!");
  }
}

class Plane with CanFly {
  void engineSound() {
    print("Vroom vroom!");
  }
}

void main() {
  var bird = Bird();
  bird.chirp();       // 출력: Chirp chirp!
  bird.fly();         // 출력: I can fly!

  var plane = Plane();
  plane.engineSound(); // 출력: Vroom vroom!
  plane.fly();         // 출력: I can fly!
}

일단 dart로 간단한 class를 만들어본다.

class Player {
    final String name = 'jinjin';
    int age = 25;
    String country = 'seoul';
}

void main(){
    var player1 = Player();

    print(player1.name); // jinjin
}

간단하게 player를 만들어주는 class를 만들었지만 모든 player가 같은 정보를 갖고 있을 것이다.

Constructors

이번엔 각각 다른 player가 될 수 있도록 생성자를 추가해본다.

class Player {
    late final String name; // 변수의 값을 생성자로 나중에 할당하기 때문에 late를 사용
    late int age;
    late String country;

    Player(String name, int age, String country){
        this.name = name;
        this.age = age;
        this.country = country;
    }
}

void main(){
    var player1 = Player('jinjin', 25, 'seoul'); // 생성자가 생겼기에 매개변수를 추가해준다.

    print(player1.name); // jinjin
}

이렇게 생성자를 추가하여 각각 다른 정보의 player를 만들 수 있게 되었다.

dart는 여기서 조금 더 간결하게 작성할 수 있다.

class Player {
    final String name;
    int age;
    String country;

    Player(this.name, this.age, this.country,);

}

void main(){
    var player1 = Player('jinjin', 25, 'seoul');

    print(player1.name); // jinjin
}

이렇게 사용하면 late도 필요 없어지고 생성자도 간결해진다.

Named Constructor Parameters

class Player {
    final String name;
    int age;
    String country;

    Player(this.name, this.age, this.country,);

}

void main(){
    var player1 = Player('jinjin', 25, 'seoul');

    print(player1.name); // jinjin
}

var player1 = Player('jinjin', 25, 'seoul');을 보면 매개변수로 받고 있는 값이 무엇을 뜻하는지 알기 힘들다.

이런 경우 함수와 똑같이 named 해주는 방법이 있다.

class Player {
    final String name;
    int age;
    String country;

    Player({required this.name, required this.age, required this.country,});
    // null-safety를 위해 required 또는 defalut value를 명시해야한다.
}

void main(){
    var player1 = Player(name: 'jinjin', age: 25, country: 'seoul');
    // 매개변수마다 항목에 대한 명칭을 알 수 있다.
    print(player1.name); // jinjin
}

Named Constructors

이번엔 대구사람을 생성하는 생성자를 만들어본다.

class Player {
  final String name;
  int age;
  String country;

  Player({
    required this.name,
    required this.age,
    required this.country,
  });

  Player.makeDaegu({
    required String name,
    required int age,
  })  : this.name = name,
        this.age = age,
        this.country = "deagu"; // country를 매개변수로 초기화 하지 않는다.
}

void main() {
  // 명명된 매개변수로 전달
  var player1 = Player.makeDaegu(name: 'jinjin', age: 25);

  print(player1.name);  // 출력: jinjin
}

매개변수로 초기화 하지 않기 때문에 makeDaegu 매서드에서는 : 을 사용해 초기화를 해주어야한다.

dart에서는 :을 사용하면 속성이 일괄 초기화 된다.

dart의 함수에서 사용할 수 있는 또다른 기능이지만 주로 사용하지는 않는다.

매개변수에 대괄호로 감싸주면 되는데, 매개변수를 optional하게 지정해준다.

String Hi (
    [name = 'jinjin'];
) => 'Hello $name';

void main() {
    print(Hi()); // Hello jinjin
}

defalut value와 다른 점은, 매개변수를 key: value 형식으로 입력하지 않아도 된다는 점

defalut value > Hi(name: 'jinjin'); Optional Positional Parameters > Hi('jinjin');

?? (QQ Operator)

dart에서 null 값을 더 간결하게 비교해주는 오퍼레이터이다.

String up(String? name) => name != null ? name.toUpperCase() : 'ANON';
// 이런 삼항 연산자를 아래와 같이 바꿀 수 있다.
String up(String? name) => name?.toUpperCase() ?? 'ANON';
// 좌항의 값이 null을 return 할 경우 우항을 return 한다.

??= (QQ equals)

변수의 값이 null일 경우에만 값을 할당하는 기능이다.

void main(){
    String name;
    name ??= 'jinjin';
    name ??= 'jinjinjin';

    print(name); // jinjin;
}

typedef

타입에 대한 명칭을 매핑한다라고 생각한다.

List<int> reverseList(List<int> list) {
    var reversed = list.reversed;
    return reversed;
}

void main(){
  print(reverseList([1,2,3,4]));
}

위와 같은 함수에 typedef를 사용하면

typedef IntList = List<int>;

IntList reverseList(IntList list) {
    var reversed = list.reversed;
    return reversed.toList();
}

void main(){
  print(reverseList([1,2,3,4]));
}

이렇게 List에 대한 명칭을 매핑하여 변경해줄 수 있다.

dart에서 함수 구조

반환타입 함수명(파라미터){
 //함수내용
}

함수가 한 줄 뿐이면 fat arrow function으로 간결하게 작성할 수도 있다.

String func1(name) => "my name is $name";

named parameter

dart의 함수는 named parameter를 사용할 수 있다.

String introduce(String name, int age, String country){
    return "my name is $name, I'm $age years old. I'm from $country";
}

라는 함수가 있다고 할 때, 사용자는 파라미터의 종류와 순서를 계속 기억하고 있어야 한다.

이런 불편함을 해결하기 위하여 named parameter를 사용한다.

String introduce({String name, int age, String country}){
    return "my name is $name, I'm $age years old. I'm from $country";
}

void main(){
    print(introduce(
        name : "jinjin",
        age : 25,
        country : "seoul",
    )); // 이렇게 named parameter를 사용하여 매개변수의 사용성을 높일 수 있다.
}

하지만 dart는 null-safety가 적용되어 있어서 사용자가 파라미터를 작성하지 않았을수도 있음에 에러를 표시한다.

이를 해결하기 위해서는 두가지 방법이 존재한다.

defalut-value

첫번째는 매개변수의 기본 값을 지정하는 것이다.

String introduce({
    String name = "jinjin", 
    int age = 25,
    String country = "seoul",
}){
    return "my name is $name, I'm $age years old. I'm from $country";
}

void main(){
    print(introduce()); // 기본 값을 지정해두면 매개변수가 없어도 에러가 나지 않는다
    // my name is jinjin, I'm 25 years old. I'm from seoul
}

required

두번째는 매개변수의 필수 값 지정을 하는 것이다.

String introduce({
    required String name, 
    required int age,
    required String country,
}){
    return "my name is $name, I'm $age years old. I'm from $country";
}

void main(){
    print(introduce()); // 필수 매개변수를 입력하지 않은 함수 사용은 에러를 발생한다.
}

• String : "안녕하세요"
• int : 123
• double : 1.232
• boolean : true/false
• List : [1, 2, 3, 4]
• Map : {key : value, key2 : value2}
• Set : {1, 2, 3, 4}

Dart의 데이터 타입은 모두 class로 이루어져 있어서 데이터 타입에 따라 Method를 자유롭게 사용할 수 있다.

String

문자열 타입.

void main(){
    String a = "hello";
}

int

정수 타입. 소수점 불가능

void main(){
    int a = 123;
}

double

실수 타입.

void main(){
    double a = 1.125424;
}

num

int와 double 클래스를 살펴보면 둘 다 num을 참조하고 있다는 사실을 알 수 있다.

num은 int와 double의 부모 class로 int와 double 값을 모두 가질 수 있으나 잘 사용하지 않는다.

void main(){
    num a = 12;
    a = 12.3232;
}

boolean

논리 타입.

void main(){
    boolean a = true;
    a = false;

    a = !a;
}

List

리스트 형식으로 값을 담는다.

void main(){
    List<int> numbers = [1, 2, 3, 4];
}

List<타입> 리스트 = [값, 값] 또는 var 리스트 = [값, 값] 으로 선언하며 여러타입을 넣고 싶다면 object 타입을 넣으면 된다.

리스트의 마지막 값에도 ,를 넣으면 dart가 알아서 정렬을 해준다.

void main(){
    List<int> a = [1, 2, 3, 4]; // 정렬 안됨
    List<int> b = [
        1,
        2,
        3,
        4,
    ];
}

collection if 라는 기능으로 조건문으로 list에 값을 넣을 수 있다.

void main(){
    boolean chk = true;
    List<int> a = [
        1,
        2,
        3,
        4,
        if(chk) 5,
    ];
    print(a); // [1, 2, 3, 4, 5];

    boolean chk = true;
    List<int> b = [
        1,
        2,
        3,
        4,
        chk ? 6 : 5,
    ];
    print(b); // [1, 2, 3, 4, 6]; // 삼항 연산자도 잘 적용된다.
}

collection for 라는 기능으로 list 재가공도 간편하게 할 수 있다.

void main(){
    List<int> a = [1, 2, 3, 4]; // 정렬 안됨
    List<int> b = [
        1,
        2,
        3,
        4,
        for(var num in a) a
    ];

    print(b); // [1, 2, 3, 4, 1, 2, 3, 4]
}

String Interpolation 라는 기능을 사용하여 문자열 사이에 변수를 넣을 수 있다. $+변수으로 넣으면 된다.

${변수} 구조로 변수를 재가공할 수도 있다.

void main(){
    String name = "jinjin";

    print("hello! my name is $name"); // hello! my name is jinjin

    int num = 1;

    print("one plus one equals ${num+1}"); // one plus one equals 2
}

Map

key와 value로 이루어진 타입.

void main(){
    Map<int, boolean> temp = {1: true, 2: false};
}

Set

List와 구조는 동일하지만 Set의 값들은 유니크하다.

void main(){
    Set<int> temp = {1, 2, 3};

    temp.add(1);
    temp.add(2);

    print(temp); // 1, 2, 3, 1, 2가 아닌 1, 2, 3이 출력된다.
}

Dart에서는 두가지로 변수를 선언할 수 있다.

void main(){
    String name = 'jinjin';
    var age = 12;
}

타입 + 변수명 으로 선언할 수도 있으며 var + 변수명 으로 선언할 수도 있다.

Dart의 스타일 가이드에 따르면 메소드나 함수내의 지역변수는 var를 사용하는걸 권장하며 class나 properties엔 타입명으로 선언하는 게 좋다.

Dart는 타입을 추론할 수 있으며 한번 선언한 타입외의 변수값으로 재지정할 수는 없다.

void main(){
    String name = 'jinjin';
    name = 'dongdong'; // 가능

    var age = 12;  // dart가 알아서 int 타입을 추론해준다.
    age = true; // int 타입에서 boolean 타입으로 변환 시 에러가 발생한다.
}

dynamic 타입

Dart에서는 타입을 지정하지 않아도 되는 dynamic 타입으로 변수를 선언할 수 있다. 이 dynamic 타입은 정말 필요할때만 사용이 권장되며 웬만해선 사용하지 않는 것이 좋다.

void main(){
    var name; // var로 변수를 선언할 때 값을 지정하지 않으면 dynamic으로 지정가능
    dynamic time = 12; // dynamic으로 변수 선언

    name = 'jinjin';
    name = 123;
    name = true;
    time = "12시 30분";
    //어떤 타입으로 설정해도 오류가 나지 않는다.

    if(name is String){
        // 이렇게 if문으로 dynamic변수의 타입을 잡아주면 dart가 해당 타입의 속성을 잡아준다 (name.length 등)
    }
}

null safety

Dart의 변수들은 기본적으로 nullable이 아니다. 즉, null값을 허용하지 않는다.

void main(){
    String name = null; // 에러발생
}

하지만 타입뒤에 ?를 붙힌다면 Dart는 해당변수가 null일 수도 있다는 즉 nullable이 허용된다.

void main(){
    String? name = null;
}

또한 Dart가 해당 변수는 null일 수 있음을 알기에 컴파일러가 에러를 미리 찾아준다.

void main(){
    int count(String word) => word.length;

    count(null); // 컴파일러가 에러를 잡아내진 못하고, null값에 length를 접근하니 런타임 에러가 발생한다.
}

void main(){
    int count(String? word) => word.length; // null일 수 있는 값에 length를 구하니 에러가 발생한다.

    count(null);
}

변수를 nullable로 허용한 뒤에는 null이 아닐 때를 구분하여 속성에 접근해야한다.

void main(){
    String? a = null;

    if(a != null){
        print(a.length);
    }
    // 또는
    print(a?.length); // a가 null이 아닐때만 length를 구하는 축약어
}

final

final은 javascript나 typescript로 따졌을 때, const와 비슷한 상수이다. const와 마찬가지로 값을 재 할당이 불가능하다.

void main(){
    final a = "1";
    a = "2"; // 같은 타입으로 재 할당하더라도 에러 발생
}

const

const 역시 상수지만, javascript나 typescript와는 다른 특징을 가진다. compile-time constant로서 컴파일 시 값을 알고 있어야 하는 상수이다.

컴파일 이후 api를 받아오는 경우나 사용자의 입력 값을 지정하는 경우엔 const대신 final을 사용해야한다.

late

var, final, const에는 late를 붙힐 수 있는데, late를 사용하면 값을 나중에 할당해도 된다. 물론 값은 한번만 할당이 가능하다.

void main(){
    late final a;
    a = "2"; // 에러 발생 안함
}

late final은 api를 호출하여 값을 받아올 때 가장 유용하다.

Flutter는 구글에서 개발한 크로스 플랫폼 모바일 앱 개발 프레임 워크이다. Flutter를 사용하여 고품질, 고성능의 ios, Android의 앱이나 웹을 하나의 단일 코드로 개발할 수 있다.

크로스 플랫폼을 이용하면 ios와 Android를 개발하는 개발자를 별도로 두지 않아도 되며, 유지보수 또한 간편해진다.

현재 크로스 플랫폼을 이용한 모바일 프레임 워크로는 구글의 Flutter와 페이스북의 react native가 있다.

Dart

Flutter는 다른 언어와 다르게 Dart라는 언어를 사용하여 개발한다. C#, Java, TypeScript와 흡사하여 기존에 하나라도 숙지한 언어가 있다면 쉽게 접근이 가능하다.

Flutter의 장점

1. 핫 리로드

코드 수정 후 어플을 다시 실행하지 않아도 수정사항이 바로 반영되어 확인이 가능하다.

2. 크로스 플랫폼

하나의 코드로 안드로이드와 ios 모두 개발이 가능하다.

3. 디자인

안드로이드와 ios의 기본적인 디자인을 제공하기 때문에 각 플랫폼 디자인 가이드에 맞는 화면을 그릴 수 있다.

목요일 밤 피곤한 몸을 이끌고 많은 오류들과 싸운 나를 위해 패치노트식으로 작성하게씀,,

1. 사용자 요구사항에 맞춰 탭 추가.
2. 삭제 시 선택 모드 해제되도록 편의성 추가
3. 사용하지 않는 필터버튼 삭제
4. 삭제 시 입력 폼 초기화 되도록 편의성 개선
5. 테마 색 변경 기능 추가

   이스터 에그로 테마색 변경 기능을 추가하였다. 단 한명만 사용할 수 있도록.. 일정 조건이 충족된 후 로고를 클릭하면 테마색 변경이 가능한 colorPicker를 추가했다. 선택한 색상 값은 rgba로 데이터베이스에 저장되어 반영된다.

( 출근 > 회사에서 개발 > 퇴근 > 집에서 개발 ) ;;

프론트는 React를 사용했고 백엔드는 Node를, DB는 mysql를 사용하여 혼자 설계부터 개발 후 배포까지 해보았다..

혼자 급하게 만들다 보니 프론트에서 state를 여러 컴포넌트에서 정신없이 선언한 점, 백엔드에서 라우트 파일을 나누지 않고 app.js에 몰아쓴 점 등 리팩토리해야할 부분이 아직 많다.

달디가 뭔데

사실 거창한 서비스는 아니고 그냥 기본적인 CRUD를 사용해 게시판을 입맛에 맞게 제작한 것 뿐이긴 하다. 그래도 나름 완성한 기념으로 별거 아닌 기능을 나열해보자면

• 게시글 등록 기능
• 게시글 수정 기능
• 게시글 삭제 기능
• 탭 구분 기능
• 상태별 태그 기능
• 선택, 일괄 삭제 기능
• 키워드 검색 기능

요정도 게시판 알차게 구성해보았다.

배포..!

사실 개발 자체는 늘 하던 일이기에 그렇게 어렵진 않았지만 실제로 배포를 해보는 건 처음이였다.. 백엔드와 데이터베이스는 AWS EC2를 이용하고 탄력적 IP도 한번 적용해 보았다 ㅎ 공부한 걸 직접 프로젝트에 적용해보니 또 다른 재미와 성취감이 느껴짐

프론트는 나름의 도메인을 적용하여 사용자가 접속하기 편하게 만들려고 netlify를 사용하여 배포했다. 그런데..

배포중 생긴 이슈

EC2로 배포한 서버로 로컬에서 API 요청을 보내면 응답이 잘 왔는데 싱글벙글 프론트 배포 후 netlify 링크로 접속하니 API 응답이 없는 것이 아닌가..

무슨 문제인지 찾아내고 대체법을 찾아내기까지 구글에 나오는 각종 사이트를 전부 조회했다.

아마 이 날 구글 사용량에 순위에 내가 있지 않을까..

그리고 해결

API 요청이 실패한 이유는 바로 netlify는 HTTPS를, EC2는 HTTP를 사용하기 때문.. 이 방법을 해결하기 위해 다양한 방법을 찾아봤는데 다행히 같은 상황을 겪은 한분이 블로그에 해결법을 적어주셨다.

해결법을 주신 분의 벨로그. 다시한번 감사의 말씀을

"리다이렉트 경로를 설정하여 모든 요청을 브라우저에서 추가로 연결하지 않고, CDN서버에서 바로 프록시 시키는 방식을 사용해 서버와 통신을 가능하게 하는 것입니다."

라고 작성해주셨는데 정확히 이해하지는 못했다. 후에 실제로 어떻게 작동하는 것인지도 찾아봐야겠음

이렇게 작은 프로젝트 하나를 직접 해보았는데 부족함을 많이 느끼고 간다.. 다음은 협업 프로젝트에 참여하여 많은 이슈 만나보려고 한다.

공부 시작

오늘은 잠을 거의 못자고 일하고 온 상태라 최대한 컨디션이 되는만큼 공부해봄..

공부 끝

타입스크립트로 마이그레이션 해볼려고 시도중인데 잘되지 않음..

공부 시작

중간 휴식

매칭 불러오기 시 5건 이상이면 5건까지만 보여주며 더보기 추가 추가사항 : 더보기 클릭 시 남은 매칭 기록까지 보여주기, 가독성 향상을 위해 시간 제거/챔피언 이미지로 보여주기, 게임 승패도 추가하기

다시 시작

매칭 불러오기 가독성 향상을 위해 channel에 send하는 구조 변경, 이미지 추가, 승패 추가

공부 끝

더보기 기능 좀 만들면서 이제 타입스크립트로 변환해봐야된다.. 연휴에 좀 해볼려했는데 너무 놀기만한 내가 밉다..

캡슐화는 객체와 메서드는 한곳에 묶어서 외부에서 직접적으로 접근하지 못하도록 막는 것.

전에 공부한 getter와 setter도 캡슐화의 일부가 아닐까 싶다.

캡슐화를 하는 이유? 위에 말한 것처럼 외부에서 객체의 값에 직접적으로 접근하지 못하여 정보 은닉에 도움을 주고, 코드의 유지보수와 재사용성을 향상시키기 위해서이다.

왜 유지보수와 재사용성이 향상되나? 보안에 도움이 되는 것은 알겟지만 왜 유지보수와 재사용성이 향상되는지는 한번에 이해가 되지 않았는데 직접 코드와 연관지어 생각해보니 이해가 쉽다.

export class Account {
  private readonly accountNum: string;
  private readonly accountHolder: string;
  private balance: number = 0;
  constructor(accountNum: string, accountHolder: string) {
    this.accountNum = accountNum;
    this.accountHolder = accountHolder;
  }
  public getAccountNum(): string {
    return this.accountNum;
  }
  public deposit(money: number): void {
    this.balance += money;
  }
  public withdraw(money: number): void {
    this.balance -= money;
  }
  public getAccountNumber(): string {
    return this.accountNum;
  }
  public getBalance(): number {
    return this.balance;
  }
}
const account = new Account("1234567891234", "wooje");
// 3만원 입금
account.deposit(30000);
// 1만원 인출
account.withdraw(10000);
// 잔액 조회하기
console.log(`잔액 : ${account.getBalance()}`);

위의 코드를 보면 Account 클래스의 계좌번호나 예금주, 잔액에 외부에서 직접적으로 접근을 못하기 때문에 내부 속성이 바뀔일은 없다. 그렇기때문에 다른 코드에서도 Account 클래스에서 선언한 메서드를 코드를 수정할 필요없이 재사용할 수 있으면 유지보수가 간편하다.

공부 시작

중간 휴식

getter와 setter 공부 및 정리 이따가 캡슐화 공부 예정

다시 시작

공부 끝

캡슐화 정리 완료!

하나의 메서드로서 getter는 객체의 속성을 반환하고, setter는 객체의 속성을 설정하거나 변경한다.

const me = {
 age : 26,
 name : "now_0o"
}

console.log(me.name); // "now_0o"
me.name = "wooje";

getter와 setter를 사용하면 이렇게 객체에 대해 직접적으로 접근하지 않고 get과 set 메서드를 통해 해당되는 속성에만 접근하도록 제한을 할 수 있다.

const me = {
 age : 26,
 name : "now_0o",

 getName(){
   return me.name;
 },

 setName(newName){
     me.name = newName;
 }
}

console.log(getName()); // "now_0o"
setName("wooje");

getter와 setter를 사용하는 이유

처음으로 예를 든 코드와 getter와 setter를 사용한 코드가 작동과정도 똑같고 오히려 메서드를 선언하는 과정에서 코드가 늘어나보이는데 도대체 왜 사용하는 것일까?

첫번째로 getter와 setter를 사용하여 객체에 직접적으로 접근을 하지않아 필요한 정보만 보여줄 수 있다. 즉 다른 정보를 숨길 수 있어 보안을 강화할 수 있다. 두번째로 원하지 않는 값이 담기는 것을 방지 할 수 있다.

const me = {
 age : 26,
 name : "now_0o",

 getName(){
   return me.name;
 },

 setName(newName){
       if(typeof newName !== 'string'){
      console.log("이름은 문자만 설정 가능합니다.");
      return;
    }
     me.name = newName;
 }
}

위와 같이 이름에 문자열이 아닌 다른 타입의 데이터가 들어가는 것을 막을 수 있다.

get과 set

ES6부터는 get과 set을 이용해 getter와 setter를 더 간단하게 선언할 수 있다. get과 set을 이용해 선언한 메서드는 접근 시 기존 속성에 접근할 때와 같은 방식으로 접근하는데 직접적으로 속성에 접근하는 것이 아닌 가상의 프로퍼티는 생성하여 접근하는 방식이다.

const me = {
 age : 26,
 name : "now_0o",

 get myName(){
   return me.name;
 },

 set myName(newName){
       if(typeof newName !== 'string'){
      console.log("이름은 문자만 설정 가능합니다.");
      return;
    }
     me.name = newName;
 }
}

console.log(myName()); // X
console.log(me.myName); // O
me.Myname = "wooje";

주의

setter의 데이터 프로퍼티와 접근자 프로퍼티의 값이 동일하면 무한루프에 빠지게 되니 주의.

const me = {
 age : 26,
 name : "now_0o", // 데이터 프로퍼티

 get myName(){
   return me.name;
 },

 set name(newName){ // 접근자 프로퍼티
       if(typeof newName !== 'string'){
      console.log("이름은 문자만 설정 가능합니다.");
      return;
    }
     me.name = newName;
 }
}

me.name = "wooje"; // 무한루프

공부 시작

중간 휴식

매칭기록 슬래시 커맨드 사용 시 시간, 게임타입, KDA, 챔피언 불러오기. 추가사항 : 현재 최근 5개까지만 조회하는데 더보기 클릭 시 다음 기록 조회하도록 추가

공부 시작

공부 휴식

추가 공부

오늘 좀 피곤해서 멍도 많이 떄리고 시간 대비 뭘 많이하진 못했다.. 매칭기록 조회 시 game테이블와 player테이블 include해서 데이터 조회 이제 embed로 조합해서 뿌리기만 남음

공부 시작

공부 휴식

매칭불러오기 시 API 최대 요청횟수에 걸리지 않도록 2분의 쿨타임 적용 (캡쳐본은 테스트를 위해 3분으로 측정함)

또 시작 공부시간 캡쳐 못함..

매칭기록 슬래시 커맨드 사용 시 기본 틀까지 제작 추가사항 : 테이블 조회해서 같이 게임 수, 각 게임의 종류와 승패, 해당 유저의 kda까지 조회

공부기록

공부 끝은 아니고 잠깐 정지

추가 공부 더 했는데 시간 캡쳐를 안했네

공부 끝

/매칭업데이트로 게임 정보 저장. 등록 건수 10건당 1초 대기. (데이터베이스에 존재하는 건은 제외) 10건마다 진행 상황 확인 가능
추가사항 : 3분에 한번만 불러올 수 있도록 추가, 저장한 데이터로 매칭기록 조회 커맨드 추가