Front End Develop Front End Develop

GITHUB이 Jquery를 삭제하다2018년 6월 GITHUB이 프론트 엔드 디펜던시로 JQUERY를 삭제 할 수 있었던 것에 대한 내용을 발췌한 글입니다. 우리는 최근 GitHub.com 프론트 엔드 코드의 종속성으로 jQuery를 삭제할 수있는 획기적인 작업을 완료했습니다. 이것은 우리가 라이브러리를 완전히 제거 할 수있을 때까지 점차적으로 jQuery에서 분리되는 장기간의 전환의 끝을 의미합니다. 이 글에서는 jQuery에 처음부터 어떻게 의존했는지, 더 이상 필요하지 않을 때 어떻게 실현했는지, 그리고 다른 라이브러리 나 프레임 워크로 대체하지 않고 표준 브라우저 API를 사용하여 필요한 모든 것을 얻을 수 있습니다. GitHub.com은 2007년 말에 jQuery 1.2.1을 의존성으로 잡았..

폰트 렌더링을 더 좋게 하는 방법 Chrome의 최신 버전에서이 이상한 렌더링 문제를 발견했습니다. 스티븐 닉슨 (Steven Nixon)은 가변 글꼴을 사용하는 텍스트에 텍스트 그림자를 사용하여 문제를 해결하기 위해 임시방편으로 CSS HACK을 이용했습니다. 위와 같이 선언하면 문자 양식에서 이상한 흐릿한 부분이 없어집니다. 이러한 렌더링 버그는 이 방법으로 비교적 빨리 수정 될 것입니다. 다른 브라우저와 호환성도 좋습니다. 출처 : https://css-tricks.com/better-rendering-for-variable-fonts/

잘 알려지지 않은 CSS 팁아래에는 고급 CSS 사용자를위한 팁과 트릭과 함께 가장 이상한 CSS 기능이 있습니다.모든 내용을 출처에서 발췌하지 않고 부분적으로만 담았습니다. 1. 수직 padding은 height 속성이 아닌 요소의 width 속성과 관련이 있습니다. See the Pen Vertical padding by Peedu Tuisk (@matude) on CodePen. 이것을 알면 높이 / 너비 비율을 유지하는 반응형 요소를 쉽게 만들 수 있습니다. 2. 마진 병합 See the Pen Margins overlap by Peedu Tuisk (@matude) on CodePen. 위의 경우 마진이 40px이 아닌 20px로 축소됩니다.그러나 예외가 있습니다! 마진은 다음과 같은 경우 축소..

[GRID] CSS Grid의 인터넷 익스플로러(IE) 지원5분 이내에 IE에서 CSS 그리드를 작동하는 방법!이 글은 https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66 를 번역한 글입니다. 우리가 여전히 안고 있는 문제는 IE를 지원하는 것이다. 모르는 것은 CSS 그리드가 IE 10에서 처음 지원되었다는 것입니다. 이 포스트에서는 IE CSS 그리드의 prefix를 이용하지 않고 CSS 그리드 구문을 사용하는 동안 IE 10 이상에서 CSS 그리드를 지원하는 방법에 대해 설명합니다. IE11에서 테스트 완료 했습니다. IE의 CSS 그리드에서 지원되지 않는 것은 무엇이며, 어떻게 작동시킬 수 있습니까? * 그리..

브라우저 Painting과 Web Performance원문 https://css-tricks.com/browser-painting-and-considerations-for-web-performance/?utm_source=ponyfoo+weekly&utm_medium=email&utm_campaign=128을 대부분 발췌한 것입니다. HTML, CSS 및 JavaScript를 완성 된 시각적 표현으로 변환하는 웹 브라우저의 프로세스는 매우 복잡합니다. 다음은 브라우저가 수행하는 간단한 단계입니다. 1. 브라우저는 DOM과 CSSOM을 생성합니다.2. 브라우저는 CSSOM의 스타일 및 DOM의 렌더링 트리를 생성합니다. (display:none 엘리먼트들은 제외됩니다).3. 브라우저는 렌더링 트리를 기반으..

Map vs ForEach이 글은 https://codeburst.io/javascript-map-vs-foreach-f38111822c0f의 번역내용을 다수 포함하고 있습니다. JavaScript로 작업 해왔다면, Array.prototype.map ()과 Array.prototype.forEach ()와 같이 두 가지 비슷한 Array 메서드를 발견했을 것입니다. 차이점이 무엇일까요? MDN에서 정의를 한번 살펴보도록 합니다. * forEach() — executes a provided function once for each array element.=> 배열요소마다 한 번씩 제공한 함수를 실행합니다. * map() — creates a new array with the results of call..

[ Animation ] CSS Animation vs Javascript Animation CSS 에니메이션과 자바스크립트 에니메이션에 대한 성능차이에 대한 고민은 프론트엔드 개발로는 절대로 중요한 사안입니다. 웹 프론트 엔드는 HTML, CSS 및 JavaScript의 세가지로 구축됩니다.HTML, CSS 및 JavaScript는 HTML5 및 CSS3 이후로 특히 겹칩니다. 과거에는 복잡한 애니메이션을 위해서 Javascript에 의존적이었지만, 그리고 여전히 GSAP와 같은 라이브러리가 있지만 요즘에는 Transition을 사용하여 애니메이션을 적용 할 수도 있습니다.이를 통해 브라우저에서 javascript를 사용하는 몇가지 규칙을 공식화 할 수 있습니다. Javascript를 통한 에니메이션,..

8번째 데이터 타입 BigIntBigInt는 임의의 정밀도로 정수를 나타낼 수있는 JavaScript의 새로운 숫자 데이터형입니다. BigInt를 사용하면 숫자에 대한 안전한 정수 제한을 초과하여 큰 정수를 안전하게 저장하고 조작 할 수 있습니다. Chrome 67의 새로운 기능으로 최근에 업데이트 되었습니다. 사용사례BigInt를 사용하면 오버플로없이 정수 연산을 올바르게 수행 할 수 있습니다. 그것은 그 자체로 수많은 새로운 가능성을 가능하게합니다. 많은 수의 수학 연산은 금융 기술에서 일반적으로 사용됩니다. 큰 정수 ID와 고정밀 타임 스탬프는 JavaScript에서 숫자로 표시할 수 없었습니다.이로 인해 실제 버그가 생겨 문자열로 변환해서 표현합니다.BigInt를 사용하면이 데이터를 숫자 값으로 ..