728x90 반응형 IT 개발/JavaScript50 [javascript] base64 사용방법 - 인코딩, 디코딩 (btoa, atob) Base64란 바아너리 데이터를 64진법 표현으로 변환하여 정해진 ASCII 문자 집합으로 표현하는 바이너리-텍스트 인코딩 첵계이다. 이는 일반적으로 바이너리 데이터를 전송할 수 없는 미디어에서 전송 작업을 할 수 있도록 바이너리 데이터를 문자열로 인코딩하는데 사용된다. Base64는 전송중에 이진 데이터가 손실되지 않도록 해준다. Base64는 암호화나 압축하는 체계가 아니다 네트워크를 통해 난독화된 문자열을 전송할 수 있도록 바이너리 데이터를 ASCII 문자 집합으로 변환한다. 예를 들면 텍스트 데이터를 받는 이메일 서버에서 이미지나 파일을 보내는 경우가 있다 이 때 파일을 텍스트 형식으로 인코딩 해야한다. 원시 바이너리 데이터를 Base64 문자열로 인코딩 및 디코딩 하기 위해 Javascript에.. 2023. 10. 14. [javascript] 문서 로드시점 - document.ready, window.load 실행순서 ready는 HTML 문서 document(객체) 로딩이 끝나면 실행된다. onload이벤트보다 먼저 발생함 모든 문서의 모든 자원이 다운로드되었을 때 발생하는 onload와 달리 DOM트리만 완성되면 바로 발생하므로 빠른 실행속도가 필요할 때 적합함 여러번 사용되면 선언 순서에 따라 순차적으로 실행됨 $(function(){}); 으로 간략하게 사용가능 load는 iframe, img, vidio등 리소스 로딩이 끝나면 이벤트를 발생시킨다. 문서의 모든 컨텐츠(images, script, css, etc)가 로드된 후 발생하는 이벤트(load이벤트) 문서에 포함된 모든 컨텐스가 로드된 후에 실행되기에 불필요한 로딩시간이 추가될 수 있음 동일한 문서에 오직 'onload'는 하나만 존재해야 함 (중복될 .. 2023. 10. 11. [javascript] Swiper 라이브러리 사용하기 참고자료 https://iridescent-zeal.tistory.com/150 [JavaScript]자바스크립트 Swiper 라이브러리 사용하기 [ Swiper 라이브러리] swiper 라이브러리를 사용하면 웹 페이지 내의 요소를 슬라이드 할 수 있는 기능을 추가할 수 있습니다. 아래 예시처럼, 화살표 버튼을 누르면 다음 슬라이드로 이동하거나 자 iridescent-zeal.tistory.com 2023. 10. 7. [javascript] Any Chart - TimeLine Chart 사용 Any chart를 사용하여 타임라인 차트를 생성해보기 라이브러리 사용법은. 아래 링크에서 확인 가능 https://www.anychart.com/blog/2022/08/04/timeline-chart/ How to Make Timeline Chart (in JavaScript)Learn how to create an interactive Timeline Chart using JS in a few easy steps while visualizing the life of Elon Musk as a businessman.www.anychart.com 2023. 10. 6. [jQuery] 요소 복사 .clone() .clone()은 선택한 요소를 복제하는 기능이다. [사용법] let target = $( 'table' ); let tr = $( 'TR' ).clone(); target.append(tr); tr 요소를 복제하여 table 요소에 넣는다. * 굉장히 자주 사용하는 메소드로 알아두면 유용하게 쓰인다. * template를 미리 만들어두어 셋팅 후 화면에 보여지는 요소에 넣을 때 많이 사용한다. 2023. 10. 5. [javascript] .addClass() https://www.codingfactory.net/10195 2023. 9. 26. 자동 검색 autocomplete jQuery에 autocomplete -- 자동완성 기능이 있다. jQuery UI 플러그인에 포함되어 있어 두 줄만 추가 시켜주면 사용이가능하다. 2023. 8. 4. [JavaScript] input Box 자동 submit 막기 - form 태그의 속성값으로 막기 [input Box 자동 submit 막기 - form 태그 속성값] 아래 코드와 같이 onsubmit="return false"만 넣어주면 자동으로 submit을 막는다. - input 박스 내에서 엔터를 쳤을 경우 refresh 되는 경우가 있는데 submit을 막으면 refresh를 막을 수 있다. - 코드 짜다가 input box에서 엔터를 두번 쳤을 때 refresh되는 이슈가 있었는데 위와 같이 해결하였다. 2023. 4. 18. [javascript] chart 라이브러리 [javascript] chart 라이브러리] 자바스크립트 차트 라이브러리 소개 [TOAST UI] : https://ui.toast.com/tui-chart TOAST UI :: Make Your Web Delicious! TOAST UI is an open-source JavaScript UI library maintained by NHN Cloud. ui.toast.com [amChart] : https://www.amcharts.com/demos/ Chart Demos - amCharts www.amcharts.com 2023. 4. 16. [javascript] reduce 사용하기 [[javascript] reduce 사용하기] Array 객체의 메소드 reduce는 배열 요소를 순환하면서, 정의된 callback 함수에 의해 단일 값으로 누적시킬 수 있다. reduce 메소드의 형태는 인자로 callback 함수와 초기값을 받는다. 첫번째 callback 함수는 기존 다른 메소드와 달리 여러 매개변수를 정의한다. 최대 4개까지 매개변수를 받고, 첫번째 누적된 값과 현재 요소 값은 필수이다. reduce 메소드가 처음에 실행할 때, 누적된 값은 두번째 인자(초기값)을 할당받는다. 이후에는 배열 순환이 끝날 때까지 callback 함수에서 반환된 값으로 재할당된다. 배열.reduce(누적된 값, 현재 요소 값, 현재 인덱스, 원본 배열) => { return 누적값으로 반환되는 값 .. 2023. 4. 16. 이전 1 2 3 4 5 다음 728x90 반응형
