728x90 프로그래밍 팁/JavaScript37 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. Javascript Intl 클래스 사용법 JavaScript의 Intl 클래스는 다국어 지원, 날짜 및 시간 형식, 화폐, 숫자 및 단위 변환 등과 같은 다양한 지역화 기능을 제공합니다. 이 글에서는 Intl 클래스의 사용법에 대해 소개하고, 어떤 상황에서 사용할 수 있는지 설명하겠습니다. 1. Intl 클래스란? Intl 클래스는 JavaScript에서 다양한 지역화 기능을 제공하는 클래스입니다. 이 클래스를 사용하면 사용자의 지역에 따라 문자열, 숫자, 날짜 및 시간 형식, 화폐, 단위 등을 다르게 표현할 수 있습니다. Intl 클래스는 다양한 하위 클래스를 포함하고 있으며, 이를 통해 다양한 기능을 제공합니다. Collator 클래스는 문자열을 정렬하는 기능을 제공하고, DateTimeFormat 클래스는 날짜 및 시간 형식을 지정하는 기.. 2023. 3. 13. 경도, 위도로 두 지점간의 거리 계산하기 지구는 구형태를 띄고 있기 때문에 위치마다 경도 1º, 위도 1º의 거리는 서로 다릅니다. 이를 계산하기 위해서 두 지점의 경도와 위도를 가지고 거리를 계산하는 방법은 "하버사인 공식(Haversine formula)"이라는 수식을 사용합니다. 이 공식은 두 지점의 위도, 경도, 지구 반지름 등을 이용하여 구할 수 있습니다. 하버사인의 공식은 아래의 링크를 참고하시기 바랍니다. Haversine formula - Wikipedia From Wikipedia, the free encyclopedia Formula for the great-circle distance between two points on a sphere The haversine formula determines the great-circl.. 2023. 3. 12. Javascript 프레임워크 비교(React, Vue, Angular) React.js, Vue.js, Angular.js는 모두 인기있는 프론트엔드 프레임워크입니다. 이 세 가지 프레임워크는 개발자들이 웹 애플리케이션을 구축할 때 선택할 수 있는 다양한 옵션 중 하나입니다. 이번 글에서는 React.js, Vue.js, Angular.js를 비교해보고 각각의 장단점을 살펴보겠습니다. React.js React.js는 Facebook에서 개발한 자바스크립트 라이브러리입니다. React.js의 주요 기능 중 하나는 Virtual DOM입니다. Virtual DOM은 브라우저에서 실제 DOM 요소와 대응되는 가상의 DOM 요소를 생성합니다. 이렇게 생성된 가상의 DOM 요소를 기반으로 React.js는 실제 DOM에 변화가 필요한 부분만 업데이트합니다. 이로 인해 React.j.. 2023. 3. 12. JavaScript에서 var, let, const의 차이점 JavaScript에서 변수를 선언하는 키워드로는 var, let, const가 있습니다. ES6에서 새로 추가된 let과 const 키워드는 var 키워드와 다른 특징을 가지고 있습니다. 이번 글에서는 let과 const 키워드가 var 키워드와 어떻게 다른지에 대해 알아보겠습니다. 1. 변수 스코프 var 키워드로 선언한 변수는 함수 스코프(Function scope)를 가집니다. 함수 내에서 선언된 변수는 함수 내부에서만 유효합니다. 하지만 let과 const 키워드로 선언한 변수는 블록 스코프(Block scope)를 가집니다. 블록 스코프란 중괄호({})로 둘러싸인 범위를 의미합니다. 따라서 블록 내에서 선언된 변수는 블록 내부에서만 유효합니다. function example() { var x .. 2023. 3. 12. Javascript 문자열 처리 "" 혹은 '' 대신, 이제 ``를 사용하세요. 문자열 처리 시 보통 큰 따옴표("")와 작은 따옴표('')를 사용합니다. 하지만, 이제 백틱(``)을 사용해서 좀 더 편하고 직관적으로 코딩하여 가독성을 높여보세요. 보통 Template literals라고 하는데, 이에 대해 알아보도록 하겠습니다. Template literals는 ES6부터 추가된 문자열 표기법 중 하나로, 문자열 안에서 변수나 표현식을 쉽게 삽입할 수 있도록 해주는 문법입니다. 기존의 문자열 표기법과는 다르게 백틱(``)으로 문자열을 감싸며, ${}를 사용하여 변수나 표현식을 삽입할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다: 기존 처리 방식("" 혹은 '') 사용: const name = "Alice"; const age = 30; console.log('My n.. 2023. 3. 7. JavaScript HTML Content, Attribute, CSS 제어하기 JavaScript를 사용하여 HTML 컨텐츠, 속성, 그리고 CSS를 제어하는 방법에 대해 알려드리겠습니다. HTML Content 제어 HTML 요소의 내용을 변경하려면, 해당 요소의 ID를 가져와야 합니다. 이를 위해 document.getElementById 메서드를 사용하며, 변경할 내용은 innerHTML 속성을 통해 지정합니다. 예를 들어, ID가 "demo"인 요소의 내용을 "Hello World!"로 변경하려면 다음과 같이 작성합니다. document.getElementById("demo").innerHTML = "Hello World!"; HTML Attribute 제어 HTML 요소의 속성을 변경하려면, 해당 요소의 ID를 가져와야 합니다. 이를 위해 document.getElemen.. 2023. 3. 7. Javascript 루프문 정리(8) filter문 filter() 메서드는 배열의 요소 중에서 지정된 함수에 맞는 요소만 추출하여 새로운 배열을 반환하는 메서드입니다. 이 메서드를 사용하면 배열에서 필요한 요소만 추출하여 새로운 배열을 생성할 수 있습니다. filter() 메서드는 기존 배열을 수정하지 않고 새로운 배열을 반환하기 때문에, 기존 배열을 변경하지 않고 배열을 필터링해야 하는 경우에 유용합니다. 아래는 filter() 메서드의 구조와 사용 방법에 대한 설명입니다. filter() 메서드의 구조 배열.filter(콜백함수); 배열: 필터링할 배열입니다. 콜백함수: 각 배열 요소를 검사하여 필터링할 함수입니다. filter() 메서드의 사용 방법 1. 배열에서 짝수만 추출하는 경우: const arr = [1, 2, 3, 4, 5]; const.. 2023. 3. 6. Javascript 루프문 정리(7) map문 map() 메서드는 배열의 모든 요소에 대해 지정된 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드입니다. 이 메서드를 사용하면 배열을 순회하면서 각 요소를 변형할 수 있습니다. map() 메서드는 원본 배열을 변경하지 않고 새로운 배열을 생성하기 때문에, 기존 배열의 요소를 수정하지 않고 새로운 배열을 만들어야 하는 경우에 유용합니다. 아래는 map() 메서드의 구조와 사용 방법에 대한 설명입니다. map() 메서드의 구조 배열.map(콜백함수); 배열: 변형할 배열입니다. 콜백함수: 각 배열 요소를 변형할 함수입니다. map() 메서드의 사용 방법 1. 배열 요소를 제곱한 새로운 배열을 생성하는 경우: const arr = [1, 2, 3, 4, 5]; const newArr = arr.ma.. 2023. 3. 6. Javascript 루프문 정리(6) forEach문 forEach() 메서드는 배열의 각 요소에 대해 지정된 함수를 호출하는 메서드입니다. 이 메서드를 사용하면 반복문을 사용하지 않고도 배열의 모든 요소를 순회하며 작업을 수행할 수 있습니다. forEach() 메서드는 배열을 순회하며 요소를 차례대로 접근하며, 배열의 각 요소를 인수로 받는 콜백 함수를 실행합니다. 아래는 forEach() 메서드의 구조와 사용 방법에 대한 설명입니다. forEach() 메서드의 구조 배열.forEach(콜백함수); 배열: 순회할 배열입니다. 콜백함수: 각 배열 요소를 처리할 함수입니다. forEach() 메서드의 사용 방법 배열 요소를 출력하는 경우: const arr = [1, 2, 3, 4, 5]; arr.forEach(function(element) { consol.. 2023. 3. 6. Javascript 루프문 정리(5) do...while문 do...while 루프문은 while 루프문과 유사하지만, 코드 블록을 먼저 실행한 후에 조건식을 검사하는 점이 다릅니다. 즉, do...while 루프문은 일단 코드 블록을 한 번 실행한 후에 조건식을 검사하여 조건식이 참이면 다시 코드 블록을 반복 실행합니다. 따라서 코드 블록이 최소한 한 번은 실행되는 것이 보장됩니다. 아래는 do...while 루프문의 구조와 사용 방법에 대한 설명입니다. do...while 루프문의 구조 do { // 반복 실행할 코드 블록 } while (조건식); 코드 블록: 최소한 한 번 실행될 코드 블록입니다. 조건식: 반복문이 실행될 때마다 검사되는 조건입니다. 조건식이 참일 경우 코드 블록이 반복 실행됩니다. do...while 루프문의 사용 방법 1. 특정 조건이.. 2023. 3. 6. 이전 1 2 3 다음 728x90
