kasumil의 코딩 공작소

2021.12.29 - [취업/Dropzone] - [Dropzone.js] 게시글 업로드2 [Dropzone.js] 게시글 업로드2 작동 로직은 이러합니다. 1. 유저가 dropzone에 사진 드랍 후 제목, 내용 작성 2. 게시글 업로드 저장 버튼 클릭(dropzone이 보내는 이미지는 base64라서 그냥 db 저장 불가.) 3. 이미지 서버로 이미지 업로 kasumil.tistory.com 이전 글에서 보면 this가 많은데 그 아래에다 넣으면 된다. file로 직접 접근하여 dataUrl을 접근했더니 undefind가 출력되어 어떻게 접근하지 했다가, 해당 코드를 통해서 접근할 수 있었다. 이게 아니면 해당 div태그에 접근하여 src를 추출하는 방법 밖에 없음. this.on('thumbnai..

차트 유형이 여러게 있는데 이렇게도 쓰더라. function CallAPI($method, $api, $data) { $url = "http://localhost:82/slimdemo/RESTAPI/" . $api; $curl = curl_init($url); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); switch ($method) { case "GET": curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode($data)); curl_setopt($curl, CURLOPT_CUSTOMREQUEST, "GET"); break; case "POST": curl_setopt($curl, CURLOPT_POSTFIELDS, js..

작동 로직은 이러합니다. 1. 유저가 dropzone에 사진 드랍 후 제목, 내용 작성 2. 게시글 업로드 저장 버튼 클릭(dropzone이 보내는 이미지는 base64라서 그냥 db 저장 불가.) 3. 이미지 서버로 이미지 업로드 후 성공시 url 주소 가져옴. 4. url 주소를 db 서버에 보내기 +++ 이전 로직에 없던 부분이 파일 업로드 체크... 그리고 하다보니 1개를 넘어가면 기존 파일을 삭제하고 다시 업로드 되는 부분도 없어졌더라;; 해당 부분 복구 끝. Dropzone.options.fileDropzone = { url: '이미지 서버주소', //업로드할 url (ex)컨트롤러) init: function () { /* 최초 dropzone 설정시 init을 통해 호출 */ let myD..

작동 로직은 이러합니다. 1. 유저가 dropzone에 사진 드랍 후 제목, 내용 작성 2. 게시글 업로드 저장 버튼 클릭(dropzone이 보내는 이미지는 base64라서 그냥 db 저장 불가.) 3. 이미지 서버로 이미지 업로드 후 성공시 url 주소 가져옴. 4. url 주소를 db 서버에 보내기 이전에 올려놓은 라이브러리 주소 참고하도록 하시고, 스크립트 로직을 구현해 보았습니다. 다들 form데이터에 같이 보내거나 이상하게 hidden으로 넘기고 그러고 있길래, 내 경우 img 서버 주소와 db 저장 주소가 다르기도 하고 그러다보니 쪼갤 필요가 있어 그냥 고민해보다가 이렇게 만들어 봄. 특이하게도 init 안에 넣어놔야 이렇게 구동되는 방식인 듯 싶습니다. image는 그냥 이미지 서버에서 쓸 ..

events: [ "drop" "dragstart" "dragend" "dragenter" "dragover" "dragleave" "addedfile" "removedfile" "thumbnail" "error" "errormultiple" "processing" "processingmultiple" "uploadprogress" "totaluploadprogress" "sending" "sendingmultiple" "success" "successmultiple" "canceled" "canceledmultiple" "complete" "completemultiple" "reset" "maxfilesexceeded" "maxfilesreached" ] this.on('reset', function(..

html 코드 서버전송 아래 코드는 업로드 창에서 무제한(?)으로 업로드 할 수 있다. 하지만, 나는 한개만 업로드하고 기존것을 제거하는 것이 필요하여, 한개만 업로드 하는 기능을 구현하였다. 이제 문제로는 이것을 서버에 제출할때 사진도 한번에 제출하는 방식으로 가야하는데, 그것에대해서 고민해봐야겠다. -공식문서- https://www.dropzone.dev/js/ Dropzone.js Dropzone.js is an open source library that provides beautiful and easy to use drag'n'drop file uploads with image previews. www.dropzone.dev -코드 출처- https://askforyou.tistory.com/9..

기본적으로 보통 부트스트랩을 통해서 tab widget을 사용할 것이다. 그러나 만약 다른 곳과 연동하여 원격으로 위젯을 선택할 경우 이를 컨트롤 해야하는 경우가 있다. 임시로 만들어본 샘플 HTML. 하단의 UL 태그가 따로 있을 것이고 동그라미들은 순수 div로 만든 ui이다. 그러면 동그라미 클릭시 어떻게 다른 것을 컨트롤 할 수 있을까? 난 보통 trigger 이벤트나 click()인줄 알았는데, 이게 아니라 tab()명령어로 사용이 가능하다. $('#changetabbutton').click(function(e){ // e.preventDefault(); $('#mytabs a[href="#second"]').tab('show'); }) 'e.preventDefault()'의 경우에는 해당 부분..

Next.js는 이전 포스티에도 언급했듯이 라우팅을 폴더 경로에 따라서 페이징을 처리한다. 그렇다면 id값 같은 동적인 부분은 어떻게 해야할까? 바로 해당 페이지.js나 jsx의 이름을 []로 감싸는 것. /pages ㄴ index.js /news ㄴindex.js /id ㄴ[newsDetail].js 위처럼 하면 고정값이 아닌 동적 라우팅이 진행되어 id값에따라 해당 값을 호출하고 준다. 이때 Router값에 따라 해당 데이터를 호출해야하는데, 이를 어떻게 해야 하나 싶을것이다. import { useRouter } from 'next/router'; // React 내장이 아닌 Next팀이 만든 내장 hook function newsId () { const router = useRouter(); ro..

Next.js의 경우 서버사이드이다. 기존 react와 다르게 크롤링을 위해서 서버에 요청시 모든 페이지를 로딩한다. 즉 검색 기능에 노출되기 쉽다. 그리고 또한 page를 기존 React의 경우 페이징을 위해 무조건 쓰는 React router v5 기준 Switch, v6기준 Routes를 쓰지 않는다. pages ㄴindex.js // domain.com/ 과 같은 상황 ㄴnews ㄴ index.js // domain.com/news ㄴnews/id ㄴindex.js // domain.com/news/id 이러한 구조로 폴더별로 경로를 설정할 수 있어서 매우 좋다. 즉 편리하다 이말이여~ 기존에는 라이브러리를 일일히 호출하고 이를 넣어서 경로 잡아야 했는데, 그런게 없으니 ㅎㅎㅎㅎㅎ import R..

php를 쓰면 보통 php는 서버단 세션을 사용할 것이다. 왜냐면 진짜 안전하니까... 서버가 관리하니 외부 노출이 안되서 너무 좋다. 이번에는 js 라이브러리의 모듈에서 특정 값을 추출해 이를 서버로 던져줘야 해서 해당 값을 가져와야 했는데, 처음에 손쉽게 쿠키를 사용했다. 아니면 방법이 없어서.... 이게 나중에 발견된 문제였는데, 다중 접속시 쿠키값이 공유가 되어 덮어 쓰는 문제가 생겼다. 이걸 어떻게 해결하나 싶었는데, 고민하다가 front-end단의 세션스토리지가 있더라. 이름이 같아서 생각하지 못 한 부분이었다. 찾아보니 프론트엔드단의 세션스토리지도 서버의 세션처럼 한개의 탭이나 창을 열면 그때마다 새로 세션스토리지를 생성한다. 그로 인해 덮어쓰기가 진행되지 않아 모든 값을 여기로 던져버렸다 ..