투케이2K

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다 2. 콜백은 다른 함수에 인수로 전달되는 함수입니다 3. 콜백 함수는 다른 함수가 완료된 후에 실행할 수 있습니다 4. 콜백은 비동기처리와 같이 주로 사용됩니다 5. 함수 이름 반환 : 함수.name 사용 시 현재 로직을 수행중인 함수 이름을 반환할 수 있습니다 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. 자바스크립트는 RexEx 정규식을 사용해서 불필요한 문자를 제거할 수 있습니다 3. 정규식은 검색 패턴 을 형성하는 일련의 문자입니다 4. 정규식은 /[정규식으로 제거할 패턴]/gim 방식으로 선언합니다 5. gim (replaceAll) : 전역적으로 문자열에 포함된 같은 패턴의 문자를 모두 제거하기 위해서 사용합니다 6. 정규식 패턴 [a-z] : 영어 소문자 지정 7. 정규식 패턴 [A-Z] : 영어 대문자 지정 8. 정규식 패턴 [ㄱ-ㅎㅏ-ㅣ가-힣] : 한글 지정 ..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다 2. json : key, value를 가지는 데이터 통신 포맷입니다 3. json 선언은 중괄호 {} 를 사용해서 선언할 수 있습니다 4. json 선언 시 Object를 사용하는 경우는 json.key = value; 형식으로 저장할 수 있습니다 5. JSON.stringify : json object 객체를 string으로 출력할 수 있습니다 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다 2. Set : 자바스크립트에서 중복되는 데이터를 제거해줍니다 3. set 을 사용해 중복 제거 후 배열 형태로 변환해줘야 정상적으로 데이터를 확인할 수 있습니다 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. 배열 : 자바스크립트에서 배열은 대괄호 [] 및 new Array 를 사용해서 선언할 수 있습니다 3. new Array 사용해서 배열 선언 시 push 를 사용해 데이터를 삽입합니다 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. Math 객체는 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 자바스크립트 표준 내장 객체입니다 3. floor : x와 같거나 작은 수 중에서 가장 큰 정수 값 출력합니다 4. Math.random : 랜덤 정수값을 출력합니다 5. 문자열 템플릿 : 역따옴표(``) [pc 키보드 기준 [~] 물결표 특수문자 부분에 위치] 를 사용해서 데이터 포맷 형식을 지정합니다 6. 참고 : 문자열 템플릿은 익스플로어에서는 지원하지 않습니다 (크롬, 엣지, 파이어폭스, 사파..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. json : key, value 를 가지고 있는 데이터 전송 포맷 형태입니다 3. jsonObject : {key:value} 형태를 가지고 있습니다 4. jsonArray : [value, value] 형태를 가지고 있습니다 5. 자바스크립트에서는 중괄호 { } 사용해 json 형식을 지정할 수 있습니다 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스코드] ​ ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. getAttributeNames : 특정 객체에 포함된 속성 리스트를 가져옵니다 3. getAttribute : 특정 객체 속성 값을 가져옵니다 (속성값이란 객체 고유 지정 값으로 id, class, event, a 태그 href , download 등등 ...) 4. setAttribute : 특정 객체 속성 값을 지정합니다 5. removeAttribute : 특정 객체 속성 값을 삭제합니다 6. attribute 지정시 대,소문자를 구분하지 않습니다 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [스크립트 소스코드] ​ ​ ​ [body 소스코드] 원본 [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. cloneNode : 특정 객체 요소를 복사합니다 (true 설정 시 객체에 포함된 자식까지 모두 복사) 3. document.body.appendChild : body 에 특정 태그를 추가합니다 4. setAttribute : 특정 태그 속성을 지정합니다 (초기 설정, 변경 등 ...) 5. document.getElementById.style : 특정 태그 스타일 속성값을 변경합니다 6. innerText : 특정 태그 텍스트..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. CryptoJS : 데이터 암호화를 지원해주는 라이브러리입니다 (ex : aes, sha ...) 3. aes 암호화 : 비밀키 방식으로 인코딩, 디코딩 시 비밀키를 사용합니다 4. aes 128 : 비밀키 값이 16 바이트 값입니다 5. aes 192 : 비밀키 값이 24 바이트 값입니다 6. aes 256 : 비밀키 값이 32 바이트 값입니다 7. 추가 설명 : 필요 시 추가 lv 설정을 할 수 있으며, lv 바이트 배열값은 16 바이트 고정입니다 8. 암호화 지원 ..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. window.getComputedStyle : 특정 객체 스타일 속성 값을 확인합니다 3. chart js : 사용해 차트를 렌더링 하며 단일 노드와 함께 페이지에 포함된 스크립트만 있으면 됩니다 4. myChart.destroy() : 생성된 차트를 삭제합니다 5. chart js 공식 사이트 : https://www.chartjs.org/docs/latest/ 6. chart js cdn 참고 사이트 : https://cdnjs.com/libraries/Chart.j..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [사이트 정리] ​​ ​ [nvd3] http://nvd3.org/ NVD3 Checkout our examples gallery for how to code your first chart. Our examples should provide you with enough code to start making beautiful charts. Google Chrome is our best supported browser. NVD3 also works in Firefox, Opera, Safari and Internet Explorer nvd3.org ​ ​ [c3 js] http://c3js.org/ C3.js | D3-base..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. chart js : 사용해 차트를 렌더링 하며 단일 노드와 함께 페이지에 포함된 스크립트만 있으면 됩니다 3. chart js 공식 사이트 : https://www.chartjs.org/docs/latest/ 4. chart js cdn 참고 사이트 : https://cdnjs.com/libraries/Chart.js */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. slice : 시작 인덱스부터 종료 인덱스 전까지의 데이터를 복사해 새로운 배열 객체로 반환합니다 3. slice 사용 시 원본 배열은 수정되지 않습니다 (splice 는 원본 요소 삭제, 교체 실시) 4. 인덱스 (index) : 배열에서 각 번지를 나타내는 번호입니다 (배열은 0번 번지부터 시작) 5. JSON.stringify : 대괄호 [] 포함한 배열 데이터를 출력해줍니다 6. 문법 : array.slice(시작 인덱스, 종료 인덱스); 방식으로 사용합니다 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. includes : 특정 데이터 포함 여부를 확인합니다 3. splice : 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. new Date : date 객체를 선언합니다 3. 두 날짜 차이 계산 : 시작 날짜와 종료날짜를 포함한 값을 리턴합니다 4. toISOString() : 확장 ISO 형식(ISO 8601)의 문자열을 반환합니다 5. 참고 : new Date 데이터 삽입 시 사파리, 크롬 등 적용을 위해 2021-07-08 형식 처럼 문자열을 선언해야합니다 */

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. spin js : 브라우저 내에서 로딩 스핀 상태를 나타낼 수 있습니다 3. 로직 : 사용자 통신 요청 시 >> spinnerStart 호출 >> 리턴 응답 받을 시 >> spinnerStop 호출 4. 옵션 참고 공식 사이트 : https://spin.js.org/ */

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다 2. addEventListener : 특정 객체에 이벤트를 등록합니다 3. evt.preventDefault() : html에서 a 태그나 submit태그 등의 고유의 동작 (링크이동)을 중단합니다 4. 참고 : a 태그에 preventDefault 설정 시 기본 동작인 href 링크이동을 하지 않습니다 */

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다 2. focus : 특정 객체의 포커스 이벤트를 감지합니다 3. blur : 특정 객체가 focus >> unfocus 된 상태를 감지합니다 4. addEventListener : 특정 객체에 이벤트를 등록합니다 */

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다 2. toastr : 웹브라우저 내에서 ..