e7e

외부파일 드래그 앤 드롭1(File Drag and Drop)글에서  사용자 편의를 위한 확장한  드래그 앤 드롭 파일업로드 화면구현에 대해필요한 만큼은 알아 보았당.  이제 기능을 좀더 확장해 보장.조금이라도 포인트에 더 집중하기 위해서, 사용자는 이미지 파일만을 멀티로 선택해서마우스로 끌어 올 수 있고, 우린 그것을 미리보기 해주고, 체크박스를 통해 전송여부를 선택할 수 있다는 아주 제한적인 스토리로 구현해 보장! 제공기능을 피부로 느껴보기 위해 일단 전체 소스를 아래에 붙이니,복사/붙여넣기를 통해 아무 웹서버 위에서 실행시켜 먼저 동작을 확인하장! fullSample.html 외부파일 끌다노킹 이해 파일 리스트 ..

자바스크립트 2023. 12. 19. 20:37

파일업로드 구현시 클라이언트 사이드에서 input type=file 만을 사용해서 만드는 거슨 기능적으로는 문제 업스낭 시대적 흐름상 쪼메 마니 없어보인당.(ㅠㅠ) 기본적으로 사용자가 필요한 파일을 바로 마우스로 드래그 드롭할 수 있도록 해주는 거슨 이젠 기본이라 해도 과언이 아닐 꼬시당. 그럼 기본을 해보장!!!~ 항상 그렇진 않지만 역시 넘 쉽당. 말이나 글로는 쪼메 길어진당 세세하고 세세하게 알고자 한다면 아래 링크를 추천하낭 https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API 단순 파일 드래그 앤 드롭을 구현하기 위해 다 읽어야 하는 거슨 피로도가 만만치 않으닝, 요기서 필요한 것만 확인해 보장! 일단 파일 드래그 앤 드..

자바스크립트 2023. 12. 18. 16:41

웹프로그램에서 form 태그 안의 사용자 입력 태그들의 name과 value를 서버로 보낼 때 그냥 form 태그 객체의 submit 으로 보낼 때는 상관없는뎅,이것들을 AJAX로 보내야 할 때, form태그안에 사용자 입력태그(input:text 등등)가 꽤나 많다면 이것들을 일일이 접근해서 name=value&name=value 식의 쿼리스트링으로 만드는 건 여간 귀찮은 일이 아닐 것이당. (input:text만 만개가 있다고 가정해 보라!~~ 토 나오공 분명 빼먹을거당!) 이럴 때 보통 퀴리스트링으로 만들려면 jQuery의 serialize() 메소드를 사용하고, JSON 문자열 형태로 만들려면 serializeJSON() 메소드를 사용한당. jQuery는 자바스크립트로 맹글어졌기 때문에 jQuer..

자바스크립트 2023. 11. 24. 19:38

당황스럽당. 당연하게 받아들여질 수  있는 개념이, 현학적 용어와  배려없는 코드에 묻혀서어렵고 대단하고 학문적인 것으로 받아들여지는 것이........내면보단 외모가, 내용보단 형식이,  실체보다는 브랜드가, 의도파악보단  편견적 결론이...  브라우져 자바스크립트(jQuery에서동)에서 의식적 무의식적으로 많이 사용되지만,개념 이해없이 마구 사용되는 이벤트 동적바인딩에 대해  쪼메 이야기 해보장.     먼저 아래 코드를 눈으로 SSG(쓱) Top->Down으로 그냥 읽자.단순 클릭 이벤트 등록이라 버튼 누르면 alert가 실행 될 꺼이당.(오켕?) 이벤트동적바인딩1.html E7E 눌렁 위 소스에 아래 그림처럼 2번째 버튼을 하나 추가 할 꺼당.2번째 버튼을 누르면 ..

자바스크립트 2023. 11. 23. 19:42

구글등의 사이트에서 검색어를 치면, 해당하는 내용이 드롭다운 식으로 나오는 걸 볼 수 있당.! (하고 시퍼진당!~ ) 항상 그런 것은 아니지만 해보면 별거 없이 역시 쉽당. 예쁘게 하려면, 멋지려면 노력과 인내가 필요하 듯 CSS와의 한판이 필요하당. 그래서 여기선 대략 원리만 보는 거스로 만족해 보장! 아래 소스를 복사/붙여넣기 하고 실행해 보면 그대로 느낌이 온당! 느낌이 왔을 때 소스를 같이 보면, 느낌이 확신으로 이어진당. searchDropSample.html 검색텍스트 상자 원리잉 안수영,하상수,박미경,정종현,소경필 김지윤,백마리,천지훈,이주영,이제훈 서민혁,나예진,오미나,이윤,남희신 최충수,이광일,언년이,강산군,초랭이 금수,김선복,한모네,금라희,매튜리 난 아래와 같은 결과를 얻었당. 멜로물은..

자바스크립트 2023. 11. 6. 17:32

cdnjs 에서 gridstack으로 최신 버젼 검색 추천 문서가 엉터리란 나의 생각은 3시간 뒤 나의 오타가 일으킨 불발탄임을 알았당. 일단 gridStack 1개짜리 기본 샘플을 보장! gridBasicSample.html 휴지통 컴팩트 실행 결과와 코드를 매칭시켜 느낌을 받도록 해야 함! (오타만 없으면 느낌 쫘악 옴!) 그리도 여러개 사용할 때 봐 둬야 할 코드 let grids = GridStack.initAll(options); GridStack.setupDragIn('.sidebar .grid-stack-item', { appendTo: 'body', helper: myClone }); grids.forEach(function (grid, i) { grid.load(items); }); //..

자바스크립트 2023. 9. 8. 08:28

풀캘린더가 어느새 버젼이 6으로 올랐당. 이전 버젼들은 쪼메씩 문제가 있었는뎅, 잘 되나 해보닝 대략 일단 잘된당. 홈페이지는 아래 링크당. 무료와 유료로 나뉜당. https://fullcalendar.io/docs/getting-started 유료부분이 있다보닝 역시 문서가 꽤 잘 되어있당. 사용법은 어렵지 않으낭, 모달창 부분을 잘 활용하지 못하는 것 같아서 못 생기긴 했지만 모달 창 부분을 더해서 충분히 활용가능한 샘플 소스를 맹글었당. 누네 힘줘서 한번만 해본다면 더 이상 헤메지 않아도 될거시당. 공통일정을 담은 연습용 데이터 파일 commonEvents.json [ { "id": "common001", "title": "추석", "start": "2023-09-28", "end":"2023-10..

자바스크립트 2023. 9. 6. 18:33

인터넷이 일반에 확산되던 꽤나 오래 오래 전 과거에는 웹 프로그램에서 자바스크립트가 담당하는 영역은 대부분 Validation(유효성) 체크 부분이었고, DHTML(Dynamic HTML)이라고 해서 화면에 재미난 움직임을 조금 넣는 정도 였기 때문에 그 코드 양이 얼마 되지 않았당. 하지만 지금은 어떤가?, CSR(Client Side Rendering)이란 말이 나올 정도로 브라우져(Client)에서 하는 일이 많아지다 못해 서버에서 하던 비지니스 로직까지도 자바스크립트로 하는 상황이 되었당. 곧 자바스크립트 코드 양이 장난 아니게 늘었단 이야기당. 거기에 Node의 등장!, React, Angular, Vue 등등등........ 이제 더 이상 자바스크립트는 작은 언어가 아닌게 되었당. 마니도 컸당..

자바스크립트 2023. 9. 6. 08:40