💡 이 글은 Toy Project 진행을 위해 UI/UX를 조사하며 알게된 유용한 사이트 및 플러그인들을 정리한 글입니다. 다양한 서비스들을 비교해보고 "무료", "정보의 다양성", "이용의 편리성"등을 위주로 정리하였습니다.

[포스팅 의도]
- Hot,Fancy,Gorgeous한 정보를 모든 사람과 공유: 1%
- 분명 나중에 "아 뭐였드라.."할 나를 위한 메모: 99%

🔗 각 이미지를 클릭하면 해당 사이트로 이동합니다.

Reference 참고

• Dribbble

  디자인 소셜 네트워킹 및 포트폴리오 공유 사이트. 다양한 레퍼런스를 참고할 수 있고, 해외에서는 채용 플랫폼으로서의 역할도 한다.

• Mobbin

  상용 서비스들의 iOS/Android/Web 디자인들을 정리해놓은 사이트. Screens, UI Elements, Flows로 정리하여 볼 수 있는 점이 가장 유용하다. (Flows는 유료 기능..🥲)

• Figma Community

  Figma의 커뮤니티 사이트. 바로 사용할 수 있는 애셋과 자료들이 많아서 Figma 사용자에겐 일석이조.

• WWIT

  국내 App들의 디자인을 이미지로 정리해놓은 사이트. App을 들어가보면 페이지 별로 분류된 이미지들이 상세하게 기록되어 있다.

Color 제작

• Foundation: Color Generator

  유명 디자인 시스템(Material, Atlassian, Orbit, Ant Design)을 기준으로 컬러 팔레트를 만들어주는 Figma의 플러그인.

• Swatchy

  기본 고유 색상을 기준으로 연관된 색상 팔레트를 추출해주는 사이트.

1. 기간: 24.01.15 ~ 24.01.21
2. 이번 주 타이틀: 뒤죽박죽 생각이 많지만 재밌어!
3. 한 줄 평: 그림은 조금씩 그려지고 있지만 아직 정리해야 할 내용이 더 많다. 그런대로 재밌어 하는 중..

📌 목표

1. Toy Project 1차 기획 진행 (~01.21)
2. Flutter 도서 공부(~3차시)

📈 Good

1. 출퇴근 시간에도 공부한 것
2. reference를 많이 찾아본 것 (비록 UI/UX에 더 꽂혔지만.)

📉 Bad

1. 문서로의 정리가 더딘 것
2. 기획 중에 생각이 길을 잃는 것ㅋㅋㅋ🧭

📝 주요 스터디 내용

• Toy Project - 기획 #1

  지난 주에 다 못했던 기획을 조금씩 진행해보고 있는데, 선택 장애와 흥미를 같이 느끼는 중이다. 금주에는 기존 App들을 비교해보고, 갖춰야하는 최소한의 공통 기능에 따라 정리해보았다.

  📝 ToyProject 기획에 대한 조금 더 상세한 내용은 따로 작성한 포스트를 첨부한다. 참고: [Toy] 우당탕탕 음악 App 만들기 - 기획 #1

• Flutter 도서 공부

  이번 차시의 내용은 Dart의 클래스 관련 내용으로, 이전에 몰랐던 혹은 기억하고픈 내용들만 간단히 작성해보았다.

  📝 회고록에 작성하면 어떤 내용이 포함됐는지 파악하기 힘들어 따로 작성한 포스트를 첨부한다. 참고: [Dart] 클래스와 친구들

💭 이모저모

스포티파이 재즈 플레이리스트 넘나 좋다..! 돈 쓰고 싶게 만드네 참나😌

💡 이 글은 ToyProject를 진행하기 위해 구상한 뒤죽박죽의 생각들을 "기획"이라는 범주에 포함될 수 있도록 정리한 글입니다. (a.k.a 일단 기획이라고 우기기)

• 아이디어 출발

  나는 음악이 가진 무언가를 좋아한다. 그 무언가는 사람의 기분부터, 심지어 그 공간의 분위기까지 영향을 미친다고 느낀다.

  해안가를 따라 드라이브 할 때. 조용한 도서관에서 책을 읽을 때. 캄캄한 밤 거리를 걸을 때.

  같은 공간에서도 듣는 음악에 따라 시공간의 기억은 각자 다르게 남는다. 나는 그 기억들을 기록하고 싶었고, 이 생각이 App의 시작이었다.

