Skip to content

Instantly share code, notes, and snippets.

View rabelais88's full-sized avatar
๐ŸงŠ
diving in 3d

Park Sungryeol rabelais88

๐ŸงŠ
diving in 3d
View GitHub Profile
@rabelais88
rabelais88 / reactThreeFiber-declarativeVertices.tsx
Created July 8, 2021 13:36
declarative vertices in React-three-fiber
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
rabelais88 / understanding-webpack.md
Created January 29, 2021 10:21
์›นํŒฉ ์ดํ•ดํ•˜๊ธฐ

๋ฒˆ๋“ค๋Ÿฌ ์ดํ•ดํ•˜๊ธฐ

by ๋ฐ•์„ฑ๋ ฌ

์›น์ƒ์—์„œ์˜ ๋ชจ๋“ˆ์ด๋ž€?

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” 1995๋…„๋Š” ์ฒ˜์Œ ๋“ฑ์žฅํ•œ ์ด๋ž˜๋กœ ์•„์ฃผ ๊ฐ„๋‹จํ•œ ํ˜•ํƒœ๋กœ๋งŒ ์œ ์ง€๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ํ†ต์‹  ๋Œ€์—ญํญ๋„ ํฌ์ง€ ์•Š์•˜๊ณ , ์›น์€ ์ธํ„ฐ๋ž™์…˜์ด ๊ฑฐ์˜ ์—†๋Š” ํ•˜์ดํผ๋งํฌ ์œ„์ฃผ์˜ ๋‹จ์ˆœํ•œ ํ…์ŠคํŠธ์˜€์Šต๋‹ˆ๋‹ค.

@rabelais88
rabelais88 / seaborn-init-korean.py
Created October 4, 2020 04:16
seaborn ํ•œ๊ตญ์–ด ํฐํŠธ ์„ค์ •+ํ…Œ๋งˆ ์ˆ˜์ •
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
rabelais88 / docker-compose.yaml
Created October 3, 2020 03:08
jupyter lab docker-compose
version: '3.8'
services:
jupyter-lab:
image: jupyter/datascience-notebook:9b06df75e445
environment:
- JUPYTER_ENABLE_LAB=yes
volumes:
- ./notebooks:/home/jovyan
ports:
- 8888:8888
@rabelais88
rabelais88 / typescript-study.md
Last active July 15, 2020 03:43
ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์‹ค์ „ ์••์ถ• ์Šคํ„ฐ๋””

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์‹ค์ „ ์••์ถ• ์Šคํ„ฐ๋””

  • ๋งํฌ๋œ git์€ ๋น…ํ”ฝ์ณ ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ๊ณ„์ •์—์„œ๋งŒ ์ ‘์† ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

  • script-only ์‹ค์Šต git

  • nuxt ์‹ค์Šต git - master ๋ธŒ๋žœ์น˜๋Š” ํ•ด๋‹ต, study ๋ธŒ๋žœ์น˜์—์„œ ์‹ค์Šต

  • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ๋‚ด์šฉ์ด ๋ฐฉ๋Œ€ํ•˜์ง€๋งŒ, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ œ์ž‘ํ•˜๋Š” ๊ฒฝ์šฐ๋ฅผ ์ œ์™ธํ•˜๊ณ  ์‹ค์ œ๋กœ ์‚ฌ์šฉ๋˜๋Š” ๋‚ด์šฉ์€ ๋งค์šฐ ํ•œ์ •์ ์ด๋ฏ€๋กœ ์ด๋ฒˆ ์Šคํ„ฐ๋””๋Š” ์‹ค์ „์— ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ๋‚ด์šฉ์— ํ•œํ•˜์—ฌ ์ •๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

interface

  • ๊ฐ์ข… ํƒ€์ž…๋ณ„ ํƒ€์ž… ์‚ฌ์šฉ๋ฒ•์— ๋Œ€ํ•œ ๊ธฐ์ดˆ ํ•ธ๋“œ๋ถ์€ typescript handbook์„ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค.

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

lottie๋ฅผ ์ด์šฉํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜

์‚ฌ์šฉ๋ฒ•

  1. bodymovin์ด๋ผ๋Š” ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•˜์—ฌ AfterEffect์šฉ ํด๋ฆฝ(composition)์„ .json ํ˜•ํƒœ๋กœ ์ €์žฅ(export).
  2. https://aescripts.com/bodymovin/(๊ฒฐ์ œ์ฐฝ์— 0์› ์ž…๋ ฅํ•  ๊ฒƒ. ๊ธฐ๋ถ€ํ˜• ๋ฌด๋ฃŒ ํ”Œ๋Ÿฌ๊ทธ์ธ์ž„)
  3. svg๋กœ ๋ Œ๋”๋งํ•ด์•ผ ํ•˜๋ฏ€๋กœ ์ด๋ฏธ์ง€ ์ฒ˜๋Ÿผ native svg์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋Š” ์š”์†Œ๋“ค์€ ์ œ์™ธ(svg ๋‚ด๋ถ€ ์ด๋ฏธ์ง€์˜ ๊ฒฝ์šฐ ํฌ๋กœ์Šค๋ธŒ๋ผ์šฐ์ง• ์ด์Šˆ๊ฐ€ ์žˆ์Œ.)
  4. ๋ฐฐ๊ฒฝ์€ ํˆฌ๋ช…์œผ๋กœ ํ•˜๊ณ , ํ”„๋ ˆ์ž„๋„ ๊ทธ๋Œ€๋กœ ์ ์šฉ๋˜๋ฏ€๋กœ ํ”„๋ ˆ์ž„๊นŒ์ง€ ์„ค์ •ํ•˜์—ฌ ์ €์žฅ.

Svelte.js

์™œ svelte๊ฐ€ Vue ๋ณด๋‹ค ๋” ์ข‹์€๊ฐ€? By John Hannah

  • ๋‚ด(๋ฐ•์„ฑ๋ ฌ)๊ฐ€ Svelte์— ๊ด€์‹ฌ์„ ๊ฐ€์ง€๊ฒŒ ๋œ ์ด์œ .
  • ๊ธ€์ด ์ฃผ์žฅํ•˜๋Š” ๋ฐ”๋Š” ๋Œ€๋žต ์„ธ ๊ฐ€์ง€
    • ๊ตฌ๋ฌธ์ด ๊ฐ„๊ฒฐํ•˜๋‹ค.
    • Vue๋ณด๋‹ค ๋น ๋ฅด๋‹ค(bootup time, main thread cost)
    • ์šฉ๋Ÿ‰์ด Vue๋ณด๋‹ค ์ ๋‹ค(total byte weight)

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
rabelais88 / docker-swarm.md
Created November 10, 2019 05:18
์Šคํƒ€ํŠธ์—…์— traefik + docker-swarm์„ ์ถ”์ฒœํ•˜๋Š” ์ด์œ 

์Šคํƒ€ํŠธ์—…์— 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๋ช…์ด ๋˜์ง€ ์•Š๋Š” ์šฐ๋ฆฌํŒ€ ๊ฐ™์€ ๊ฒฝ์šฐ๋Š” ํ•œ ์‚ฌ๋žŒ์ด ๊ธ‰ํ•˜๊ฒŒ ๊ธฐ๋Šฅ์ˆ˜์ •์„ ํ•ด์•ผ๋  ์ผ์ด ๋งŽ๋‹ค.