믹아의 개발일기

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

참고

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

이미지 파일을 선택하면 이미지를 연결된 소켓에 뿌리는 작업을 하고 있었다.

파일을 선택하면 blob 형태로 만들어 뿌렸는데 이게 같은 디바이스에서는 제대로 동작했는데

다른 디바이스에선 제대로 안나오더라..

그래서 생각해낸게 blob 을 base64 로 컨버팅해서 base64를 넘기는 형태로 변경

const reader = new FileReader();
const blob = ---; // blob or file
reader.readAsDataURL(blob); 
reader.onloadend = () => {
	const base64data = reader.result;
	// base64 converted!
	console.log(base64data);
}

샘플페이지

codepen.io/mika0203/pen/oNBzgGx