Seungdols Company

러닝리액트 7장 컴포넌트 개선하기7.1 컴포넌트 생애주기컴포넌트 생애 주기는 컴포넌트가 마운트되거나 갱신될 때 호출 되는 일련의 메서드로 이루어진다. 이런 메서드는 컴포넌트가 UI에 렌더링 되기 전이나 후에 호출된다. 실제로 render 메서드 자체도 컴포넌트 생애주기의 일부다. 하나는 마운팅 생애주기와 갱신 생애 주기 두 가지가 중요하다. 그전에 우리는 컴포넌트에 대한 이해를 정확하게 알고 있는지 확인하자. Q) 컴포넌트는 무엇인가? A) 다섯 가지 개념을 마스터 한 다음 리액트를 마스터하라7.1.1 마운팅 생애주기잠깐! 왜 Mounting이라고 부르는가? Mounting의 정확한 의미는 무엇일까? what does mount mean in react마운팅 생애주기는 컴포넌트가 마운트되거나 언마운트되면..

러닝 리액트3장 자바스크립트를 활용한 함수형 프로그래밍함수형 프로그래밍 개념이 시작 된 것은 1930년대이다. 그 당시 발견한 람다 계산법이 함수형 프로그래밍의 시작이라 할 수 있다. 함수를 함수로 넘기거나 함수가 함수를 결과로 내놓는 것도 가능하다. 다른 함수를 조작하고, 함수를 인자로 받거나 반환하는 것이 가능한 복잡한 함수를 고차함수 (high-order function)으로 부른다.함수가 1급시민(First class citizen)이 되려면 변수에 함수를 대입할 수 있어야 하고, 함수를 다른 함수에 인자로 넘길 수 있으며, 함수에서 함수를 만들어서 반환할 수 있어야 한다.3.1 함수형이란?자바스크립트는 함수가 1급시민에 해당되기에 함수형 프로그래밍을 지원한다고 할 수 있다.var log = fu..

러닝 리액트2장 최신 자바스크립트ES5의 내용은 아래 두 곳의 내용을 가져왔습니다. ECMAscript 5의 feature : http://speakingjs.com/es5/ch25.htmlhttp://www.bsidesoft.com/?p=1861ES5에 대해 간략히 알아보자.3.0에 비해 5.0에서 실질적으로 추가된 문법은 strict mode와 Object리터럴 get-set추가, 문자열의 인덱스 인식등에 대한 부분이 변화 했습니다.가장 중요한 특징은 객체에 대한 통제와 클래스를 생성하는 방법이 변화했다는 것입니다.문법적으로도 사용자 Object에 대해 getter, setter 지정이 가능해지므로 더 이상 평범한 값의 할당으로 작동하지 않고 내부에는 많은 제어문을 내포할 수 있는 형태가 되어 기존의..

자바스크립트 디자인 패턴 책의 내용을 정리한 내용입니다.curring을 알기 전에 부분 적용이라는 개념을 먼저 알고 있어야 합니다. 사실, 많은 싸이트나 위키에서 curring을 잘못 받아들여 소개하기도 합니다. 일단은 제대로 이해하기 위해서 부분 적용이 뭔지 알아봅시다.함수 적용순수 함수형 프로그래밍에서는 함수를 호출하거나, 부른다고 하지 않고, 적용 된다고 표현합니다.고로, apply로 이해하시는 것이 맞습니다.자바스크립트에서도 Function.prototype.apply()를 사용하면 함수를 적용 할 수 있습니다. var sayHi = function(who) { return 'Hello' + (who ? ', ' + who : '') + '!'; } sayHi(); sayHi('world'); s..

JavaScript Deferred 객체와 promise 요즘 업무를 하다보니 느낀 사실인데, 비동기 처리나, 동기처리에 관한 이슈가 늘 나를 덮치곤 했다. 그런 이유로 JavaScript를 좀 더 잘하고 싶은 마음에 찾아본 자료를 정리해보았다. Deferred Object jQuery에서는 promise를 사용할 수 있도록 Deferred 객체를 제공합니다. 물론, jQuery.Promise()를 지원한다. 3.0부터 아마 제대로 지원한다고 생각하면 될 것 같습니다. 그러나, 사용하는 jQuery 버전이 3.0 이하인 경우에는 jQuery.Promise()를 사용할 수는 없습니다. jQuery.Deferred()가 존재하므로 이를 이용하여 promise를 사용할 수 있어 Callback Hell에서 벗..

