Front-end(183)
-
[Vue] 파일업로드 사이즈 / 용량 체크
1. 사이즈 용량 체크 isValid() { // HTML에서 파일 업로드 input을 가져옵니다. const fileInput = this.$refs.fileInput // 파일 객체를 가져옵니다. const file = fileInput.files[0] // 파일의 크기를 체크합니다. if (file.size > 500 * 1024) { // 파일 크기가 500KB를 넘는 경우 처리합니다. alert('이미지 파일의 크기는 최대 500KB 이하이어야 합니다.'); fileInput.value = ''; } } 2. 유효한 사이즈의 파일만 업로드시키기 multiCapture() { // HTML에서 파일 업로드 input을 가져옵니다. const fileInput = this.$refs.fileInpu..
2023.06.14 -
[Vue] binary 로 변환하는 작업
file로 업로드한 파일과, 캡쳐한 3가지 이미지를 binary 형태로 서버에 보내는 작업 multiCapture() { // 파일 선택한 input 엘리먼트 const fileInput = this.$refs.mainImageFile; // 파일을 Blob 형식으로 변환하는 함수 const convertFileToBlob = (file) => { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onloadend = () => { const blob = new Blob([reader.result], { type: file.type }); resolve(blob); }; reader.onerror = reje..
2023.06.13 -
useReducer
1. 추가 // App.js import './App.css'; import {useReducer, useState} from "react"; import Student from "./Student"; const reducer = (state, action) => { switch (action.type) { case 'add-student': const newStudent = { id: Date.now(), name: action.payload.name, isHere: false } return { count: state.count + 1, students: [...state.students, newStudent] } case 'delete-student' : { return } default: retu..
2023.03.24 -
[Vue] router guard
보호되어 있는 글입니다.
2023.02.24 -
[Vue] vuex-persistedstate
보호되어 있는 글입니다.
2023.02.20 -
[Vue] input[file] 파일 업로드 미리보기
보호되어 있는 글입니다.
2023.02.10 -
[Vue] select 2단
보호되어 있는 글입니다.
2023.02.07 -
[Vue] RangeError: Maximum call stack size
갑자기 컴포넌트를 import 시키는데 error가 나타나는것이다! 컴포넌트 import할 때 error 난적이 없었는데 하다가 stackoverflow에서 역시나 해답을 찾았다. Vue.js "Maximum call stack size exceeded" error. Passing data from parent to child failing I cannot pass data from parent to child. I am using props, have tried returning data as well - no luck. I have a panel component (which is parent) with data and panelBody component (child) Panel i... stacko..
2023.01.26 -
[JS-GSAP] motion path 모션 패스
Path로 어떻게 만드는지 알려주세요. ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ MotionPathPlugin Animate anything (SVG, DOM, canvas, generic objects, whatever) along a motion path in any browser. Define the path using an SVG or an Array of points. The magical "align" feature bends coordinate systems and really sets it apart. You can even edit t greensock.com Animate SVG Object Along Motion Path Using the standard anima..
2023.01.17 -
[JS-GSAP] toggleActions (ex카카오뱅크)
1. toggleActions 카카오뱅크 카카오뱅크 이용안내, 상담하기, 소비자보호, 증명서발급, 회사소개, 인재채용, (주)카카오뱅크 www.kakaobank.com 카뱅을 모티브로 토글액션 구현해보기 재밌군
2023.01.13 -
[JS-GSAP] scrollTrigger
1. scrollTrigger 내 화면은 사이트 헤더 쪽에 있는데 푸터 쪽에서 애니메이션이 실행되는 사태를 막아야 한다. 그렇기 때문에 ScrollTrigger가 중요하다. 뒤로가기 했을 때도 보여주세요! 라고 하면 toggleActions: 'play none reverse none' 으로 적는다. 스크롤 올리면 뒤로갔다가 다시 내리면 play된다 onEnter : 시작하면 play 해라 onLeave : 떠나면 pause 멈춰라 onEnterBack: 스크롤 위로 잠깐 올리면 reverse 뒤로가라 onLeaveBack : 스크롤 계속해서 위로 올라가면 none (default 값) 앞의 reverse의 말을 듣게됨 참고
2023.01.13 -
[JS-GSAP] stagger
1. stagger stagger는 첫 번째 인자로, 애니메이션을 실행할 list 를 받고, 그 list에 있는 element 들에 차례로 애니메이션을 실행 시켜준다. 2. 속성 // 끝에서 0.5초 간격으로내려온다 gsap.to('.cont', {duration:1, y: 100, stagger: {each: 0.5, from: 'end'}}) // 끝에서 2초동안 4개의 cont가 순차적으로 내려온다. gsap.to('.cont', {duration:1, y: 100, stagger: {amount: 2, from: 'end'}}) each : 1 target인 box1들이 각각 1초동안 animate amount:1 target인 box1들이 1초를 box1의 수만큼 나누어 animate from ..
2023.01.13 -
[Vue] 프로젝트 배포
보호되어 있는 글입니다.
2023.01.11 -
[Vue] drag
보호되어 있는 글입니다.
2023.01.04 -
[Vue] 팝업창 오늘 그만 보기
보호되어 있는 글입니다.
2023.01.04