// 현재 페이지 
  Widget build(BuildContext context) {
    print('first build()');
    return Scaffold(
      appBar: AppBar(
        title: Text('First'),
      ),
      body: ElevatedButton(
        child: Text('다음 페이지로'),
        onPressed: () {
          final person = Person('장길산', 20);
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => SecondStateFulPage(
                        person: person,
                      )));
        },
      ),
    );

    // 다음 페이지 
      Widget build(BuildContext context) {
    print('SecondPage build()');
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.person.name),
        ),
        body: ElevatedButton(
          child: Text('이전 페이지로'),
          onPressed: () {
            Navigator.pop(context);
          },
        ));
  }

현재 페이지에서 렌더링된 버튼을 클릭하면 다음페이지로 넘어갈 수 있다. 여기서 알게된것은 navigator.pop(context)를 통해 현재 -> 다음 -> 현재 -> 다음 페이지를 수시로 왔다갔다 하여도 Navigator.push( context, materialPageRoute(builder : (context) => [이동할 페이지]); (양쪽에서 할경우) 마치 페이지가 쌓이는 현사은 벌어지지않고 깔끔하게 현재 화면을 종료하고 이전 화면으로 돌아갈 수가 있다.

MaterialPageRoute 클래스는 안드로이드와 iOS 환경에서 각각 플랫폼에 맞는 화면전환을 지원해준다.

플러터 생명주기

네트워크 환경에서 종종 오래걸리면서 자주 호출되면 안되는 처리가 있다. build() 메서드외에 특정 타이밍에 실행되는 여러 메서드가 있다. 이런 메서드들을 생명주기라고 부른다.

initState() 메서드는 위젯이 생성될 때 호출된다. dispose() 메서드는 위젯이 완전히 종료될때 호출된다.

initState(), dispose() 메서드를 재정의할 수 있다.

  @override
  void initState() {
    super.initState(); // 반드시 호출해야 합니다.
    print('First initstate()');
  }

  @override
  void dispose() {
    super.dispose();
    print('first dispose()');
  }

한 페이지가 렌더링되고 종료될때, 각각 프린트에서 해당 메세지를 확인 할 수 있다.

그림은 얼추 비슷하게 모양은 만들기가 가능했지만 '정렬'을 효과적으로 수행하기 여간 어려운일이 아니었다.

어제 expanded를 배움으로써 남은 자식이 남은 부모공간을 모두 차지한다는 것엔 이해하였다. 하지만, 그럼에도 마지막 하나, 정렬은 정말 어렵게 느껴졌다.. 요약한다면 오늘의 핵심 포인트는 아래와 같다.

핵심 포인트

1. 정렬의 개념을 정말 닮도록 알아야 한다.

2. (피그마를 보더라도) 임의로 height나 width크기를 주는것은 비추천이다.

3. 넣지안아도될 위젯은 과감히 지우자.

4. 기본골격의 정렬을 중심으로 한 추상화

    - 내가 만든 코드는 얼추 처음에 잘 들어맞긴하였으나 나중에 가면 갈수록 도저히 수습불가 수준으로 왔었다. 심지어 나중에 그 문제점을 다른 선임 개발자에게 물어보며 해결을 시도하였으나 얽히고 설킨 구조들 덕분에 파악하는데에 애를먹었다. 완성되고 난 코드와 골격을보니 정말 군더더기없이 다이어트 한게 아닐까 싶었다.. 

마우스를 대면, flutter Logo가 선택될시 오른쪽아래에서 왼쪽아래로 움직이는것을 볼 수 있다.

BottomNavigationBarItem을 제네릭으로만 생각하였으나,

import 'package:flutter/material.dart'; 에 선언된 클래스중 하나였다.

그외, svg는 물감으로 된 아이콘들을 보통 쓴다. 사진같은 이미지는 png로..

자주 쓰이는 패턴

Widget Body(){
return FutureBuilder(
        future: loadContents(),
        builder: (BuildContext context, dynamic snapshot) {
          List<Map<String, String>> datas = snapshot.data;
          if (snapshot.connectionState != ConnectionState.done) {
            return const Center(child: CircularProgressIndicator());
          }
          if (snapshot.hasError) {
            return const Center(child: Text('데이터 오류'));
          }

          if (snapshot.hasData) {
            return makeDataList(datas);
          }
          return const Center(child: Text('해당지역에 데이터가 없습니다.'));
        });
}

1. future : Future 타입의 객체를 받습니다. 현재 해야할 비동기 작업을 의미합니다. 여기선 loadContents() 메서드를 호출하여, contentsRepository 객체의 loadContentsFromLocation 메소드의 컨텐츠를 불러오는 역할을 합니다.

  loadContents() {
    return contentsRepository.loadContentsFromLocation(currentLocation);
  }

2. Builder : future가 완료될때 호출되어 Ui를 빌드한다. BuildContext와 AsyncSnapshot를 매개변수로 받아서 비동기작업의 결과나 에러등을 가공하여 Ui를 구성하는 역할을 합니다. 여기서는 List<Map<String, String>> 형태의 datas 라는 것을 받아 snapshot.data에 할당합니다.

• 데이터의 형태는 future에서 호출하고 있는 메소드에서 확인할 수 있습니다. 그리고 snapshot을 받으면 데이터의 형태를 확인가능합니다.

  ...
  future: loadContents(),
    builder: (BuildContext context, dynamic snapshot) {
      print(snapshot); // snapshot을 추가, 데이터 형태 확인
      List<Map<String, String>> datas = snapshot.data;
  ...

현재 데이터의 예외 처리로 snapshot.connectionState,snapshot.hasError,snapshot.hasData 각각 상황에 맞게 if구문과 함께 잘 쓰입니다.

기본적으로 많은 상황에서 Hot Reload를 통해 즉각적으로 결과를 확인할 수 있지만 특정 케이스에서는 Hot restart,Full restart를 활용해야 할 수 있다. 동작하지 않는 경우는 다음과 같다.

Hot Reload가 작동하지 않는 경우

• 앱이 종료된 경우

• 변경된 부분 지점에서 에러가 발생한 경우

  • Compilation Error가 발생한 경우 동작하지 않을 수 있다. 해당 Error를 수정한다면 바로 결과를 확인 할 수 있다.

• Enumerated types(열거형 타입)

  • 열거형 타입을 클래스로 변경하여 클래스를 열거형 타입으로 변경할 경우

• 폰트변경

  • 대부분 assets에 대해 Hot reload를 지원하지만 font 변경의 경우 Hot restart를 해야한다.

• Generic Types

  • type의 정의가 변경된 경우에 동작하지 않는다.

• Native Code

  • 스위프트, 코틀린, 자바등의 native 코드를 수정한경우 Full Restart를 진행해야한다.

최종적으로 Hot Reload는 main() 혹은 initState() 를 다시 실행하지 않기 때문에 MyApp 변경점은 보이지 않게된다. 다만 Hot Restart를 통해서는 main()을 다시 실행하기 때문에 기대와 같이 변경사항이 반영됨.

출처 :

블로그

Flutter 공식

transform.translate(
  offset: Offset(50.0, 0.0),
  child: Container(
    color: Colors.blue,
    width: 100.0,
    height: 100.0,
  ),
)

// 텍스트로 할 경우
final List<String> textList = ['텍스트1', '텍스트2', '텍스트3'];
// 임의의 이미지를 순서대로 넣어줄 경우 
final List<String> imagePaths = [
  'assets/images/image1.png',
  'assets/images/image2.png',
  'assets/images/image3.png',
  'assets/images/image4.png',
];
// 데이터에서 받아오는 경우
if(snapshot.hasData) {
     final List<PlayingModel> movieList = snapshot.data!;
return ... 

CarouselSlider(
                options: CarouselOptions(
                  autoPlay: true,
                  height: 200,
                  enlargeCenterPage: true,
                  aspectRatio: 16 / 9,
                  enableInfiniteScroll: true,
                  autoPlayAnimationDuration: const Duration(milliseconds: 800),
                  viewportFraction: 0.8,
                ),
                items: movieList.map((movie) {

               // 부모 위젯의 제약 조건 사용하여 자식 위젯을 빌드하는 데 사용되는 위젯
                // LayOutBuilder

                  return LayoutBuilder(
                    builder: (context, constraints) {
                      // constraints를 통해 Container의 크기를 확인할 수 있습니다.
                      double containerHeight = constraints.maxHeight;

                      return Container(
                        height: containerHeight,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(8)),
                        child: Column(
                          children: [
                            Expanded(

                              child: 
                              // 
                             // 백엔드에서 받아옴 
                              Image(
                                image: NetworkImage(movie.posterPath),
                                fit: BoxFit.contain,
                              ),
                            ),
                          ],
                        ),
                      );
                    },
                  );
                }).toList(),
              );

안드로이드 에뮬레이터 실행시 위와 같은 오류가 나온다.

2. 조치한것

Android Studio에 들어가 안드로이드 에뮬레이터를 삭제/재설치를 권장하긴 하였으나, flutter doctor를 먼저하고 나서, flutter clean, flutter run을 통한 프로젝트 리빌드 조치함. 그러고나서 해결..

플러터에서의 future는 지금은 없지만 미래에 요청할것들이 담긴 '그릇'과 같은것이다. 비동기에 자주 쓰이며 계산즉시 결과를 '완료'하여 반환한다.

import "dart:io";
Future<bool> fileContains(String path, String needle) async {
  try {
    var haystack = await File(path).readAsString();
    return haystack.contains(needle);
  } on FileSystemException catch (exception, stack) {
    _myLog.logError(exception, stack);
    return false;
  }
}

함수에 async가 있고 내부에 await이 있는데 실행결과에 따라 future를 반환해야한다. 본 fileContains 함수는 future 문자열이 완료되어야 값을 반환하고 호출할때 했던 원래 future값을 완성하게 된다.

일반적으로 비동기 코드를 작성할때 future가 생성될때마다 항상 기다려야하며, 다음 비동기지연이 끝날때까지 기다리면 안된다. 이는 미래에 발생할 수 있는 모든 오류를 '수신'할 준비가 되어있음을 보장한다.

1. StateFull Widget과 Stateless Widget

정말 간단하게 설명하면 화면 변화가 '있느냐'와 '없느냐 '로 나눌 수 있다. StateFull같은 경우, 위젯이 동작하는 동안 이벤트, 사용자의 상호작용으로 상태가 바뀐것을 바로 반영하는 동적인 위젯이고 , Stateless는 그런 상호작용같은 것이 없으니 변할 일이 없다. 그래서 덕분에 렌더링이 StateFull보단 더 빠를 수 밖에 없는 구조이다.

2. Scaffold

Scaffold의 기본 뜻 부터 살펴봐야겠다. 공사장의 발판 혹은 건물의 골격을 의미하는데 Flutter앱의 역할에서도 마찬가지 역할을 한다. 기본적인 앱에서 '디자인적인 뼈대'를 제공해주며 Scaffold를 중심으로 다른 위젯들을 디자인할 수가 있다. 즉, 뼈대가 되는 위젯인 것이다.

(new) Scaffold Scaffold({
  Key? key,
  PreferredSizeWidget? appBar,
  Widget? body,
  Widget? floatingActionButton,
  FloatingActionButtonLocation? floatingActionButtonLocation,
  FloatingActionButtonAnimator? floatingActionButtonAnimator,
  List<Widget>? persistentFooterButtons,
  AlignmentDirectional persistentFooterAlignment = AlignmentDirectional.centerEnd,
  Widget? drawer,
  void Function(bool)? onDrawerChanged,
  Widget? endDrawer,
  void Function(bool)? onEndDrawerChanged,
  Widget? bottomNavigationBar,
  Widget? bottomSheet,
  Color? backgroundColor,
  bool? resizeToAvoidBottomInset,
   bool primary = true,
  DragStartBehavior drawerDragStartBehavior = DragStartBehavior.start,
  bool extendBody = false,
  bool extendBodyBehindAppBar = false,
  Color? drawerScrimColor,
  double? drawerEdgeDragWidth,
  bool drawerEnableOpenDragGesture = true,
  bool endDrawerEnableOpenDragGesture = true,
  String? restorationId,
})

속성은 다음과 같다.

더 학습해야할것

Children 위젯이 있다. '리스트'의 속성을 띄고있지만 정확히 그안에 무엇이들어가고 이용해야할지 기준은 아직 명확하진 못하다. 마찬가지로 const의 사용도 그러하다. 스튜디오코드에서 문제점과 픽스제인으로 픽스를 할뿐 정확히 왜 그런 문제를 띄는진 잘 이해가 되질 않고있다.

플러터는 비디오게임 엔진처럼 작동한다. 운영체제와 직접소통하는것이 아니라 '엔진'을 통해 그린다. 네이티브완 다르게 위젯이 가짜로 생성되고 만들어진다.

dart코드는 프레임워크상에서만 이용된다.

1. 엔진을 통해모든 컴포넌트를 그림 ios처럼 보여지긴함. 하지만 페이크
2. 스크린과 애니메이션 효과가 아주 멋짐 오히려 우리가 ㅈㄱ접 커스터마이징한 아름다운 디자인을 만드는데에 목표를 두고있다.
3. 안드로이드/iOS 앱 처럼 보이게끔 만들고 싶지 않다면 플러터가 무난하다. 화면상의 모든 픽셀을 100% 통제할 수 있어야한다.

Flutter 설치

uBuntu 22.04.3 LTS jammy 버전 환경에서 쓴다.

1. Flutter 설치

'Flutter 공식 홈페이지'에 들어가서 snap을 이용한 방법으로 설치하였다.

2. Android toolchain error

설치 한후 일단 flutter doctor을 입력한뒤 확인해 보면 Android toolchain이 다음과 같음을 확인할수 있음과 동시에 Android Studio도 설치가 되질 않다고 나와있다.

3. Android Studio 설치

안드로이드 스튜디오는 첫번째 링크 에 있는곳에 들어가 다운로드를 받을 수 있다. 일단 설치하자. 그래야 위의 에러를 해결할 수 있다.

flutter config --android-studio-dir=/home/corepen/android-studio 경로를 입력하고 studio 경로를 등록해준다. 스튜디오 설치 경로를 알 수 있는 방법은 해당폴더로 들어간뒤 마우스 오른쪽으로 '터미널 열기'로 해당 경로에서 진입한뒤 pwd를 아래와 같이 입력한다.

그러면 해당 경로가 뜨는데 그 경로를 위와같이 붙여넣어 android-studio의 경로를 등록한다.

4. Android toolchain error 슈팅 - 1 (Android Studio 실행하기)

하지만 공식문서에 나온대로 명령어인 flutter sdk-path를 입력하면 경로가 뜨지만, 그 경로대로 flutter doctor --android-sdk="/PATH" 를 입력해도 여전히 에러가 뜬다.

위와 같이 bin폴더에 들어간 뒤, studio.sh를 실행하여 스튜디오로 들어간 다음, 아래왜 같이 MoreActions를 클릭한뒤 SDK Manager에 들어간다.

5. 4. Android toolchain error 슈팅 - 2 (Command-line Tools 설치하기)

화면과 같이 들어가서, Android SDK Command-line Tools(latest)를 다음과 같이 인스톨한뒤 위에 있는 SDK Location에 나오는 경로를 flutter doctor --android-sdk="/PATH"의 PATH 자리에 넣어주면된다.

6. 해결

flutter doctor 를 입력해본다.

위 화면 처럼 나오는데 마지막으로 flutter doctor --android-licenses만 입력해주면 해결

1. Casecade Notation

   class Player {
       final String name;
       int xp, age;
       String team;

   Player({
   required this.name,
   required this.xp,
   required this.team, 
   });

   // flutter 를 쓰면서 자주 쓰게될 문법
   void main() {
       var lee = Player(name : "nico",xp: 1500, team : 'red')
       var potato = nico
       ..name = 'las'
       ..xp = 2000
       ..team = blue;
       ..sayHello();
   }

2. Enums

바보같은 실수들을 안만들게끔 도와준다.!

예를 들면 team값을 잘못 넣을때 개발자들이 오타로 실수하지 않게끔 도와준다. enum을 쓰기위해선 enum을 붙여주고 쓴다.

   enum Team {red, blue}
   enum XpLevel {beginner , medium, pro}

   class Player {
       final String name;
       XpLevel xp;
       Team team;
       // String 대신에 위의 enum의 Team을 넣어준다.
   }

활용 예시

   (.. 위와 동일 생략)

   Player({
   required this.name,
   required this.xp,
   required this.team, 
   });

   void main() {
       var lee = Player
       (name : "nico",xp: XpLevel.beginner, team : 'red');

       var potato = nico
       ..name = 'las'
       ..xp = XpLevel.medium
       ..team = Team.blue;
       ..sayHello();
   }

3. Abstract Classes 추상화 메서드

추상화 클래스로는 객체를 생성할 수 없다. 추상화 클래스는 다른 클래스들이 직접 구현해야 하는 메소드들을 모아놓은 일종의 청사진 이라 보면된다.

   abstract class Human {
       void walk();
   }

   class Player extends Human {
       final String name;
       XpLevel xp;
       Team team;

       void walk(){
           print('i m walk now')
       }
   }

4. InHeritance 상속 클래스

   enum Team {red, blue}

   class Human {
       final String name;
       Human(required this.name);
       void sayHello() {
           print("Hi my name is $name")
       }
   }


   class Player extends Human {
       final Team team ; 
   }

   Player({
       required this.team,
       required String name
   }) : super(name : name);

   // 직접 만든 메소드로 대체(overrride) 한다
   @override 
   void sayHello(){
       super.sayHello();
       print('and I play for ${team}')
   }

   void main() {
       var player = Player(
           team : Team.red,
           name : 'nico'
       )
       player.sayHello()
   }

5. Mixins

클래스에 property를 추가할 때 매우 유용하다. with 라는 키워드를 사용해서 단순히 Mixin 내부의 프로퍼티와 메소드를 가져오는 것이다.

조건은 생성자가 없는 클래스여야 한다

다른 클래스도 많이 만들거라 class에 대해 제대로 배우고 문법을 마스터 하는것이 중요하다. 다른언어에서의 class와 어떻게 다른지에 대해서도 배우는 것이 중요할 것이다.

1. First Dart Class

   class Player {
       String name = 'lee'
       // final String name = 'lee'
       // final을 붙이면 값을 변경할 수가 없다. 
       int xp = 1500;

   void Say(){
       var name = '121'
       print("my name is $name");
       }
   }

   void main() {
       var player = Player();
       print(player.name);
       player.name = 'lalala'
       print(play.name);
   }

class 를 사용할땐 타입을 꼭 명시해 줘야한다.

그냥 name이라고 써도 this.name이라고 쓰는 것과 같다. 일부러 함수 내에 할당된 이름을 쓰고 싶다면 ${this.name}을 작성 해야한다.

2. 생성자 (Constructors)

   class Player {
       String name = 'lee'
       // final String name = 'lee'
       // final을 붙이면 값을 변경할 수가 없다. 
       int xp;

   Player(this.name, this.xp);

   void Say(){
       var name = '121'
       print("my name is $name");
       }
   }

   void main() {
       var player = Player("nico", 1500);
       player();
       var player2 = player("lynn", 2500);
       player2();
   }

3. Named 생성자 파라메터

   class Player {
       final String name 
       int xp;
       String team;
       int age;

   Player({this.name, this.xp, this.team, this.age});
   // nullable을 방지하기위해 앞에 required를 붙여주면 좋다.(필수값)

   void Say(){
       var name = '121'
       print("my name is $name");
       }
   }

   void main() {
       var player = Player(
       name : "nico", xp : 1500,team : 'red', age : 12
       );

       var player2 = player(
       name : "lynn", xp : 2500, team : 'blue',age: 12
       );
   }

4. Named 생성자

   class Player {
       final String name;
       int xp, age;
       String team;

   Player({this.name, this.xp, this.team, this.age});
   // nullable을 방지하기위해 앞에 required를 붙여주면 좋다.(필수값)

   void Say(){
       var name = '121'
       print("my name is $name");
       }
   }

   Player.createBluePlayer({required String name, required int age}) : 
   this.age = age,
   this.name = name,
   this.team = 'blue', 
   this.xp = 0;

   // ':'은 class를 초기화 시키는 것이다. 

   Player.createRedPlayer(String name, int age) : 
   this.age = age, 
   this.name = name,
   this.team = 'red',
   this.xp = 0;

   void main() {
       var player = Player.createBluePlayer(
       name : "nico",  age : 12
       );

       var player2 = player.createRedPlayer(
       name : "lynn", age: 12
       );
   }

   String Hello({String name = 'anon, int age = 99, String country = 'wakanda'})
   // 뒤에 잇는 것은 값이 없을경우 기본값들을 미리 정해준것이다. 
   void main() {
       print(Hello(
           age : 12,
           country : 'korea',
           name : 'lee'
       ))
   }

required를 적어주면 호출할때마다 항상 해당 요소를 불러준다.

null safety때문에 default값을 위처럼 넣어줬따.

2. optional positional parameters

3. QQQ Operator

4. Typedef

   typedef ListOfInts = List<int>;

   List<int> reverseListOfNumbers(List<int> list) {
       var reversed = list.reversed;
       return reversed.toList();
   }
   void main() {
       return ""
   }

5.

1. 리스트

   voide main() {
       List<int> numbers = [1,2,3,4,5];
       numbers.add(1); 
       numbers.first; // 제일 첫번째요소
       numbers.last; // 제일 마지막요소 

   }

collection if와 collection for를 지원한다. if로 존재할수도 안할수도있는 요소를 만들어줄수 있다 .

   var givemeFive =5;

   [1,2,3,4, if(givmeFive) 5] // 5가 없으면 5를 추가한다 

2. collection if

UI 인터페이스만들때 아주 좋다고함.

   voide main() {
    var name = 'lee'
    var age = 10;
    var greeting = 'Hello $name, ${age +2}';

    print(greeting) 
   }

3. collection for

   void main() {
       var oldFriends = ['lee', 'park']
       var newFriends = [ 
           'lewis',
           'ralph',
           'darren'
           for (var friend in oldFriends) " $friend"
       ];
       print(newFriends)
   }

시간을 굉장히 아껴줌. 요소 추가

4. Maps

   void main() {
       Map<int, bool> player = {
           1 : true,
           2 : false,
           3 : true
       }
   }

자료형과 값을 동시에 할당할수 있다.

5. Sets

   void main() {
       Set<int> numbers = {1,2,3,4,5};
       print(numbers)
   }

Set에 속한 아이템은 유니크하다.! 요소가 항상 하나씩만 있어야 한다면 Set을 사용하면된다 . 유니크할 필요가없다면 List를 사용하라. LIst는 파이선의 list와 같고, Set은 파이썬의 튜플과 같다.

기억에 남는것

1. Dart와 Flutter는 마치 한몸이다.

reactJS같은 경우 JavaScript 기반으로 만들어 졌다. 하지만 빠르고 쾌적한 사용을 위해 reactJS팀은 입맛에 맞게 JavaScript를 바꿀 수 없지만, flutter와 dart는 같은회사의 가까운 협력관계이므로 원한다면 flutter에 맞게 dart를 업데이트하여 바꿀 수 있다. 그정도로 flutter와 한 몸같은 언어 이다. flutter에서 새로운 프레임워크가 필요하다면 dart에서 최적화 해주는것이 가능하단 이야기이다.

2. dartpad.dev

['dartpad.dev'] 이곳에 들어가면 바로 별도의 설치없이 dart 에디터를 실행 할 수 있다.

3. dart는 진정한 객체지향 언어이다.

flutter도 마찬가지로 객체지향 프레임워크이고 항상 class를 사용한다.

4. semi 콜론을 꼭 써야 한다.

   voide main() {
       print('hello world');
   }

;을 안쓸 수도 있지만 심각한 문제를 유발하기도 한다. 그동안 자바스크립트와 타입스크립트는 굳이 달지 않아도 formatter나 VisualStudioCode 에서 자동으로 세미콜론을 달아준다. 하지만 여기선 그렇지 않다. 왜냐하면 dart에선 일부러 세미콜론을 달지 않을때가 있기에 그렇다.

5. 모든 코드는 main함수안에 포함이 된다.

반드시 main 함수 안에 포함이 되어야 하며, 코드는 main함수 내부에 작성이 된다.

6. 변수 만들기

   void main () {
       var name = 'lee'; 
       // name != 1 
       // 업데이트 할 수 없다 
       String name = 'lee'
       // 타입명으로 변수를 만들어 줄수 있다.
   }

변수에는 같은 타입의 값만 들어올 수 있으며, 숫자나 다른 변수타입의 값은 할당할 수가 없다. 그리고 명시적으로 String같은 타입으로 명시적인 변수를 만들수 있다.

7. Dynamic Type

   voide main() {
        var name;  // dynamic name;
       name = "lee";
       name = true;
       name = 12; 
   }

이상적으론 쓰는것을 피하는것이 맞다.

8. Nullable 변수

   voide main() {
    String? lee = 'lee';
    // dart가 string 혹은 null 여부가능을 말한다.
    lee = null;
    lee?.isNotEmpty;
   }

dart는 위와같이 지정해둔다면 null일수 있다는것을 알게된다.

9. final 변수

   voide main() {
       fianl String name = 'lee';
                   name = 'lee';
   }

const와 같다. final을 붙이면 변수의 값을 바꿀 수가 없다. 그리고 구체적으로 하기위해 타입도 위처럼 추가해줄 수있다. (String은 없어도 그만 있어도 그만.. )

10. late 변수

`late`는 아직 어떤데이터가 올지 모른다고 말해주는것이다.  

```
voide main() {
     late final String name;
    name ='12'   
    print(name);
}
```

그래서 데이터를 '나중에' 넣고 그뒤에 변수를 사용하겠다는 이야기이다.

아직 정의되지않은 late 변수에 접근할 수 없다. 

11. const 변수

자바스크립트와 타입스크립트와는 다른양상이다. 변수들은 컴파일할때 평가될것이다. 컴파이리할때 값을 알고있는 변수를 만들때 쓰는 방법이다.

12. 마지막

공식적으로 var 사용이 권장되고 String 이나 int같은 타입을 변수로 사용하는 것은 class과 property를 사용할때 권장된다. 작은 함수나 지역변수에서는 var를 쓰는것이 더 좋다. 변수의 수정허용을 하지않는다면 final을 사용한다. dynacmic은 아주 조심스럽게 써야하며 자주쓰는것을 권장하지 않는다. 데이터가 무엇이 들어올지 모를때 쓴다.

1. 개발 방법의 선회

기존엔 공식문서를 읽어보며 CRUD부터 체득해가며 개발하려 했으나 빠른 개발기한을 맞추기 위해 기존강의를 보면서 다시 습득가능 한것들을 습득

현재 상황

1. NestJs설치
2. C,R 만듬 / U,D의 부재
3. NestJS 프레임워크 아키텍처 이해

계획안

 1. 기존 강의 구조와 컨트롤러 패턴 부터 실전 프로젝트까지 재복습
 2. 필요하다 싶은것은 구글링을 통한검색 
 3. postgre와 graphql을 이용한 데이터베이스 관리
 4. 탈부착형 데이터베이스 
 5. Docker 활용

오늘 목표

 1. 재 복습
 2. U,D 만들어둘것 

풀어야할 질문/개념

1. 컨트롤러에서 @Params나 @Body를 받아온다면, 그것을 해당 모듈 서비스에서 받아올 수 있는가 ? 어떻게 넘기는가 ?

   @Get('users/:id/:name')
   
   ​    getHello(@Req() req:Request, @Body() Body, @Param() param) : string {
   
   ​        // 아래와 같이 appService에 Body와 Param을 넘겨줄 수 있다. 
   
   ​        return this.appService.getHello(Body, Param)
   
   ​    }
   
   // 상태 코드
   
   @Post()
   @HttpCode(204)
   create() {
       return 'this action add a new user'
   }

​

1. 롤 모델

롤 모델은 꼭 필요한 것일까 ? '코리안 루트'를 개척하기 위해 박영석 대장은 안나푸르나 남서벽 원정에 나섰다. 하지만 애석하게도 그는 실종되었고 다큐멘터리를 보면서 배우의 길도 다르지 않다는 생각을 하였다. 산 정상으로 오르는 길이 여러가지 있듯 최고의 배우가 되는 길도 여러가지다. 누군가가 밟고 지나간 길을 따라 오를 수 있고, 새로운 길을 개척할 수도있다. 새로운 길은 언제나 힘들고 험난하며 시간도 많이 걸린다. 한마디로 실패할 확률이 높다. 반면에 이미 만들어 놓은 길을 따라 올라간다면 더 쉽게 정상에 오를 수있다.

처음에는 누군가가 개척해 놓은 길을 따라 히말라야를 정복했다. 그 업적을 이룬다음 자신만의 루트를 만들기 위해 나섰던것이다. 롤 모델이란 바로 이런것이다. 당신이 배울만한 점이 하나라도 있다면 그를 롤모델로 삼아라.

"한 작가의 것을 훔치면 표절이지만 많은 작가의 것을 훔치면 연구다."

완벽한 사람은 없다. 여러사람의 장점을 두루 공부하는 것이 좋다. 다양한 재능을 갖추려면 롤 모델 역시 다양해야 하지 않을까? 그러나 , 똑같이 흉내내는 것과 장점을 배우는 것은 엄밀히 다르다. 그의 장점을 받아들여 자신의 스타일로 녹여내야한다. 반드시 롤모델과 똑같은 길을 걷는다면 당신은 분명 실패하고 말 것이다. (제 2의 누구..)

2. 배우와 관객

배우의 역할은 관객들에게 메세지를 전달하는 것이다. 배우의 정의를 어떻게 내리던 간에 항상 '관객을 위한' 이란 수식어가 들어가야한다. 관객이 있어야 배우가 있다. 시인이 멋진 시를 써도 읽어 주는 사람이 없다면 그 시는 휴지조각이다. 관객은 무언가를 얻기 위해 배우의 연기를 본다. 따라서 배우는 관객에게 '무언가'를 줘야 한다. 이러한 계약이 깨진다면 관객은 배우를 외면하고, 배우는 도태되고만다.

절망에 빠진 사람이 배우의 연기를 보고 삶의 희망을 얻거나 , 배우의 연기를 보고 활짝 웃는다거나 그렇다면 배우의 소임을 다하는 것이다. 배우란 사람의 마음을 사는 일이다.

기술이 좋으면 몇년은 가지만 결국 들킨다. 가장 중요한것은 '진심'이다.

*준비는 적게 하면서 많은 것을 얻으려 하는 곳에 항상 한숨이 숨어있다. - 괴테 *

3. 캐릭터의 몰입과 동화

시나리오를 받고나면 캐릭터와 약속을 하고 피나는 연습과 노력을 해야한다. 자기가 맡은 역할을 위해 모든 책임을 다해야 하며, 촬영이 들어가기 전까지 배역과 완벽하게 일치되어 있어야 한다. 심지어 그 인물이 가지고 있는 비밀스러운 생각까지도 배우는 잡아내야만 한다.

나는 '기봉이'가 되기위해 몰입했다. 그는 장애를 가졌기 때문에 말투와 표정, 동작과 호흡까지 남달라야만 했다. 나는 기봉이가 되기위해 영화를 시작하기 전부터 모든것을 기봉이처럼 바꿨다. 걸을때도, 식당에서도 주문할때도 기봉이 말투로 주문했다.

나는 기봉이 처럼 되기위해 6개월을 뛰고 기봉이 처럼 표정지으며 말했다. 이것이 내 옷처럼 익숙해지고 편해져야 동작에 신경 쓰지 않고 연기를 할 수 있으니까.

배우에게 있어 캐릭터의 완성은 완벽한 몰입을 통해 이뤄진다. 그렇지만 몰입은 저절로 이뤄지지않는 것이 아니다. 캐릭터와 몰입하려면 우선 캐릭터와 동화되어야 한다.

강제규 감독님은 말했다.

"배우가 이 상황을 믿지 않고 연기를 한다면 되겠는가?"

"우리도 믿지 않으면서 관객에게 믿으라고 강요하는 건가? 믿어라! 동화하라! 어떤 상황이든 배우는 이 상황을 본인에게 일어난 실제 상황이라고 생각하고 믿어야한다."

.. 내가 맡은 캐릭터를 연기하는게 아니다. 내가 그 캐릭터가 되는것이다. 뭐든지 상상할 때 '나'에서 부터 출발해야 한다는 것을 명심해야한다. '내가 이 상황에 처했더라면 ?' 이것이 첫번째다.

그리고 본인이 직접 그상황을 느끼기 때문에 감정도 자연스럽다.

캐릭터를 제대로 소화하고 싶다면 캐릭터와 최대한 닮아야 한다. 그리고 캐릭터와 최대한 닮으려면, 그 캐릭터와 동화되기 위해 할 수 있는 한 무엇이든 해야한다.(남에게 피해주지 않는 선에서 한함.) 머릿속으로 상상하는 감정과 실제로 부딪혀서 느낀 감정은 분명 큰 차이가 있다. 실제 촬영이 들어가면 자신이 맡은 캐릭터의 심리 상태를 계속 유지하는 것이 좋다.

당신이 진짜 배우의 길을 걷고 싶다면, 오늘 연기 연습을 할 때 당신이라는 인간은 잠시 잊어야 한다. 그리고 캐릭터가 되어라. 캐릭터가 회사원이면 회사원 , 캐릭터가 배달원이면 잠시 배달원이 되어 경험을 쌓아라.

배우는 관객들이 영화 속 캐릭터에 빠져들게 해야한다. 그러기 위해서는 내가 연기해야 할 캐릭터와 하나가 되어야 한다. 그것이 배우가 해야 할 몫이다.

캐릭터를 정형화 시키지 마라

현실을 살아가는 인물 중 똑같은 감정을 24시간 유지하는 사람은 없다. 사람의 감정은 순간순간 변한다. 떄로는 아주 극단적으로 변하기도 한다. 배우는 캐릭터에 몰입하고 동화되어야 한다. 하지만 그 캐릭터를 유형화하는 일에 관심을 두어서는 안된다. 캐릭터를 추상적인 울타리에 가두려고 하지마라. 섣부른 판단은 생생하게 살아 있는 캐릭터를 연기하는데 방해된다. 그리고 캐릭터에 대한 당신의 판단이 잘못될 수 있다는 것을 항상 명심해라.

어떤 캐릭터를 준비하다 보면 자신이 직접 체험해 볼 수 없는 경우가 생긴다. 입양아가 아닌데 어떻게 입양아를 체험해 볼 수 있겠는가 ? 그런경우 직접 인터뷰 해보는 것이 제일 좋은 방법이다. 인터뷰를 하다보면 우리가 머릿속으로 생각하고 있던 것들이 얼마나 비현실적이었는지 깨닳을 수 있다.

우리의 인생은 비극도, 희극도 아니다. 그것을 합쳐놓은 '혼합물' 이다. 캐릭터를 어느 한쪽으로만 몰아가려 한다면 당신은 치명적인 실수를 범하는 것이다.

하지만 인터뷰,취재,주변사람 관찰등으로 캐릭터를 창조해 낼때 조심해야할 것이 하나가 있는데, 절대 그 인물과 똑같이 흉내 내려고 하지마라. 기봉이는 실존인물이지만 내가 만든 기봉이와는 다르다. 실제 인물과 똑같이 했다면 그것은 연기가 아니라 '흉내'이다. 진짜 배우는 캐릭터를 자기화 시켜 새로운 인물을 창조해 낼 줄 알아야 한다.

진짜 배우란 , 자기가 쌓아온 이미지를 스스로 무너뜨릴줄 알아야 한다.

배우는 다른사람의 인생을 살아보는 특권을 가진 사람들이다. 그런 고로 진정한 배우라면 어떤 역할도 다 소화해 낼 수 있어야 한다.

배우는 떄로 자신이 연기해야할 캐릭터와 자기 자신사이에 어떤 공통점도 발견하지 못할 때가 있다. 실제 삶에서 만났으면 상대도 하지 않았을 인물을 연기해야 할 때가 잇다는 것이다.

하지만 그 인물이 되기위해 필요한 것은 무조건 훔쳐라. 배우는 뭐든 훔쳐서 자기 것으로 만드는사람이다.

캐릭터를 만들려면 우선 단서를 긁어 모아야한다. 우선 작가나 감독에게 캐릭터에 대한 의견을 읽고 시나리오를 읽는게 좋다. 시나리오를 읽을 때는 시나리오 밖 사건까지 상상해 봐야한다. 가령 , 그 인물이 20대 이전에는 공부를 잘했을지 , 주변인과 관계는 어땠을지, 어떤 성장과정을 거쳤을지 상상해가며 캐릭터를 잡아야 한다.

성동일의 천지호 역할 처럼 본인이 맡은 캐릭터와 비슷한 이미지를 가진 지인에게 힌트를 얻을 수도 있고, 본인이 살아오면서 경험한 것을 통해 통찰력을 발휘할 수도 있다. 다른 영화 속에서 다른 배우가 만든 인물중에서도 훔칠 수도 있다. 물론 훔치는 것만으로 캐릭터를 창조할 수 없다. 그것들을 잘 조합하여 당신 스스로 캐릭터를 만들어야 한다.

그외..

배우는 말랑말랑한 영혼을 소유하고 있어야 한다. 외부로부터 강요된 책임감과 부담감으로 인해 어깨가 무거워지면 자유로움은 사라지고 , 자유로움이 사라지면 그저 그런 연기밖에 못 보여 주게 된다. 그러면 배우로서의 생명도 끝난다. 다시말하지만 배우는 기본적으로 자기 삶에 책임감을 느껴야 한다. 그 마음속에는 자유로운 영혼이 마음껏 뛰어 놀 수 있는 사적인 공간이 있어야 한다. 연기를 삶처럼. 삶을 연기처럼 살라.!

배우는 무한한 책임감을 느끼고 살아야 한다. 배우는 대중을 무시하고 제멋대로 살면 안되는 특수한 직업이다.

당신이 진실하다면 언젠가 그 진실은 세상에 드러나게 되어 있다. 만약 잘못을 했다면 도망치지말고 정정당당하게 죗값을 치뤄야 한다. 늘 조심해서 행동해도 다른사람들에 의해 사건이 될 수도 있고 말도 안되는 황당한 루머에 휘둘릴 때도 있다.

네가 아무리 운전을 안해도 상대방이 와서 받으면 그것도 교통사고다.

import * as express from "express";
import catsRouter from "./cats/cats.routes"

// const app = express();
const app: express.Express = express();

// const data: Array<any> = [1,2,3,4];

const port: number = 8000;


// 미들웨어 접근
app.use((req:express.Request,res:express.Response,next:express.NextFunction)=>{
    console.log((req.rawHeaders[1]));
    console.log('this is middleware');
    next();
})

// json 미들웨어
app.use(express.json());

app.use(catsRouter);


// 404 middleware
app.use((req:express.Request,res:express.Response, next:express.NextFunction) => {
  console.log("this is error middleware");
  res.send({ error: "404 not found error" });
});


app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}/`);
});

개선 후

import * as express from 'express';
import catsRouter from './cats/cats.route';

class Server {
  public app: express.Application;

  constructor() {
    const app: express.Application = express();
    const port: number = 8000;
    this.app = app;
  }

  private setRoute() {
    this.app.use(catsRouter);
  }

  private setMiddleware() {
    //* logging middleware
    this.app.use((req, res, next) => {
      console.log(req.rawHeaders[1]);
      console.log('this is logging middleware');
      next();
    });

    //* json middleware
    this.app.use(express.json());

    this.setRoute();

    //* 404 middleware
    this.app.use((req, res, next) => {
      console.log('this is error middleware');
      res.send({ error: '404 not found error' });
    });
  }

  public listen() {
    this.setMiddleware();
    this.app.listen(port, () => {
      console.log('server is on...');
    });
  }
}

function init() {
  const server = new Server();
  server.listen();
}

init();

해설

기존에 내가 짜던 코드 느낌보다 더 확실히 깔끔하고 간결하다. server 클래스 선언을 통해 상태를 관리할수 있다는것.. 생각 조차 못했다. app을 단 한개 고유의 외부접근을 허용하는public 필드로 지정하고 constructor를 통해 해당 클래스의 인스턴스를 생성과 초기화. 그리고 미들웨어들을 외부에서 접근불가능한 priviate로 지정한뒤 하나의 함수를 통한 클래스 실행.. 기존에 따로 따로 동떨어져 있던것들을 하나의 클래스로 묶어버렸다.

말그대로 싱글톤 패턴화 되었다.

개선 전 (비즈니스 로직과 route 분리)

import { Cat, CatType } from "./cats.model";
import { Router } from "express";

const router = Router();

//  READ 고양이 데이터 전체 조회

router.get("/cats", (req, res) => {
  try {
    const cats = Cat;

    // throw new Error("db connect error")

    res.status(200).send({
      success: true,
      data: {
        cats,
      },
    });
  } catch (error: any) {
    res.status(400).send({
      succes: false,
      error: error.message,
    });
  }
});

// 특정 고양이 데이터 조회
router.get("/cats/:id", (req, res) => {
  try {
    const params = req.params;
    console.log(params);
    const cat = Cat.find((cat) => {
      return cat.id === params.id;
    });

    res.status(200).send({
      success: true,
      data: {
        cat,
      },
    });
  } catch (error: any) {
    res.status(400).send({
      succes: false,
      error: error.message,
    });
  }
});

// Creat 새로운 하나의 고양이 api 추가
router.post("/cats", (req, res) => {
  try {
    const data = req.body;
    console.log(data);
    Cat.push(data); // create

    res.status(200).send({
      success: true,
      data: { data },
    });
  } catch (error: any) {
    res.status(400).send({
      success: false,
      error: error.message,
    });
  }
});

// Update => Put
router.put('/cats/:id',(req,res)=>{
    try {
        const params = req.params;
        const body = req.body;
        let result ;
        Cat.forEach((cat)=>{
            if(cat.id === params.id) {
                cat = body;
                result = cat
            }
        })

        res.status(200).send({
          success: true,
          data: {
            result,
          },
        });
    } catch (error: any) {
        res.status(400).send({
          succes: false,
          error: error.message,
        });
      }
})
// 부분적인 Update => Patch
router.patch("/cats/:id", (req, res) => {
  try {
    const params = req.params;
    const body = req.body;
    let result;
    Cat.forEach((cat) => {
      if (cat.id === params.id) {
        cat = {...cat, ...body}
        result = cat;
      }
    });

    res.status(200).send({
      success: true,
      data: {
        result,
      },
    });
  } catch (error: any) {
    res.status(400).send({
      succes: false,
      error: error.message,
    });
  }
});

// Delete 삭제 => Delete

router.delete("/cats/:id", (req, res) => {
  try {
    const params = req.params;
    const newCat =
    Cat.filter((cat) => 
        cat.id !== params.id
    );

    res.status(200).send({
      success: true,
      data : newCat,
    });
  } catch (error: any) {
    res.status(400).send({
      succes: false,
      error: error.message,
    });
  }
});

export default router; 

개선 후 (cat.service.ts, cat.route.ts)

cat.service.ts

import { Request, Response } from 'express';
import { Cat, CatType } from './cats.model';

//* READ 고양이 전체 데이터 다 조회 -> GET
export const readAllcat = (req: Request, res: Response) => {
  try {
    const cats = Cat;
    // throw new Error('db connect error');
    res.status(200).send({
      success: true,
      data: {
        cats,
      },
    });
  } catch (error) {
    res.status(400).send({
      success: false,
      error: error.message,
    });
  }
};

//* READ 특정 고양이 데이터 조회 -> GET
export const readCat = (req: Request, res: Response) => {
  try {
    const params = req.params;
    console.log(params);
    const cat = Cat.find((cat) => {
      return cat.id === params.id;
    });
    res.status(200).send({
      success: true,
      data: {
        cat,
      },
    });
  } catch (error) {
    res.status(400).send({
      success: false,
      error: error.message,
    });
  }
};

//* CREATE 새로운 고양이 추가 api -> POST
export const createCat = (req: Request, res: Response) => {
  try {
    const data = req.body;
    Cat.push(data); // create
    res.status(200).send({
      success: true,
      data: { data },
    });
  } catch (error) {
    res.status(400).send({
      success: false,
      error: error.message,
    });
  }
};

//* UPDATE 고양이 데이터 업데이트 -> PUT
export const updateCat = (req: Request, res: Response) => {
  try {
    const params = req.params;
    const body = req.body;
    let result;
    Cat.forEach((cat) => {
      if (cat.id === params.id) {
        cat = body;
        result = cat;
      }
    });
    res.status(200).send({
      success: true,
      data: {
        cat: result,
      },
    });
  } catch (error) {
    res.status(400).send({
      success: false,
      error: error.message,
    });
  }
};

//* UPDATE 고양이 데이터 부분적으로 업데이트 -> PATCH
export const updatePartialCat = (req: Request, res: Response) => {
  try {
    const params = req.params;
    const body = req.body;
    let result;
    Cat.forEach((cat) => {
      if (cat.id === params.id) {
        cat = { ...cat, ...body };
        result = cat;
      }
    });
    res.status(200).send({
      success: true,
      data: {
        cat: result,
      },
    });
  } catch (error) {
    res.status(400).send({
      success: false,
      error: error.message,
    });
  }
};

//* DELETE 고양이 데이터 삭제 -> DELETE
export const deleteCat = (req: Request, res: Response) => {
  try {
    const params = req.params;
    const newCat = Cat.filter((cat) => cat.id !== params.id);
    res.status(200).send({
      success: true,
      data: newCat,
    });
  } catch (error) {
    res.status(400).send({
      success: false,
      error: error.message,
    });
  }
};

cat.routes.ts

import { Router } from 'express';
import { NextFunction } from 'express-serve-static-core';
import {
  createCat,
  deleteCat,
  readAllcat,
  readCat,
  updateCat,
  updatePartialCat,
} from './cats.service';

const router = Router();

router.get('/cats', readAllcat);
router.get('/cats/:id', readCat);
router.post('/cats', createCat);
router.put('/cats/:id', updateCat);
router.patch('/cats/:id', updatePartialCat);
router.delete('/cats/:id', deleteCat);

export default router;

비즈니스 로직과 라우트를 분리해 둠으로 써 보다 가독성이 좋아졌다.