개발이야기/자바스크립트58

• 

  [자바스크립트] 개인정보 마스킹하기 (이름, 휴대번호, 이메일, 주소, 계좌번호, 은행, 연도, 월) 아래 소스코드는 JavaScript에서 개인 정보를 마스킹하고 원본 데이터와 마스킹된 데이터를 콘솔에 출력하는 예제입니다. 데이터 유형에 대해 마스킹을 수행하는 함수를 정의하고, 데이터 형식에 따라 부분적으로 정보를 숨기도록 하였습니다. 마스킹 함수 -maskName: 이름의 첫 글자만 남기고 나머지를 *로 대체합니다. -maskPhoneNumber: 전화번호의 중간 4자리를 ****로 대체합니다. -maskEmail: 이메일 주소의 사용자 부분을 마스킹합니다. -maskAddress: 주소의 첫 단어를 제외하고 나머지를 *로 대체합니다. -maskBankName: 은행 이름의 첫 글자만 남기고 나머지를 *로 대체합니다. -maskAccountNumber: 계좌 번호의 중간 8자리를 ****-****로 .. 개발이야기/자바스크립트 2024. 6. 10.

• 

  [자바스크립트] 새로고침, 새 창 막기 (키보드 이벤트) 아래 소스 코드는 키보드 이벤트를 수신하고 이벤트에서 조합된 키가 F5(새로고침), Ctrl+N, Ctrl+R인 경우 기본 동작을 취소하고 이벤트 전파를 중단한 후에 경고창을 띄우는 코드입니다. ㅇ event.ctrlKey && (event.keyCode === 78) (Ctrl + N) - 새창열기 ㅇ event.ctrlKey && (event.keyCode === 82) (Ctrl + R) - 새로고침 ㅇ event.keyCode === 116 (F5) 소스코드 Try pressing F5 (refresh) to see the alert. 개발이야기/자바스크립트 2024. 2. 15.

• 

  [자바스크립트] UTC와 KST로 날짜, 시간대 변환하기 아래 소스코드는 사용자가 웹 양식을 통해 날짜를 선택하거나, 데이터베이스에서 특정 이벤트의 날짜를 가져온다고 가정하고(inputDate) 협정 세계시(UTC), 한국 표준시(KST)로 변환하는 예제입니다. 1. 함수 1) dateFormatKST 함수 (UTC의 시간을 KST로 변경) -주어진 날짜를 한국 표준시(KST)로 변환합니다. -생성된 날짜 객체의 시간을 9시간 추가하여 한국 표준시로 변환합니다. -toISOString() 메서드를 사용하여 ISO 8601 형식의 문자열로 변환합니다. -변환된 문자열에서 "T"를 공백으로 치환하고, 10자리만 가져와서 날짜 부분만 추출합니다. 2) dateFormatUTC 함수 (KST의 시간을 UTC로 변경) -dateFormatUTC 함수는 주어진 날짜를 협.. 개발이야기/자바스크립트 2024. 2. 13.

• 

  [자바스크립트] 화면 확대 축소 하기 (이미지 확대/축소) 아래 소스코드는 확대/축소 버튼을 통해서 이미지가 확대 비율에 따라 동적으로 변경되므로, 사용자가 버튼을 클릭할 때마다 이미지의 크기가 조절됩니다. 소스코드ㅇvar nowZoom = 100; -nowZoom 변수를 선언하고 초기 값으로 100을 설정합니다. 현재 이미지의 확대 비율을 나타냅니다 ㅇfunction zoomIn() {...}; (이미지를 확대하는 함수) -nowZoom 변수를 40씩 증가시킵니다. -특정 제한을 초과하지 않도록 설정하고, 실제로 화면에 적용하기 위해 zooms 함수를 호출합니다. ㅇfunction zoomOut() {...}; (이미지를 축소하는 함수) -nowZoom 변수를 40씩 감소시킵니다. -특정 제한을 유지하고, 실제로 화면에 적용하기 위해 zooms 함수를 호출합니.. 개발이야기/자바스크립트 2023. 11. 24.

