이름 그래도, 서로 교차로 상호 의존적인 리소스 일 때를 말한다. 첫 번째 리소스가 두 번째 리소스로부터 데이터를 요청하는 와중 같은 시각 두 번째 리소스가 첫 번째 리소스한테 데이터를 요청하는 경우이다. 이런 상황은 IT에서는 매우 일반적인데 OOPs 언어 같은 경우는 middle tier나 인터페이스 구현으로 이런 상황을 쉽게 헤쳐나간다.

Cloud formation template 에서는 이런 상황을 서로 밀접하게 엮인 리소스를 사용할 때 겪게 된다. 예를 들면 ELP와 EC2, EC2와 Elasticsearch 또는 security group 등의 설계층에서 볼 수 있다.

위의 그림과 같이 web server 와 db server, Security Group과 Security Group이 다른 DB 스택에 존재하지만 서로를 바라보고 있을 때 생기는 일이다. 이때 문제 해결 방법으로는 DependsOn 속성을 사용해서 해결이 가능하다.

자세한 내용은 아래 공식 링크를 확인하면 더 많은 정보를 얻을수 있다.

https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/troubleshooting.html#troubleshooting-errorsdependence-error

[ERROR:flutter/lib/ui/ui_dart_state.cc(177)] Unhandled Exception: Connection closed while receiving data
E/flutter (19034): #0      IOClient.send.<anonymous closure> (package:http/src/io_client.dart:50:13)
E/flutter (19034): #1      _invokeErrorHandler (dart:async/async_error.dart:16:24)
E/flutter (19034): #2      _HandleErrorStream._handleError (dart:async/stream_pipe.dart:282:9)
E/flutter (19034): #3      _ForwardingStreamSubscription._handleError (dart:async/stream_pipe.dart:161:13)
E/flutter (19034): #4      _HttpClientResponse.listen.<anonymous closure> (dart:_http/http_impl.dart:438:16)
E/flutter (19034): #5      _rootRunBinary (dart:async/zone.dart:1214:47)
E/flutter (19034): #6      _CustomZone.runBinary (dart:async/zone.dart:1107:19)
E/flutter (19034): #7      _CustomZone.runBinaryGuarded (dart:async/zone.dart:1013:7)
E/flutter (19034): #8      _BufferingStreamSubscription._sendError.sendError (dart:async/stream_impl.dart:376:15)
E/flutter (19034): #9      _BufferingStreamSubscription._sendError (dart:async/stream_impl.dart:394:16)
E/flutter (19034): #10     _BufferingStreamSubscription._addError (dart:async/stream_impl.dart:294:7)
E/flutter (19034): #11     _ForwardingStreamSubscription._addError (dart:async/stream_pipe.dart:132:11)
E/flutter (19034): #12     _addErrorWithReplacement (dart:async/stream_pipe.dart:180:8)
E/flutter (19034): #13     _HandleErrorStream._handleError (dart:async/stream_pipe.dart:287:11)
E/flutter (19034): #14     _ForwardingStreamSubscription._handleError (dart:async/stream_pipe.dart:161:13)
E/flutter (19034): #15     _rootRunBinary (dart:async/zone.dart:1214:47)
E/flutter (19034): #16     _CustomZone.runBinary (dart:async/zone.dart:1107:19)
E/flutter (19034): #17     _CustomZone.runBinaryGuarded (dart:async/zone.dart:1013:7)
E/flutter (19034): #18     _BufferingStreamSubscription._sendError.sendError (dart:async/stream_impl.dart:376:15)
E/flutter (19034): #19     _BufferingStreamSubscription._sendError (dart:async/stream_impl.dart:394:16)
E/flutter (19034): #20     _BufferingStreamSubscription._addError (dart:async/stream_impl.dart:294:7)
E/flutter (19034): #21     _SyncStreamControllerDispatch._sendError (dart:async/stream_controller.dart:812:19)
E/flutter (19034): #22     _StreamController._addError (dart:async/stream_controller.dart:690:7)
E/flutter (19034): #23     _StreamController.addError (dart:async/stream_controller.dart:642:5)
E/flutter (19034): #24     _HttpParser._reportBodyError (dart:_http/http_parser.dart:1158:22)
E/flutter (19034): #25     _HttpParser._onDone (dart:_http/http_parser.dart:865:9)
E/flutter (19034): #26     _rootRun (dart:async/zone.dart:1182:47)
E/flutter (19034): #27     _CustomZone.run (dart:async/zone.dart:1093:19)
E/flutter (19034): #28     _CustomZone.runGuarded (dart:async/zone.dart:997:7)
E/flutter (19034): #29     _BufferingStreamSubscription._sendDone.sendDone (dart:async/stream_impl.dart:410:13)
E/flutter (19034): #30     _BufferingStreamSubscription._sendDone (dart:async/stream_impl.dart:420:15)
E/flutter (19034): #31     _BufferingStreamSubscription._close (dart:async/stream_impl.dart:305:7)
E/flutter (19034): #32     _SyncStreamControllerDispatch._sendDone (dart:async/stream_controller.dart:816:19)
E/flutter (19034): #33     _StreamController._closeUnchecked (dart:async/stream_controller.dart:671:7)
E/flutter (19034): #34     _StreamController.close (dart:async/stream_controller.dart:664:5)
E/flutter (19034): #35     _Socket._onData (dart:io-patch/socket_patch.dart:2051:21)
E/flutter (19034): #36     _rootRunUnary (dart:async/zone.dart:1198:47)
E/flutter (19034): #37     _CustomZone.runUnary (dart:async/zone.dart:1100:19)
E/flutter (19034): #38     _CustomZone.runUnaryGuarded (dart:async/zone.dart:1005:7)
E/flutter (19034): #39     _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:357:11)
E/flutter (19034): #40     _BufferingStreamSubscription._add (dart:async/stream_impl.dart:285:7)
E/flutter (19034): #41     _SyncStreamControllerDispatch._sendData (dart:async/stream_controller.dart:808:19)
E/flutter (19034): #42     _StreamController._add (dart:async/stream_controller.dart:682:7)
E/flutter (19034): #43     _StreamController.add (dart:async/stream_controller.dart:624:5)
E/flutter (19034): #44     _RawSecureSocket._closeHandler (dart:io/secure_socket.dart:794:21)
E/flutter (19034): #45     _RawSecureSocket._tryFilter.<anonymous closure> (dart:io/secure_socket.dart:916:11)
E/flutter (19034): #46     _rootRunUnary (dart:async/zone.dart:1198:47)
E/flutter (19034): #47     _CustomZone.runUnary (dart:async/zone.dart:1100:19)
E/flutter (19034): #48     _FutureListener.handleValue (dart:async/future_impl.dart:143:18)
E/flutter (19034): #49     Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:696:45)
E/flutter (19034): #50     Future._propagateToListeners (dart:async/future_impl.dart:725:32)
E/flutter (19034): #51     Future._completeWithValue (dart:async/future_impl.dart:529:5)
E/flutter (19034): #52     Future._asyncCompleteWithValue.<anonymous closu
D/EGL_emulation(19034): eglMakeCurrent: 0xe7945000: ver 2 0 (tinfo 0xf2cc0be0)
D/EGL_emulation(19034): eglMakeCurrent: 0xe7945000: ver 2 0 (tinfo 0xf2cc0be0)

 

