선택한 앨리먼트의 내부 요소를 지우는 메서드 - empty() empty() 란? .empty()는 선택한 요소의 내용을 지웁니다. 내용만 지울 뿐 태그는 남아있다는 것에 주의합니다. 태그를 포함한 요소 전체를 제거할 때는remove()를 사용합니다. 문법 .empty() 예를 들어 empty() empty() 메서드에 대해 알아봅시다. 일 때 $('#content').empty(); 를 하게 되면 아래와 같이 바뀐다.
Programming
자바스크립트로 날짜 포맷형식 변경 함수 구현하기 날짜 데이터를 핸들링하면서 문자열로 받은 날짜와 시간 등을 요구 포맷형식에 맞게 변경해야 할 때가 종종 있다. 그래서 함수로 따로 구현하여 요구마다 쉽게 대응하여 return 받을 수 있는 함수를 따로 만들어 놓기로 했다. dateFomatter 함수 구현 활용 참고로 아래 f_dataFormatter(str) 함수의 str 값은 "20210421183524" 형식의 파라미터입니다. // 원하는 날짜 형식으로 포맷하여 return하는 함수 function f_dateFormatter(str){ if( str == "" || str == null || str == undefined){ // parameter 값이 빈 값일 때 원하는 문자열로 return re..
JavaScript로 빈 값 체크 함수 구현 JavaScript를 사용하여 데이터 값의 null 체크를 할 때마다 유효성 체크를 한다면 코드도 길어질 뿐만 아니라 같은 코드의 중복이 많기 마련이다. 그래서 값이 없는 데이터를 체크하는 함수를 만들어 필요할 때마다 가져다 쓰기로 했다. 빈 값일 시 "" 로 return 하는 함수 // 빈 값일 시 문자열 "" return function f_strNullCheck(str){ var newStr = str; if(newStr == null || newStr == "" || newStr == undefined || newStr == "undefined") { newStr = ""; } return newStr; } 빈 값일 시 0으로 return 하는 함수 /..
JQuery 파일명 확장자 문자열 추출하기 파일 관련 구현을 하면서 확장자명을 가지고 구분을 해주어야 할 상황들이 있다. 먼저, 전체 파일명을 가져와 뒤에서 '.' 을 찾고 subString()을 이용하여 확장자명을 뽑아오는 순서로 처리하면 된다. function getExtension(fileName) { // 파일명의 총 길이 var fileLength = fileName.length; // 마지막 .의 위치 찾기 var lastDot = fileName.lastIndexOf('.'); // .의 다음 위치로 부터 파일의 총 길이까지 subString var fileExtension = fileName.substring(lastDot+1, fileLength); return fileExtension;..
JSON.stringify(), JSON.parse() - 객체를 JSON으로, JSON을 객체로 바꾸기 JSON (JavaScript Object Notation)은 값이나 객체를 나타내주는 범용 포맷으로, RFC 4027 표준에 정의되어 있습니다. JSON은 자바스크립트에서 사용할 목적으로 만들어지는 포맷이지만 라이브러리를 사용하면 자바스크립트가 아닌 언어에서도 JSON을 충분히 다룰 수 있어 JSON을 데이터 교환 목적으로 사용하는 경우가 많아 JSON을 사용해 주로 웹서버와의 데이터를 교환할 때 사용합니다. 자바스크립트가 제공하는 JSON 관련 메서드는 JSON.stringify()와 JSON.parse()가 있는데 JSON.stringify 에 대해 알아보겠습니다. JSON.stringify( ..
JQuery를 이용해 select의 option 선택/변경하는 방법 우선 속성 값을 변경하는 방법으로 prop 함수를 활용하여 앨리먼트를 컨트롤 하겠습니다. .prop() .prop()는 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가합니다. 주의할 점은 HTML 입장에서의 속성(attribute)이 아닌 JavaScript 입장에서의 속성(property)이라는 것입니다. 방법1. onchange 이벤트 함수 내 사용해야 하는 경우 $("#select_id").on("change", function(){ // value 값으로 선택 $(this).val("1").prop("selected", true); // option 순서값으로 선택 $(this).find("option:eq(..
리액트 - setState() 함수 이해하기 setState 개념 리액트에서 props나 state 값이 변경이 되면 해당 컴포넌트의 render() 함수가 다시 호출되며 해당 render() 함수에 속해있는 다른 컴포넌트들도 다시 렌더링되면서 화면이 다시 그려지게 됩니다. 컴포넌트가 생성된 후 state 값을 바꾸는 방법은 setState 함수를 사용합니다. this.state.mode = 'welcome' // 리액트가 state 값이 바뀌었다는 것을 인식하지 못함 -> 렌더링 안됨 this.setState({ mode:'welcome' // state값이 바뀌었다는 것을 인식학고 render가 호출됨 -> 렌더링되면서 화면이 다시 그려짐 }) 주의할 점 render함수 안에서 this는 컴포넌트 자..
React 리액트에서 bind() 함수 이해하기 (개념 및 사용법) 기본적으로 리액트에서는 render라는 함수 안에서 this는 컴포넌트 자체를 가리키는데 함수에서는 this가 아무값도 없습니다. 이때 bind() 함수를 사용하여 this를 주입하여 주는 겁니다. # bind 함수 이해하기 먼저 var obj = {name : 'Moony'}; 로 obj의 값에 담아놓고 bindTest() 함수로 인해 this.name 값을 출력 시 undefined 이라고 뜨게 됩니다. 이때 bindTest() 메서드가 this가 obj로 바인드 시켜주어 this.name이 'Moony'값을 가져올 수 있게 만들어 주는 것입니다. 자 이제 그럼 obj가 function의 this가 되게 bind() 함수를 사용하여 ..
