개발이야기234

• 

  [자바스크립트] TOAST UI Chart 사용법, 예제, 차트 그리기 아래 소스 코드는 Toast UI Chart 라이브러리를 사용하여 다양한 형태의 차트를 생성하고 렌더링 하는 예제 코드입니다. 이 외에도 다양한 예제와 테마가 있으니, 참조하셔서 사용하시면 됩니다. 개발이야기/자바스크립트 2023. 9. 1.

• 

  [jQuery] jqGrid header colNames 색상 변경하기 (header 테이블 스타일 수정) 아래 소스 코드는 jqGrid 테이블 헤더 셀에 배경색을 지정하여 표시하고 있습니다. 각 열 header의 ID를 지정하여 스타일을 개별적으로도 지정할 수 있습니다. 각각의 열에 대해서 스타일을 지정함으로써 헤더와 데이터를 쉽게 식별할 수 있습니다. 개발이야기/jQuery 2023. 8. 31.

• 

  [MySQL] 위도 경도 값으로 거리 계산하기 (Haversine 공식) 아래 쿼리는 서울과 부산의 위도, 경도 값으로 하버사인(Haversine) 공식을 사용하여 직선 거리를 계산 하였습니다. ㅇ 서울 위도/경도 : 37.5665, 126.9780 ㅇ 부산 위도/경도 : 35.1796, 129.0756 SELECT '서울' AS 출발지, '부산' AS 목표지, ( 6371* acos ( cos(radians(35.1796))*cos(radians(37.5665))*cos(radians(126.9780)-radians(129.0756)) +sin(radians(35.1796))*sin(radians(37.5665)) ) ) AS 거리; ㅇ 6371은 지구의 반지름을 나타내며, 이 값은 km 단위의 결과를 얻기 위해 사용됩니다. ㅇ acos는 아크 코사인 함수로, 코사인 값의 .. 개발이야기/MySQL 2023. 8. 29.

