Hero Image
[Vanilla JS]Ajax 함수 모듈화

개인 프로젝트나 팀 프로젝트 할 것 없이 Ajax 를 매우 많은 곳에 사용했는데 그때마다 코드를 작성하려니 contentType 같이 외우기 까다로운 부분도 있고 코드도 길어진다고 판단하여 모듈화를 하여 사용하였다. 개인적으로 post 방식으로 json 데이터를 사용하는 경우가 많아서 기본값으로 두었고, 데이터는 “json / multipart / urlencoded” 에 대한 부분만 고려했다. 코드는 짧지만 불필요한 if 문이라던지(막상 지우려니 잘 안된다..) 깔끔해 보이지 않아서 한참이나 고민했지만 결국 만족할 만큼 다듬지 못한 것 같다. 시도해본 것 ajax 통신 이후 결과 여부에 따라 지정한 콜백함수 호출 필요한 전달인자만 입력하면 되도록 코드 'use strict'; /** * Vanilla JavaScript Ajax 함수 모듈화 * * @param {string} url - (required) 호출 할 url * @param {object} data - (optional) 전송 할 데이터 * @param {function} confirmCallback - (optional) ajax 통신 완료 후 실행 할 함수 * @param {function} cancelCallback - (optional) ajax 통신 실패 시 실행 할 함수 * @param {string} method - (optional) post / get / put .

2021년 12월 05일 Read
Hero Image
[Vanilla JS]모달 알림창 만들어보기

프로젝트를 진행하면서 알림이나 서브 컨텐츠를 alert 창이나 pop-up window를 이용하지 않고 처리하고싶은 욕심이 생겨 모달창을 공부해보았다. 시도해본 것 여러 창을 동시에 띄울 수 있어야 하고, 포커싱 된 요소가 최상단에 위치해야한다. 버튼을 눌렀을 때 예약된 함수를 불러올 수 있어야 한다. 드래그&드롭으로 이동이 가능해야한다. html, css에 별도로 구성요소를 세팅하지 않고 .js 파일 링크만으로 동작해야한다. 동작 영상 코드 'use strict'; /** * Vanilla JavaScript 모달 알림창 스크립트 * * @param {string} html - (optional) 모달창 내용 * @param {int} kind - (optional) 버튼 종류 (1: 확인, 2: 예&아니오) * @param {function} confirmCallback - (optional) 확인, 예 클릭 후 실행 함수 * @param {function} cancelCallback - (optional) 아니오 클릭 후 실행 함수 * * @example * const modalContainer = new ModalContainer(); * modalContainer.

2021년 12월 05일 Read