라이브러리 소개 여러가지 다양한 아이콘을 간단하게 표시할 수 있다. 무료 버전인 Free, 유료 버전인 Pro가 있는데 그중에서 무료 버전으로 정리해보았다. * 라이선스 정보 : MIT https://github.com/FortAwesome/vue-fontawesome?tab=MIT-1-ov-file#readme GitHub - FortAwesome/vue-fontawesome: Font Awesome Vue component Font Awesome Vue component. Contribute to FortAwesome/vue-fontawesome development by creating an account on GitHub. github.com 라이브러리 사용 라이브러리 설치 복사후 터미널에서 Sh..

예제 보기 코드 내용 {{ data.title }} {{ ` ${dayjs(data.startDate).format('YYYY/MM/DD HH:mm')} ~ ${dayjs(data.endDate).format('YYYY/MM/DD HH:mm')} -> ${Math.floor(getCalcProgress(data.startDate, data.endDate))}% ` }} 코드 설명 서버로부터 시작일과 종료일이 각 varchar(8)인 데이터 목록을 받아왔다는 가정을 했다. 해당 목록을 반복문으로 보여줄때 dayjs 라이브러리를 이용해 진행률이 나올 수 있도록 함수를 작성했다 ✍ 리턴할때 Math 객체의 max, min 함수를 이용해서 리턴되는 값은 0 미만이거나, 100이 초과될 수 없도록해주었고 해당 함..

라이브러리 소개 날짜를 표시할때 Date 객체를 생성하고, 잘라내고 .. 번거로운 과정을 생략할 수 있다. 간단한 사용방법으로 업무의 효율성을 높여주는 아주 훌륭한 라이브러리 👍 라이브러리 사용 day.js 설치하기 Node.js npm install dayjs # 혹은 yarn add dayjs # 혹은 pnpm add dayjs 위 방식 대신, CDN 방식을 이용할 수도 있다. 취향껏 사용해주자 CDN 예시 및 설명 기본적인 사용 방법 ( With. 한국어 설정 ) dayjs()를 이용해서 오늘 표시 해보기 {{ dayjs() }} dayjs().format() 함수로 포맷 형식 커스텀 가능 ! {{ dayjs().format('YYYY - MM - DD') }} {{ dayjs().format('Y..

예제 보기 생소한 용어 FileReader, Base64 코드 내용 파일 첨부 미리보기 코드 설명 핵심 FileReader 객체의 readAsDataURL() 라는 함수에 매개 변수로 파일 객체를 넘겨서 업로드된 파일 객체의 정보를 Base64로 재작성(인코딩)하고, 해당 정보를 이미지 태그 src 속성에 넣어주면 끝 ! FileReader 이름에서 유추할 수 있듯이 파일을 읽는 역할을 해서 FileReader라는 이름이 붙었다. 주로 업로드된 이미지 파일 미리보기용도로 간단하게 쓸 때 유용하다 👍 업로드하려는 이미지의 내용을 Base64 방식으로 재작성(인코딩)해서, src 속성에 넣으면 이미지가 나온다 ! FileReader 진행 단계에 대한 훅(Hook) 기능들 onLoad 이벤트 내용을 이렇게 바..

소개 new Date() 함수를 사용하면 현재 시간 정보를 얻거나, 날짜 형식으로 변경할 수 있다. 이를 이용해서 시작일과 종료일을 기준으로, 현재 진행률(%)를 구하는 js 파일을 작성해보았다 🐣 시/분/초 단위로 %를 구하고, 100%를 넘어가지않도록했다. 예시 👀 체험 해보기 Vue SFC Playground play.vuejs.org 코드 DispalyProgress.js const separator = "-" // ★ 매개변수는 총 2개 (시작일과 종료일)이 필요 // ★ 매개변수는 문자열 타입 // ★ 연/월/일 구분은 separator 변수 값과 일치해주기 ex-> 2023/01/01(x) 2023-01-01(o) function getPercentToPeriod(startDate, endD..