믹아의 개발일기

flutter 개발 중 내부 서버와 http 통신을 하려고 했는데 발생한 에러.

https 서버도 열어놨었는데 내부 서버라 인증서 문제로 http 서버를 열어서 하는데 http 통신도 안되는거..

http 통신이라도 해결해보자

[root]\android\app\src\main 의

AndroidManifest.xml 파일을 수정

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.yourapp">
   <application
        android:label="yourapp"
        android:usesCleartextTraffic="true" // <-- 이 부분
        android:icon="@mipmap/ic_launcher">
        <activity
        .
        .
        .
        .
        

이 부분 이라고 작성한 부분을 추가하면 된다

android:usesCleartextTraffic="true"

iOS의 경우는 테스트 안해봐서 모르겠으나 아래의 stackoverflow 에 나와있다.

참고

stackoverflow.com/questions/64197752/bad-state-insecure-http-is-not-allowed-by-platform

인풋을 위해 keyboard 가 나왔을 때 bottom overflowed 문제가 발생했다.

현재 내 코드와 상황.

    return Scaffold(
        appBar: AppBar(
          elevation: 0,
          leading: leadingIcon,
          backgroundColor: Colors.white,
          titleTextStyle: TextStyle(
            color: Colors.black,
          ),
          centerTitle: true,
          title: Text(
            'Welcome',
            style: TextStyle(color: Colors.black),
          ),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Container(
                height: 200,
                child: Container(),
              ),
              render,
            ],
          ),
        ));

Column 을 SingleChildScrollView 로 wrap해서 해결했다.

return Scaffold(
        appBar: AppBar(
          elevation: 0,
          leading: leadingIcon,
          backgroundColor: Colors.white,
          titleTextStyle: TextStyle(
            color: Colors.black,
          ),
          centerTitle: true,
          title: Text(
            'Welcome',
            style: TextStyle(color: Colors.black),
          ),
        ),
        body: Center(
            child: SingleChildScrollView( // 여기 추가
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Container(
                height: 200,
              ),
              render,
            ],
          ),
        ))) // SingleChildScrollView // Center // Scaffold;

어떻게 flutter를 개발하게 되어 코딩중인데 vscode 에서 80자만 넘어가도 자동으로 줄 바뀜이 일어나버린다..

일단 코딩 가이드에선 80자 이상을 피하라고 한다.

그래도 일단 바꾸는 법

vscode 세팅을 들어가서 dart.line 을 검색하면 80으로 설정되어있다. 수정하면 된다.

80으로 설정된 숫자를 변경하면 된다.

아직 내가 dart 언어에 안 익숙해서 보기가 좀 불편해서 잠시 바꿨는데 다른 사람과 작업할때도 많을 것 이고 

이왕이면 코딩 가이드에 맞춰서 짜는걸 추천한다.

애니메이션 공부하면서 알게된 내용 정리

웹 브라우저는 위의 이미지와 같은 로딩, 렌더링 순서를 거친다.

이 중 Layout, Paint, Composite 단계에 주목하자

3. Layout

브라우저에서 엘리먼트의 도형, 위치를 생성한다.

대표적인 속성값으로 width, height, margin, padding, left,top,rigth,bottom 등이 있다

4. Paint

각 엘리멘트의 픽셀을 채운다.

box-shadow, border-radius, color, background-color 등이 있다.

5. Composite

화면에 모든 레이어를 그리기 시작한다.

transform, opacity 가 있다.

여기서 만약 width, height 등의 값 (Layout 에 해당하는 속성 값)을 애니메이션으로 변경하게 된다면

Layout -> Paint -> Composite 단계를 다시 거쳐야한다.

이것을 Reflow 라고 한다

그럼 background-color 등을 변경하하면 

Paint -> Composite 를 걸치는데

이것을 Repaint 라고 한다

즉 애니메이션을 줄거면 최대한 Composite 단계에서 하는게 성능상으로 좋다.

참고

https://mika0203.github.io/Pathfinding-Algorithm/

일단 구현 페이지..

대충 이런 느낌으로 구현했다.

알고리즘 구현은 이 단계를 걸쳤다.

A*의 자세한 알고리즘은 아래에 내가 참조한 사이트를 첨부할 예정. 

즉 알고리즘 설명은 거의 없다

1. startPosition, targetPosition, obstacles 지정

2. currentNode 를 startPosition 으로 지정

3. currenNode 를 closeNodeList 에 추가, openNodeList 에서 제거

4. currentNode 에서 8방향으로 Node 를 생성하여 ( 여기서 closeNodeList 에 있는 노드는 제외한다)  생성된 Node 들을 openNodeList 에 저장

5. openNodeList 중 적합한 Node 를 찾아 currentNode 로 지정 후 3번으로 이동

6. 위의 반복을 벗어나는 조건이 맞으면 이후 단계 진행

* 조건

- currentNode 가 targetPosition 과 위치가 같음 [찾음]

- openNodeList 의 길이가 0임. 즉 더 이상 찾을 Node 가 없음 [못찾음]

- 계산이 너무 많음 (원래 화면을 벗어난 좌표는 제한시켜야하는데 아직 미완성이라... 100,000회 반복하면 종료하게 만들어둠)

대충 이렇게 단계를 걸친다.

현재 개발이 더 필요하다고 느끼는 점이

1. 장애물 판별하는 코드

장애물 판별을 x, y 값 비교를 하나하나 다 하고 있는데 8방향 Node 를 구할 때 계산이 좀 낭비되는 듯 하다. 

2. 시간

잘 만들어진 알고리즘과 비교하였을 때 시간차이가 얼마나 나는지 체크하고 어디서 계산시간이 많이 소모되는지 체크 후 업데이트

3. open, closeNodeList 를 시각적으로 표시

일단 대충 이정도?

git 주소와 astar 알고리즘 소스도 첨부...

github.com/Mika0203/Pathfinding-Algorithm

github.com/Mika0203/Pathfinding-Algorithm/blob/master/src/ts/Astar.ts

참조

lhh3520.tistory.com/343

http://egloos.zum.com/cozycoz/v/9748811