Skip to content

Instantly share code, notes, and snippets.

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

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

개발 일반

데이터 형태에 따라 어떠한 visualize를 할지 보여줌.

ERD 툴

Server side 개발 시, 필요한 네트워크 개념들 잘 설명 됨. LB, Proxy, 네트워크, network, load balancer, reverse proxy

Front end

실제 프로젝트를 작성해 보면서 각 frontend framework를 체험해 볼 수 있는 tutorial들

그림으로 잘 설명된 graphql 개념들

Animation 라이브러리의 강자 GSAP3 설명 잘 됨.

scroll-snap-type Firefox에만 지원

salesforce에서 공개한 재사용 가능한 desing system design system, ui framework, salesforce

새로운 스펙...

javascript, ecma, 2020, private fields in classes, optional chaining, nullish coalescing operator, BigInt

React 개발하다 보면 한번 쯤 고민해봤을 만한 매우 유용한 tip/trics

  • key 값을 변경해서 강제로 remount 함
  • props를 통해서 컴포넌트를 전달함
  • useState 사용시 setter에 함수를 사용
  • useState의 초기값에 함수를 사용

tensorflow, js, bodyfix, body, segmentation, person

tensorflow.js 와 카메라를 사용해서 브라우저 상에서 사람 몸체 인식

handtrack.js, object detection, ml, nn, tfjs

한번쯤 정주행 해 볼만한 React conf 동영상들.

Server side

Node JS 보안 설정 tips

  • SSL/TLS 설정하는 방법
  • 보안 관련 HTTP header 설정
  • CSRF
  • XSS
  • SQLi
  • Rate limite
  • 보안 관련 툴

setTimeout(0) 대신에 setImmediate를 쓰라는 내용.

잘알고 있다고 생각하지만, 잘 모르는 Node.js module에 대한 자세한 설명

exports, require, module, __filename, __dirname, require.resolve, require.resolve.paths, require.main === module

elasticsearch 관련 잘 설명 됨.

ksniff 라는 kubectl 툴로 네트워크 덤프 가능

Codepen Picks

잉크가 번지면서 나타나는 효과, paralex

ScrollMagic ♥ Demo과 gsap 플러그인 사용.

Scroll Magic API Tutorial by ihatetomato :: Serenity

[ScrollMagic] 스크롤매직 라이브러리 - 기초편

SVG 필터링을 하고, GSAP의 기능을 활용함.

@keyframes ink-transition {
  0% {
    transform: translateX(-1.25%);
  }

  99% {
    transform: translateX(-98.75%);
    opacity: 1;
  }

  100% {
    transform: translateX(-98.75%);
    opacity: 0;
  }
}

후버하면 글의 패턴/색상이 에니메이션

다음으로 배경색을 text로 clipping

{
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
}

배경 변화는 size와 position으로

@keyframes rainbow-text-animation-rev {
  0% {
    background-size: 300%;
    background-position: -9em 1em;
  }
  20% {
    background-size: 57%;
    background-position: 0 1em;
  }
  100% {
    background-size: 57%;
    background-position: 0 0;
  }
}

마우스 커셔 사라지게 하는 css

{
  outline: none;
  cursor: none;
}

React로 검색 UX 에니메이션

순차적인 에니메이션을 css variable과 delay로 풀었음

  {data.map((item, i) => {
    return (
      <Result
        key={item}
        style={{
          "--i": i
        }}
      >
        {item}
      </Result>
    );
  })}
{
  animation-delay: calc( var(--i) * 0.08s );
}

글자 계단으로 만들기

실제로는 여러개의 GSAP 이라는 text를 배치하고 계단에 맞추어 x 축회전을 하고 보여지는 영역을 clip path로 제한하여 계단 효과를 만듬

function stepText(tEase, angle) {
	
	let tl = gsap.timeline();
	
	for (let step = 0; step < numSteps-1; step++){
	
		let dir = -1;

		if(step%2==0) {
			dir=1; // which way am I going? Up or down?
		}
		tl.to(`[data-face="face--${step+2}"]`, {
			rotationX: function() {
				if(angle!=0) {
					angle = stepAngle*dir;
				}
				return angle;
			},
			color: function() {
				let stepColor = "#fff";
				if(step%2==0 && angle!=0) {
					stepColor = "#d7d7d7";
				}
				return stepColor;
			},
			ease: tEase,
			transformOrigin: `50% ${stepHeight*step+stepHeight}%`,
			duration: 1.2
		}, `0.${step}`)
	}
	
	return tl;
}

제목과 달리 CSS variable font 와는 상관 없음.

Variable fonts (가변 폰트) | WIT블로그

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