주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

리액트 컴포넌트는 생성(Mount), 갱신(Update), 제거(Unmount) 주기를 가지게됩니다. 해당 주기에서 사용되는 메소드에 대해 알아보겠습니다. 생성(Mount) constructor(props) 메소드를 바인딩 하거나 state를 초기화하는 작업이 없을 경우 사용합니다. 만약, 해당 작업이 없다면 사용하지 않아도됩니다. getDerivedStateFromProps(nextProps, prevState) props로 받아 온 값을 state로 넣어주고 싶을때 사용합니다. state를 변경할 때는 setState가 아닌 반환 값으로 변경해야하며 반환 값이 null일 경우에는 아무일도 발생되지 않습니다. render() 반드시 구현되어야하는 유일한 메소드입니다. 이 메소드가 호출되면 this.pr..

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다. slice 선택자를 기준으로 시작과 끝 index의 값에 의해 요소를 반환한다. index는 0부터 시작한다. // HTML 1번 2번 3번 4번 // jQuery $('#box div').slice(1); // 2번 div 반환 $('#box div').slice(1,3); // 2번, 3번 div 반환 var array = ['red', 'green', 'blue', 'black', 'pink']; array.slice(2,4); // 'blue', 'black' 반환 trim 문자열의 시..

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다. replaceAll & replaceWith 선택자 DOM을 제거하고 새 콘텐츠를 삽입한다 replaceAll, replaceWith 메서드들은 같은 동작을 하고 있으며 구문의 차이가 있다. // HTML 1번 2번 // jQuery $( "새로운" ).replaceAll( ".inner" ); $( ".inner" ).replaceWith( "새로운" ); // 출력 새로운 새로운

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다. animate css 속성의 애니메이션 효과를 만들 수 있다. // CSS #box { width:300px; height:300px; background:red; } // HTML // jQuery $('#box').animate({ opacity : 0.25, width : '100px', height : '100px' }, 5000, function(){ // 5000은 5초를 의미 // 종료 후 실행될 코드 작성 }); show & hide 선택자를 즉시 표시하거나 감춘다. css 메서..