rabelais88

Typecheck in Javascript without Typescript Compilation

For anyone who wants eslint typecheck without actually using typescript, read this. I've been using this on my project to track any complicated data structure and it's been working perfectly. It supports both autocompletion and type lint. and it compiles without any performance drop as it doesn't affect the actual compilation. you don't need a complicated setup, just put *.d.ts file on your work directory.

• https://fettblog.eu/typescript-jsdoc-superpowers/
• https://ricostacruz.com/til/typescript-jsdoc
• https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html

the only downside of this, is that type conversion is awkward in this method.(the type conversion still does work though) I think the community should invent newer style of JSDOC and IDEs should support it: something similar to above(typescript + JSDOC) and leaner.

action.types.d.ts

rabelais88

aws basics

Terminology

• Elastic Beanstalk: Load Balancer + Orchestrator
• EC2(Elastic Container): Linux Container
• RDS: Relational Database(Postgres, MySQL...)
• ElastiCache: Cache Database(Redis...)
• VPC: regional cloud group with subnet(datacenter model)
• S3: file clouds
• IAM: Identity + Authorization manager

Structure

rabelais88

naver DEVIEW 2019 후기

곽철용 짤만 4번은 봄...

1. Multi Tenancy on baremetal k8s

• Multi-Tenancy: 싱글 클러스터 도는 머신에서 에서 여러개의 네임스페이스를 이용하여 자원을 유동적으로 공유하는 방식.
• Bare-metal: GCP나 AKS처럼 별도의 전용 가상화/오케스트레이션 서비스를 사용하지 않고 직접 서버에 구현하는 방식.
• 하나의 머신/클러스터 안에서 여러 서비스를 돌리다보니 특정 서비스에서 자원이 남을 경우 다른 서비스로 자원을 재분배할 수 있음. 스케일 업/다운이 쉽다는 것. → 공개할 Docker-swarm이 오히려 여기에 적합할 수 있음.

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명이 되지 않는 우리팀 같은 경우는 한 사람이 급하게 기능수정을 해야될 일이 많다.

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

Svelte.js

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

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

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

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

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

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

• script-only 실습 git

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

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

interface

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

rabelais88

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