라이브러리 소개 날짜를 표시할때 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 이벤트 내용을 이렇게 바..

revert, reset 뭘 써야할까 revert 커밋 기록을 모두 유지한채, 해당 커밋에 작업했던 내용으로 돌아간다 reset revert처럼 돌아가는것까진 똑같다 하지만, 돌아가게될 곳부터 오늘까지했던 모든 커밋 기록이 사라져버린다.. 혼자 작업하는게 아니라면, revert 를 사용해주는것이 좋다 .. ! revert (추천) # 커밋했던 내용중, 되돌리고싶은 커밋의 ID를 입력 # 예시) git revert 63f1507 git revert [commit ID] reset git reset --hard [commit ID] revert 와 마찬가지로, 해당 커밋을 남겼을때 당시의 파일 상태로 돌아갈 수 있다. but, 해당 커밋 이후에 존재하던 기록들은 모 -두 지워지게된다. 따라서, 다음과 같은 ..

소개 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 민우의 코딩일지