• 레퍼런스 분석

  음원 스트리밍 앱은 벅스만 오래 사용해왔던 터라 다른 앱들도 파악이 필요하다고 느꼈다. Spotify, Apple Music, SoundCloud, 멜론, 벅스 등을 번갈아가며 제공하는 기능들과 구성을 살펴보았다.

  • 공통 기능

    기능	설명
    오디오 스트리밍	사용자가 원하는 음악을 언제 어디서든 실시간으로 즐길 수 있다.
    음악 검색	사용자가 검색어를 통해 원하는 음악을 쉽고 빠르게 찾을 수 있다.
    음악 플레이어	사용자가 재생/일시정지/다음 곡으로 넘기기 등 자유롭게 음악을 제어한다.
    가사 표시	사용자는 재생 중인 음악의 가사를 확인할 수 있다. (음악 플레이어에 포함)
    음악 추천	사용자의 음악 청취 패턴에 따라 개인화된 음악 추천을 제공한다.
    플레이리스트	사용자가 자신만의 플레이리스트를 만들고 관리할 수 있다.
    다운로드	사용자가 원하는 음악을 다운로드하여 오프라인에서도 들을 수 있다.
    팟캐스트와 라디오	사용자가 음악 외에도 팟캐스트나 라디오를 들을 수 있다. (이 기능은 글쎄.. 후순위로!)

  💡 How to make a Music app ?

  음악 앱 관련 시장 현황, 필수 기능 등을 상세히 정리해 놓은 좋은 자료들이 생각보다 많아 그 중 일부를 첨부한다.
  [참고] post: How to Start a Music App Like Spotify post: How to Make a Music Streaming App

  • 화면 구성

    모두 Home, 검색, 라이브러리 탭을 공통적으로 갖추고 있고, 각 페이지 안의 구성도 크게 다르지 않았다. 이를 참고하여 나만의 MVP를 만들어 볼 생각이다.

  [ 공통 탭 : 내부 구성 ]
   ㅁ Home: 최근 재생 음악 / 추천 음악 / 최신 음악
   ㅁ 검색: 검색 바 / 장르 및 테마 별 추천
   ㅁ 라이브러리: 플레이리스트

• 정리 및 결과

  가칭이지만 App 이름은 MUPIN(뮤핀)으로 정했다! 유니크 아이디어와 연관되는 제일 직관적인 단어였다ㅋㅋㅋ (짝꿍이 보자마자 '머핀'이냐고 물었다; 아 그렇게 읽는 거 아니라고;)

  Sitemap은 크게 사진과 같은 흐름으로 구성하였고, 차주 기획에서 번호에 따라 화면 설계서를 작성해볼까 한다.

  p.s 유니크 아이디어는 일찍 알면 재미없으니.. 마지막에 올려야지 싶다 (부끄러워서 그런거 아님🥲)

  • 컨셉

    
  
  

  • Sitemap

    

💡 이 글은 "깡샘의 플러터&다트 프로그래밍" 도서에서 '클래스와 생성자' & '상속과 추상 클래스' 내용을 바탕으로 정리한 것입니다.

