본문 바로가기

프로그래밍/JavaScript50

Javascript UUID GUID 만들기 Javascript로 UUID와 GUID를 만드는 방법에 대해서 알려드립니다. 그전에 앞서 UUID와 GUID에 간단히 설명을 드리면, 아래와 같습니다. UUID, GUID란 무엇인가? UUID(Universally Unique Identifier)는 128비트의 16진수로 이루어진 고유한 식별자입니다. 일반적으로 다음과 같은 형식을 따릅니다. xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx 여기서 x는 16진수의 숫자를 나타냅니다. M은 UUID 버전 번호를 나타내며, N은 UUID variant를 나타냅니다. 이 값은 보통 다음과 같습니다. M은 4 비트이며, 1로 설정됩니다. 즉, 4입니다. N은 2비트이며, 다음과 같은 값 중 하나일 수 있습니다. 0: 이전 버전과의 하위 호환성.. 2023. 3. 29.
Bootstrap v5에서 Modal창 드래그하기 Bootstrap v5에서 모달창의 헤더를 마우스로 클릭 후 드래그 해서 움직이게 하는 방법에 대해서 포스팅 진행하겠습니다. BS5에서는 jQuery를 다 들어냈으므로, 순수 자바스크립트로 구현하는 방법으로 진행해 보겠습니다. jQuery로 구현하는 방법은 아래의 링크를 참고하시기 바랍니다. Bootstrap 모달창 드래그 Bootstrap 모달창을 드래그가 가능하게 해달라는 요구가 간혹 있습니다. jquery ui를 사용하여 modal-dailog에 draggalbe 이벤트를 걸어주면 됩니다. 아래는 stackoverflow 참고 사이트 주소입니다. 참고 자료: s ccusean.tistory.com HTML 소스 수정 아래는 BS5의 버튼을 눌러서 모달창을 띄우는 기본 소스입니다. 여기에 모달창을 드.. 2023. 3. 23.
Bootstrap v5에서 Javascript로 모달창 보이기/숨기기 Bootstrap v4에서 v5로 넘어가면서 가장 큰 변화는 자바스크립트의 변화입니다. v4에서는 jQuery가 베이스였지만, v5에서는 순수 자바스크립트(Vanilla Javascript)가 기본 베이스로 바뀌게 되었습니다. 그러면서, 기존에 동작제어 방식이 많이 변경되었습니다. 그 중에서 이 번 포스팅에서는 Modal창을 v5버전에서 순수 자바스크립트로 제어하는 방법에 대해서 알아 보겠습니다. Bootstrap v5의 Modal 기본 다음은 v5의 Modal창의 기본 소스입니다. 버튼을 클릭하면 모달창이 보여지고, "X", "닫기" 혹은 "모달창 밖"을 클릭하면 모달창이 닫히는 기본 소스입니다. Launch demo modal Modal title ... Close Save changes 위와 같이 .. 2023. 3. 23.
리스트 항목 Drag & Drop으로 재정렬하기 리스트 형태로 구현되어 있는 HTML 문서의 항목을 사용자의 Drag & Drop 동작으로 재정렬하는 방법에 대해서 설명 드리겠습니다. 자료에 대한 출처는 제일 아래 하단에 있으니 참고하시기 바랍니다. 실습해보기 아래는 실제로 구현한 내용을 실습해 볼 수 있는 화면입니다. Drag & Drop의 동작으로 실제로 어떻게 동작하는지 확인 해 보세요. 아래의 출처와는 다른 세로로 정렬된 리스트 항목으로 구성하였습니다. 미리 맛 보기: HTML 삽입 미리보기할 수 없는 소스 위 예제의 전체 소스는 아래와 같습니다. HTML 소스 A B C CSS 소스 .container-list { /* display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; */ }.. 2023. 3. 23.
Javascript URL 클래스 간단 사용법 JavaScript의 URL 클래스는 URL 주소를 파싱하고 조작할 수 있는 객체를 제공합니다. 아래의 간단한 사용법을 예제를 통해서 설명을 드리겠습니다. 예제1 1. 주소 파싱 URL 클래스는 주어진 URL 문자열을 파싱하여 다양한 요소로 분리하여 제공합니다. 예를 들어, 호스트 이름, 프로토콜, 포트 번호, 경로 등을 추출할 수 있습니다. const url = new URL('https://www.example.com/path/to/resource?query=value'); console.log(url.protocol); // "https:" console.log(url.host); // "www.example.com" console.log(url.pathname); // "/path/to/resou.. 2023. 3. 20.
Javascript 정규표현식 기본기 익히기 정규표현식(Regular Expression)은 문자열에서 특정 패턴을 찾거나 바꾸기 위해 사용하는 패턴 매칭 기술입니다. 자바스크립트에서는 RegExp 객체를 사용하여 정규표현식을 다룰 수 있습니다. 정규표현식은 다양한 문자열 처리 작업에서 매우 유용하며, 자바스크립트 뿐만 아니라 다른 프로그래밍 언어에서도 널리 사용됩니다. 이번 블로그 글에서는 자바스크립트에서 정규표현식을 사용하는 방법에 대해 다루어보겠습니다. 문자열을 선언할때 '를 사용하고, 정규표현식은 /를 사용합니다. 이 점을 기억하시면 벌써 반은 알고 들어가는 겁니다. // 일반 문자열 선언 const str = 'hello'; // 정규표현식 선언방법1 const pattern1 = /hello/; // 정규표현식 선언방법2: RegExp객.. 2023. 3. 14.
반응형

티스토리툴바