*하루 동안 저 예산(50MB)으로 웹 이용하기 (다양한 최적화 기법) - 세계적인 웹 서비스를 목표로 한다면 읽어봐야함 - 한국은 세계 최고 수준의 인터넷 망을 갖추고 있음에 다시 한번 감사함.. - 저 예산(낮은 전송량)을 목표로 구축할 때 다양한 트레이드 오프가 발생할 수 있음(선택은 각자의 몫) - 웹 서버의 컨텐츠를 압축하기 전에 알아야할 것들 이미지와 PDF 압축하지 않기(svg는 예외) 1500 byte 이하 파일은 압축하지 않기(네트워크 계층에서 허용되는 최대 크기가 TCP 패킷의 최소 크기임) 영상 자동 재생 및 무한 스크롤 금지라는 새로운 법안 comlink를 이용하여 redux를 메인 쓰레드에서 분리하기 *개발자의 css 실수 *우리는 풀스택개발자인듯? - 여기서 '우리'는 프론트개발..

*카오스 디자인 - 2019년 최고의 글 중 하나 - 불확실성과 비선형성을 기반으로 놀라운 영감을 주는 글 - 고장이 피할 수 없는 우리의 일부라고 간주하고 접근하는 사고방식 - 위키백과 - react-chaos(라이브러리) - react 내결함성(react에서 Error 다루기) Framer motion - react animation library Framer X - 대화형 디자인 도구(app도 있고 개발(react)로도 만들 수 있는 api도 존재) smashtest - UI와 API를 테스트를 지원하는 노드 기반의 인간 친화적인 프론트테스트 플랫폼 언어 qaukjs - Electron 기반의 네이티브 앱 개발 IDE 정식 버전은 릴리즈되지 않았지만 웹기술을 이용해 놀랍도록 빠르게 앱을 만들어 볼 ..

microsoft web template studio - 마법사 도구를 이용한 빠른 웹개발 - vscode 확장도구를 사용한 서비스 - 보편화되면 웹서비스의 스타터킷 자리매김할 것으로 보임 vue 개발자를 위한 react 가이드(반대로도 가능) 미래는 어둡다(다크모드) material input의 inputmode 속성에 관하여(모바일) urql - graphQL 미니멀버전 국가 정보를 알 수 있는 api Web Animation의 미래 - 반응에 대한 유려한 변화는 사람의 인지적 노력을 줄임으로써 서비스를 사용함에 있어서 보다 편안한 느낌을 제공할 수 있는 것 같아 보인다. 경외감과 아름다움이 인간의 호기심을 자극하는 가장 중요한 요소임을 생각해본다면 interaction UI는 앞으로 더 중요해 보인..

리소스 힌트를 통한 웹 성능 향상 가로 세로가 일정한 비율한 레이아웃 CSS - object-fit 은 IE에서 지원하지 않기 때문에 background 속성으로 구성하는 것을 고려해야할 수도.. web animation 성능 측정(chrome dev) 스크롤 커스텀 라이브러리!!! 훌륭한 디자인 문답으로 이해하는 GOF 패턴 babylon.js 4.0 release - webGL 라이브러리 여러 context에서 재사용 가능한 웹컴포넌트 만들기 symantec html과 aria를 사용하는 이유 CSS transform 시각화도구 디자인이란? - 무엇을 정의할 때 비아 네가티바 방식으로 정의할 때 더 분명해진다. 웹 프로젝트 가이드 js proxy 실용 가이드 Tailwind css 프레임워크 - 메인..

상황 1. webpack require.context 구문을 통해서 중첩된 깊이 있는 파일들을 간단하게 import 해서 사용할 수 있도록 설계 (파일을 어디에 어느 깊이에 존재하든지 간편하게 동일한 depth에서 import) 2. 최상위 url 레벨에서 페이지별로 동적 import 사용하여 chunk (페이지를 기준으로 코드 분할) 문제 동적 import 가 사용되기전 require.context로 동적으로 export 시킨 파일들을 사용할 경우 페이지별 chunk 가 되지 않음 원인 동적 import 구문 전에 이미 require.context 구문으로 export 파일들을 단 하나라도 사용하면 동적 import 구문 해석 전에 이미 모든 파일이 구문 해석이 완료되어 더 이상 새롭게 chunk할 코..

동적 리사이징 이미지 서비스 - 리사이징 후 결과물을 별도의 저장없이 바로 서비스 NestJS - 진보된 서버사이드 node 프레임워크 책임있는 자바스크립트 개발 생산적인 console 웹 디자인 박물관 2019년 웹 디자인 트렌드 리액트 hook 라이브러리 cube.js - 모듈식 분석 도구 프레임워크 웹앱 Awesome Design React에서 Redux대신 hook을 사용한다면 react 프로파일을 이용한 렌더링 성능 추적 *기술적 부채 더 많은 기술과 새로운 기술이 더 나은 환경을 만들어 준다는 맹목적인 믿음은 변화에 경직되고 유연하지 못한 환경을 유산으로 남기게 된다. 새로운 기술에 대한 관심과 적용은 전혀 다른 관점에서 접근해야 한다고 생각한다. 웹 개발의 에너지 보존 *react hook ..