본문 바로가기

전체 글118

form validate onsubmit html 에서 form 을 사용할 때 "저장" 버튼에 해당하는 부분의 코드를 type="submit" 을 사용해야 한다.Save물론 type 을 submit 이 아닌 “button” 으로 구현해도 된다. 하지만 submit type이 아닐 경우에 input filed 들에서 키보드 “enter” 를 눌렀을 경우 submit 핸들러가 응답을 하지 않는다.validationform 에서 validation 을 확인 후 submit 을 제한하고 싶은 경우 "onsubmit" 이벤트를 이용하면 된다. cancel save 위 예제에서 저장버튼을 클릭하면 /user API 가 호출되고 사용자가 새로 등록될 것이다.하지만 firstname 과 lastname 필드의 유효성을 체크하기 위해서는 위 코드만으로는 부족하.. 2018. 7. 25.
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.
[Python3] class property, setter, to_json class 를 사용하여 모델링 하기 python에서는 getter, setter를 만드는 것 보다 property를 사용하는 것이 좋다. propery 와 getter, setter 의 비교는 여기를 참조한다. class TestModel: def __init__(self): self._id = None self._name = None @property def id(self): return self._id @id.setter def id(self, id): self._id = id @property def name(self): return self._name @name.setter def name(self, name): return self._name def to_json(self): return jso.. 2017. 8. 7.
[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.