jQuery의 data() 메소드 사용 삽질기 jQuery에서 흔히 사용하는 것 중에 data()메소드입니다. 웹 개발을 하다보면, 특정 값을 서버에서 프론트로 내려 주어야 하거나, 하나의 뷰에 값만 바꾸어 동작하는 뷰 작업을 해야 하면 사용하게 되는 것이 data() 메소드입니다. 물론, 자바스크립트에서도 사용 할 수 있으나, 크로스 브라우징을 위해 jQuery를 사용하면 간편하게 크로스 브라우징 이슈를 해결 할 수 있습니다. 사실, 그래서 사용하는 거죠. Selector만 사용하기 위함이 아니라는 사실!! jQuery는 JavaScript Library인데, 착각하는 것이 편한 셀렉터 지정으로 많이 사용하시는 줄 아시지만. jQuery는 간편하게 JavaScript를 사용하게 만들되, 여러 브라우저에..

jquery 적응기 jquery를 업무에서 많이 쓰다보니 알게 된 사실 몇가지를 적고자 합니다. 웹 개발을 하다보면 생기는 일 중에 하나가 html에 data 값을 저장 해둘 일이 필요로 합니다. 그러다보니 서버에서 프론트로 데이터를 내려주는데 이 데이터는 사용자에게는 필요한 정보는 아니니 숨겨서 보여주는 것이죠. data() 메소드 그래서 태그 안에 data를 숨겨두어야 합니다. 바로 아래처럼 말이죠. click jquery-data api를 보면 사용법이 주로 나와 있습니다. 그럼 이제 이 데이터를 쓰려면, HTML에 있는 값을 읽어 오거나, 다시 쓸 때 사용하는 게 data() 메소드 입니다. data api 이쪽에서도 확인을 할 수 있죠. 여기서 중요한 사실 하나가 있습니다. 위 코드에 ‘data..

J. Fla의 커버 노래 제목을 가져오고 싶은데, 어떻게 할까? 우연히 듣게 된 J. Fla의 커버 노래 제목을 가져오고 싶은데? 어라 이 노래 좋다. 원곡자 노래 들어봐야지 이런 생각을 하다가, 음 쉽게 할 수 있는 방법은 뭐가 있을까 하다가 JavaScript로 빠르게 제목만 가져와야지 하면서 간단하게 코드를 짜보았다. 일단 유투버의 재생목록을 클릭하여 들어갔다. J.fla의 커버 재생 목록으로 들어간다. 우측에 재생 목록이 뜨는데, 89개의 동영상 있다. 우선은 리스트의 상위 부모 노드를 찾아야 한다. 이때 크롬의 개발자 도구를 열어 HTML의 영억을 찍어 해당 li의 부모를 찾는다. 찾았더니 가 재생 목록 리스트의 상위 부모 노드더라. 그래서 우리는 상위 부모노드의 id 값이 있는지 확인 할 필요..

jQuery Event 이벤트 메서드 on()메서드는 모든 이벤트를 처리 할 수 있다. 내부적으로 jQuery는 크로스 브라우저 이슈를 모두 고려 한다. .on() 메서드는 1.7 버전에서 처음 도입 되었고, 사용하는 방법은 jQuery가 제공하는 다른 메서드를 사용하는 방법과 크게 다르지 않다. 그 전에는 .click() 이나 .focus() 메서드를 제공 했으나 이제는 .on()메서드만 사용해야 한다. $('li').on('click', function() { $(this).addClass('complete'); }); .on()메서드를 이용하여 이벤트를 처리 한다. 이 메서드는 두 개의 매개변수를 필요로 한다. 첫 번째 매개변수로는 대응 할 이벤트를 지정한다. 여기서는 click이벤트를 처리한다. ..

자바스크립트 이벤트 요소에 이벤트를 바인딩하는 세 가지 방법 HTML 이벤트 핸들러 전통적인 DOM 이벤트 핸들러 DOM 레벨 2 이벤트 리스너 HTML 이벤트 핸들러 그다지 권장하는 방법은 아니다. 이유 : HTML과 자바스크립트 코드를 분리 시키는 것이 더 좋고, 현재 이 방식을 전혀 사용하지 않는다. 위 코드처럼 사용자가 a 태그를 누를 때, hide() 함수를 호출한다. 전통적인 DOM 이벤트 핸들러 DOM의 최초 명세에서 소개 된 방법이다. 장점으로는 주요 모든 브라우저에서 지원을 한다는 점이다. 그러나, 단점으로는 이벤트 별로 단 하나의 함수만 바인딩 할 수 있다는 점이다. element.onevent = functionName; //이러한 형식으로 작성한다. function checkUser..