위와 같은 에러가 떴다 .....

왜일까 ....

 

찾아 보니 api랑 데이터를 주고 받는데 문제라고 한다.

 

try {
  final result =
      await http.post(url, body: encodedBody, headers: apiHeader);
  Map<String, dynamic> response = json.decode(result.body);

  print("Response: $response");

  return response;
} catch (error) {
  Map<String, dynamic> response = Map<String, dynamic>();
  response['success'] = false;
  response['message'] = error;
  return response;
}

 코드는 위와 같았는데 ㅋㅋㅋ

 

한참을 찾아도 api문제는 아니고 잘 오는데 가끔 위와 같은 connection error가 떠서

 

stackoverflow의 도움을 받으려 했지만 실패ㅋㅋㅋㅋ

 

알고 보니 .... android emulator문제.. 이놈의 에뮬...문제가 많다 ..

E/flutter (29506): [ERROR:flutter/lib/ui/ui_dart_state.cc(177)] Unhandled Exception: Bad state: No element
E/flutter (29506): #0      List.first (dart:core-patch/growable_array.dart:250:5)
E/flutter (29506): #1      _MainScreenFullState._onLoad (package:follower/main/main_screen_full.dart:40:46)
E/flutter (29506): <asynchronous suspension>
E/flutter (29506): #2      _MainScreenFullState.initState.<anonymous closure> (package:follower/main/main_screen_full.dart:29:13)
E/flutter (29506): #3      new Future.delayed.<anonymous closure> (dart:async/future.dart:326:39)
E/flutter (29506): #4      _rootRun (dart:async/zone.dart:1182:47)
E/flutter (29506): #5      _CustomZone.run (dart:async/zone.dart:1093:19)
E/flutter (29506): #6      _CustomZone.runGuarded (dart:async/zone.dart:997:7)
E/flutter (29506): #7      _CustomZone.bindCallbackGuarded.<anonymous closure> (dart:async/zone.dart:1037:23)
E/flutter (29506): #8      _rootRun (dart:async/zone.dart:1190:13)
E/flutter (29506): #9      _CustomZone.run (dart:async/zone.dart:1093:19)
E/flutter (29506): #10     _CustomZone.bindCallback.<anonymous closure> (dart:async/zone.dart:1021:23)
E/flutter (29506): #11     Timer._createTimer.<anonymous closure> (dart:async-patch/timer_patch.dart:18:15)
E/flutter (29506): #12     _Timer._runTimers (dart:isolate-patch/timer_impl.dart:397:19)
E/flutter (29506): #13     _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:428:5)
E/flutter (29506): #14     _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:168:12)
E/flutter (29506):

