Front End Develop Front End Develop

[JS] IOS의 CLICK 버블링이 발생하지 않아요 iOS Safari는 클릭할 수 없는 HTML 요소에 이벤트 버블링이 발생하지 않아요. CSS를 이용해서 { cursor: pointer } 속성을 추가하면 이벤트를 버블링합니다. CSS cursor 속성을 모바일 해상도에만 적용하는 방법으로 우회할 수 있겠네요. Raw workarounds(원시 해결방법)1. ONCLICK : 클릭 할 수없는 요소에 onclick 이벤트를 추가하면 버블링이 발생합니다.하지만 DOM에 삽입되는 새로운 요소는 이를 지원하기 위해 추가 코드가 필요하기 때문에 이 방법은 좋은 방법이 아닙니다. 2. cursor: pointer클릭 할 수없는 요소의 CSS를 클릭하면 버블링을 발생시킬 수 있습니다. iOS가 동작을 수정할 때..

React를 위한 렌더링 캐시SSR (Server Side Rendering)은 웹 앱을 더 빠르게 표시하는 매우 유용한 기술입니다. 초기 HTML은 자바 스크립트가 파싱되기 전에 표시되며 사용자가 무엇을 탭할지 결정할 때 핸들러가 준비됩니다. React의 서버 측 렌더링은 추가 작업이 필요하며 서버 비용이 필요합니다. 또한 서버 팀이 서버에서 JavaScript를 실행할 수없는 경우 문제가 발생합니다.특히 로그인이 필요한 페이지와 사용자의 정보가 관리되는 페이지가있는 경우 CDN 설정이 상당히 복잡해집니다. Render Caching이라는 새로운 개념을 배우고 싶습니다. 이것은 서버에 코드를 작성하지 않고도 SSR처럼 사용자에게 즉각적인 성능 향상을 제공 할 수있는 멋진 트릭입니다. 렌더링 캐싱이란 무..

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/

Will-Changewill change 속성이 있다. CSS를 쓰다보면 특히, Anmation을 써서 여러 효과들을 낼 때 필수적으로 고려해야 될 것이 GPU 성능과 가속화이다. 그런 Property를 사용할 때 생기는 성능 병목현상을 최소화 하기 위해서 특정 브라우저에만 현재 지원하고 있지만 해결방법으로 `Will - Change` 속성이 있다. GPU, CPU, 하드웨어 가속하드웨어 가속은 그래픽 처리 장치(GPU)를 이용하여 중앙 처리 장치(CPU)의 처리량을 줄이고, 브라우저의 렌더링을 효율화하는 것을 말한다.CSS 작업 중에 이러한 하드웨어가속을 통해서 렌더링을 좀 더 빠르게 할 수 있다. 하드웨어가속(GPU 가속)으로 페이지를 출력할 경우 레이어라고 하는 개념을 사용한다. 페이지에 있는 엘리..

잘 알려지지 않은 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. 브라우저는 렌더링 트리를 기반으..