JavaScript29 React 로 TDD 쵸큼 맛보기 https://www.slideshare.net/jeokrang/react-tdd-76066004?from_action=save 2018. 7. 20. JS 성능 비교 사이트 JavaScript 성능 비교 사이트 : http://jindo.dev.naver.com/jsMatch/index.html두 코드를 올린 후 ‘비교하기’ 버튼을 클릭하면 자동으로 여러번 테스트를 하여 어느 코드가 성능이 더 좋은지 비교해준다.jQuery 는 JavaScript 보다 성능이 좋지 않다. 따라서 랜더링이 많이 일어나는 화면을 개발할 때는 jQuery 보다는 JavaScript 를 이용하여 개발하는 것이 좋다. 2018. 7. 20. [JavaScript] Export to Excel, csv 출처: https://codepen.io/kostas-krevatas/pen/mJyBwp 2018. 7. 19. [JavsScript] XMLHttpRequest 파일 다운로드, 이미지 미리보기 등의 작업을 할 때 헤더에 토큰을 넣어야 하는 작업이 필요하다면 기본적인 URL 만으로는 안되고 XMLHttpRequest() 의 응답결과를 이용해야 한다. 아래 작업은 react에서 사용한 코드이다. 1. window.open const detector = require('detector');let uri = '메일 미리보기 주소'; var xhr = new XMLHttpRequest(); xhr.responseType = 'blob'; //so you can access the response like a normal URL xhr.onreadystatechange = function () { if (xhr.readyState == XMLHttpRequest.DONE .. 2017. 12. 1. [ReactJS] scroll to top 특정 컴포넌트의 스크롤을 위로 올리기 위한 방법이다. componentDidUpdate() { let scroll = this.refs.scrollElement || document.getElementById('scrollElement'); scroll.scrollTop = 0; } render() { return ( ... ... ... ) } 스크롤을 변경하고자 하는 부분에 id를 추가하고 componentDidUpdate 함수에 스크롤 변경 코드를 추가하면 된다. 2017. 7. 31. [React] 속도 향상 Component vs. PureComponent vs. Functional ComponentReact에서 컴포넌트를 만드는 방법에는 크게 클래스 기반(React.Component, React.PureComponent)과 함수 기반(Functional Stateless Component)로 나뉜다. 클래스 기반 컴포넌트React.Component와 React.PureComponent는 shouldComponentUpdate 라이프 사이클 메소드를 다루는 방식을 제외하곤 동일하다.PureComponent ≈ Component + shouldComponentUpdate shouldComponentUpdateshouldComponentUpdate(nextProps, nestState)React.Componen.. 2017. 7. 25. [JavsScript, ReactJS] date format yymmdd 보통 date format 함수는 strfmat() 함수를 사용하지만 date format 함수가 없다면 만들어야 한다. function makeYYMMDD(value) { let year = value.getFullYear(); let month = value.getMonth() + 1; let date = value.getDate(); month = month < 10 ? '0' + month : month; date = date < 10 ? '0' + date : date; return year+'-'+month+'-'+date; } // result: '2017-01-01'toISOString() 사용할 경우function makeYYMMDD(value) { return value.toISOStr.. 2017. 1. 23. [ReactJS] add component in list 동적으로 리스트 안의 값을 추가하여 보여줘야 하는 경우가 있다. ReactJS 에서는 render() 안의 값을 동적으로 보여주기 위해서는 state 를 이용해야 한다. import React from 'react';import TmpComponent from './TmpComponent'); export default class TestClass extends React.Component { constructor(props) { super(props); this.state = {resultAjax: [],tmpState: [],checked: [] } } componentDidMount() { // Ajax 호출 ...for (..) {checked[i] = false;this.setState({res.. 2016. 12. 29. 이전 1 2 3 4 다음