첸첸's devlog

JSP에서 Thymeleaf로 옮겨가면서 채팅메세지가 중복으로 오는 현상이 발생했다. 채팅 내용을 받기 위해 message 이벤트를 등록하고 messageHandler 함수를 호출하게끔 개발이 되어있었다. 중복으로 메세지가 오는 것의 원인은 채팅 페이지를 열 때 마다 이벤트가 등록이 되었기 때문이다. window.addEventListener('message', messageHandler); window 객체가 변경 되는 것은 일반적으로 페이지 전환 또는 새로운 브라우저 창을 열 때 발생하는데 SPA에서는 페이지를 새로 로드하지 않고 콘텐츠만을 변경하므로 window객체는 그대로 유지된다. 따라서, 채팅이 있는 페이지를 여러면 열면, 연 만큼 window.addEventListener가 호출 되어 이벤트..

박람회를 앞두고 마지막 시연을 하는데 갑자기 잘 되던 기능이 안되는 현상이 발생했다. 개발서버와 데모서버가 있었고, 개발 서버에서는 잘 되는데 데모서버에서는 안되고, 해당 기능과 관련된 소스의 마지막 커밋과 푸쉬를 한달도 전에 했기 때문에 이해가 안되는 상황이었다. 심지어 데모에서는 어제까지만 해도 분명히 되었다! 그래서 차이점이 뭔지 보니..데모에서 갑자기 url에 view가 붙는것이 확인이 되었다. 나는 view를 붙인 적이 없는데..? 문제는 뭐였을까? axios로 get 요청을 하는데 아래처럼 앞에 슬래시('/') 를 붙여주여야 루트 경로에서부터 URL을 생성하는데, const response = await axios.get(`/vdo/contents/file/list/1000002`, {para..

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 : ..

var EVENT_DOUBLE_CLICK_DELAY = 200; // Adjust max delay btw two clicks (ms) var eventClickPending = 0; document.getElementById('btn').addEventListener('click', function(e){ if ((e.detail === 2 ) && (eventClickPending!== 0)) { // console.log('double click action here ' + e.detail); clearTimeout(eventClickPending); eventClickPending = 0; // call your double click method console.log("더블클릭"); } else..

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