본문 바로가기

Cod-ing

(11)
[CSS] 토글 ON/OFF 버튼 만들기 어플 UI에서 많이 볼 수 있는 토글버튼을 만들어보자!See the Pen Untitled by 최예림 (@kbzqsugj-the-scripter) on CodePen. 공부내용을 기록하는 블로그입니다.피드백은 언제든지 환영합니다😊
[JavaScript] 10분마다 실행되는 함수 서버 자원을 최대한 적게 사용하며 알람을 업데이트시킬 수 있는 스크립트를 구현하라는 업무를 요청받았다. 알람은 실시간으로 업데이트되지 않아도 된다고 하여 일정한 시간 간격에 따라 업데이트된 내용을 가져오는 방식을 구현해 보았다. 로직 흐름 함수가 실행되면 현재 시간을 sessionStorage에 저장 저장된 시간과 현재 시간의 밀리초 차이가 600000 (10분) 이상일 시 알람 업데이트 알람 업데이트 시간을 sessionStorage에 갱신 function FnTimeCheck() { //현재시간 var nowDate = new Date(); //세션스토리지에 저장된 시간 var saveDate = new Date(sessionStorage.getItem("saveDate")); if (nowDate...
[CSS] page-break (after, before, inside) 속성 프린트 시 요소의 분할여부를 설정할 수 있는 css page-break-after/before/inside 속성을 알아보자! page-break-after 요소의 이후 분할 여부 page-break-after: auto; //자동 page-break-after: always; //항상분할 page-break-after: avoid; //분할하지않음 See the Pen page-break-after by yelim (@yelm) on CodePen. page-break-before 요소의 이전 분할 여부 page-break-before: auto; //자동 page-break-before: always; //항상분할 page-break-before: avoid; //분할하지않음 See the Pen pa..
[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 기본값 할당하기 변수를 선언할 때 기본값을 할당할 수 있다. 배열에 값이 없을 때 ..
[React] useState를 알아보자 리엑트를 공부하며 알게된 기능 중 useState를 정리해보자. useState는 구성요소에 상태변수를 추가할 수 있는 React Hook 이다. 일단 useState를 사용하기위해선 react의 다양한 Hook들 중 useState를 호출해주어야한다. 쉽게 말하자면 리엑트 안의 해당 기능을 내 프로젝트로 가져오는것 //useState import시키기 import { useState } from 'react'; //useState 선언 const [state, setState] = useState(initialState); JavsScript를 알고계신다면 익숙하실 구조분해할당으로 useState에 변수를 지정해주었다 👍 구조분해할당 알아보기 initialState: 초기상태값. 최초 랜더링 시 보여질..