form HTML5이후로 action을 작성하지 않아도 된다. GET 방식과 POST방식이 있다. ==================== input : file form에 enctype : multipart/form-data 를 무조건 추가. => form의 method = 무조건 post. => contents 를 주소로 보낼 수 없음 HTMLInputElement.files 속성은 선택한 파일(File) 목록을 FileList 객체로 반환합니다. FileList는 배열처럼 행동하므로, length 속성을 사용해 현재 선택한 파일의 수를 알 수 있습니다. name 파일 이름. lastModified 파일을 마지막으로 수정한 시각을 나타내는 숫자. UNIX 표준시(1970년 1월 1일 자정)으로부터 지난 ..

FrontEnd/JavaScript 2021. 11. 1. 17:58

How to Drag&Drop File Upload 파일을 이곳에 끌어다 놓아주세요 submit

FrontEnd/JavaScript 2021. 11. 1. 17:57

안녕하세요 상훈입니다. Vue.js 3, Tailwind.css 를 설치하여 프로젝트를 npm run serve 를 통해 실행하였는데 에러가 발생하였습니다. ERROR Failed to compile with 1 error 오후 6:00:02 error in ./src/index.css Syntax Error: Error: Loading PostCSS Plugin failed: Cannot find module 'tailwindcss' Require stack: - D:\Projects\loading-view\noop.js (@D:\Projects\loading-view\postcss.config.js) at Array.map () @ ./src/index.css 4:14-157 15:3-20:5 16:..

FrontEnd/Vue.js 2021. 10. 31. 18:09

안녕하세요 상훈입니다. Javascript의 Promise에 대해 알아보겠습니다. 내용은 해당 영상을 참고하였습니다. Promise 는 async 까지 연결되어 사용하는 내용도 가능합니다. 하지만 이번에는 성공, then() 까지만 확인하도록 하겠습니다. 예시) 일반적인 함수 사용하기. 기본적으로 delay라는 함수가 있을 때, 인자로 sec와 callback을 받습니다. 함수 내부에는 setTimeout을 이용하여 sec초 뒤에 callback을 출력하는 함수입니다. (시간을 띄울거예요!) function delay(sec, callback) { setTimeout(() => { callback (new Date().toISOString()) }, sec * 1000) } delay(1, (result..

FrontEnd/JavaScript 2021. 10. 28. 22:10

안녕하세요 상훈입니다. Vue cli 3 를 유튜브로 클론코딩 하였습니다. 해당 강의 링크 및 영상 위는 해당하는 강의 내용입니다. Vue.js 버전은 3.2.20 이고, Vue/cli는 4.~ 입니다. style은 tailwind.css를 사용하였고, 추가된 라이브러리는 moment.js 로, datetime을 출력할 수 있는 자바스크립트 라이브러리입니다. 일단 결과적으로 문제가 한 개 있었는데 고치지 못하였습니다. ㅎㅎ;; moment.js 관련해서 인 것같은데 어떻게 해야할지 모르겠더군요. => 원작 개발자님의 소스를 보아도 아예 포맷이 달라, 결론을 얻어내지 못하였습니다. 발생한 에러는 dataDate(현재시각)관련해서의 에러인데... 타입에러가 발생하였고, 프로퍼티가 선언되지 않았다고 합니다. ..

FrontEnd/Vue.js 2021. 10. 28. 21:20

안녕하세요 상훈입니다. 우리의 WebApplication을 조금이라도 더 예쁘게 꾸며줄 css - transition을 포스팅하겠습니다. 그 중 hover의 이벤트를 사용하려고 합니다. html에서는 클래스명만 정해주시면 됩니다. width, height, bg-color, transform 을 위한 트랜지션 결합. 클래스명 "transform"에 대해서 아래의 style을 지정해주면 됩니다. rotate를 보시면 아시다시피 transition 과 transform으로 지정한 내용을 살펴보면, 2초동안 [ 가로 200px, 세로 200px, 배경색 #FFCCCC, 180도 회전 ] 을 하게됩니다. 이상입니다. 해당 내용은 전부 'MDN WebDocs' 에 작성되어져 있습니다. CSS 트랜지션 사용하기 -..

FrontEnd/css 2021. 10. 26. 13:48

안녕하세요 상훈입니다. Vue.js + tailwind.css 를 이용하여 모달창을 구현하도록 하겠습니다. 컴포넌트의 개념을 첨가하였으니, 양해바랍니다. (컴포넌트 넣을줄만 알면 됨) 모달창 레이아웃 안녕하십니까? 모달창입니다. 닫기 v-if 와 @click 바인딩으로 해당 기능을 구현하였습니다. ModalDisplay를 기본값으로 true로 해서 자동적으로 출력되어져있게 해놓고, 닫기 버튼이나, X버튼을 눌렀을 때 종료가 되게 하는 겁니다. svg를 button으로 감싸서 button으로 바꾸는게 용도에 맞아 좋아보입니다. 혹시나해서 App.vue 도 게시

FrontEnd/Vue.js 2021. 10. 20. 18:02

안녕하세요 상훈입니다. 이 글을 PHP에 올려야할지 javascript에 올려야할지 고민을 1초 정도 했고 자바스크립트 기반이기 때문에 자바스크립트에 게시하게 되었습니다. 해당 과정은 [ select-box의 한 항목을 선택하면, 그 아래의 select-box가 활성화되면서 해당되는 리스트를 출력 ] 합니다. Ajax로 php에 호출을 하면, php의 데이터베이스에서 데이터를 출력하여 배열에 담고, 담은 배열을 json endcode하여 출력하는 값을 json 형식으로 받아, 파싱하여 출력하는 것입니다. 1. javascript(ajax) (제이쿼리 필요합니다! [ cdn 링크 ] ) 2. php [ jQuery ] jQuery 제이쿼리 CDN 링크 공유 안녕하세요 상훈입니다. 자바스크립트 - 제이쿼리의..

FrontEnd/JavaScript 2021. 10. 20. 11:43