Front End Develop Front End Develop

부트스트랩에 대한 새소식이 전해져옵니다. 많은 개발자들이 css를 작성하지 않고도 손쉽게 웹앱을 만들 수 있어 부트스트랩을 많이 선호를 하고 있는데요. 시대의 흐름에 따라 부트스트랩도 4에는 크게 flex css 속성을 넣는 등 계속해서 점진적 발전을 거듭하고 있습니다. 그런데 또 2020년에 부트스트랩 5가 출시된다고 하니 놀라울 따름인데요. 2020년에 출시되는 부트스트랩 5에서 가장 큰 변화가 눈에 띄어서 포스팅 해보려고 합니다. 바로 jquery free 입니다. 작년에 github에 이어 이제 부트스트랩 5에도 jquery가 사라지게 된다는 말인데요. 2019년 초에 부트스트랩 제작자는 또 다른 시도를 시작했습니다. 1. Dropped jQuery(제이쿼리를 버리다) 제이쿼리는 혁신적인 수백 수..

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이나 다른 브라우저의 이미지 로드 기능과 같은 ..

반복문 없이 반복문 하는 방법이 있어 공유합니다. 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); } //..