• 

  [자바스크립트] Google Charts(구글 차트) 사용법, 예제, 차트 그리기 아래 소스코드는 Google Charts를 사용하여 여러 가지 차트를 그려 보았습니다. 소스코드 -drawCharts 함수: Google Charts 라이브러리가 로드된 후 호출되며, 각각의 차트를 그리는 역할을 합니다. 함수 내에서 다양한 차트 데이터와 옵션을 설정하고 해당 차트를 그립니다. -차트 1~7번: 각각의 차트에 대한 데이터와 옵션을 설정하고, 그리기 위한 요소를 생성합니다. 차트 유형은 세로 막대그래프, 파이 차트, 라인 차트, 가로 막대그래프, 영역 차트, 스택 된 세로 막대그래프, 산점도 그래프입니다. -페이지 레이아웃: 각각의 차트를 그릴 요소를 페이지에 추가합니다. 각 요소에는 고유한 ID가 할당되며, CSS를 사용하여 이러한 요소를 페이지에 나란히 나타냅니다. 개발이야기/자바스크립트 2023. 10. 31.

• 

  [자바스크립트] C3.js chart 사용법, 예제, 차트 그리기 (막대, 선, 원, 도넛, 파이 그래프) 아래 소스코드는 C3.js 라이브러리를 사용해서 차트를 그려 보았습니다. C3.js 차트는 직관적인 API를 통해 쉽게 사용 가능하며, 다양한 차트 유형을 제공하고 오픈 소스로 무료로 사용할 수 있습니다. C3.js를 사용하기 위해서는 세 개의 CDN 링크를 HTML 페이지에 추가해야 합니다. C3.js 라이브러리, C3.js 스타일시트, 마지막으로 C3.js를 사용하려면 D3.js도 함께 로드해야 합니다. 예제 차트 막대 그래프 선 그래프 원 그래프 영역 그래프 가로 막대 그래프 산포 그래프 도넛 그래프 누적 막대 그래프 스텝 차트 분산 스플라인 그래프 파이 차트 C3 차트는 스크립트에서 각 차트에 대한 데이터 정의와 차트 생성을 수행하고 있습니다. 1. 데이터 설정 -barChartData, line.. 개발이야기/자바스크립트 2023. 10. 27.

• 

  [자바스크립트] indexOf() 활용해서 배열과 문자열 특정요소 검색하기 (사용법, 예제) indexOf 메서드는 배열과 문자열에서 특정 요소의 인덱스를 검색하는 데 사용됩니다. 이 메서드는 배열의 시작부터 끝까지 요소를 찾아 지정한 요소를 처음 발견한 인덱스를 반환합니다. 만약 배열에 해당 요소가 없다면 -1을 반환합니다. 사용법 array.indexOf(searchElement[, fromIndex]) -array: 검색을 수행할 배열, 문자열. -searchElement: 찾고자 하는 요소. -fromIndex (선택 사항): 검색을 시작할 인덱스. 이 매개변수를 지정하면 해당 인덱스부터 검색을 시작합니다. 생략하면 검색은 배열의 처음부터 시작됩니다. 활용 예제 1. 기본 사용법: indexOf 메서드를 배열에서 사용하는 기본 사용법을 보여줍니다. fruits 배열에서 'cherry'와 .. 개발이야기/자바스크립트 2023. 10. 24.

• 

  [자바스크립트] typeof 연산자 사용해서 변수와 값의 데이터 타입 확인하기 아래 소스코드는 typeof 연산자를 사용하여 변수와 값의 데이터 타입(유형)을 확인하는 예제입니다. 개발 시 유용한 코드이니 알아두시면 도움 됩니다. 사용법 typeof 피연산자 //피연산자는 데이터 유형을 확인하려는 변수나 값입니다. 반환 값 설명 undefined 피연산자가 정의되지 않았거나, 값이 할당되지 않았을 때 반환됩니다. boolean 피연산자가 불리언 데이터 유형일 때 반환됩니다. number 피연산자가 숫자 데이터 유형일 때 반환됩니다. string 피연산자가 문자열 데이터 유형일 때 반환됩니다. object 피연산자가 객체 데이터 유형일 때 반환됩니다. 이는 배열, 함수, 객체 리터럴 등을 포함합니다. function 피연산자가 함수 데이터 유형일 때 반환됩니다. 예제 typeof 연.. 개발이야기/자바스크립트 2023. 10. 12.

