0. FormData 객체 FormData 객체는 HTML 폼 데이터를 나타낸다. 쉽게 말하자면, 간편하게 폼을 전송할 수 있도록 해주는 객체이다. FormData를 사용하면 자바스크립트로도 HTML에서 사용하는 폼 태그를 작성할 수 있다. let emptyFormData = new FormData(); emptyFormData.append('name1', 'value1'); // 추가 : 같은 name을 가진 값이 있으면 추가하지 않음 emptyFormData.set('name2', 'value2'); // 추가 : 같은 name을 가진 값이 있으면 덮어씀 emptyFormData.delete('name1'); // 삭제 emptyFormData.get('name2'); // 조회 emptyFormDa..
AJAX 등을 사용해 폼 데이터를 보낸 뒤 성공하면 폼의 모든 내용을 빈칸으로 초기화하고 싶다. 이럴 때는 자바스크립트의 reset 함수를 사용하면 된다. reset 함수는 Form 요소를 대상으로 사용할 수 있다. 선택자를 사용해 Form 태그를 선택한 후 reset()을 사용하면 된다. 전송
Javascript의 fetch api로 요청을 보내 서버에서 보내오는 파일을 다운로드하는 기능을 구현하고자 한다. 0. fetch api로 요청 보내기 async function download(){ // 서버에 요청을 전송 const res = await fetch('/test/download'); // 파일 이름 추출 const header = await res.headers.get('content-disposition'); const fileName = await header.substring(header.indexOf('"') + 1, header.lastIndexOf('"')); // 응답 데이터를 blob 타입으로 변환 const blob = await res.blob(); // 주어진 객체..
0. async와 await $.ajax 나 fetch을 사용해 비동기 통신을 할 때 비동기라는 특성 때문에 코드가 순서대로 작동하지 않는 경우가 있다. 이런 비동기 통신을 동기적으로 즉, 순서대로 처리하기 위해 사용할 수 있는 것이 async와 await 이다. 1. 기존의 코드 async와 await를 사용하지 않는 경우를 보자. fetch를 사용해 서버와 비동기 통신을 하고 있고 그 응답 데이터 response 라는 변수에 담는다. 하지만 비동기 통신의 특성상 응답이 오기도 전에 아래의 response.text() 가 실행되어 'Uncaught TypeError : response.text is not a function' 에러가 발생한다. function submit (){ let response..
0. XMLHttpRequest XMLHttpRequest는 꽤 이전부터 비동기 통신을 위해 사용해온 객체이다. let xhr = new XMLHttpRequest(); xhr.open('post', '/test'); xhr.responseType = 'json'; xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8'); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ console.log(xhr.response); } } xhr.send(JSON.stringify({ 'testNum' : 'Test001' }) ); 1. $.ajax..
부트스트랩을 통해 사용하는 모달은 Jquery를 사용하면 .modal('show'), .modal('hide') 를 통해 간단하게 모달을 띄우고 지울 수 있다. $('#myModal').modal('show'); $('#myModal').modal('hide'); 그에 반해 바닐라 자바스크립트는 bootstrap.Modal 이라는 객체를 생성해서 조작하여야한다. (생성자의 두번째 파라미터인 중괄호 안에는 옵션을 넣을 수 있다.) let myModal = new bootstrap.Modal(document.querySelector('#myModal'), {}); myModal.show(); myModal.hide();
0. 데이터 속성 (data-*) 요소 안에 데이터를 저장하기 위한 속성이다. 1. 데이터 속성 값 가져오기 데이터 속성의 값은 요소.dataset.속성명 으로 가져올 수 있다. let target = document.querySelector('#target'); let id = target.dataset.id; let code = target.dataset.code; let value = target.dataset.value; 2. 데이터 속성 값 추가 / 수정하기 데이터 속성의 값을 추가 / 수정은 요소.dataset.속성명 = 값 을 사용하면 된다. let target = document.querySelector('#target'); target.dataset.id = 'a002'; target.d..
0. 클래스 추가 클래스의 추가는 요소.classList.add('클래스명') 으로 할 수 있다. let target = document.querySelector('#target'); target.classList.add('active'); 1. 클래스 삭제 클래스의 삭제는 요소.classList.remove('클래스명') 으로 할 수 있다. let target = document.querySelector('#target'); target.classList.remove('active'); 2. 클래스 토글 클래스의 토글은 요소에 특정 클래스가 존재하면 삭제하고 존재하지 않는다면 추가한다. 요소.classList.toggle('클래스명') 으로 할 수 있다. let target = document.quer..
