2021년 2월

@font-face 네트워크 성능 최적화

- preload 사용

- @front-face src 속성 정의 순서를 preload에 적용된 부분을 먼저 적용

- woff2 미지원 브라우저 fallback 용도인 woff 파일도 src에 정의하는데 이 때 어떤 브라우저는 woff2, woff 모두를 다운로드 하는 경우가 발생. 보통 woff2 실패후 woff를 다운로드 하거나 특이하게 두 파일 모두 다운로드하는 경우도 일부 있음. 이럴경우 전체적인 성능은 더 느려지므로 woff2 실패하지 않도록 신경써줘야함.

 

Aleph 시작하기 - deno + react

 

react app 제작시 생산성을 높이는 방법

- react app을 TDD로 견고하게 만드는 방법

 

CSS Transitions 가이드

 

2021 프론트엔드 나쁜습관(하지말아야 할것들)

 

Marko - ebay UI 프레임워크

 

react useMemo 벤치마크

- 복잡도가 증가할수록 useMemo 초기비용은 커지만 리렌더일 경우 낮은 비용이 발생함을 볼 수 있다. useMemo를 사용할 때 레퍼런스 타입인지와 더불어 복잡도가 얼마나 높은지도 평가 요소에 반영해야 한다. 개인적으로는 아주 높은 수준의 성능을 고려해야할 상황이 아니라면 기본적으로 react 리렌더 로직 특성상 useMemo를 사용하는게 버그를 덜 발생시켜 안정성을 확보할 수 있으므로 useMemo 사용을 디폴트로 놓고 생각해본다.

 

css grid 이해하기

css grid masonry(벽돌) 레이아웃

 

프론트엔드의 구분(프론트를 위한 프론트엔드, 백엔드를 위한 프론트엔드)

- the great divide 맥락을 같이 하는 내용

 

Netlify, Vercel, Digital Ocean 비교

 

React useEffect안에서 fetch시 생각해볼 수 있는 메모리 누수

- AbortController로 fetch 취소를 명시

 

자바스크립트 성능 - bundle 크기를 넘어서

- bundle phobia

 

fetch 보다 axios를 사용해야하는 이유

 

원격 근무 팀을 위한 코드 리뷰

 

코드 리뷰에서 Nitpicking 중지

- 여기서 Nitpicking 이란 기능적으로는 문제가 되지 않는 잘못된 변수명과 보다 깔끔한 로직들을 사용할 수 있음을 지적하는 것을 말한다.