첸첸's devlog

🔧 환경 - java 1.8 - spring - jsp - javascript - sweetalert 🔎 요구사항 - 사용자의 마지막 동작으로 부터 1시간이 지나면 세션을 만료하되, 만료되기 1분전에 세션 만료 알림을 띄어 연장할 수 있어야 한다. 🔎 idea - server에 filter를 등록하여 요청이 올 때마다 response에 마지막 요청시간을 cookie를 저장하고, front단에서는 cookie를 1초마다 확인하여 세션 만료 1시간 전 알림을 보내준다. - 세션 만료 시간 = 마지막 요청 시간 + 1시간 📌 구현 💻 server 1. web.xml 설정 - web.xml에 기본 세션 만료 시간을 설정한다. - web.xml에 설정한 timeout의 단위는 '분' 이다. 60 2. filter..

let event = new Event('change') // change, click etc. dispatchEvent(event) 카테고리에서 1분류를 선택하면 자동으로 1분류에 해당하는 2분류의 option이 2분류의 selectbox에 셋팅 되어야한다. 그래서 각각의 selectbox에는 change 이벤트가 등록되어있다. 그러나 change이벤트는 사용자가 직접 변경을 했을 때 일어난다. 따라서 자동으로 값을 1분류에 셋팅만 해주는 것은 이벤트가 연속적으로 일어나지 않는다. 이 때 사용 할 수 있는 것이 dispatchEvent 이다. https://developer.mozilla.org/ko/docs/Web/API/EventTarget/dispatchEvent EventTarget.dispat..

프로젝트를 진행하면서 컨텐츠 이동 기능을 만들어달라는 추가 요청이 있어 기능을 구현하다 컨텐츠가 동적으로 하나 추가 될 때마다, 하나의 array에 값을 보관하고 있다는 것을 알게되었다. 이 array에 담긴 순서대로 화면에 표시되니, array 안의 값들의 순서를 변경해주어야 했다. 그때 사용한게 javascript 구조 분해 할당이다. 구조 분해 할당 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 javascript 표현식 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 구조 분해 할당 - JavaScript | MDN 구조 분해 할당 구문은 배열이..

1️⃣ template 작성 - 아래와 같이 리스트 안에 맵, 맵 안에 리스트를 가진 구조의 데이터를 파싱 할 것이다. [ { "date":"", "time":"", "categoryName": "", "keyword" : [ "keyword1", "keyword2", "keyword3" ] } ] 2️⃣ 데이터 파싱하기 async function drawAssessmentList(assessmentList) { let template = document.getElementById("trTemplate").innerHTML; Mustache.parse(template); _.forEach(assessmentList, (assessment, i) => { let keywords = assessment.ke..

axios는 기본적으로 비동기이기 때문에, 순서대로 실행되지 않는다. 처음 착각한 부분은 요청하고 바로 데이터를 받아와서 then 구문이 실행한다고 생각한 부분이다. 아래 코드는 forEach로 반복을 하고 있는데 나는 요청/응답-요청/응답-요청/응답 이렇게 실행 되는 줄 알았는데, 아래 코드는 요청-요청-요청-응답-응답-응답 이런식으로 실행돼었다. 그래서 원하는 데이터를 가지고 로직을 수행 할 수 없었다. ❎ 기존 코드 function contentsList(intentList) { _.forEach(intentList, (intent)=> { let intentId = intent.intentId; if(!contentSet.has(intentId)) { axios.get(url, {params : ..

무엇을 공부하든 공식 문서를 참고하는게 가장 좋다고 생각하는데, 아무래도 공식 문서들은 영어로 되어있기 때문에 한글로 된 포스트를 먼저 보는 편이다. 그러나...! 왜...! 내가 똑같이 따라하면 안되는걸까...그래서 결국 공식 문서를 참조하게 되는... mustache 사용법은 간단하다. 나는 테이블의 태그를 반복하기 위해 템플릿을 사용했다. 원래는 literal template를 써서 리스트로 되어있는 데이터를 반복을 돌리고 데이터 하나당 insertAdjacentHTML() 함수를 사용했다. 그러나....너무너무 비효율적이다...그래서 생각해 본 방법이 하나씩 넣지 말고, 들을 다 모아서 한번에 innerHTML로 사용하자! 였지만...이것도 역시나 반복을 돌린다는 것은 변함이 없었다.. 그러다 알..

1️⃣ 로그인 form - login() 함수 실행 자동 로그인 아이디 저장 비밀번호 기억 로그인 /* login() 함수 실행*/ 2️⃣ javascript //쿠키 저장 함수 function setCookie(name, value, expiredays) { var todayDate = new Date(); todayDate.setDate(todayDate.getDate() + expiredays); document.cookie = name + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";" } //쿠키 불러오기 함수 function getCookie(name) { var search = name + "="; if (..