Web Standard

AV1(.avif) 이미지 파일 포맷 기본적으로 초압축된 이미지 타입이다. 이미 넷플릭스는 JPEG, PNG, 심지어 WebP 이미지 포맷 보다 퀄리티나 압축률이 뛰어난 .avif 를 고려해왔다. Alliance for Open Media 에서 Google, Cisco 및 Xiph.org(Firefox 제작사인 Mozilla와 함께 작업)와 공동 으로 개발했으며, 이 형식은 오픈 소스이고 로열티가없는 이미지 형식으로 만들어졌다. JPEG 및 WebP 와 비교 AVIF는 JPEG, WebP에 비해 이미지 파일 크기를 크게 줄여준다. (JPEG 대비 50%, Webp 대비 20% 절감) 모든 이미지 코덱 지원, 손실/무손실, 알파 채널(투명) 가능, GIF 같은 애니메이션 가능! 하다는 점에서 굉장히 사용폭..

HTML의 텍스트 노드(Text node) 는 다루기 까다롭다. 특히 동적으로 삽입되거나 생성될때 더욱 그렇다. 예시를 살펴보자. 하나의 글이 있습니다. p태그에 텍스트 노드를 하나 더 추가 하면 : let el = document.getElementById('el'); el.appendChild(document.createTextNode(' 글을 하나 더 추가 합니다.')); console.log(el.childNodes.length); // 2 글을 하나 더 추가 한 뒤, childNodes 의 개수를 로그로 찍어보면 2개라고 나온것에 주목하자. 이 노드들은 단일 문자열 이지만 동적으로 추가 되었기 때문에, 각각 분리된 노드로 취급된다. 경우에 따라서는 하나의 텍스트 노드로 다루는게 나은데, norm..

addEventListener() 는 웹 요소에 이벤트를 거는것으로 많이 사용된다. 대부분 이런 모습이다. element.addEventListener('click', doSomething, false); 1번째 인자는 이벤트명이다. 2번째 인자는 콜백 함수로, 이벤트가 발생되면 실행된다. 3번째 인자는 useCapture 라 불리는 불린값으로, 이벤트 버블링이나 캡쳐링을 사용할것인지 나타낸다. 위의 코드는 꽤 익숙하다. 특히 1, 2번째 인자는 모두 아는 내용일 것이다. 하지만 3번째 인자값을 다르게 줄 수 있다는 것은 많이 알려지지 않았다. 새로운 인자는 options 객체로, 이렇게 생겼다 : element.addEventListener('click', doSomething, { capture: f..

최신 크롬, 파이어폭스에서 사용 가능한 ES2019(ES10) 의 5가지 기능 Object.fromEntries( ), trimStart( ), trimEnd(), flat(), flatMap() 1. Object.fromEntries() 객체를 배열로 바꾸는 것은 ES2017 에서 Object.entries( ) 메소드로 가능하다. 이 메소드는 객체를 인자로 받아 [key, value] 형태의 배열로 반환한다. const obj = {one: 1, two: 2, three: 3}; console.log(Object.entries(obj)); // => [["one", 1], ["two", 2], ["three", 3]] 반대로 배열을 객체로 변환하려면 어떻게 해야 할까? 파이썬 같은 몇몇 언어는 dic..

grayscale( [ | ] ) 0.0 ~ 1.0 사이의 값 입력 0 인 경우 적용하지 않음 1인 경우 모든 색상값을 잃고 흑백으로 변환됨 See the Pen filter : grayscale by Yunyong Yi (@yunyong) on CodePen. hue-rotate( ) hue(색조, 색상)을 변경 함 angle(각도)를 지정할 수 있으며, 0 인 경우 변화 없음 360deg, 720deg 도 마찬가지로 변화가 없음 See the Pen filter : hue-rotate by Yunyong Yi (@yunyong) on CodePen. saturate( [ | ] ) 채도를 변경 함 1인 경우 변화 없음 음수는 지정할 수 없으며, 1 보다 큰 수 지정 가능 ( 9 는 900% 효과) S..

React Navigation 사이트 에서 참고한 내용입니다. withNavigation 은 감싸고 있는 컴포넌트에 navigation prop 를 전달해주는 Higher-Order 컴포넌트이다. 이는 navigatio prop 를 컴포넌트로 직접 전달할 수 없거나, 깊게 중첩된 자식 컴포넌트로 전달하고 싶지 않을때 유용하다. 이를 해결하기 위해선, MyBackButton 에 navigation prop 를 전달하면 된다 : . 또는, withNavigation 를 함수를 이용해 navigation prop 를 자동으로 제공해줄 수 있다. 이 함수는 Redux의 connect 함수와 비슷하게 동작하는데, dispatch prop 대신 navigation prop 를 전달한다. 이 방법을 통해, navig..