본문 바로가기

JavaScript

 (36)
[#. Base64 ] atob(), btoa() Base64 인코딩과 디코딩 베이스64 Base 64 (베이스 육십사)란 64진법 데이터로 8비트 이진 데이터(예를 들어 실행 파일이나, ZIP 파일 등)를 문자 코드에 영향을 받지 않는 공통 ASCII 영역의 문자들로만 이루어진 일련의 문자열로 바꾸는 인코딩 방식을 가리킨다 Base64는 데이터가 전송 중에 수정되지 않고 그대로 전송되는 것을 보장한다 자바스크립트에서 문자열을 base64로 인코드하려면 window 객체(전역 객체) 의 btoa 메소드를 사용하면 되고, base64 로 인코드된 문자열을 디코드하려면 window 객체의 atob 메소드를 이용하면 된다 btoa => 인코딩 atob => 디코딩 var str = "Javascript is Language"; var encodingStr = window.btoa(str..
[#. JavaScript] 초성, 중성, 종성 구하기 / 앞 단어에 따라 은, 는, 이, 가 조사 붙이기 앞에 오는 단어에 따라 은, 는, 이, 가를 붙이도록 하고 싶다 한글은 초성, 중성, 종성으로 이루어져 있다 초성: 19자 (ㄱ, ㄲ, ㄴ, ㄷ...) 중성: 21자 (ㅏ, ㅐ, ㅑ, ㅒ...) 종성: 28자 (ㄱ, ㄲ, ㄳ, ㄴ...) 19x21x28 = 11172 55203-44032+1=11172 유니코드에서 한글은 10진수로 44032 ~ 55203 까지다 charCodeAt() 메서드는 주어진 인덱스에 대한 UTF-16 코드를 나타내는 0부터 65535 사이의 정수를 반환한다 '가'.charCodeAt(0);// 44032 가는 44032, 각은 44033이다 가에 종성을 다 붙이고 나면 개에 종성을 붙이는 순서로 이어진다 초성 얻기 unicode 정수값을 uni라고 했을 때 parseInt(..
[#. JavaScript] 일수 계산하기 2022-01-01부터 2022-01-04일까지 4일이라는 일수를 구하고 싶다 혹은 오늘부터 2022-01-05일까지의 일수를 구하고 싶다 // 2022-01-01부터 2022-01-04까지 일수 let d1 = new Date('2022-01-01'); let d2 = new Date('2022-01-04'); let msec = d2.getTime() - d1.getTime();// 2732400000 let days = msec / (1000 * 60 * 60 * 24); // 3 // 시작일자를 포함하지 않기 때문에 시작일자를 포함하고 싶으면 +1을 해줘야 한다 // 오늘부터 2022-01-06까지 일수 let today = new Date(); let d3 = new Date('2022-01-0..
[#. JavaScript] MDN에 나와 있는 Object Method 정리하기 Object 생성자는 객체 래퍼(wrapper)를 생성한다 주어진 값이 null이거나 undefined면 빈 객체를 생성해 반환하고, 그렇지 않으면 값에 맞는 자료형의 객체를 반환한다 만약 값이 이미 객체라면 그 값을 그대로 반환한다 생성자가 아닌 맥락에서 호출하면 Object는 new Object()와 동일하게 동작한다 Object 생성자의 메서드 정적 메서드 Object.assign() Object.assign(target, ...sources) 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣는다 그 후 대상 객체를 반환한다 목표 객체의 속성 중 출처 객체와 동일한 키를 갖는 속성의 경우, 그 속성 값은 출처 객체의 속성 값으로 덮어쓴다 출처 객체들의 속성 중에서도 키가 겹칠 ..
[#. JavaScript] ES6 정리하기 arrows classes enhanced object literals template strings destructuring default + rest + spread let + const iterators, for..of generators unicode modules map + set + weakmap + weakset proxies, reflect API symbols subclassable built-ins promises math + number + string + array + object APIs binary and octal literals tail calls ① 화살표 함수(Arrow Function) `=>` 화살표를 사용한다 Arrow Function에는 this, prototype..
[#. JavaScript] input maxlength 글자수 제한하기 input에 입력하는 텍스트 길이를 제한하려고 한다 2가지 방법에 대해 알아보자 ① maxlength 사용하기 ⑴ HTML 간단하다 하지만 아래와 같이 숫자가 먼저 올 때는 maxlength 제한이 어렵다 ② function 생성하기 입력한 텍스트가 maxlength를 넘었을 때 뒤에 오는 텍스트는 잘라서 다시 value값으로 넣는 function을 사용한다 ⑴ HTML ⑵ JS function handleInputLength(el, max) { if(el.value.length > max) { el.value = el.value.substr(0, max); } }
[#. JavaScript] js touch event 사용하기 touchstart, touchend, touchmove, 클릭할 시에는 이벤트 발생하지만 스크롤 시에는 이벤트 발생되지 않도록 하기 웹에서 삭제 기능을 구현하려고 할 때 상단의 삭제 버튼을 클릭하면 데이터1, 데이터2 등 리스트 옆에 삭제 텍스트가 뜨고 삭제 아이콘을 제외한 영역을 클릭했을 때는 삭제 아이콘이 사라지고 리스트를 스크롤했을 때는 삭제 아이콘을 유지하려고 한다 touchstart 터치를 시작했을 때 발생한다 touchmove 터치한 채 움직일 때 발생한다(스크롤) touchend 터치가 끝났을 때, 손가락을 뗐을 때 발생한다 JS let dragging = false; $(".wrapper").on("touchstart", function(e){ dragging = false; }); $(".wrapper").on("touchmove", function() { dragging = true; }); $(".wrapper")..
[#. JavaScript] js에서 history.back() 여부 체크하기, 가져오기 웹 기준 페이지1에서 배너를 클릭해서 페이지2로 들어갔을 때 history.back()을 통해 페이지1로 돌아왔더니 API 요청을 하지 않는 경우가 발생했다 에러 메시지는 이렇다 Uncaught DOMException: Failed to execute ‘send’ on ‘XMLHttpRequest’: Failed to load history.back()을 사용했던 것 자체가 페이지1을 매번 다시 불러오는 걸 줄이고자 한 거였다 근데 검색해 보니 이때 bfcache라는 게 문제가 된다는 말이 있다 BFCache(Back-Forward Cache) HTML parsing 등 페이지를 구성하는 동작을 줄여 하지 않도록 하고, Javascript 상태를 저장했다가 다시 보여주는 기능이다 Safari, Firef..

티스토리툴바