믹아의 개발일기

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

참고

요새 javascript 알고리즘 문제 풀고 있는 사이트에서 문제가 올라왔는데

min 값과 max 값의 사이를 오가는 숫자를 구하는 문제였다

yeu.kr/Ptkt6

unity 에선 Mathf.PingPong(float, length) 함수로 쉽게 구할 수 있었는데 js에서는.. 아마 없는듯?

오르는 중인지 내려가는 중인지 bool 값으로 할 수 있었는데 그냥 구현해보고 싶었다

// value 를 넣으면 min, max 값을 오가는 값을 리턴 하는 함수

const pingpong = (min,max, value) => {
      // 0을 기준으로 값을 맞춰준다
      const normalizeMin = 0;
      const normalizeMax = max - min;
      const normalizeVal = value - min;
    
      // 값 차이를 2배 해준다
      const max2 = (normalizeMax - normalizeMin) * 2;
      
      // 현재 들어온 값을 위에서 구한 max2 값의 나머지 계산을 해준다
      // 즉 현재 값이 max 보다 큰지 작은지 알 수 있게 해준다
      const overVal = normalizeVal % max2;

      // overVal 값이 Max 값 보다 
      // 작은 경우(숫자가 커지는 경우) ? 정규화 전 min 값 + overVal 한다
      // 큰 경우 (숫자가 작아지는 경우) : 정규화max 보다 초과한 수를 max 에서 빼준다
      return overVal <= normalizeMax 
         ? min + overVal
         : max + (normalizeMax - overVal)
     }
   
  

확인

yeu.kr/nv8h4#js

switch (foo) {
	case 1 :
    	let bar = 1;
        break;
    case 2 : 
    	let bar = 2;
        break;
}

위와 같이 작성하면 bar 가 이미 선언되었다고 오류가 날 것 이다.

switch (foo) {
	case 1 : {
    	let bar = 1;
        break;
    }
    case 2 : {
    	let bar = 2;
        break;
    }
}

{} 로 감싸서 해결하자

회사 메신저로 Mattermost(매터모스트)를 사용 중이다.

얼마 전 사원들 생일파티(...) 담당을 맡게되었는데 메신저에 생일파티 알람을 주면 어떨까 싶어서 찾아봤다.

github.com/jonathanwiesel/node-mattermost

위의 프로젝트를 이용했다.

일단 테스트를 위해 채널을 하나 새로 만들었다.

1. Hook URL 구하기

작성 후 제일 아래에 Save 를 눌러준다.

3번째의 Channel 은 메세지 수신을 위해 사용하는 듯 한데.. 나중에 더 자세히 찾아봐야겠다.

해당 URL 이 hook url 이다. 다시 들어와서 보는것도 가능하니 막 어디 적어둘 필요는 없을 듯 하다.

2. NodeJS js 파일 작성하기

일단 npm 으로 상단의 git 프로젝트를 인스톨하자

npm install node-mattermost

//app.js
const Mattermost = require('node-mattermost');
const hookurl = json.hookurl; // 상단에서 구한 hook url
const mattermost = new Mattermost(hookurl);

// 프사 설정을 위해
function base64_encode(file) {
    var bitmap = fs.readFileSync(file);
    return bitmap.toString('base64');
}

mattermost.send({
  text: "생일 축하합니다",

  // 채널명을 입력해준다. 채널명이 한글이면 좀 다른데 아래에서 설명..
  channel: '#test',
  username: '생일축하 봇',
  // 프로필 사진을 지정해준다. 나는 같은 폴더에 있는 케이크 사진을 base64 형태로 추가했다 
  icon_url: 'data:image/png;base64,' + base64_encode('./public/img/cake.png'),

})

실행해보자

node app.js

3. 채널명이 한글일 때

{
    // ...
    channel : 'testz'
    // ...
}