Front End Develop Front End Develop

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

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

[JS] JS 5가지 팁1. Array.includes 1234567891011121314151617// conditionfunction test(fruit) { if (fruit == 'apple' || fruit == 'strawberry') { // 다른 과일이 늘어나면?????? console.log('red'); }} // using Array.includesfunction test(fruit) { // extract conditions to array const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries']; if (redFruits.includes(fruit)) { console.log('red'); }}Colored by Col..

[CSS] Rethinking CSS1. Atomic CSSAtomic CSS의 생각은 간단합니다.일반적으로 사용되는 라인에 대한 CSS 클래스를 만들면 수백만 개의 클래스가 생기고 HTML 마크업이 조금 더 길어집니다. I am a p tag! How cool is that? :)123.padding-small { padding: 10px; }.margin-big { margin: 20px; }.color-red { color: red }cs 2. Object-Oriented(객체지향) CSSSASS와 LESS 같은 객체지향적으로 접근하는 123456789101112131415161718.card { { color: #333; padding: 20px; background-color: white; } ..

[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..

12345678// reflow 2번 발생var div = document.getElementById('target'); div.style.padding = '12px';div.style.width = '200px'; // cssText를 이용한 최소화div.style.cssText = 'padding:12px; width:200px;';cs

[JS] Reducer? 1234567891011// 일반 예제const nums = [1, 2, 3]let value = 0 for (let i = 0; i ac + next, 0)cs 기능적으로 동등하며 배열의 모든 숫자를 합산합니다. 그러나 약간의 패러다임이 있습니다. 가장 중요한 기능 중 하나는 Reducer는 하나의 값만 반환한다는 것입니다. 하나의 값은 숫자, 문자열, 배열 또는 객체 일 수 있지만 항상 하나뿐입니다. Reducer는 값 그룹에 약간의 로직을 적용하고 또 다른 단일 결과로 끝내는 데 특히 유용합니다. 위 영상의 각 단계별로 변화는 다음과 같습니다. 1234567891011121314151617181920212223242526272829303132// 1단계const nums =..

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