아주 간단하지만 어이 없는 오류다..

 

위와 같은 오류가 떴는데 이유는

 

print('List=' + '${List.first['name']}');
print('List=' + '${List.first['color']}');

 

위의 프린트 문이 문제 였는데 프린트 문 안의  List.first['name'] 이 null 이 었기 때문.. 즉 널 처리를 해주면 된다.

 

print('List=' + '${List.first['name'] ?? null}');
print('List=' + '${List.first['color'] ?? null}');​

 

혹은 인터넷을 뒤져 보니 아래와 같은 코드중에서 오류가 났다는 경우도 있었다.

 

@override
  void initState() {
    super.initState();
    GetIt.I.get<SettingsLogic>().applyThemeFromPrefs();
  }

// file: settings_logic.dart

void applyThemeFromPrefs() {
    SharedPreferences.getInstance().then((prefs) {
      var themeName = prefs.getString("theme");
      _applyTheme(themeName);
    });
  }

  void _applyTheme(String themeName) {
    AppTheme appTheme = AppTheme.values.singleWhere((v) => describeEnum(v) == themeName);
    _currentTheme = appTheme;
    _streamController.sink.add(AppThemeChangedEvent(appTheme));
  }

...
// listener to theme changing

class FxoApp extends StatelessWidget {
  final SettingsLogic settings = GetIt.I.get<SettingsLogic>();

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<AppThemeChangedEvent>(
      stream: settings.themeStream,
      initialData: AppThemeChangedEvent(AppTheme.Light),
      builder: (context, snapshot) {
        return MaterialApp(
          title: AppName,
          theme: appThemeData[snapshot.data.appTheme],
...

위의 문제에서는 

 

.firstWhere((a) => a == b, orElse:() => null) 로 똑같은 null 처리를 해주면 된다.

패키지 매니저란?

  • 패키지 매니저(Package manager)는 패키지를 다루는 작업을 편리하고 안전하게 수행하기 위해 사용되는 툴이다.
  • 여기서 패키지를 다루는 작업이란 패키지를 설치, 업데이트, 수정, 삭제하는 작업을 의미한다.

 

패키지가 뭔데요? 어디에 쓰는 건가요?

  • 패키지는 라이브러리(library)와 유사한 개념이다.
  • 라이브러리가 코드의 작성을 위해 사용되는 코드의 묶음이라면, 패키지는 코드의 배포를 위해 사용되는 코드의 묶음이다.
  • 따라서 패키지는 경우에 따라 라이브러리를 포함할 수도 있으며, 일반적으로 라이브러리나 실행 파일(executable)을 포함한다.
  • 패키지는 다음 3가지 정보를 가지고 있는 코드의 배포 단위이다.
    1. 컴파일한 소프트웨어의 바이너리(binary)
    2. 환경 설정(configuration)에 관련된 정보
    3. 의존(dependency)에 관련된 정보

 

Dependency가 뭐에요? 그 정보를 왜 가지고 있어야 하는 거죠?

  • 많은 패키지들은 다른 패키지가 설치되어 있어야만 제대로 동작한다.
  • 이 경우에 기존 패키지를 제대로 동작시키기 위해 필요한 다른 패키지를 'dependency'라고 말한다.
  • 따라서 패키지를 사용하고자 할 때 dependency에 해당되는 다른 패키지들을 전부 설치해줄 필요가 있다.
  • 하지만 그런 새로운 패키지(dependency)들을 설치하는 도중 이번엔 설치하고 있는 패키지의 dependency를 설치해야 하는 상황이 발생할 수 있다.
  • 즉, dependency의 dependency를 설치하는 경우가 생기며, 이런 상황이 끊임없이 이어질 경우 사용자가 수동으로 패키지를 관리하기가 불가능에 가까워진다. 이런 상황을 dependency hell이라고 한다.
  • 따라서 각각의 패키지가 자신의 dependency에 대한 정보를 가지게 한다면, 사용자가 사용하고자 하는 패키지의 dependency를 패키지 매니저를 통해 쉽게 설치하도록 도울 수 있다.

 

그럼 패키지 매니저는 dependency만 관리하나요?

  • 패키지 매니저가 공통적으로 수행하는 일은 다음과 같다.
    1. 패키지의 dependency 관리
    2. 패키지의 보안관리 ㅡ 신뢰할 수 있고(authenticity), 손상되지 않음(integrity)을 보장
    3. 여러 패키지를 기능에 따라 그룹으로 묶어 정리
    4. 패키지 압축 해제
    5. Software repository로부터 패키지를 찾고, 다운로드하고, 설치하고, 업데이트하는 역할

 

Software repository는 뭔가요?

  • 패키지를 저장하고 관리하는 저장소이다. 다른 말로는 repos라고 부른다.
  • 커뮤니티에 기여하는 것을 목적으로 다른 사용자들을 위해 패키지를 등록할 수도 있다.
  • 성능 문제(load balancing)와 위기상황 대처(fault tolerant)를 위해 여러 개로 분리되어있으며, 각각의 저장소가 동일한 기능을 수행한다.
  • Software repository에 대한 위치 정보를 관리하는 환경 설정 파일이 존재하므로, 그 경로를 참고하여 software repository에 접근하는 방식을 사용한다.

 

패키지 매니저의 예

  • 패키지 매니저는 운영체제와 프로그래밍 언어에서 사용되는 툴이다.
  • Ubuntu 운영체제의 apt(Advanced Package Tool)가 대표적인 운영체제 패키지 매니저의 예다.
  • 예를 들어 콘솔을 사용한 sudo apt-get install 명령어를 통해 패키지를 설치할 수 있다.
  • Python과 PHP, Node.js 등 많은 프로그래밍 언어들은 각각 자신만의 패키지 매니저와 software repository를 가지고 있다.
  • 여러 종류의 패키지 매니저와 software repository를 가진 언어도 존재한다. (Node.js, Java, Ruby...)
Language Package manager Software repository
Python pip PyPI
PHP Composer Packagist
Node.js NPM, Yarn NPM, Yarn
Java Maven, Gradle Maven
Ruby RubyGems, Bundler RubyGems, Bundler

참고한사이트: https://aahc.tistory.com/14

React

리액트(React)란?

리액트는 페이스북에서 제공해주는 프론트엔드 라이브러리이다.
또한 리액트는 컴포넌트 기반으로 되어있어서 컴포넌트에 데이터를 내려주면 개발자가 설계한대로 UI가 만들어져 사용자에게 보여진다.

  • 리액트를 왜 사용하는가?
    사실 리액트를 사용하지 않아도 얼마든지 웹 페이지를 html, css를 이용해 만들 수 있다.
    그러나 html과 css등으로만 만들어진 웹페이지는 동적인 데이터를 UI에 뿌려주기에는 적합하지 않다.
    리액트를 이용한다면 사용자와 상호작용할 수 있는 UI를 손쉽게 만들어 줄 수 있다.

  • 리액트의 특징

    1. 컴포넌트
      리액트는 컴포넌트 기반의 라이브러리이다.
      UI를 하나의 큰 덩어리로 생각한다면 컴포넌트는 그 덩어리를 이루는 아주 작은 요소들이라고 생각하면된다.
      그런 요소들을 설계해서 쌓아 올리면 하나의 UI가 만들어진다.
      그런 작은 컴포넌트들로 쪼개져 있기 때문에 전체 코드를 파악하기가 상대적으로 쉬운듯 하다.
      작은 컴포넌트들은 다른 화면에서도 사용될 수 있는 재사용성을 가지고 있기 때문에
      똑같은 코드를 반복적으로 입력할 필요가 없어서 효율적이다.
      컴포넌트의 종류는 클래스형(stateful)과 함수형(stateless)으로 나누어진다.

    2. One Wat Data flow
      리액트는 데이터의 흐름이 한 방향으로만 흐른다.
      데이터가 내려가기만 하지 밑에서 데이터를 올려줄 수는 없다.
      그래서 부모의 데이터를 바꿔주기 위해서는 state를 이용해야 한다.

    3. Props and State

      • props
        props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말한다.
        props는 읽기 전용 데이터라고 생각하면 된다.
        자식 컴포넌트에서 전달 받은 props를 변경이 불가능하고 props를 전달해준
        최상위 부모 컴포넌트만 props를 변경할 수 있다.

      • state
        state는 동적인 데이터를 다룰 때 사용한다.
        사용자와의 상호작용을 통해 데이터를 동적으로 변경을 해야할 때 사용한다.
        state는 클래스형 컴포넌트에서만 사용할 수 있는데 각각의 state는 독립적이라
        다른 컴포넌트의 직접적인 접근은 불가능하다.
        그러나 자신보다 상위에 있는 state는 변경이 가능한데 state를 변경해주는 함수를 props로 받는다면
        state의 변경이 가능하다.
        주의해야할 점은 props로 넘겨줄 때에 this의 binding을 신경써줘야 한다.

    4. Virtual DOM
      Virtual DOM은 가상의 Document Object Model을 말한다.
      일반적으로 html코드를 짜고 웹 브라우저에서 html 파일을 열게되면, html코드들이 DOM을 만들게된다.
      그리고 만약 html 코드의 특정 한 부분이 변경되게 된다면 전체 DOM을 새롭게 만들게 되어 비효율적인 구조이다.
      이러한 문제점들은 리액트에서 해결이 된다.
      리액트는 가상의 DOM을 만들어서 진짜 DOM과 비교하여 변경 사항이 있을 경우 전체를 새롭게 만드는게 아니라
      변경된 부분만 진짜 DOM의 반영하는 방식으로 작업을 수행한다.
      그럼으로써 앱의 효율성과 속도를 높일 수 있게 된다.

 

구글과 Flutter!!!!!후후후

 


Flutter?

플러터(Flutter)는 구글이 개발한 오픈 소스 모바일 애플리케이션 개발 프레임워크이다. 안드로이드, iOS용 애플리케이션 개발을 위해, 또 구글 푸크시아용 애플리케이션 개발의 주된 방식으로 사용된다.

 

잠깐 역사를 알고 가자면 "플러터의 최초 버전의 코드명은 "Sky"(스카이)이며안드로이드운영 체제에서 실행되었다. 2015년다트개발자 서밋에서 공개되었으며 120프레임/초로 꾸준히렌더링이 가능하도록 의도되었다고 언급되었다.상하이의 구글 개발자의 날 키노트 중에 구글은 플러터 1.0 전의 마지막 대형 릴리스인 플러터 릴리스 프리뷰 2를 발표하였다. 2018년 12월 4일, 플러터 1.0이 플러터 라이브 이벤트에서 공개되었으며 프레임워크의 최초의 안정판으로 언급되었다." 라고 합니다.

+ Recent posts