FrontEnd/JavaScript(10)
-
[vue,javascript]input image file 올릴 시 preview 띄우기
게시판에 글 등록시 image 파일을 올리면 preview가 즉시 띄워지도록 구현해야함 data() { return { notice: {} } }, methods: { readImg(file) { const files = $(`#${file}`)[0].files[0]; const reader = new FileReader(); reader.readAsDataURL(files); reader.onload = (event) => { if (file == 'banner_img') { this.notice.Banner = event.target.result; } else if (file == 'thumbnail_img') { this.notice.ThumbnailPath = event.target.result;..
2023.08.08 -
Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob’
input을 통해 이미지 업로드시, 이미지 선택 후 취소 버튼을 눌렀더니 이런 에러가 났다. FileReader,readAsDataURL()로 이미지 실시간 반영해주고 나서 생긴 이슈였다 e.target.file으로 확인해보니 이미지 선택 시 file의 length가 1 취소 시 0으로 나오는 것을 확인하여 file의 length가 0일때는 return, 0이 아닐 때는 file을 불러오는 것으로 조건을 걸어주었음! const handleImage() => { const file = e.target.files; if (file.length === 0) { // file이 선택되지 않았을 때. return; } else { // file 이 선택 되었을 때 ...img 불러오는 식 } };
2023.08.08 -
[vue, javascript] 숫자(금액)에 comma 추가하기
전 글에서 구해준 총 합계에 세자리수마다 comma를 찍어주려고 함 comma는 숫자에 toLocaleString()을 붙여주면 된다 합산:₩{{ totalAmount.toLocaleString() }} 그럼 이렇게 세자리수마다 comma가 찍혀서 출력됨ㅎㅎ
2023.08.08 -
[vue, javascript] array 속 item들의 총 합계 구하기
product list 안의 item들의 총 합계를 구하려고 한다. vue를 사용하여 작업하였고 methods 안에서 getItems로 배열을 불러온 상태. computed에서 총합계를 구하려고 함 data(){ return { items: [] } }, computed: { totalAmount: function () { this.itemTotal = this.items.map(function(item) { return item.salesAmount * item.itemPrice; }); this.sum = 0; this.itemTotal.forEach(n=> { this.sum += n; }) return this.sum; } }, methods: { getItems() { fetch(api) .th..
2023.08.08 -
ResizeObserver로 resize 변화 감지하기
canvas로 만든 게임을 띄워야하는데 canvas가 16:9의 비율을 가지고 있어 여러 디바이스에서 canvas가 잘리는 현상이 발생함 때문에 어느 디바이스에서도 canvas가 16:9로 유지될 수 있도록 window 사이즈를 조정하려고 한다! 그러기 위해 resizeObserver를 이용하여 body가 resize 되는 것을 감지하여 canvas 크기를 조정하려함 const body = document.querySelector('body'); const canvas = document.querySelector("canvas"); if(e.data.functionName == 'setWindowSize') { const windowResize = new ResizeObserver((entries) =>..
2023.08.08 -
[javascript] 쿠키에서 값 가져오기
api를 get해올 때 header에 Authorization 값으로 token을 넣어주어야 했다 token은 cookie에 담겨져 있어 cookie에서 token 값을 가져오려고 함! function getCookie() { var cookieValue = null; } 먼저 getCookie 함수를 만들어주고 cookieValue 변수를 만들어주는데 알 수 없는 값이기 때문에 null로 선언해준다. function getCookie() { var cookieValue = null; if (document.cookie) { var array = document.cookie.split(encodeURI("token") + "="); } return cookieValue; } 그 다음 cookie에 값이 ..
2023.07.07