잡다한 개발 블로그

JS에서, 특히 JSX에서 배열이 유효할 때에만 실행/노출시키기 위한 방법으로 흔히 아래와 같은 optional chaining을 사용한다. (array?.length > 0) && /*...*/ 같은 코드를 TS에서도 사용했더니, 객체가 undefined 일 수 있다는 에러를 띄웠다. array에 대한 undefined 는 optional chaining으로 검사하고 있어 무슨 소리인지 바로 이해할 수 없었다. 결론은 optional chaining으로 인해서 array가 undefined 일 때, array?.length 가 undefined 로 처리되기 때문에, undefined > 0 부분에서 비교할 수 없어서 에러를 띄운 것이다. 참고 Object is possibly 'undefined' Er..

ES6 화살표 함수를 _ => {} 와 같이 사용하는 코드를 종종 목격하게 된다. 무슨 이유로 이렇게 사용할까? 화살표 함수에서 인자를 받지 않는 경우 () => {} 와 같이 사용한다. 하지만 _ => {}로 쓰면 1글자가 더 적어진다. 즉, _를 무시되는 매개변수로 사용하여 짧게 쓰려고 사용한다는 것이다. 이렇게 사용할 때에 유의해야할 점이 있는데, _ 를 매개변수로 선언해놓고 사용하지 않기 때문에, 린트 등으로 인해 Error/Warning이 발생할 수 있다. Underscore/Lodash를 사용하면 _를 사용하기 때문에 충돌이나서 해당 화살표 함수에서는 사용할 수 없을 수 있다. 참고 링크: Using _ (underscore) variable with arrow functions in ES6/..

원문: WebKit Page Cache I – The Basics WebKit Page Cache I – The Basics This is the first of two posts that will center around a modern browser engine feature that doesn’t usually get a lot of press: The Page Cache. webkit.org 이 포스트는 페이지 캐시에 대한 두 포스트 중 첫번째 포스트입니다. 페이지 캐시는 일반적으로 관련해서 많이 포스팅되지 않는 모던 브라우저 브라우저 기능입니다. 오늘 저는 이 기능이 무엇인지, 왜 종종 동작하지 않는지, 그리고 이를 개선하기 위해 어떤 계획을 세워야 하는지에 대해 이야기하려고 합니다. 페이지 캐..

See the Pen getBoundingClientRect().width와 offsetWidth의 차이 by arori (@arori) on CodePen.

원문: Front-end Developer Handbook 2019 - 0.1. Recap of Front-end Development in 2018 Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice! A guide for front-end developers to equip themselves with latest learning resources and development tools in front-end engineering. frontendmasters.com React는 작년에 라이프 사이클 메소드(Lifecycle Method), 컨텍스트 API(Context API..

원문: Media Query & Asset Downloading Results 조금 전, 미디어 쿼리를 포함할 때 이미지가 다운로드 되는 방법에 대한 책에 대해 조사 중이라고 말했었습니다. 조사를 돕기 위해 JavaScript가 이미지 요청 여부를 결정할 수 있는 자동화된 테스트를 작성했고, 테스트 검토를 위해 Browserscope에서 결과를 수집할 수 있었습니다. 최초 발견한 내용을 포스팅했었지만, 이제는 더 자세히 말할 수 있을 만큼 충분한 데이터를 가지고 있다고 생각합니다. 먼저, 모든 공로는 Cloud Four에 있는 멋진 팀에게 돌아가야합니다. 대부분의 테스트는 그들이 자신의 업무를 테스트하기 위해 만들었습니다. 저는 단지 테스트를 자동화하기위해 자바스크립트를 추가했습니다. 결과를 봅시다! 테..

Data URIs란 Data URIs(Data URI scheme)란 `data:` 스킴이 접두어로 붙은 URI. 작은 파일을 문서 내에 인라인으로 임베드하기 위한 URI 스킴이다. 주로 아이콘 등의 작은 이미지 파일에 사용된다. 문법 data:[][;base64], mediatype : MIME 타입. 생략된시, 기본 값 text/plain;charset=US-ASCII base64 : 데이터가 텍스트가 아닌 경우 base64 인코딩된 데이터가 필요하다. 특징 소스 코드 내 삽입 추가적인 HTTP 요청이 일어나지 않는다. 캐싱 되지 않는다. 용량 base64 포맷으로 인코딩하면 원본 파일보다 더 용량이 커진다. 긴 문자열 브라우저에 따라 문자 길이에 제한이 있기 때문에, 용량이 큰 이미지 등은 처리하지..