rabelais88

const Line = () => {
  const vertices = useMemo(() => {
    let p = [
      [0, 0, 0],
      [0, 1, 1],
      [0, 1, -1]
    ];
    const flatArr = p.reduce((ac, cv) => [...cv, ...ac], []);
    return new Float32Array(flatArr);
  }, []);

rabelais88

번들러 이해하기

by 박성렬

웹상에서의 모듈이란?

• 관련 슬라이드
• Mozilla Developers' Network - Javascript 모듈에 대한 소개

자바스크립트는 1995년는 처음 등장한 이래로 아주 간단한 형태로만 유지되었습니다. 통신 대역폭도 크지 않았고, 웹은 인터랙션이 거의 없는 하이퍼링크 위주의 단순한 텍스트였습니다.

rabelais88

import pandas as pd
import numpy as np

import seaborn as sns
from matplotlib import pyplot as plt
import matplotlib as mpl
%matplotlib inline
pd.options.display.max_columns = 100

# font check

rabelais88

version: '3.8'
services:
  jupyter-lab:
    image: jupyter/datascience-notebook:9b06df75e445
    environment: 
      - JUPYTER_ENABLE_LAB=yes
    volumes: 
      - ./notebooks:/home/jovyan
    ports:
      - 8888:8888

rabelais88

타입스크립트 실전 압축 스터디

• 링크된 git은 빅픽쳐 인터랙티브 계정에서만 접속 가능합니다.

• script-only 실습 git

• nuxt 실습 git - master 브랜치는 해답, study 브랜치에서 실습

• 타입스크립트는 내용이 방대하지만, 라이브러리를 제작하는 경우를 제외하고 실제로 사용되는 내용은 매우 한정적이므로 이번 스터디는 실전에 많이 사용되는 내용에 한하여 정리합니다.

interface

• 각종 타입별 타입 사용법에 대한 기초 핸드북은 typescript handbook을 추천합니다.

rabelais88

voronoi(delaunay) triangulation on d3 chart hover placement

보로노이 다이어그램이란?

두 개 이상의 점이 있을때 각각의 점마다 서로 다른 각각의 점에 대해서 2등분한 거리(델러네이 포인트)를 변으로 삼아 도형으로 그려낸 것. 따라서 항상 균일하게 점과 점 사이의 거리를 구할 수 있다.

설명 https://slides.com/ourlanguagevideo/voronoi-explain

보로노이 예제: https://codepen.io/rabelais88/pen/XQqmqX

https://github.com/d3/d3-delaunay ‑ Connect your account to preview links

rabelais88

lottie를 이용한 애니메이션

• mp4 vs lottie vs gif 렌더링 화질 및 프레임 비교
• mp4 vs lottie 파일 사이즈 비교
• lottie 퍼포먼스 스트레스 테스트(mp4에 비하여 여러개 렌더해도 브라우저가 느려지지 않음)

사용법

1. bodymovin이라는 플러그인을 사용하여 AfterEffect용 클립(composition)을 .json 형태로 저장(export).
2. https://aescripts.com/bodymovin/(결제창에 0원 입력할 것. 기부형 무료 플러그인임)
3. svg로 렌더링해야 하므로 이미지 처럼 native svg에서 사용할 수 없는 요소들은 제외(svg 내부 이미지의 경우 크로스브라우징 이슈가 있음.)
4. 배경은 투명으로 하고, 프레임도 그대로 적용되므로 프레임까지 설정하여 저장.

rabelais88

Svelte.js

왜 svelte가 Vue 보다 더 좋은가? By John Hannah

• 내(박성렬)가 Svelte에 관심을 가지게 된 이유.
• 글이 주장하는 바는 대략 세 가지
  • 구문이 간결하다.
  • Vue보다 빠르다(bootup time, main thread cost)
  • 용량이 Vue보다 적다(total byte weight)

rabelais88

Vue 3.0 Migration

• Request For Comments Document for Functional Component in Vue : 현재 최종 PR전 의견 취합 단계. 아직 정식 릴리즈는 아니고 vue-next 로 릴리즈 전 프리뷰 단계에 해당.

• 이번 네이버 DEVIEW에서도 발표 주제에 포함

• RFC: ECMAscript Technical Committee의 proposal /w actual code → review → release의 의사결정 단계를 흉내낸 것으로 보임. 대규모 인원 작업시에 이점 예상

• 추가적인 문서작업을 요구하므로 일의 중요도를 고려하지 않고 사용했을 때 오히려 작업속도가 정체될 가능성. Agile이나 Waterfall을 잘못 이해하고 실천했을 때, 꼭 알려진 대로 효율성을 끌어올리기보다 스트레스로 인한 구성원들의 반목을 야기하듯이. 프로세스 그 자체보다 팀원들의 협업 마인드가 중요하고, 태스크를 한눈에 보기 힘든 팀에서 사용하기 알맞은 방식이라고 볼 수 있음.

• Evan You 2019년 6월 Vue 3 프리뷰

요점 정리

rabelais88

스타트업에 traefik + docker-swarm을 추천하는 이유

• Traefik: Reverse-proxy router
• Docker-swarm: Docker-supported orchestrator

왜 Docker-Swarm인가?

• kubernetes(이하 k8) 는 무겁고 느리다. docker-swarm(이하 DS) 은 docker 최신버전에 기본으로 탑재되어 나온다. 또한 helm이나 별도의 관리 cli(kubeadm, kubectl)를 설치할 필요가 없다.

• k8 은 세팅도 어렵다: 세팅하기가 워낙 까다로워 실제로 운영하기 적절한 경우는 devops 팀을 가진 최소 20명 이상의 대규모 사이즈 팀이다. 한 명이 작업하는 것이 아주 불가능한 것은 아니지만, 긴급수정시에는 많이 위험해질 수 있다. 총원이 10명이 되지 않는 우리팀 같은 경우는 한 사람이 급하게 기능수정을 해야될 일이 많다.