본문 바로가기

Cod-ing/JavaScript

(6)
[JavaScript] 10분마다 실행되는 함수 서버 자원을 최대한 적게 사용하며 알람을 업데이트시킬 수 있는 스크립트를 구현하라는 업무를 요청받았다. 알람은 실시간으로 업데이트되지 않아도 된다고 하여 일정한 시간 간격에 따라 업데이트된 내용을 가져오는 방식을 구현해 보았다. 로직 흐름 함수가 실행되면 현재 시간을 sessionStorage에 저장 저장된 시간과 현재 시간의 밀리초 차이가 600000 (10분) 이상일 시 알람 업데이트 알람 업데이트 시간을 sessionStorage에 갱신 function FnTimeCheck() { //현재시간 var nowDate = new Date(); //세션스토리지에 저장된 시간 var saveDate = new Date(sessionStorage.getItem("saveDate")); if (nowDate...
[JavaScript] PDF다운로드 기능 구현하기 (html2pdf) 오류 해결! 지난번 html2pdf를 사용하여 PDF다운로드 기능을 만들어봤다. 그런데 파일명이 변경되지 않는 오류가 생겼는데 이유를 알게 되어 기록하기로 한다! 다양한 예제들을 찾아보니 출력할 엘리먼트를 하나의 html에 담아 해당 요소를 가져오는 방식을 사용한다는 걸 알게 되었다. `[document.querySelectorAll()]` 을 사용하면 요소들이 배열에 담겨 출력되어서 생긴 문제였다…! 오류 수정과 함께 로딩이미지 삽입과 페이지 나누기도 추가해 보았다. 📢 수정 및 추가 내용 오류 수정 다운로드 진행 중일 때 로딩이미지 삽입 페이지 나누기 👉 css page-break 보러 가기 html, css pdf 다운로드 What is Lorem Ipsum? Lorem Ipsum is simply dummy ..
[JavaScript] PDF다운로드 기능 구현하기 ( html2pdf ) html2pdf는 html2canvas 와 jsPDF를 사용하여 웹페이지나 요소를 PDF로 변환할 수 있다. html2Pdf를 활용하여 PDF 다운로드 기능을 구현해 보자! 1. 필요한 스크립트 //기본세팅 2. html과 css .page 엘리먼트를 a4용지 크기로 설정해서 총 4장의 pdf가 출력되면 된다! pdf 다운로드 1 2 3 4 3. PDF 다운로드 스크립트 function FnPDF() { const pages = document.querySelectorAll('.page'); //.page 전부 찾기 html2PDF(pages, { jsPDF: { format: 'a4',//pdf사이즈 }, html2canvas: { scrollX: 0, scrollY: -window.scrollY, /..
[JavaScript] 전개구문(Spread syntax)이란? JavaScript 전개연구문에 대해서 알아보자! 전개구문이란? 말 그대로 전개하는 것, 객체나 배열을 펼칠 수 있다. 사용법은 아주간단하다! 배열이나 객체 앞에 점세개만 붙이면 된다. 함수에 적용하기 함수의 파라미터에 전개구문을 넣으면 개수를 초과한 모든 파라미터를 가져온다. function myFunction(a, b, c, ...arg) { console.log(a, b, c); //1 2 3 console.log(arg); //[4, 5] } const arr = [1, 2, 3, 4, 5]; myFunction(...arr); // myFunction(1, 2, 3, 4, 5);와 같음. 배열 합치기 //전개구문 없이 배열을 합치려면 .concat() 사용함. var arr1 = [1, 2]; ..
[JavaScript] 구조분해할당이란? 오늘은 JavaScript의 유용한 기능인 구조분해할당을 알아보자! 구조분해할당이란? 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 구조분해 할당을 사용하면 배열이나 객체를 반복문을 통해 일일이 꺼내어 변수에 담을 필요 없이 바로 할당이 가능하다! 👍 예제 배열 구조분해할당 변수 one, two, tree에 array의 인덱스 순서대로 값이 담긴다. var array = [1, 2, 3]; var [one, two, three] = array; console.log(one); // 1 console.log(two); // 2 console.log(three); // 3 기본값 할당하기 변수를 선언할 때 기본값을 할당할 수 있다. 배열에 값이 없을 때 ..
[JavaScript] data- 속성을 이용한 그래프 바 만들기 250점 만점에 내 점수가 120점이라면 그래프에는 어떻게 표시해야할까? - 각 그래프 바 마다 해당하는 점수를 data-num 속성에 저장. 진단결과 총점: 250점 평균: 100점 내 점수: 120점 //base .width100{ width: 100%; } .width90{ width: 90% } .space_between{ display: flex; justify-content: space-between; align-items: center; } //그래프 스타일 .progress_wrap { display: flex; justify-content: space-between; align-items: center; } .progress_bar_wrap { height: 20px; border: 1p..