개발하다 놀땐 뭐하지?

JWT Access Token을 사용한 웹 어플리케이션에서 서버로 API를 요청할 때마다 Access Token을 담아서 보내야 하는데, 이때 Access Token이 만료된 경우 Refresh Token을 이용한 Access Token의 갱신이 필요하다. 처음 화면 로딩 시 메뉴에 로그인 정보를 표시해준다거나, 화면을 새로고침 하거나, 사용자가 특정 화면을 열어 놓고 한참 지나서 데이터를 조회하려고 하는 경우 등을 고려해서 언제든 서버로 API 요청 시 항상 Access Token의 유효성을 체크해서 만료 시 Refresh Token을 이용해서 자동으로 Access Token을 갱신하는 스크립트를 작성 해 봤다. 특별한 아니고 Javascript/jQuery Ajax를 이용해서 API를 서버에 요청해 ..

yarrow는 HTML5 기반의 SVG 화살표 애니메이션 자바스크립트 라이브러리다. 업데이트가 된 지 7년이 된 것으로 봐서 더 이상 개선은 없는 것 같지만, Source와 Target까지 애니메이션으로 움직이는 화살표를 그려준다는 점 때문에 필요에 의해 사용해 보게 되었다. 설치 방법 npm install yarrow 또는 아래 소스코드를 다운받아서 HTML 사이에 넣으면 된다. 기본 사용방법 var arrow = yarrow.arrow({ x1: 0, // source x coordinate y1: 0, // source y coordinate x2: 100, // target x coordinate y2: 100, // target y coordinate text: "I'm arrow!" // ar..

자주 쓰이지만 한동안 안 쓰다 보면 쉽게 잊게 되는 자바스크립트 함수. 공통 javascript 함수 (예: comon.js) 같은 곳 에서 사용하면 스크립트질(?)을 줄일 수 있다. 정규식을 통해 문자열의 모든 공백을 제거하는 함수 String.prototype.trim = function(){ return this.replace(/(^\s*)|(\s*$)/g,""); } 사업자 등록 번호 검증 함수 이전 블로그에 있던 모듈인데, 외부 인터페이스 없이 그냥 입력값만 가지고 확인하는 방법. 이게 지금도 유효한 로직인지는 아직 테스트를 해보지 못했지만, 나중을 위해 우선 저장 해 두자. function isValidOffNum(input){ tmpStr = input.value; tmpSum = new N..

자바스크립트 키코드(event.keyCode)를 이용한 입력 제한하는 방법을 몇 가지 예제를 통해 알아보자 1. 한글 입력 방지 스크립트 - submit 에서 Form Validation 시 for(i=0;i 128) { alert('영문으로만 입력해주세요!'); mainform.FRM_BID.value = ""; mainform.FRM_BID.focus(); return; } } 2. 특수문자(Special Character) 입력 방지 스크립트 - key down 시 사용 if ((event.keyCode > 32 && event.keyCode 57 && event.keyCode 90 && event.keyC..

jQuery ajax를 통해 호출한 API의 JSON 응답 데이터를 jQuery로 html을 만들고 화면에 페이지 번호를 그려주는 javascript 공통 함수를 만들어 봤다. 현재까지 3개 웹사이트에 적용했는데 복사 붙여넣기만으로 아직까지는 별다른 수정 없이 잘 돌아가고 있다. 동작방식 Backend에서 데이터 목록의 페이징과 관련된 정보를 보내준다. 받은 정보와 html을 그려줄 target 등 필요한 정보를 initPagination javascript 함수에 parameter로 넣어서 호출한다. 화면이 그려진 이후 page 번호 클릭 시 원하는 페이지로 이동한다. (또는 ajax로 Backend에 다른 페이지의 데이터 요청) Backend - Java Spring Framework Controll..

1. yes 또는 no 로 구분되는 속성 directories: 넷스케이프만 가능 디렉토리 표시여부 location: 주소표시줄 표시여부 menubar: 메뉴 표시줄 표시여부 scrollbars: 스크롤바 표시여부 status: 상황지시자 표시여부 toolbar: 도구모음 표시여부 copyhistory: 히스토리 정보의 복사여부 resizable: 창 크기조절 여부 2. pixel로 정의하는 속성 width height 3. 기타 속성 fullscreen: 새창을 아무것도 없이 전체 창으로 열때 사용

IE에서나 작동하던 비표준 script인듯. 하지만 기록 차원에서 예전 블로그에서 가져옴 var getHtml = "삽입될HTML소스"; var pkgWin; var pkgWinBody; try { pkgWin = window.createPopup(); pkgWinBody = ""; } catch(e) { //something } function falseEvent(){ return false; } function openPopup() { try { if(pkgWin.isOpen == false){ var myHtml = getHtml; pkgWinBody = pkgWin.document.body; pkgWinBody.attachEvent('onselectstart', falseEvent); pkgWin..

jQuery를 이용한 HTML Form 의 select 컨트롤 예제 선택 된 option의 value 가져오기 var selected_value = $("#[id]").val(); for 문으로 서버에서 받아 온 option html로 출력하기 for(var i = 0; i < obj.length; i++){ $("#[id]").append("" + obj[i].name + ""); } value 에 해당하는 option 선택하기 $("#[id]").val("1").prop("selected", true); //값이 1인 option 선택 option 인덱스로 선택하기 $("#[id] option:eq(index)").prop("selected", true); //index에 해당하는 option 선택 ..

서버에서 json response를 받을 때 날짜가 "YYYY-MM-DDThh:mm:ss" (LocalDateTime) 형식으로 온다는 가정하에 한국 시간 기준 yyyyMMdd 등의 포맷으로 바꿔주는 공통 함수를 만들어 보자. 굉장히 무식하고 단순한 방법이지만 Frondend에서는 yyyyMMdd로 표시할 때도 있고, yyyy-MM-DD로 표시하거나 yyyyMMdd hh:mm:ss 등 다양하게 표시가 되기 때문에 서버에서는 항상 LocalDateTime으로 내려주고 필요에 따라 front에서 변환을 하는 것이 조금 더 편리했다. 서버 응답 데이터 created_date: "2023-04-29T08:46:23.000+00:00" 한국 표준시로 변환 서버의 데이터를 javascript에서 new Date로 ..

Array 1. Array 생성 이후 데이터 입력 var myArray = []; myArray[0] = "xxx"; myArray[1] = "yyy"; 2. Array 생성과 동시에 데이터 입력 var myArray = ["xxx","yyy"]; Object 1. Object 생성 이후 데이터 입력 var myObject = {}; myObject.item1 = "xxx"; myObject["item2"] = "yyy"; myObject.item3 = ["11", "22", "33"]; 2. Object 생성과 동시에 데이터 입력 var myObject = { item1: { item1_1: "xx", item1_2: "yy" }, item2: { item2_1: "zz" }, item3: [ {"it..