medium에 읽기 회수 제한이 걸렸을 경우, 시크릿모드에서 문서를 열어보시면 됩니다.
데이터 형태에 따라 어떠한 visualize를 할지 보여줌.
ERD 툴
Server side 개발 시, 필요한 네트워크 개념들 잘 설명 됨. LB, Proxy, 네트워크, network, load balancer, reverse proxy
실제 프로젝트를 작성해 보면서 각 frontend framework를 체험해 볼 수 있는 tutorial들
- React with hooks: How to build a movie search app using React Hooks
- Vue.js: Build a Real-time Chat App with Pusher and Vue.js — SitePoint
- Angular 8: Build A Real World Beautiful Web APP with Angular 8 — A to Z Ultimate Guide (2019) — PART I
- Svelte: Building A Svelte 3 Todo App From Start To Deployment
- Next.js: Next.js E-Commerce for Developers [Tutorial & Live Demo] - Snipcart
- Nuxt.js: The Nuxt.js Tutorial to Build a Multilanguage Website - Storyblok
- Gatsby: How to Build a Blog with Gatsby and Boostrap - Bits and Pieces
- Gridsome: Building a Blog with Vue and Markdown Using Gridsome
- Quasar, Vue: How to build a SoundCloud-like audio player app with VueJS, Quasar and WaveSurfer | Jonathan's Dev Blog
그림으로 잘 설명된 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의 초기값에 함수를 사용
The TensorFlow Blog: [Updated] BodyPix: Real-time Person Segmentation in the Browser with TensorFlow.js
tensorflow, js, bodyfix, body, segmentation, person
tensorflow.js 와 카메라를 사용해서 브라우저 상에서 사람 몸체 인식
The TensorFlow Blog: Handtrack.js: tracking hand interactions in the browser using Tensorflow.js and 3 lines of code
handtrack.js, object detection, ml, nn, tfjs
한번쯤 정주행 해 볼만한 React conf 동영상들.
-
Facebook's approach to CSS-in-JS | Frank Yan - YouTube CSS-in-JS 관련 적용한 내용, CSS 최적화
-
Building The New Facebook With React and Relay | Ashley Watkins React Conf Relay를 통해 first meaningfull paint와 렌더링 최적화하는 내용. data-driven dependencies, phased code downloading Streamed query
fragment HomepageData on User { name profile_picture {...} newsFeed(first: 10) { edges @stream } ...AdditionalData @defer }
Data driven code splitting
-
React Developer tooling | Brian Vaughn - YouTube
- Fast refresh
-
24:42 NOW PLAYING Is React Translated Yet? | Nat Alison React Conf
-
Data Fetching With Suspense In Relay | Joe Savona - YouTube
- Render as you fetch
- Start loading resources before rendering
- Suspend if resources aren't ready when you render
- 단계별 로딩을 사용하고자 한다면
<Suspense>를 사용 - 엘리먼트 간의 suspense resolving 순서를 결정하고 싶다면
<SuspenseList>를 사용 - Code, data, asset 들을 위해 suspense를 사용
- Render as you fetch
-
Relay hooks
preloadQuery()andusePreloadedQuery()useLazyLoadQuery()
useFragment()useRefetchableFragment()usePaginationFragment()@defer,@stream, Data-Driven-Dependencies- https://relay.dev/docs/en/experimental/a-guided-tour-of-relay
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 관련 잘 설명 됨.
- Introduction to elasticsearch using Node.js — Part 1
- Introduction to elasticsearch using Node.js — Part 2
ksniff 라는 kubectl 툴로 네트워크 덤프 가능
잉크가 번지면서 나타나는 효과, 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;
}
}[리뷰] Cursor Bin 🗑
마우스 커셔 사라지게 하는 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 와는 상관 없음.