본문 바로가기

프론트엔드/자바스크립트

var를 쓰면 안되는 이유 es6 (es 2015)가 등장하기 이전에는 자바스크립트에서 변수를 선언하기 위한 방법은 var 밖에 없었다. let과 const는 es6에서 등장했다. let, const : 블록 스코프 var : 함수 스코프 var에는 다음과 같은 문제들이 있다. 1. 함수스코프 함수스코프이기 때문에 다음과 같은 문제가 있다. function abc() { for(var i=0;i 더보기
함수형 프로그래밍2 - 추상화 레벨 높이기 이미지 로딩 이전의 실습에서 이미지가 로딩 될때 굉장히 버벅거렸는데 이러한 부분들을 개선해볼 것이다. 이미지가 로딩이 다 되면 화면에 렌더링되도록 코드를 작성해보자. _.go( Images.fetch(), Images.tmpl, $.el, $.append($.qs('body')), _.tap( $.findAll('img'), L.map(img => new Promise(resolve => { img.onload = () => resolve(img); // onload img.src = img.getAttribute('lazy-src'); })), _.each($.addClass('fade-in')) ), $.findAll('.remove'), $.on('click', async ({currentTarge.. 더보기
함수형 프로그래밍2 - 프론트단에서 응용 https://www.inflearn.com/course/%ED%95%A8%EC%88%98%ED%98%95_ES6_%EC%9D%91%EC%9A%A9%ED%8E%B8f 를 수강하며 내용을 정리한 글입니다. 이미지 받아와서 화면에 뿌리기 서버에서 이미지를 받아와서 화면에 뿌려주는 코드 작성해본다. const Images = {} Images.fetch = () => new Promise(resolve => setTimeout(() => resolve([ { name: "HEART", url: "https://s3.marpple.co/files/m2/t3/colored_images/45_1115570_1162087.png" }, { name: "하트", url: "https://s3.marpple.co/f1/.. 더보기
함수형 프로그래밍2 - 명령형에서 선언형으로 이터러블 프로그래밍 홀수 n개 더하기를 명령형으로 구현해보면 아래와 같이 효율적으로 가능하다. function f1(limit, list) { let acc = 0; for(const a of list) { if(a % 2) { const b = a * a; acc+=b; limit--; if(limit == 0) break; } } return acc; } let a= f1(3, [1,2,3,4,5,6,7,8,9,10]); console.log(a); 위의 코드를 한번 생각해보면 이터러블한 객체를 순회하며 특정 조건에 부합할 때(filter) 값을 조작하여(map) 결과를 만들어내는데(reduce) 특정 조건에서 break문을 통해 빠져나오고 있다.(take) 이를 적용해서 코드를 아래와 같이 바꿀 수.. 더보기
this 와 클로저 this this가 필요한 이유? 👉 특정 함수를 여러 객체에서 사용할 수 있기 위해서이다. this는 해당 함수를 실행한 객체를 가리키기 때문에 this를 활용하면 여러 객체가 호출하여 사용할 수 있게 해준다. this를 제어하는 방법. >> this에 할당되는 객체를 원하는대로 지정하는법 Call 함수.call() 하면서 첫번째 인자로는 객체를 넘김 그러면 해당 함수내의 this는 첫번째 인자 객체의 this 이다. apply 함수.apply() 하는데 call과 동일하게 첫번째 인자는 객체 그리고 두번째 인자는 배열로 넘겨줌. 위 두개는 다시말해 this에 할당되는 객체를 지정할 수 있다.! bind 객체를 전달하면 메소드의 this는 해당 객체로 고정됨. Arrow function arrow fu.. 더보기
jQuery 엘리먼트 제어 기초 1. html 코드에 엘리먼트 삽입하기 - 자식으로 삽입 2. html 코드에 엘리먼트 삽입하기 - 형제로 삽입 3. 여러 태그로 감싸기 4. 치환 치환의 경우 replaceAll 함수를 사용하는데 인자는 변경할 대상을 전달해줘야 한다. p태그를 바꾸고 싶은 거라면 $("Changed!").replaceAll("p"); 5. jquery 에서의 toggle 사용법 $("p").click(function() { $(this).toggleClass("active"); }) 더보기
jQuery 간단 정리 JQuery에서의 wrapper는 jQuery(엘리먼트 혹은 CSS 선택자) 부분을 말한다. jQuery의 안전한 사용 $(엘리먼트)로도 사용할 수 있지만 다른 라이브러리와 충돌할 수도 있어서 다음의 두가지 방법으로 사용된다. 1) jQuery('body').html('hihi'); 2) (function($){ //jquery코드 jQuery('body').html('hihi'); })(jQuery) 위의 함수를 이해하기 위해 간단히 해보면 (function(인자){코드})(jQuery) 이다. function($) 의 달러부분의 인자로 jQuery라는 문자열이 들어가게 되고 그렇게 되면 내부의 코드는 1)이랑 다를 바가 없게 된다. 제어 대상 지정하기 제어 대상을 지정하는 방법에는 두가지가 있다. e.. 더보기

티스토리툴바