JavaScript 검색 결과
6 개의 검색 결과가 있습니다.
JavaScript

[vue draggable] CDN으로 table draggable 드래그앤드랍 구현

리스트에서 드래그앤드랍을 구현하기 위해서 vue의 draggable 라이브러리를 사용하기로 결정하였다. webpack방식이 아닌 cdn방식으로 구현하였으며, vue 버전은 3.2.31 의 vue.global.js 를 사용하였다. 또한 draggable 구현을 위해 sortable과 vue-draggable-next를 사용하였다. 막상 구현하고 보니 매우 간단하였다. 아래 코드를 참고. 1. 스크립트 추가 2. 컴포넌트 마운트 const app = Vue.createApp(displayApp); app.component("draggable", VueDraggableNext["VueDraggableNext"]); app.mount("#displayApp"); 3. draggable 구현 {{ item.dis..

2022. 11. 14. 13:13
JavaScript

무료 웹 에디터 추천 - TOAST UI 기본 세팅 (Wysiwyg 에디터)

Wysiwyg 에디터 중 하나인 토스트UI(TOAST UI) 에디터를 선택하여 신규 프로젝트를 진행하게 되었습니다. TOAST UI Editor는 NHN에서 개발한 오픈소스이며, 마크다운과 위지윅 방식을 지원하는 에디터입니다. CKeditor와 Summernote를 고민하던 중 TOAST UI Editor를 선택했습니다. 이제 TOAST UI를 세팅하는 방법을 알아보도록 하겠습니다. 쉽게 세팅할 수 있었습니다. 1. CDN 추가 2. TOAST UI 기본 세팅 const Editor = toastui.Editor; const editor = new Editor({ el: document.querySelector('#editor'), height: '600px', initialEditType: 'markd..

2022. 4. 24. 11:59
JavaScript

cross origin iframe - alert(), confirm(), promt()함수 호출 불가 이슈

■ 크롬/엣지 이슈사항 - iframe을 사용하는 경우 alert(), confirm(), promt()함수 호출 불가 Remove alert(), confirm(), and prompt for cross origin iframes - Chrome Platform Status Motivation The current UI for JS dialogs (in general, not just for the cross-origin subframe case) is confusing, because the message looks like the browser’s own UI. This has led to spoofs (particularly with window.prompt) where sites pretend ..

2021. 7. 28. 17:22
JavaScript

페이지 스크롤 위치 이동, div의 스크롤 위치 이동

직전 페이지의 스크롤로 이동해야 하거나, div의 스크르롤로 이동해야 하는 경우가 있다. 이전 화면의 스크롤을 유지하기 위해서다. 그럴려면 먼저 직전 화면의 스크롤 위치를 Cookie, sessionStorage, localStorage 등등에 저장한 후 이전 페이지가 로딩 될 때 세팅해주면 된다. //페이지 스크롤 이동 var scrollPosition = getCookie("scrollPosition"); //sessionStorage, localStorage 등등 사용 가능 if (scrollPosition != "" && scrollPosition != 'undefined') { window.scroll(0, scrollPosition); }; // body.scrollTop(scrollPosit..

2021. 5. 3. 18:05
JavaScript

[AJAX] 동기(sync) 방식으로 사용하는 방법

AJAX 동기(sync) 방식으로 사용하는 방법Ajax 는 Asynchronous Javascript And XML 의 줄임말로 기본적으로 비동기 방식입니다.클라이언트와 서버측의 데이터 전송 과 처리를 비동기로 처리합니다. 비동기로 처리하기 때문에 데이터 처리와 전송을 하는 동안 다른 동작을 수행할 수 있고, 불필요한 로딩을 줄이고 자유로운 페이지 구성이 가능해집니다. 하지만 무조건 비동기방식으로 동작하지 말아야 할 때가 있습니다.예를 한번 들어볼까요? $.ajax({ type: 'POST', url: 'test.do/work', data: "worktype=1", success: function(data) { if(data != null) { // Do somothing when data is not ..

2020. 3. 25. 07:30
JavaScript

Date 객체

:Date 객체 getDate() 일자 반환(1~31) gerDay() 요일 반환 (0~6) getFullYear 4자리 년도 반환 getHours() 시간 반환(0~23) getMilliseconds() 밀리세컨드 반환(0~999) getMinutes() 분 반환(0~59) getMonth() 월 반환(0~11) getSeconds() 초 반환(0~59) new Date() 새로운 날짜 객체 생성 set날짜함수() 날짜 데이터의 원하는 형식만 다른 값으로 교체

2015. 10. 27. 00:02