Skip to content

Instantly share code, notes, and snippets.

@swcho
Created November 14, 2019 02:07
Show Gist options
  • Save swcho/14dcb95eb63d22c38f556ee5fc2f1132 to your computer and use it in GitHub Desktop.
Save swcho/14dcb95eb63d22c38f556ee5fc2f1132 to your computer and use it in GitHub Desktop.
[19-11-2주] 지극히 주관적인 devlog

medium에 읽기 회수 제한이 걸렸을 경우, 시크릿모드에서 문서를 열어보시면 됩니다.

개발 일반

기술 문서를 Tutorials, Hot-To Guide, Explanation, Reference로 나누고 그 구성과 어떠한 상황에서 사용해야 하는지 설명

[The Power of Ten – Rules for Developing Safety Critical Code}] (http://pixelscommander.com/wp-content/uploads/2014/12/P10.pdf)

안정성이 필요한 코드를 작성하는 방법, c/c++ 언의 룰 같지만, 일단 정리해 본다.

  1. 간단한 흐름
  2. loop는 정적이고 고정값이어야 함
  3. 초기화 이후 메모리 동적할당을 하지 않음
  4. 함수는 60 내외로, declaration과 statement는 한줄로.
  5. 함수 하나당 최소 2개의 assert 문 추가
  6. 데이터 객체는 최대한 작게 선언
  7. 함수의 리턴 값은 호출한 곳에서 파라미터는 해당 함수에서 검사해야 함.
  8. 전처리는 해더파일 include나 간단한 매크로에 한해서 사용.
  9. 포인터 사용 제약: 하나의 레벨 이상의 dereferencing은 허용하지 않음. 함수 포인터 허용하지 않음.
  10. 모든 코드는 컴파일되어야 함.

Server side

node.js 기반의 퍼포먼스를 측정하는 autocannon 툴과 node.js의 framegraph를 뽑아주는 clinic 가이드

node.js 스트림 프로그래밍 할때 참조 할만한 내용

집에서 라즈베리파이로 k3s 클러스터 구축기

최대 수행 개수를 정해서 돌리는 방법은 특정 endpoint에 동시 요청 개수를 제한할 필요가 있을 때 써먹을 만함. 처음에 promise all 하고 재귀함수를 통해 다음 promise 들을 chaining 함.

Continuation Local Storage (CLS)

  • 비동기 호출이 이루어지는 컨텍스트/동작을 추적할 수 있음.
  • Profiling/monitoring

Node JS 에서는 thread 가 하나이기 때문에 Thread Local Storage(TLS)는 쓸모없음.

CLS와 Proxy를 사용하여 dependency free한 logging 시스템 구축

pm2 보다 cluster를 사용하는 이유는 CPU 활용이 더 좋기 때문

Codepen Picks

matter.js를 사용한 당구 게임

Scroll 시, 상단 프로그레스와 에니메이션의 keyframe을 맵핑함.

{
  animation-play-state: paused;
  animation-delay: calc(var(--scrolly) * -1s), calc(var(--
scrollx) * -1s);
}

어떻게 animation play state를 paused 로 하면 delay 가 key frame 역할을 하는 것 같음.

하나의 div tag에서 CSS 만을 활용하는 다양한 패턴들

Mask Compositing: The Crash Course | CSS-Tricks

SVG는 luminance mask 이다.

마스크 픽셀이 하얀색이면 불투명, 마스크 픽셀이 검은색이면 투명, 그 중간이면, luminance(grey, pink, line) 반투명

CSS는 alpha mask 이다.

mask-composite 는 firefox에서만 사용할 수 있음.

Chrome과 Firefox 에서만 동작

그림자가 광원이 고정된 것처럼 해줌

styleTextShadowstyleBoxShadow 함수가 angle에 따른 그림자 계산함.

function styleTextShadow(angle, h, v, blur, color){
    if(document.getElementById("staticShadow").checked ) return ""
    var angleRadians = angle * Math.PI / 180
    angleRadians= angleRadians + Math.PI / 4
    return  h * Math.sin(angleRadians) +"px " +
            v * Math.cos(angleRadians) +"px " +
            blur + "px " + 
            color
}    
function styleBoxShadow(angle, h, v, blur, color, spread = 0, inset = ""){
    if(document.getElementById("staticShadow").checked ) return ""
    var angleRadians = angle * Math.PI / 180
    angleRadians = angleRadians + Math.PI / 4
    return  inset + " " +
            h * Math.sin(angleRadians) + "px " +
            v * Math.cos(angleRadians) + "px " +
            blur + "px " + 
            spread + "px " +
            color
}

three.js 로 캐릭터 표현, 모델링하는 과정도 잘 설명되어 있음.

How to Create an Interactive 3D Character with Three.js | Codrops

Blender 사용, Mixamo 에서 animation asset 사용.

신용카드 입력

multiline text에 밑줄 긋는 animation

background-image로 밑줄을 긋고, background-size를 animation 함.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment