본문 바로가기

웹 프론트엔드/기타

(8)
Mac에서 iPhone 사파리(Safari) 디버깅(Web inspector) Mac과 iPhone을 케이블로 연결 [iPhone] "이 컴퓨터를 신뢰하겠습니까?" 팝업에 "신뢰"버튼 누르기 [Mac] "Safari > 환경설정(Preferences) > 고급(Advanced)"에서 메뉴 막대에서 개발자용 메뉴 보기(Show Develop menu in menu bar) 체크박스 활성화 [iPhone] "설정(Setting) > Safari > 고급(Advanced)"에서 웹 속성(Web Inspector) 활성화 [Mac] "Safari > 개발자용(Develop) > 디버깅하려는 iPhone (예: ~의 아이폰)> 개발용으로 사용(Use for Development...)" 선택 [iPhone] Safari 실행 후 디버깅하려는 페이지 열기 [Mac] "Safari > 개발자용..
[용어] Above the Fold / Below the Fold Above the Fold: 웹페이지에서 아무 행동(스크롤, 클릭 등)을 하지 않은 부분. 접은 신문의 첫 페이지의 상단에서 따옴 Below the Fold: 웹페이지에서 스크롤하지 않으면 볼 수 없는 부분. Above the Fold가 아닌 부분. 출처: https://en.wikipedia.org/wiki/Above_the_fold Above the fold - Wikipedia Top section of the front page of a newspaper or website Above the fold is the upper half of the front page of a newspaper or tabloid where an important news story or photograph is of..
ES6 화살표 함수 사용 시, " _ => {} " 구문 ES6 화살표 함수를 _ => {} 와 같이 사용하는 코드를 종종 목격하게 된다. 무슨 이유로 이렇게 사용할까? 화살표 함수에서 인자를 받지 않는 경우 () => {} 와 같이 사용한다. 하지만 _ => {}로 쓰면 1글자가 더 적어진다. 즉, _를 무시되는 매개변수로 사용하여 짧게 쓰려고 사용한다는 것이다. 이렇게 사용할 때에 유의해야할 점이 있는데, _ 를 매개변수로 선언해놓고 사용하지 않기 때문에, 린트 등으로 인해 Error/Warning이 발생할 수 있다. Underscore/Lodash를 사용하면 _를 사용하기 때문에 충돌이나서 해당 화살표 함수에서는 사용할 수 없을 수 있다. 참고 링크: Using _ (underscore) variable with arrow functions in ES6/..
[번역] 웹킷 페이지 캐시 I - 기초 (WebKit Page Cache I – The Basics) 원문: 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 이 포스트는 페이지 캐시에 대한 두 포스트 중 첫번째 포스트입니다. 페이지 캐시는 일반적으로 관련해서 많이 포스팅되지 않는 모던 브라우저 브라우저 기능입니다. 오늘 저는 이 기능이 무엇인지, 왜 종종 동작하지 않는지, 그리고 이를 개선하기 위해 어떤 계획을 세워야 하는지에 대해 이야기하려고 합니다. 페이지 캐..
getBoundingClientRect().width와 offsetWidth의 차이 See the Pen getBoundingClientRect().width와 offsetWidth의 차이 by arori (@arori) on CodePen.
[번역] 2018년 프론트엔드 개발 요약 원문: 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 URI scheme) Data URIs란 Data URIs(Data URI scheme)란 `data:` 스킴이 접두어로 붙은 URI. 작은 파일을 문서 내에 인라인으로 임베드하기 위한 URI 스킴이다. 주로 아이콘 등의 작은 이미지 파일에 사용된다. 문법 data:[][;base64], mediatype : MIME 타입. 생략된시, 기본 값 text/plain;charset=US-ASCII base64 : 데이터가 텍스트가 아닌 경우 base64 인코딩된 데이터가 필요하다. 특징 소스 코드 내 삽입 추가적인 HTTP 요청이 일어나지 않는다. 캐싱 되지 않는다. 용량 base64 포맷으로 인코딩하면 원본 파일보다 더 용량이 커진다. 긴 문자열 브라우저에 따라 문자 길이에 제한이 있기 때문에, 용량이 큰 이미지 등은 처리하지..