https://apexcharts.com/ ApexCharts.js - Open Source JavaScript Charts for your websiteApexCharts is a a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.apexcharts.com    원하는 차트 선택해서 들어가면    하단에 있는 코드 복사!    get started - creating your first chart     edit on codepen 클릭!     여기서 아까 복사한 코드 js에 넣어서 테스트해볼 수 있당

ready() : DOM이 완전히 로드된 후 호출 $(document).ready(function(){})$(function(){}) 외부 리소스 및 이미지 로딩과 상관없이 DOM만 로드되면 바로 실행중복 사용 가능하며 선언 순서대로 실행    onload() : 페이지 내의 모든 리소스(이미지, 스크립트, css 등)가 완전히  로드된 후 호출 $(window).onload(function(){})window.onload()=function(){} 한 페이지에서 하나의 window.onload()함수만 사용 가능가장 나중에 호출된 함수만 적용페이지 안의 이미지나 외부 파일이 로드될때까지 기다린 후 실행되어 로딩시간이 길어질 수 있음     실행 순서DOM 생성 → ready() → 이미지를 포함한 요소..

수민 만만세2 미리보기  이미지를 브라우저로 옮겼을때 창 열리는 것 막기function jcOver(){    event.preventDefault();}function jcDrop(){    event.preventDefault();}window.addEventListener("dragover", jcOver);window.addEventListener("drop", jcOver);    원래는 이렇게 창이 열리지만 preventDefault로 막았당   사진 드롭function jcDrop(){    event.preventDefault();    mgJS.innerHTML="";    let jcFiles = event.dataTransfer.files;    console.log("끌고 온 파일들..

html 파일 우클릭 - open with - other  external programs에서 visual studio code 검색    vscode에서 편집하고 스프링에서 html 한 번 찍고 실행시켜야함  vscode 추가해놓으면 vscode 추가돼있음  Refresh using native hooks or polling 체크 하면vscode에서 편집하고 스프링 안 찍어도 됨

모달 띄우기 기본  ㅎㅇ 반가옹 누르면 닫힐껄 췐틀맨 만만세 열려라 췐틀    이렇게 하면 잘 실행되는데  주의할 점!!mopen(), mclose() 대신 open(), close()로 하면 f12 눌러도 에러도 안뜨궁elements에 소스도 다 사라져있음!!↓    ↓    ↓open(), close()는 window 메소드라 새로운 윈도우가 열려버려서 open, close 예약어로 함수명 지정하면 안됨     다른 방법(같은 메소드로 사용하기)  ㅎㅇ 반가옹 누르면 닫힐껄 ..

let str1 = "수민 왕창 미웡";function disp(param){ console.log("체킁",param);} try { disp(JSON.parse(str1)); //error. 그냥 문자열이라서 안됨. 대괄호나 중괄호가 있어야 됨} catch (error) { console.log("체킁2",error); disp(str1);}체킁2 에서 에러가 나는 이유는 str1이 문자열이기 때문!대괄호나 중괄호가 있어야 json parse할 수 있음     let str2 = `[ {"name":"수민", "alias" :"덩말 미웡"}, {"name":"수민", "alias" :"덩말 미웡"}]`; function disp(param){ conso..

https://chantleman.tistory.com/entry/XMLHttpRequest  XMLHttpRequestXMLHttpRequest(XHR)서버와 통신을 하도록 하는 객체 1. 객체는 서버와 상호작용하기 위해 사용2. 전체 페이지를 새로고침하지 않아도 URL을 통해 데이터를 전송하거나 받아올 수 있음3. XML 데이터 통chantleman.tistory.com  https://chantleman.tistory.com/entry/fetch fetch동기 방식: 직렬적(순차적)으로 작업 수행.해당 작업이 수행중이면 다음 작업은 대기.서버는 한번에 많은 요청이 들어오고 동시에 많은 요청을 처리해야 하기 때문에 이러한 방식과는 맞지 않음chantleman.tistory.com  https://ch..

웹 애플리케이션에서 사용자 상태 관리하는 두가지 방법 1. server session :   서버에 사용자 데이터 저장. 서버 측에서 관리하므로 보안성이 높음. 중요한 정보는 서버에만 저장되므로 클라이언트 측에서 노출되지 않는다.  세션 타임아웃 설정에 따라 일정 시간이 지나면 세션이 만료됨2. browser session : 클라이언트의 브라우저에 저장되며(쿠키, 세션 스토리지), 클라이언트 측에 데이터가 저장되므로 보안에 취약할 수 있음 browser session에는 LocalStorage와 SessionStorage가 있당- Local Storage(영구저장소) : 한번 저장하면 지우는 명령을 하지 않는 이상 계속 남아있음 - Session Storage(임시저장소) : 브라우저에 접속하는 동안에..