• 생성자

  Dart의 클래스는 다른 객체지향 언어의 클래스와 비슷하지만 몇 가지 독특한 내용을 정리해본다.

  • 멤버 초기화 생성자 단순화

    class User {
    late String name;
    late int age;
    User(this.name, this.age);  // this 키워드로 멤버 바로 초기화
    }

  • 초기화 목록(Initializer list)

    // ':' 사용한 초기화 목록
    User(String name, int age) : this.name = name, this.age = age { }

    // 리스트 데이터로 초기화
    class MyClass { 
    late int data1;
    late int data2;
    
    MyClass(List<int> args) 
      : this.data1 = args[0],
        this.data2 = args[1] { }
    }

    // 멤버 함수 반환값으로 초기화
    class MyClass { 
    late int data1;
    late int data2;
    
    MyClass(int arg1， int arg2)
      : this.data1 = calFun(arg1),
        this.data2 = calFun(arg2) { } 
    
    static int calFun(int arg) {
      return arg * 10; 
    }
    }

    • 명명된 생성자(Named Constructor) 생성자 오버로딩대신 이름이 있는 생성자를 여러 개 선언하는 기법

      // 명명된 생성자
      class MyClass {
      late imt data1;
      late imt data2; 
      

    MyClass(this.data1, this.data2); MyClass.first(int arg) : this(arg, 0); // 기본 생성자(MyClass) 호출 MyClass.second() : this.first(0); // 명명된 생성자(MyClass.first) 호출 }

    
    * 팩토리 생성자(Factory Constructor)
    클래스 외부에서는 생성자처럼 이용하지만 실제로 객체를 생성하진 않고, 상황에 맞는 객체를 반환하는 역할
    캐시 알고리즘이나 상속 관계에 따른 다형성 구현 시 유용.
    ```dart
    // 캐시 알고리즘 구현 예
    class Image {
    late String url;
    static Map<String, Image> _cache = 〈String, Image>{};
    Image._instance(this.url);           // named constructor
    factory Image(String url) {
      if (_cache[url] == null) {         // 전달받은 식별자가 캐시에 없으면
        var obj = Image.instance(url);   // 해당 식별자로 객체를 새로 생성하고 
        _cache[url] = obj;               // 캐시에 추가
      }
      return _cache[url]!;               // 캐시에서 식별자에 해당하는 객체 반환
    }
    }
    

  main() { var imagel = Image('a.jpg'); var image2 = Image('a.jpg'); print('image1 == imaged : ${image1 == image2}'); // image1 == image2 : true }

• 상속과 추상 클래스

  다른 객체지향 언어와 큰 차이는 없다.

  • 상속, 오버라이딩, 부모 클래스 멤버 접근

    // 함수 객체 활용 예
    class SuperClass {
    int myData = 10;
    void myFun() {
     print ('Super..myFun()...');
    }
    }
    

  class SubClass extends Superclass { // 'extends' 키워드로 상속 int myData = 20; void myFun() { super.myFun(); // 'super' 키워드로 부모 클래스 멤버 접근 print('Sub..myFun()..myData : $myData, super.myData : ${super.myData}'); // 'super' 키워드로 부모 클래스 멤버 접근 } }

  main(List args) { var obj = SubClass(); obj.myFun(); }

  // 실행 결과 Super..myFun()... Sub..myFun()..myData : 20, super.myData : 10

  
  * 부모 생성자 호출 및 멤버 초기화
  ```dart
  // 부모 클래스 생성자 호출 및 멤버 변수 초기화
  class Superclass {
   String name;
   int age;
   SuperClass(this.name, this.age) {}
  }
  
  class SubClass1 extends Superclass {
   SubClass(String name, int age) : super(name, age) {}    // 부모 클래스 멤버 초기화
  }
  
  class SubClass2 extends Superclass {
   SubClass(super.name, super.age); 
  }
  
  main() {
   var obj1 = SubClass1('kkang', 10);
   print('${obj1.name}, ${obj1.age}');
   var obj2 = SubClass2('kkim', 20);
   print('${obj2.name}, ${obj2.age}');
  }

  // 실행 결과
  kkang, 10
  kkim, 20

  • 추상 클래스

    // 추상 클래스 선언 및 재정의
    abstract class User {    // 'abstract' 키워드로 추상 클래스 선언
    void some();
    }
    

  class Customer extends User { @override void some() {} }

  
  * 인터페이스
  ```dart
  // 일반 클래스
  class User { 
   String name;
   User(this.name);
   String greet(String who) => 'Hello, $who. I'm $name';
  }
  
  // 'implements' 키워드로 인터페이스 구현 클래스 선언
  class MyClass implements User {    // User는 암시적 인터페이스 역할
   String name = 'kim';
   @override
   String greet(String who) => return 'hello';
  }
  
  main() {
   User user = MyClass();    // 구현 클래스 객체는 인터페이스 타입으로 선언 가능
  }

  • 믹스인(Mixin) 믹스인은 변수와 함수는 선언할 수 있지만 클래스가 아니므로 생성자가 없다. 하지만 내부에 선언된 멤버들을 다른 클래스에 상속한 것처럼 이용할 수 있다.

    // 믹스인을 다중 상속처럼 활용한 예
    mixin MyMixin {    // 'mixin' 키워드로 믹스인 선언
    int mixinData = 10; 
    void mixInFun() {
     print ('MyMixin...mixInFun()...'); 
    }
    }
    

  class MySuper { int superData = 20; void superFun() { print('MySuper... superFun()'); } }

  // 다중 상속처럼 선언 class MyClass extends MySuper with MyMixin { // 'with' 키워드로 믹스인 멤버 사용 선언 void sayHello() { print('class data : $superData， mixin data : $mixinData'); mixInFun(); superFun(); } }

  main() { var obj = MyClass(); obj.sayHello(); }

  // 실행 결과 class data : 20, mixin data : 10 MyMixin... mixInFun()... MySuper...superFun() ```

1. 기간: 24.01.08 ~ 24.01.14
2. 이번 주 타이틀: 기획의 시작과 끝은 어디인가.
3. 한 줄 평: 막연한 생각들을 간단한 기획 문서로 정리해야하는데 쉽지 않다..

📌 목표

1. Toy Project 기획 진행 (~01.21)
2. Flutter 도서 공부(~2차시)

📈 Good

1. 출퇴근 시간에도 공부한 것
2. 여가 시간에 IT 관련 자료 찾아보는 것

📉 Bad

1. 문서로의 정리가 더딘 것
2. 여전히 으른인것.. 게으른.

📝 주요 스터디 내용

• Toy Project

  지난 주에 찾았던 필수 기능들을 우선 순위에 따라 추려야하고, 그에 따라 Flowchart를 그려보아야 가닥이 좀 잡힐 것 같다.

  그 후에는 Figma & Figjam 조합으로 UI/UX 디자인을 정의해서 얼추 동작하는 프로토타입을 만들어볼 계획이다.

  기능에 따라 필요한 기술 스펙은 위의 내용들이 정리되면 정할 수 있을 것 같다.

  찾아보면 정석적인 앱 개발 프로세스는 제품 포지셔닝, 타겟 사용자 설정, 수익 모델 등의 비지니스 분석이 제일 우선이라고 하는 데, Toy Project이니 그 단계는 스킵하려 한다. (사실 어떻게 하는 건지도 모르겠..읍읍)

• Flutter 도서 공부

  이번 차시의 내용은 개발 환경 세팅과 Dart 언어 내용으로, 이전에 몰랐던 혹은 기억하고픈 내용들만 간단히 작성해본다.

  • Library 만들기

    다수의 .dart 파일로 이루어진 라이브러리를 하나의 .dart로 묶어 편리하게 import 할 수 있도록 구성. part of, library, part 키워드 사용.

    // a.dart
    part of my_lib;  // 'part of'로 특정 라이브러리에 포함 선언
    int aData = 10;

    // b.dart
    part of my_lib;  // 'part of'로 특정 라이브러리에 포함 선언
    int bData = 20;

    // my_lib.dart
    library my_lib;  // 'library'로 라이브러리 선언
    part 'a.dart';   // 'part'로 라이브러리에 파일 등록
    part 'b.dart';   // 'part'로 라이브러리에 파일 등록

  • 명시적 형 변환 연산자 as

  • 함수 타입 인수

    Dart에서는 모든 데이터가 객체 → 따라서 함수도 객체(Function 타입) 함수의 매개변수로 함수 객체를 대입 가능.

    // 함수 객체 활용 예
    int plus(int no) {
    return no + 10;
    }
    int multiply(int no) {
    return no * 10;
    }
    

  Function testFun(Function argFun) { print('argFun : ${argFun(20)}'); return multiply; }

  main(List args) { var result = testFun(plus); // result는 multiple() 함수 반환 print('result : ${result(20)}'); }

  // 실행 결과 argFun: 30 result: 200

  
  * ### try~on~finally 예외 처리
  try 예외 발생 → on 실행(종류따라) → finally 실행(무조건)
  
  ```dart
  // 예외 객체 가져오기
  some() {
  throw FormatException ('my exception');
  }
  
  main(List<String> args) {
  try {
    print('step1...');
    some();
    print('step2...');
  }
  on ForwatException catch(e) {
    print('step3...$e');
  } 
  on Exception catch(e) {
    print('step4...$e');
  } 
  finally {
    print('step5...');
  }
  print('step6...');
  }

  // 실행결과
  step1...
  step3...FormatException: my exception
  step5...
  step6...

💭 이모저모

회사 선임님께서 맥북 Pro를 한참 고민하시다 결국 22개월 무이자 할부로 사셨다는 소식을 들었다💻 ... .. 곧 내 신용도도 써먹을 때가 올 것 같다.

다른 프로젝트들을 살펴보는 동안, 항상 거슬리는 게 있었어. 그건 대부분이 Dart 문법 규칙을 제대로 지키지 않는다는 거야.

넌 아마 다른 언어들을 써왔겠지만 지금은 Dart를 쓰고 있고, 또 Dart에서는 몇 가지를 좀 다르게 처리하거든.

사실 Dart 문서가 모든 걸 깔끔하게 설명해주지만 우리 대부분은 문서를 다 읽는 걸 너무 귀찮아하잖아. 그래서 난 이런 게으른 놈들을 위해 요약본을 만들기로 했어.

도움이 되길 바랄게!

• folders/files (lower_snake_case)

  my_widgets
  ㄴ my_fancy_widget.dart
  ㄴ my_hot_widget.dart

• classes (UpperCamelCase)

  class MyFancyClass { ... }

• extensions (UpperCamelCase)

  extension MyFancyList<T> on List<T> { ... }

• mixins (UpperCamelCase)

  mixin MyCoolMixin { ... }

• functions (lowerCamelCase)

  void MyGorgeousFunc() { ... }

• variables (lowerCamelCase)

  var myPrettyVar

• constants (lowerCamelCase)

  const CAPITALIZE_EVERY_DAMN_LETTER // NO
  const goodConstant // yes

• enums (lowerCamelCase)

  enum Name { FIRST_NAME, LAST_NAME } // WRONG!!
  enum Name { firtName, lastName }    // RIGHT!!

• 사용하지 않는 콜백 파라미터는 _, __ 등으로 기입해라.

  // IF YOU WON'T USE DON'T MENTION IT
  futureOfVoid.then((unusedParameter) => print('Operation complete.'));
  futureOfVoid.then((_) => print('Operation complete.'));

• 문자열과 값들을 구성할 땐, interpolation을 선호해라.

  // GOOD BOY
  'Hello, $name! You are ${year - birth} years old.';
  // BAD BOY
  'Hello, ' + name + '! You are ' + (year - birth).toString() + ' y...';

• 불필요한 getter/setter를 피하라.

  // GOOD
  class Box {
  var contents;
  }
  // BAD
  class Box {
  var _contents;
  get contents => _contents;
  set contents(value) {
    _contents = value;
  }
  }

• 젠장할 모든 타입을 어디든 적어라.

  add(a,b) => a + b; // DAMN WRONG
  int add(int a, int b) => a + b;  // HELL YEAH
  final List<String> users = <String>[];  // THAT'S OVERKILL
  final List<String> users = []; // GREAT
  final users = <String>[]; // WONDERFUL

• 선사시대적 'new' 키워드 좀 제발 그만 사용해라.

  // I'm old dude
  new Container();
  // I'm a brand new energetic open-minded sexy young dude
  Container();

  
  

좀 공격적이라면 미안하지만, 당장 코드 안 고치면 내가 너 찾아간다. 그리고 새로운 난장판들이 계속 보이면 내용을 더 추가할 생각이니까 조심해.

💡 Reference

medium post: Fix your Dart DAMN Syntax

1. 기간: 24.01.01 ~ 24.01.07
2. 이번 주 타이틀: Flutter로 Toy Project 준비 시작!
3. 한 줄 평: 지금까지의 맛보기 공부로는 택도 없을 것 같지만.. 그래도 해보자!

📌 목표

1. Toy Project 컨셉 정하기
2. Flutter 추가 공부 자료 선정

📈 Good

1. 출퇴근 시간에도 공부한 것
2. 여가 시간에 IT 관련 자료 찾아보는 것 (이제야 열정 주입 중)

📉 Bad

1. 딱히 결과물이 없는 것..

📝 주요 스터디 내용

• Toy Project

  Flutter를 이용한 App을 만들어보고 싶은데 뭐가 있을까 고민하던 중.. 토이 프로젝트는 자신이 흥미있는 걸로 도전하라고 했던가! (출처: 모름) 하루도 빠짐없이 매일 사용하고 또 좋아라하는 음악 스트리밍 앱을 만들기로 정했다!

  그래서 음악 앱이 갖춰야 할 기능들을 살펴보며 공통적인 것들을 추려보았고, 이와 더불어 내가 생각하는 유니크 기능을 추가해 개발해보고 싶다. 다음 주에 상세 기획을 진행하여 포스팅 할 예정!

  ✅ 음악 앱 필수 기능

  • 오디오 스트리밍

    사용자가 원하는 음악을 언제 어디서든 실시간으로 즐길 수 있다.

  • 음악 검색

    사용자가 검색어를 통해 원하는 음악을 쉽고 빠르게 찾을 수 있다.

  • 음악 플레이어

    사용자가 재생/일시정지/다음 곡으로 넘기기 등 자유롭게 음악을 제어한다.

  • 가사 표시

    사용자는 재생 중인 음악의 가사를 확인할 수 있다. (음악 플레이어에 포함)

  • AI 추천

    사용자의 음악 청취 패턴에 따라 개인화된 음악 추천을 제공한다.

  • 플레이리스트

    사용자가 자신만의 플레이리스트를 만들고 관리할 수 있다.

  • 다운로드

    사용자가 원하는 음악을 다운로드하여 오프라인에서도 들을 수 있다.

  • 팟캐스트와 라디오

    사용자가 음악 외에도 팟캐스트나 라디오를 들을 수 있다. (이 기능은 글쎄.. 후순위로!)

  💡 How to make a Music app ?

  음악 앱 관련 시장 현황, 필수 기능 등을 상세히 정리해 놓은 좋은 자료들이 생각보다 많아 그 중 일부를 첨부한다.
  [참고] post: How to Start a Music App Like Spotify post: How to Make a Music Streaming App

• Flutter 공부 자료

  1. 도서

  짝궁과 놀러간 조용한 도서관에서 딱 한 권 있던 Flutter 관련 도서를 발견했는데, 내가 공부하고 싶었던 상태 관리 라이브러리와 Firebase 활용이 담겨있었다. 도서관 방문 이후 다른 Flutter 서적들도 찾아보았지만, Provider / GetX / BLoC 라이브러리를 모두 다룬 책이 없어 이 녀석으로 확정!

  

  💡 Flutter 상태 관리 라이브러리 ?

  Flutter는 선언형 UI로써 각 위젯들이 나타낼 자신의 상태를 가지고 있기 때문에 App의 규모가 커짐에 따라 상태 관리 또한 매우 중요해진다. 이러한 상태 관리를 위한 라이브러리들을 비교해놓은 좋은 글들이 있어 첨부한다.
  [참고] post: [Flutter] 상태 관리(State Management) 정리 post: Flutter 인기 아키텍처 라이브러리 3종 비교 분석 - GetX vs BLoC vs Provider post: 플러터, 상태관리 프레임워크(Bloc, Provider, GetX) 어떤 것을 이용할 것인가? post: [Flutter] 왜 상태 관리에 Bloc을 쓸까? (feat.GetX)

  
  

  2. 인터넷 강의

  요즘 Flutter 관련 내용들을 계속 찾다보니 귀신같은 우리의 알고리즘 선생께서 SNS에 광고마저 개발 관련 내용들로 추천해주신다.

  그 중 눈에 들어온 강의는 "대규모 앱 개발부터 Native 앱 도입까지:Flutter의 모든 것 " 이 녀석이다. 이 강의에서는 Flutter의 부분 도입을 위한 *Add-to-app 내용부터 CI/CD까지 커리큘럼에 포함되어 있어 궁금했던 내용들을 배울 수 있을 것 같다.

  💡 Add-to-app ?

  Native 앱에 Flutter가 모듈이나 라이브러리 형태로 포함되는 방식으로, 기존에 존재하던 앱 위에 새로운 페이지를 빠르게 추가/변경하고자 할 때 OS별로 따로 개발하지 않고 빠르게 동시 적용한다.
  [참고] Flutter Docs: Add Flutter to an existing app

💭 이모저모

연초 라 쉬엄쉬엄 공부한 건 사실이다..^^ 하지만, 유명하신 분의 어록을 되새기며 마음을 다잡았다. 늦었다고 생각할 땐 진짜 너무 늦었으니, 지금 당장 시작해라

(p.s 절대 귀찮아서 한 주 뒤에 회고록을 남긴 것은 아니다.. 어흑ㅠ)

포맷 A의 데이터를 포맷 B로 변환 후, 다시 본래 포맷 A로 돌아오는 과정 (Ex. double -> text -> double)

C++에서는 실수 → Text → 실수 Round-trip에서 값 손실을 막기 위해, std::numeric_limits 클래스 멤버 상수를 활용할 수 있다.

• std::numeric_limits<T>::max_digits10

  • 부동 소수점 수를 10진수 문자열로 변환했다가 다시 부동 소수점 수로 변환했을 때, 원래의 부동 소수점 수와 동일하게 유지되는 최소 자릿수.

  • Ex) std::numeric_limits<double>::max_digits10은 17인데, 이는 double 타입의 부동 소수점 수를 10진수 문자열로 변환했다가 다시 double로 변환했을 때, 원래의 수와 동일하게 유지되기 위해 필요한 최소 자릿수가 17자리라는 의미. (float는 9자리)

    
    

Reference

• std::numeric_limits<T>::max_digits10 - cppreference
• digits10 vs max_digits10 - stackoverflow
• [C++] digits10, max_digits10 - blog post

1. 기간: 23.12.25 ~ 23.12.31
2. 이번 주 타이틀: Flutter 수강 완료! (BUT, 아직 할 줄 아는 게 없는)
3. 한 줄 평: 갈 길이 멀다.. 실무에도 쓰이는 기술들을 적용한 토이 프로젝트를 해봐야겠어!

📌 목표

1. Flutter 강의 수강 완료하기 (feat. Nomad Coder Flutter lect)

📈 Good

1. 연휴 후에 정신줄 다시 붙잡은 것
2. 출퇴근 시간에도 공부한 것

📉 Bad

1. 강의 벼락치기 학습한 것..

📝 주요 스터디 내용

• Simple APP 제작

  Flutter를 이용해 간단한 기능의 App을 제작 (git repo: flutter_study)

  1. TOONFLIX App (웹툰 조회 App)

  - http package(http 통신을 지원하는 package - api 호출 활용)
   - url_launcher package(웹 브라우저, 메일, 전화 등을 열어주는 package)
   - shared_preferences package(해당 플랫폼에 data를 저장하는 package)
   - Hero widget(tag 값을 주어 위젯을 다른 screen에도 사용할 수 있도록 연결)

  

• Future 클래스 멤버 활용

  비동기 처리의 결과인 Future를 widget class의 멤버로 사용 시, 조건에 따라 사용 형태가 달라질 수 있다.

  • Ex. HomeScreen에서 받은 API response 데이터가 DetailScreen에서 필요한 경우

    1. HomeScreen Futrue 멤버 (webtoons)

    API에 대한 인자없이 처음 호출하기 때문에, StatelessWidget으로 단순 클래스 멤버처럼 사용 가능.

    
    

    2. DetailScreen Futrue 멤버 (webtoon, episodes)

    HomeScreen에서 받은 id값을 전달받아 추가 API의 인자로 넣어야 하기때문에, StatefulWidget으로 initState()에서 클래스 멤버들을 늦게 초기화.

    

💡 StatefulWidget LifeCycle

State의 개념부터 StatefulWidget의 생명주기를 잘 정리해주신 글이 있어 첨부한다. [참고] - blog post: [Flutter] LifeCycle(생명주기)

💭 이모저모

연말이라 쉬엄쉬엄 공부한 건 사실이다.. 하지만, 새해 시작인 만큼 Flutter로 더 크고 재미난 일들을 꾸며볼테야🎶🎵

1. 기간: 23.12.18 ~ 23.12.24
2. 이번 주 타이틀: Flutter 챌린지 끝! (feat. 선생님 말씀을 잘 듣자)
3. 한 줄 평: 기초 예습없이 진행한 챌린지는 너무 힘들었다.. 그래도 유익했던 시간!

📌 목표

1. Flutter 강의 수강 완료하기 (feat. Nomad Coder Flutter lect)
2. Flutter 2주 챌린지 완주 하기 (feat. Nomad Coder Flutter Challenge)

📈 Good

1. 크리스마스에도 챌린지 과제 완료한 것
2. 출퇴근 시간에도 공부한 것

📉 Bad

1. 과제 및 공부 코드 커밋 관리를 못한 것
2. 기초 강의 모두 예습하지 않고 챌린지 진행한 것

📝 주요 스터디 내용

• UI 클론

  Flutter를 이용해 아래 Planner App의 UI를 비슷하게 제작 (git repo: flutter_study)

• Simple APP 제작

  Flutter를 이용해 간단한 기능의 App들을 제작 (git repo: flutter_study)

  1. POMODORO App (타이머 App)

  - Stateful/Stateless widget 사용

  

  2. MOVIEFLIX App (영화 정보 조회 App)

  - IMDB API 사용
   - Multiple Screen 구성

  
  

• StatefulWidget

  State(상태)를 갖는 widget으로, 데이터의 변경 상태를 UI에 실시간 반영한다.

  💡 Stateless widget vs Stateful widget ?

  [참고]

  - blog post: [StatelessWidget, StatefulWidget📱](https://velog.io/@dosilv/Flutter-StatelessWidget-StatefulWidget)

• FutureBuilder widget

  비동기 처리 결과인 Future를 다루는 widget으로, 예를 들면 아래와 같은 상황에서 사용된다.
  • ex) API request 후,
    • 데이터가 로딩되는 동안 Progress Indicator 표기
    • API response 데이터에 따른 UI 화면 구성
    • error 발생에 따른 UI 화면 구성

💡 Future? FutureBuilder?

[참고] - blog post: 비동기를 위한 FutureBuilder

• Navigator widget

  App을 구성하는 스크린(홈 화면, 세부 화면 등)들의 전환을 담당하는 widget

  💡 Navigator 스크린 이동

  [참고]

  - blog post: [Navigator 페이지 이동 정리](https://calvinjmkim.tistory.com/67)

• GestureDetactor widget

  클릭, 스와이프, 드래그, 확대/축소 등의 다양한 제스처를 인식하는 widget
  

💭 이모저모

Flutter Challenge의 FAQ 중 하나인데 이 답변이 정확했다... 강의는 다 못 들었지만 일단 신청했으니 가보자! 했는데 호되게 당했다. 역시 선생님 말씀을 잘 들어야 한다.

뚜들겨 맞았지만.. 그래도 완주했다 이 말이야..!🤕

1. 기간: 23.12.10 ~ 23.12.17
2. 이번 주 타이틀: Flutter 스터디 시작 (+ 기초 UI와 친해지기)
3. 한 줄 평: C/C++만 해오던 나에게 Flutter는 신세계.. 더 빨리 친해지고 싶다!

📌 목표

1. Flutter 강의 수강 완료하기 (feat. Nomad Coder lect)
2. Flutter 2주 챌린지 누락 안 하기 (feat. Nomad Coder 10기)
3. python 기초 100제 완료하기 (feat. CodeUp 문제집)

📈 Good

1. 매일 진행되는 챌린지 과제를 누락하지 않은 것
2. 출퇴근 시간에도 공부한 것

📉 Bad

1. 모든 목표를 완료하지 못한 것
2. 과욕. 과욕. 과욕. (목표 설정 적당히 하기..)

📝 주요 스터디 내용

• UI 클론

  Flutter를 이용해 아래 Financial App의 UI를 비슷하게 제작 (git repo: flutter_study)

• Flutter Widgets

  Text, Row, Column, Container 등의 주요 widgets 사용 (참고: [Flutter] 위젯(widget) 종류, child children 매개변수)

🔍 부가 스터디 내용

• VS Code extensions & settings

  스터디하며 알게된 유용한 VSCode 관련 항목들을 따로 간단히 정리 (작고 소중한 나의 포스트: [VS Code] 유용한 VS Code Extentions & Settings)

  
  

• Widget Inspector

  App을 구성하는 모든 widget을 계층 구조로 보여주는 tool (레이아웃 확인에 유용👍)

  
  

• Code Actions (코드 옆 💡 버튼 or ⌘. 단축키)

  작성한 widget의 wrap/swap/move/remove/extract 등의 기능을 제공 (신세계..⭐️)

  
  

• Widget build(BuildContext context) Method

  모든 widget은 렌더링되기 위해 자신만의 build 함수 정의 필요

  💡 BuildContext context ?

  widget tree상에서 자신의 위치 정보를 담고 있는 객체로써, 주로 자신의 부모 widget에 접근하여 상호 작용한다. (참고: Flutter - Widget의 build메서드와 BuildContext)

💭 이모저모

위와 같은 뚱냥이 님의 회고록에 감동받아 작성을 시작해본다..

💡 이 글은 VS Code로 Flutter를 공부하며 알게된 Extention과 Setting을 정리한 글입니다. (a.k.a 큰 기능은 아니지만 없으면 허전한..)

Extentions

• Better Comments

  주석 종류에 따라 다른 서식을 적용하여 직관적으로 보여주는 Extension

• Error Lens

  코드의 error를 명확히 확인 가능하도록 도와주는 Extension

• Material Icon Theme

  Explorer에 가독성 좋은 Icon을 적용하는 Extension

Settings

• settings.json

  Command Palette(⇧⌘P) -> Open User Settings (JSON) -> 하기 코드 추가

  "[dart]": {
  "editor.formatOnSave": true,  // 저장 시, 코드 자동 formatting
   ...
  },
  "dart.previewFlutterUiGuides": true,  // widget의 부모/자식 관계 가이드라인 표시 (vscode 재시작 필요)
  "editor.codeActionsOnSave": {
    "source.fixAll": true  // 저장 시, 코드 자동 fix
  },

💡 이 글은 _노마드코더_의 Dart 시작하기 강의 내용을 토대로 정리한 글입니다.

Dart만이 가진 최소한의 개념 및 문법을 정리하였으며, 저를 포함한 Dart 입문자에게 조금이나마 도움이 되었으면 합니다. (피드백도 언제나 환영입니다!🫰)

강의 후기: 필수 개념을 간단하고 쉽게 전달하는 무료 강의! 영어로 진행되기 때문에 언어 공부까지 일석이조!
(물론 난 한글 자막 켜놓고 봤지만..)

1. Variables

💡 Nullable variable ?

Dart의 모든 변수는 기본적으로 null값을 가질 수 없는 "non-nullable"이다. 이는 null값 참조로 인한 런타임 에러가 발생하지 않도록 하는 안전 장치가 된다. 하지만 경우에 따라 개발 시에 필요한 순간이 있을 것! 이 때 변수를 nullable하도록 선언하는 것이 “?” 키워드이다.

예시 코드

String? name = "developer";
name = null;  // null 대입 가능
name.length;  // null 참조 위험으로 error 발생
name?.length; // name이 null이 아니면 length 반환!

2. Data Types

3. Functions

• "=>" syntax

  한 줄 짜리 함수라면 "=>"를 통해 간결히 작성 가능하다.

  // 아래 두 함수는 동일한 의미
  int add(int a + int b) { return a + b; }
  int add(int a + int b) => a + b;

• Named parameters

  함수 param을 선언한 이름에 따라 기입하는 방식이다. (💡 required: 함수 호출 시, 반드시 기입해야하는 매개변수로 지정하는 modifier)

  void sayHello({required String name, required int age})
  {
   print("Hello, my name is $name and I'm $age.");
  }
  
  void main()
  {
     sayHello(
       name: "kim",
       age: 97
     );
  }

  >> Hello, my name is kim and I'm 97.

• QQ operator

  1. left "??" right : left가 null이라면 right를, 아니라면 left를 반환
  2. left "??=" right: left가 null이라면 right을 left에 대입

     // 1. ?? 
     // name이 null이면 "anonymous"를,
     // 아니면 대문자로 변환된 값을 반환
     String capitalizeName(String? name) => name?.toUpperCase() ?? "anonymous"

     // 2. ??= 
     void main()
     {
     String? name;
     name ??= 'kim';
     name ??= 'another';    // null이 아니므로 대입 불가
     print(name);
     }

     >> kim

4. Classes

• Constructor (Positional)

  class Player
  {
  final String name;
  int hp;
  
  Player(this.name, this.hp);    // 생성자를 해당 형식으로 간단히 작성 가능
  }
  
  void main()
  {
  Player player = Player('kim', 100);
  }

• Constructor (Named)

  class Player
  {
  final String name;
  int hp;
  String team;
  int age;
  
  // named parameter 적용
  Player({
    required this.name,
    required this.hp,
    required this.team,
    required this.age
  });
  
  // team, hp는 기본값 지정
  Player.createBluePlayer({required String name, required int age}) 
    : this.name = name, this.age = age, this.team = 'blue', this.hp = 0;
  }
  
  void main()
  {
   Player player = Player(name: 'kim', hp: 100, team: 'red', age: 97);
  
   Player bluePlayer = Player.createBluePlayer(
     name: 'park',
     age: 98
  );
  }

• Cascade Notation ("..")

  // class Player는 상단에 작성한 것으로 가정.
  void main()
  {
   Player player = Player(name: 'kim', hp: 100, team: 'one', age: 97)
   ..name = 'new'    // player.name과 동일
   ..hp = 120000     // player.hp와 동일
   ..team = 'two';   // player.team과 동일. ;은 맨 마지막 라인에만 작성
  }

• Enum

  enum Team
  {
  red,
  blue
  }
  
  class Player
  {
  final String name;
  int hp;
  Team team;   // String대신 enum 적용
  int age;
  
  ...
  }
  
  void main()
  {
   Player player = Player(
     name: 'kim', 
     hp: 100, 
     team: Team.red,    // 'red'대신 enum 적용
     age: 97
   );
  }

  • Abstract class(추상 클래스)

    abstract class Human
    {
    void walk();  // * C++의 순수 가상 함수 느낌
    }
    

  class Player extends Human { void walk() { print("player is walking"); } // * 추상 클래스의 함수를 반드시 정의 }

• Inheritance(상속)

  abstract class Human
  {
  final String name;
  Human({required this.name});
  
  void sayHello() { print('Hello my name is $name'); }
  }
  
  class Player extends Human  // "extends" 키워드로 상속
  {
  final Team team;
  ...
  
  Player({required this.team, this.name}) 
    : super(name: name);  // * super(~)로 부모 클래스 생성자에 param 전달
  
  @override
  void sayHello() 
  { 
    super.sayHello();  // * super.으로 함수 접근 가능
    print("and I play for $team"); 
  }
  }

• Mixins

  Mixin은 생성자가 없는 클래스로, 다른 클래스에서 Mixin의 프로퍼티나 메소드를 가져와 사용할 수 있다. (상속은 ❌)

  class Strong
  {
   const double strength = 96.129;
  }
  
  class Fast
  {
   const double speed = 99.828;
  }
  
  class Player with Strong, Fast  // "with" 키워드로 선언
  {
  ...
  }
  

✏️ roadmap.sh에서는 skill 완료 시, Done 처리하여 진행률을 쉽게 파악하기

Roadmap.sh

Oleksandr

Reference

개별 이미지 클릭 시 해당 링크로 이동