믹아의 개발일기

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 언어에 안 익숙해서 보기가 좀 불편해서 잠시 바꿨는데 다른 사람과 작업할때도 많을 것 이고 

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

node.js 를 사용한 서버에서 new Date() 로 현재시간을 저장하는 코드가 있었다.

근데 서버를 하나 빌렸더니 외국 어딘가로 돼있어서 시간 저장이 이상하게 되더라...

서버 시간을 바꾸는 법도 있겠지만 가끔 docker 사용시 서버 시간이 외국으로 돼있는 경우도 있기에

그냥 nodejs 에서 처리하기로 생각

예전엔 moment.js 를 썼었는데 요새 크기가 너무 커지고 뭐 별로라해서 day.js 사용해봤다.

npm install dayjs

// node.js

const dayjs = require('dayjs');
const timezone = require('dayjs/plugin/timezone')
const utc = require('dayjs/plugin/utc');

dayjs.extend(utc)
dayjs.extend(timezone)

console.log(dayjs().tz("Asia/Seoul"))
console.log(new Date().toString());

root@002b13b84c41:/test# node t.js

// console.log(dayjs().tz("Asia/Seoul"))
d {
  '$L': 'en',
  '$d': 2021-04-13T18:03:55.594Z,
  '$x': { '$timezone': 'Asia/Seoul' },
  '$y': 2021,
  '$M': 3,
  '$D': 13,
  '$W': 2,
  '$H': 9,
  '$m': 3,
  '$s': 55,
  '$ms': 594,
  '$offset': 540,
  '$u': false }
  
// console.log(new Date().toString())
Mon Apr 12 2021 15:03:55 GMT-0900 (Hawaii-Aleutian Daylight Time)

하와이-알류샨 시간대에서 현재 한국 시간인 9시 3분을 구할 수 있다

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

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

이 중 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 단계에서 하는게 성능상으로 좋다.

참고