선택한 앨리먼트의 내부 요소를 지우는 메서드 - empty() empty() 란? .empty()는 선택한 요소의 내용을 지웁니다. 내용만 지울 뿐 태그는 남아있다는 것에 주의합니다. 태그를 포함한 요소 전체를 제거할 때는remove()를 사용합니다. 문법 .empty() 예를 들어 empty() empty() 메서드에 대해 알아봅시다. 일 때 $('#content').empty(); 를 하게 되면 아래와 같이 바뀐다.
전체보기
자바스크립트로 날짜 포맷형식 변경 함수 구현하기 날짜 데이터를 핸들링하면서 문자열로 받은 날짜와 시간 등을 요구 포맷형식에 맞게 변경해야 할 때가 종종 있다. 그래서 함수로 따로 구현하여 요구마다 쉽게 대응하여 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(..
[디자인 패턴] 데코레이터 패턴(Decorator Pattern) 개념 정리 Decorator Pattern - 데코레이터 패턴 (구조패턴 분류) 데코레이터 패턴(Decorator pattern)이란 주어진 상황 및 용도에 따라 어떤 객체에 책임을 덧붙이는 패턴으로, 객체에 추가적인 요건을 동적으로 첨가하며, 기능 확장이 필요할 때 서브크래싱 대신 쓸 수 있는 유연한 대안이 될 수 있다. 즉, 장식시켜주는 객체들과 장식 받을 객체들을 만든 뒤 이들을 이용하여 장식 받을 객체가 원하는 모양이 되도록 만들어주는 패턴이며 이때, 기존의 객체(장식 받을 객체)를 활용하고 있던 모듈은 장식이 이루어지는 것과 무관하게 작동을 해야 한다. 복잡해 보이는 설명을 풀어서 설명해보겠습니다. 문을 밀고 들어가 카운터에서 점..
1. 싱글톤 패턴(Singleton pattern) 정리 싱글톤 패턴이란? 어플리케이션이 시작될 때 어떤 클래스가 최초 한번만 메모리를 할당하고(static) 그 메모리에 인스턴스를 만들어 사용하는 디자인 패턴이다. 예를들어 레지스트리 같은 설정 파일의 경우 객체가 여러개 생성되면 설정 값이 변경될 위험이 생길 수 있다. 인스턴스가 1개만 생성되는 특징을 가진 싱글턴 패턴을 이용하면, 하나의 인스턴스를 메모리에 등록해서 여러 쓰레드가 동시에 해당 인스턴스를 공유하여 사용할 수 있게끔 할 수 있기 때문에 요청이 많은 곳에서 사용하면 효율을 높일 수 있다. 주의해야 할 점은 싱글턴을 만들 때 동시성(Concurrency) 문제를 고려해서 설계해야 한다. 싱글톤 패턴의 장점 고정된 메모리 영역을 얻으면서 한번..