• 

  [자바스크립트] 비밀번호 영문, 숫자, 특수문자, 자릿수 조합 체크하기 아래 소스 코드는 비밀번호 정규식을 통해서 유효성을 검사하고, 비밀번호 확인을 통해 비교하는 로직입니다. 정규식을 사용하여 유효성을 검사하고, 이후 비밀번호 확인 input창에서 일치하는지 확인합니다. 간단한 소스 코드이니 확인하시고 응용하시면 됩니다. 정규식 var passwordRegex = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*?_]).{8,16}$/; 1. 비밀번호 자릿수 (최소 8자에서 16자까지) 2. 최소 하나 이상의 영문자 (소문자 or 대문자) 3. 최소 하나 이상의 숫자 4. 최소 하나 이상의 특수문자 (!@#$%^&*?_) 새로운 비밀번호를 입력하세요. 확인 개발이야기/자바스크립트 2023. 8. 29.

• 

  [자바스크립트] 올바른 이메일 형식 유효성 체크하기 아래 소스 코드는 정규 표현식에 따라 올바른 이메일 주소의 유효성을 체크하고 확인하는 스크립트 코드입니다. 유효한 이메일은 true를 반환하고, 반대의 경우는 false를 반환합니다. 간단한 코드이니 확인하시고 응용하시면 됩니다. 확인 개발이야기/자바스크립트 2023. 8. 28.

• [자바스크립트] 업로드 파일 용량, 확장자, 특수문자 체크하기 아래 소스 코드는 파일을 선택할 때 파일 크기, 확장자 및 파일명에 특수문자를 검사하는 스크립트 함수입니다. 파일을 선택할 때 호출되며 조건에 맞지 않을 때 경고 메시지를 표시하고 필드를 초기화합니다. 간단한 함수이니 확인하시고 응용해서 사용하시면 됩니다. 개발이야기/자바스크립트 2023. 8. 28.

• 

  [자바스크립트] 신용카드 번호 자동으로 하이픈(-) 넣기 (oninput) 아래 소스 코드는 사용자가 입력한 신용카드 번호에 자동으로 하이픈(-)을 추가하는 소스 코드입니다. oninput 이벤트를 통해서 입력 필드의 값이 변경될 때마다 함수가 호출되도록 하였습니다. 또, 정규식을 사용하여 숫자 이외의 모든 문자를 제거하고 있습니다. 간단한 소스 코드이니 확인하시고 사용하시면 됩니다. 신용카드 번호: 개발이야기/자바스크립트 2023. 8. 25.

• 

  [jQuery] 영문, 숫자, 한글, 특수문자 정규식 입력 체크 (영문 숫자만, 한글만, 영문 숫자 특수문자 조합) 아래 소스 코드는 입력 필드에 대해 입력 값 체크 로직을 구성하였습니다. 입력 필드에 대해 keyup 이벤트를 통해서 입력된 값에 대해 정규식을 사용해 모든 문자열을 체크하고 정규식에 위배되는 문자를 찾아내고 빈 문자열로 대체합니다. 입력 필드에 대해서 원하는 형식으로 데이터를 입력하도록 유도하고, 잘못된 데이터가 입력되는 것을 방지할 수 있으며 데이터의 정확성을 보장하기 위해 사용됩니다. 아이디 : 이름 : E-mail : 개발이야기/jQuery 2023. 8. 21.

• 

  [jQuery] input focus event 사용 예제 (스타일 변경, focus 이동, focus element) 아래 소스 코드는 입력 필드에 포커스 이벤트를 추가하고, 포커스 이벤트에 따라 스타일을 변경하고 다음 입력 필드로 포커스를 이동하는 예제입니다. 소스코드 $('input').focus(function() { ... }); - 모든 요소에 대해 포커스 이벤트를 추가합니다. 포커스가 들어온 경우, 해당 입력 필드의 배경색을 'lavenderblush'로 변경합니다. $('input').blur(function() { ... }); - 입력 필드에서 포커스가 빠져나간 경우, 입력 필드의 배경색을 원래대로 돌리기 위해 스타일을 초기화 합니다. $('input').keypress(function(e) { ... }); - 입력 필드에서 키보드 이벤트를 감지합니다. Enter 키 가 눌린 경우, 다음 input 필.. 개발이야기/jQuery 2023. 8. 21.

• 

  [jQuery] UI Sortable 사용하기 (드래그 앤 드롭, 순서변경, 리스트 이동 정렬) 아래 소스 코드는 jQuery UI Sortable 라이브러리를 활용해서 리스트 간 아이템 이동과 이동이 발생할 때 update 이벤트를 활용하여 콘솔로 확인하는 예제입니다. 소스코드 ㅇ $(".sortable-list ul").sortable({ ... }); - .sortable-list 클래스를 가진 요소의 내부에 있는 ul 태그를 대상으로 Sortable을 설정합니다. 리스트 아이템들에 드래그 앤 드롭 기능을 추가하는 역할을 합니다. ㅇ connectWith: ".sortable-list ul" - 위의 옵션은 서로 다른 리스트 간에 아이템을 이동할 수 있도록 합니다. .sortable-list ul로 설정함으로써 같은 클래스를 가진 다른 리스트와 연결될 수 있습니다. ㅇ start: functi.. 개발이야기/jQuery 2023. 8. 16.

• 

  [Java] 문자열 체크하기 (null, 중복, 숫자, 태그) 아래 소스 코드는 문자열을 조작하고 처리하는 작업을 수행하는 메서드들입니다. 간단하지만 자주 사용하는 메서드이니 확인하시면 좋을 것 같습니다. 소스코드 설명 ㅇ isEmpty(String str) : 주어진 문자열이 비어있는지 여부를 체크하는 메서드입니다. 문자열이 null이거나 공백 문자로만 이루어져 있거나 "null" 문자열인 경우에 비어있다고 판단하여 true를 반환합니다. ㅇ isEquals(String orgStr, String comStr) : 두 개의 문자열을 비교하여 동일한지 여부를 확인하는 메서드입니다. ㅇ parseInt(String strParam) : 문자열을 정수로 변환하는 메서드입니다. 주어진 문자열이 정수로 파싱 가능한 경우에는 해당 정수 값을 반환합니다. 정수로 변환할 수 없.. 개발이야기/Java 2023. 8. 11.

• 

  [jQuery] 상위 요소 찾는 closest() 함수 사용법, 예제 (스타일 변경, 이벤트 추가) 아래 소스 코드는 closest() 함수를 사용해서 HTML 요소를 선택해 스타일을 변경하고, 이벤트를 추가하는 예시입니다. closest() 함수 $(selector).closest(filter); ㅇ $(selector): 선택자를 사용하여 원하는 요소를 선택합니다. 해당 선택자에 맞는 요소들 중에서 가장 가까운 조상 요소를 찾을 것입니다. ㅇ .closest(filter): 선택한 요소에서 시작하여 상위로 이동하면서, 주어진 필터 조건을 만족하는 가장 가까운 조상 요소를 반환합니다. 필터가 지정되지 않으면 가장 가까운 조상 요소를 모두 선택합니다. 요약하면, $(selector).closest(filter); 함수는 주어진 선택자로 선택한 요소를 기준으로 상위로 올라가며 가장 가까운 조상 요소 중에.. 개발이야기/jQuery 2023. 8. 11.