• 

  [자바스크립트] DOMContentLoaded와 load 이벤트 차이점 (순서, 사용법, 예제) JavaScript를 활용할 때, 두 가지 중요한 이벤트인 DOMContentLoaded와 load 이벤트가 있습니다. DOMContentLoaded와 load 이벤트는 웹 페이지가 로드되고 초기화되는 시점을 다루며, 각각 다른 시나리오와 목적에 사용됩니다. 이벤트 순서 1. 사용자가 웹 페이지에 접속 2. 브라우저가 웹 서버에 페이지 요청 후 HTML 파일을 응답으로 전송 3. DOM(Document Object Model) 트리가 구성 (HTML 파일을 받고, HTML 문서의 파싱) 4. 브라우저는 HTML 문서 내에서 외부 스타일시트, 스크립트 파일, 이미지 등의 리소스를 다운로드하기 위한 추가 요청 5. HTML 문서 파싱 및 DOM 구축이 진행되는 동안, DOMContentLoaded 이벤트가 .. 개발이야기/자바스크립트 2023. 10. 6.

• 

  [자바스크립트] e.preventDefault(), e.stopPropagation() 이벤트 제어하기 (사용법, 예제, 차이점) 아래 소스코드는 e.preventDefault(), e.stopPropagation() 메서드를 활용해서 이벤트 처리에 대한 동작을 이해하고 확인하는 예제입니다. e.preventDefault() ㅇ 이벤트의 기본 동작을 막을 때 사용됩니다. ㅇ 태그의 링크 이동을 e.preventDefault() 사용해서 이동을 막을 수 있습니다. document.querySelector('a').addEventListener('click', function(e) { e.preventDefault(); // 링크 클릭 시 기본 동작인 페이지 이동을 막음 }); e.stopPropagation() ㅇ 이벤트의 전파를 중단시킵니다. ㅇ 이벤트는 DOM 트리를 따라 상위 요소로 전파되는데, 이 메서드를 사용하면 현재 이벤트.. 개발이야기/자바스크립트 2023. 10. 5.

• 

  [자바스크립트] JSON.stringify(), JSON.parse() 사용해서 JSON 데이터 변환하기 (예제, 사용법) JavaScript에서 JSON은 데이터를 활용하기 위해서는 JSON.stringify(), JSON.parse() 함수는 꼭 알아두어야 합니다. JSON은 다양한 프로그래밍 언어에서 지원되며, 데이터 교환할때 표준적인 형식이며 구조화된 형식이여서 보안에도 안전합니다. JSON.stringify() ㅇ JavaScript 객체나 값을 JSON 문자열로 변환하는 데 사용됩니다. ㅇ JSON 데이터를 생성하고 JavaScript 객체를 문자열로 직렬화합니다. ㅇ 기본적으로는 모든 객체 속성과 값을 문자열로 변환합니다. 선택적으로 두 번째 인수를 사용하여 원하는 속성만 직렬화하거나 변환 시 공백과 들여쓰기를 제어할 수 있습니다. ㅇ JSON.stringify() 함수를 사용하여 person 객체를 JSON 형.. 개발이야기/자바스크립트 2023. 10. 4.

• 

  [자바스크립트] sort()를 활용해서 배열 정렬하기 (사용법, 예제) 아래 소스코드는 sort() 메서드를 활용해서 배열을 오름차순, 내림차순으로 정렬하는 코드입니다. 버튼 클릭 이벤트를 통해서 배열이 정렬되고 정렬된 결과가 페이지에 표시됩니다. 사용법 ㅇ sort() 메서드는 배열을 정렬하는 데 사용됩니다. ㅇ 배열의 요소를 문자열로 변환하고 이를 유니코드 코드 포인트 값에 따라 정렬합니다. ㅇ 숫자 배열을 올바르게 정렬하려면 비교 함수를 사용해야 합니다. 비교 함수는 두 개의 인수를 받고, 비교 결과에 따라 정렬 순서를 결정합니다. var numbers = [10, 5, 8, 1, 7]; numbers.sort(function(a, b) { return a - b; // 오름차순 정렬 }); ㅇ compareFunction(a, b)이 0보다 작으면 a는 b보다 작은 .. 개발이야기/자바스크립트 2023. 10. 4.