문자열을 BLOB 타입으로 만든 후 그 크기를 구하는 방식으로 문자열의 바이트 크기를 구할 수 있다. 영문자의 경우 한 글자에 1바이트, 한글의 경우 한 글자에 3바이트를 사용한다. const byteSize = str => new Blob([str]).size; console.log(byteSize('hello')); // 5 console.log(byteSize('안녕')); // 6
0. fetch의 response fetch()를 사용해 서버와 통신에 성공하면 그에 맞는 응답을 받게 된다. 다만 내가 처리하고자하는 데이터에서는 데이터가 없는 경우 null이 반환되는데 이 때문에 'SyntaxError: Unexpected end of JSON input' 에러가 발생하였다. fetch('/test') .then(res => { if(!res.ok) throw new Error(); return res.json(); }) .then(jsonData => { console.log(jsonData); }) .catch(() => { alert('에러가 발생했습니다.'); }) 만약 응답으로 들어오는 데이터가 null일 경우 text()를 사용해 문자열로 변환할 경우 빈 문자열이 반환된다..
toISOString()은 Date를 yyyy-mm-ddThh:mm:ss 형식의 문자열로 반환한다. 하지만 toISOString()은 9시간 전 시간을 출력하는데 이는 함수가 사용하는 시간대가 UTC+0이기 때문이다. 한국은 UTC+9이기 때문에 시차가 발생하게 된다. 이를 해결하기 위해서 getTimezoneOffset()을 사용하여 Date의 시간을 맞추어주어야한다. getTimezoneOffset()은 UTC와 LocalZone의 시간차를 계산해준다. 한국의 경우 UTC+9이기 때문에 -540(분 단위)이 반환된다. new Date()의 생성자 파라미터에는 ms 단위로 넘겨주어야하므로 60000을 곱하여 ms 단위로 만들어준 뒤 현재 시간과 계산해 한국 시간을 구하면 된다. let date = ne..
0. Object.entries() entries() 함수는 자바스크립트의 객체를 배열로 변환해준다. 이 배열에는 프로퍼티의 ['key', 'value'] 배열이 프로퍼티의 수만큼 포함되어있다. let data = { name : 'test', age : '27', job : 'programmer' } console.log(Object.entries(data)); // [Array(2), Array(2), Array(2)] // 0: ['name', 'test'] // 1: ['age', '27'] // 2: ['job', 'programmer'] 1. key와 value 사이에 '=' 넣기 Object.entries()로 객체를 배열로 변경했으니 이번에는 key와 value 사이에 '='을 넣어줄 차례..
0. jQuery의 $.ajax() jQuery에서 제공하는 $.ajax()를 사용하면 기존의 XMLHttpRequest보다 비교적 편리하게 AJAX를 사용할 수 있다. $.ajax({ url: '요청 URL', type: '요청 방식', data: '요청 데이터', dataType: '요청 후 return하는 데이터의 타입', async: '동기/비동기', timeout: '요청 후 제한시간', beforeSend: '요청 전 발생하는 이벤트 핸들러', success: '요청 성공 시 이벤트 핸들러', error: '요청 실패 시 이벤트 핸들러', complete: '요청 완료 시 이벤트 핸들러' }); 1. get 요청 $.ajax()를 사용해 get 요청을 경우 type을 'get'으로 설정하면 된..
0. 클래스 추가 해당 요소에 'className' 이라는 클래스를 추가한다. $('#target').addClass('className'); 1. 클래스 삭제 해당 요소에서 'className' 이라는 클래스를 삭제한다. 일치하는 이름의 클래스가 없을 경우 무시된다. $('#target').removeClass('className'); 2. 클래스 토글 해당 요소에 'className' 이라는 클래스가 없을 경우 추가하고 클래스가 이미 존재할 경우 삭제한다. $('#target').toggleClass('className'); 3. 클래스 확인 해당 요소에 'className' 이라는 클래스가 존재하는지 확인한다. 존재할 경우 true, 존재하지 않을 경우 false를 반환한다. $('#target')..
JQuery를 사용하여 checkbox 등에 checked 속성을 적용/해제하기 위해서는 prop() 함수를 사용해야 한다. $('#targetCheckBox').prop('checked', true); // 체크박스 체크 적용 $('#targetCheckBox').prop('checked', false); // 체크박스 체크 해제
JQuery를 사용해 disabled 속성을 적용/해제하기 위해서는 attr() 함수를 사용해야 한다. $('#targetInput').attr('disabled', true); // disabled 적용 $('#targetInput').attr('disabled', false); // disabled 해제
