익명의 개발노트

dragula를 이용한 드래그 앤 드랍 구현하기. 1. 라이브러리 설치 npm i dragula 2. 템플릿 작성 Element 1 Element 2 Element 3 Display Vue.js에서 DOM에 직접 접근하기 위하여 ref를 사용한다. 3. 스크립트 코드작성 dragula를 import하고, dragula의 첫번째 인자값은 어디에서 어디로 옮길 것인지, 그것에 대한 DOM을 넣어주면 되고, 두번째 인자값은 옵션이다. .on은 드랍했을때 이벤트 처리를 나타낸다. 없어도 무관하다. 4. 스타일 코어기능은 이러하고, 여기서 응용해서 제작하면 될 듯 싶다.

분명히 백틱을 사용해서 두 줄로 보냈는데, 화면에서는 아래와 같이 한 줄로만 나온다. 이런 경우 보내는 쪽에 을 넣어주고 받는 쪽에서 v-html로 바인딩시켜주면 해결 할 수 있다. //데이터 보내는 쪽 { title: '수정하기', message: `수정은 최초 1회만 가능합니다. 수정하시겠습니까?`, checkBtnName: '확인', flag:'modify', }, //데이터 받는 쪽 {{modalMessage}} 위의 내용을 아래와 같이 변경 //데이터 보내는 쪽 { title: '수정하기', message: `수정은 최초 1회만 가능합니다. 수정하시겠습니까?`, checkBtnName: '확인', flag:'modify', }, //데이터 받는 쪽 v-html은 XSS취약점으로 쉽게 이어질 수 ..

보여줄 공간을 정해놓고, data()의 변수인 uploadImageFile을 바인딩 시킨다. 선택한 파일과 파일내용이 존재하면 그 파일을 읽어서 this.uploadImageFile 변수에 할당한다. onFileSelected(event){ var input = event.target; if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = (e) => { this.uploadImageFile = e.target.result; } reader.readAsDataURL(input.files[0]); } },

저장된 이미지를 불러오는 방법. 프론트에서 미리보기 버튼을 클릭 => 백엔드에서 저장된 이미지 주소보냄. 아래와 같이 명시해주면 public 폴더안에 있는 폴더를 url로 보낼 수가 있다. //app.js app.use(express.static('public')); 라우터에서 url을 붙여주고 이미지 이름을 같이 넣어서 send로 보내준다. //router.js router.get('/preview', async (req, res, next)=>{ const imgUrl = "http://localhost:3000/images/" result = imgUrl+"저장된 이미지명" //imgUrl+"kitty.png" res.send(result); } 받는 쪽(프론트)에서는 HTTP통신이므로 ,결과물의 ..