라이브러리 소개 날짜를 표시할때 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..

소개 window.innerHeight 를 사용하면 현재 브라우저의 높이를 알 수 있다. 그리고, window event중에서 resize를 함께사용한다면 브라우저 높이가 바뀔때마다 변경된 높이 값을 얻을 수 있다. 이를 활용해서 현재 브라우저 높이에서 원하는 %만큼만 반환하는 함수를 만들어서 가져다 쓸 수 있게끔 코드를 작성해보았다 🐣 예를들어 현재 높이가 100인데, 그중에서 10%만 원한다면 ? 값을 구하는 방법은, 10을 100으로 나누고, 현재 높이에 곱해주면 된다. 그럼 100 * ( 10 / 100 ) 에서 100 * 0.1 으로 계산하는것과 같으니까, 원하는 결과인 10을 얻을 수 있게된다 ..! 예시 👀 체험 해보기 Vue SFC Playground play.vuejs.org 민우의 코딩일지

OptionsAPI와 차이점 📌 기존 OptionsAPI를 이용해서 자식 컴포넌트의 메소드를 호출하는 방법은 " 더보기 " 를 눌러보자 : ) 더보기 ex) 부모 컴포넌트에서 ex) 자식 컴포넌트에서 공통점 접근하고 싶은 컴포넌트 태그에 ref 속성을 사용한다. 차이점 스크립트 태그에서 this.$refs.ref속성값 대신 ref()함수로 선언된 변수명을 자식 컴포넌트의 ref 속성값으로 사용해야하고, *. 따라서 ref 속성값에 사용될 변수가 필요하다. 그리고, 자식 컴포넌트에서 defineExpose({ })를 사용해야한다. 사용 예시 부모 컴포넌트 자식 컴포넌트