Front End Develop Front End Develop

ES6 (also known as ECMAScript 2015) has major changes over JavaScript’s syntax and brings new features that didn’t exist before. → ES6는 (또한 에크마2015로 알려진) 자바스크립트 문법에 있어 큰 변화를 겪고, 이전에 없던 새로운 기능들을 보여줍니다. ES6 is important to learn because one reason is that, it makes JavaScript better and easier to write, and also ES6 is being used together with today’s modern web technologies like React, Node.js an..

일반적으로 background-image 속성을 사용했을 때 사용하는 큰 이유는 background-size:cover 속성 때문인데.. 이를 해결하기 위해서 object-fit으로 해결하실 수 있습니다. 이럴 때, picture를 사용하면 background-size:cover와 동일한 효과가 생깁니다. 그리고 또한 다른 부수효과를 얻을 수 있는데요. SEO 친화적 이미지 접근성 친화적 이미지(alt="" 속성 사용) CMS-generated 이미지, CDN과 함께 잘 동작함 이미지 최적화를 위한 srcset과 함께 잘 작동 .webp같은 next-generation 이미지 포맷을 위해 태그를 사용하여 활용할 수도 있습니다. 이렇게 하고나면 또 Chrome이나 다른 브라우저의 이미지 로드 기능과 같은 ..

PART 1 - 표면적 수준에서의 개선 특정한 단어를 사용하라 - GET 대신 Fetch나 Download를 사용하는 것이 더 나을 수 있다. tmp나 retval과 같은 보편적인 이름의 사용을 피하라 대상을 자세히 묘사하는 구체적인 이름을 사용 - ServerCanStart() -> CanListenOnPort()에 비해서 의미가 모호. 변수명에 중요한 세부 정보를 덧붙여라 - 밀리초 값을 지정 _ms suffix로 붙이면 좋을 것 같다. 사용 범위가 넓으면 긴 이름 사용 - 여러 페이지에 걸쳐서 사용되는 변수 이름... 대문자나 밑줄 등을 의미 있는 방식으로 활용 - 클래스 멤버를 로컬 변수와 구분하기 위해서 뒤에 _를 붙일 수 있다. 출처 : 읽기 좋은 코드가 좋은 코드다 - 더스틴 보즈웰

Lazy Loading 기법 이제 이미지가로드되는 것을 막을 것이므로 브라우저에 로드 할 시기를 알려줘야합니다. 이를 위해 이미지가 뷰포트에 입력되는 즉시 로드를 트리거하는지 확인합니다. 이미지가 뷰 포트에 들어갈 때를 확인하는 두 가지 방법이 있습니다. Method 1 : Javascript 이벤트를 통한 방법 이 기술은 브라우저에서 이벤트 리스너를 scroll, resize 및 orientationChange 이벤트에 사용합니다. 스크롤 이벤트는 스크롤이 발생할 때 사용자가 페이지에있는 위치를 감시하므로 매우 명확합니다. resize 및 orientationChange 이벤트도 똑같이 중요합니다. 브라우저 창 크기가 변경되면 resize 이벤트가 발생하지만 장치가 가로 방향에서 세로 방향으로 회전 할..

[Canvas] 버튼 Particle 이펙트HTML 요소의 자유를 결합하여 웹 페이지의 시각적 기능을 향상시키는 방법에 대해 살펴 보겠습니다. 최신브라우저에만 적용이 가능합니다. 초기 상태 See the Pen DOM to Canvas #1 by Zach Saucier (@Zeaklous) on CodePen.캔버스 버전html2canvas라는 매우 편리한 라이브러리가 도움이 됩니다.라이브러리를 로드 한 다음 html2canvas를 호출하면 엘리먼트의 캔버스 버전과 함께 Promise가 반환됩니다. See the Pen DOM to Canvas #2 by Zach Saucier (@Zeaklous) on CodePen. 여기에는 HTML 버전과 캔버스 버전의 버튼이 있습니다. 캔버스 버전은 "screen..

[HTML] 자동으로 생성되는 autocomplete 해제하기웹 사이트에서 양식 필드의 자동 완성을 사용 중지하는 방법에 대해 설명합니다. 기본적으로 브라우저는 사용자가 웹 사이트의 필드를 통해 제출하는 정보를 기억합니다. 이를 통해 브라우저는 자동 완성 기능을 제공 할 수 있습니다 (즉, 사용자가 입력하기 시작한 필드에 대해 가능한 완료를 제안하거나 자동 채우기 (즉,로드시 특정 필드를 미리 채 웁니다). 이러한 기능은 대개 기본적으로 사용 가능하지만 사용자가 개인 정보를 염려 할 수 있으므로 브라우저에서 사용자가 사용을 중지 할 수 있습니다. 그러나 양식에 제출 된 일부 데이터는 앞으로는 유용하지 않으며 (예 : 일회성 핀) 민감한 정보 (예 : 고유 한 정부 ID 또는 신용 카드 보안 코드)가 포함..

[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처럼 사용자에게 즉각적인 성능 향상을 제공 할 수있는 멋진 트릭입니다. 렌더링 캐싱이란 무..