Front End Develop Front End Develop

JS 이벤트 루프에 대한 이해에 30분만 투자하면 완벽하게 이해할 수 있는 영상이 있어 공유드립니다. * 실제로 스크롤 이벤트를 작성하면 스크롤 이벤트는 스크롤 한번 할 때마다 수없이(15 milliseconds당) 이벤트를 일으키기 때문에 수 많은 이벤트들이 콜백 queue에 쌓이게 됩니다. * 핵심은 stack에 불필요한 느린 코드를 쌓아서 이벤트 루프를 막지 말아라 즉, 브라우저가 Rendering하는 과정을 막지 말라는 것입니다. 출처 : https://www.youtube.com/watch?v=8aGhZQkoFbQ&feature=youtu.be

In its current state, there is no "direct” way to create a private variable in JavaScript. -> 현재 상태에서 자바스크립트 private 변수를 (은닉화) 만드는 "직접적인" 방법은 없습니다. In other languages, you can use the private keyword or double-underscores and everything works, -> 다른 언어에서, private 키워드(자바 등) 또는 __ 이중 underscore 를 사용하는 등의 방법을 사용할 수 있지만 but variable privacy in JavaScript carries characteristics that make it seem mor..

이 글은 하단 출처에서 발췌하여 필요한 부분만 따로 정리한 글입니다. 이미 지연 로딩이 실행되는 것을 본 적이 있을 것입니다. 지연 로딩은 다음과 같이 진행됩니다. 페이지에 도달하여 콘텐츠를 읽으면서 스크롤을 시작합니다. 특정 지점에서 자리표시자 이미지를 표시 영역으로 스크롤합니다. 자리표시자 이미지가 순간 최종 이미지로 교체됩니다. 현대의 브라우저는 Intersection observer API를 통해 요소 확인 작업을 수행하는 더욱 우수하고 효율적인 방식을 제공합니다. document.addEventListener("DOMContentLoaded", function() { var lazyImages = [].slice.call(document.querySelectorAll("img.lazy")); i..

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

반복문 없이 반복문 하는 방법이 있어 공유합니다. const scores = [85, 95, 76]; const average = (list, total, length) => { if (length === list.length) return total / length; return average(list, total + list[length], length + 1); }; console.log('average:', average(scores, 0, 0)); 위처럼 하면 if (length === list.length) 가 되기 전까지는 return 문을 수행하지 않으며 총 Length에서 total 값을 나눠 평균값 구한 값을 리턴하지 않습니다. 그러니까. 그렇게 되기까지 average를 리턴하는데. 그..

function sum(a, b) { return a + b; } const printResult = (result) => { console.log('결과는 ', result, '입니다.'); }; const calculationAndPrint = (calculationResult, callback) => { callback(calculationResult); }; calculationAndPrint(sum(10, 20), printResult);

Javascript 함수는 1급 객체라고 일컬어지는데요.. 함수를 변수나 데이터에 할당도 할 수 있고 파라미터로 값을 집어넣어 함수의 선언된 문을 수행한 뒤에 리턴까지 할 수 있습니다. function plus(a, b) { return a + b; } function minus(a, b) { return a - b; } const p = plus; console.log('typeof plus : %s', typeof plus); console.log('typeof p : %s', typeof p); console.log('10 + 20 = %d', p(10, 20)); // 함수를 파라메터로 받는 함수 function calculate(a, b, func) { return func(a, b); } //..

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