기록

자바스크립트의 draggable 속성과 dragstart, dragend 이벤트를 사용하여 요소를 드래그할 수 있습니다. draggable 옵션입니다. cancel: false는 드래그 가능한 요소 내의 특정 하위 요소를 클릭하여 드래그 작업이 취소되는 것을 방지합니다. 불투명도: 0.7은 드래그 동작 중 드래그 가능 요소의 불투명도를 설정합니다. snap: "[elem]"은 요소를 요소 클래스가 있는 다른 요소로 스냅하도록 지정합니다. snapMode: "둘 다"는 스냅이 수평과 수직 모두에서 발생해야 함을 나타냅니다. snap Tolerance: 10은 스냅이 발생해야 하는 스냅 대상으로부터의 거리(픽셀)를 지정합니다. stack: "[elem]"은 끌어온 요소의 z-index를 요소 클래스가 있는 ..

객체 분해 할당(Object Destructuring Assignment)은 ES6에서 추가된 기능으로, 객체의 속성들을 변수로 분해해서 할당하는 방법입니다. 객체 분해 할당은 객체의 속성에 접근해서 변수로 할당하는 것과 유사합니다. 다만, 객체 분해 할당을 사용하면 코드가 간결해지고 가독성이 좋아지는 장점이 있습니다. 객체 분해 할당은 중괄호({})를 사용하여 객체를 선언하고, 변수 이름을 할당할 속성 이름으로 지정합니다. 이 때, 할당할 변수 이름은 객체의 속성 이름과 일치해야 합니다. 예를 들어, 다음과 같은 객체가 있다고 가정해보겠습니다. const person = { name: 'John', age: 30, city: 'New York' }; 이 객체를 분해해서 name, age, city 변수..

map() map() 함수는 JavaScript 배열에서 사용할 수 있는 내장 함수 중 하나로, 배열의 모든 요소를 변환하고 새로운 배열을 생성합니다. map() 함수는 각 배열 요소에 대해 콜백 함수를 호출하고, 콜백 함수가 반환한 값을 새로운 배열에 추가합니다. 이 때 원래 배열은 변경되지 않고, 새로운 배열만 생성됩니다. arr.map(callback(element, index, array), thisArg) callback: 각 배열 요소에 대해 호출할 함수로, 콜백 함수는 다음과 같은 매개 변수를 받습니다. element: 현재 처리 중인 배열 요소 index: 현재 처리 중인 요소의 인덱스 array: map() 함수가 호출된 배열 thisArg (선택 사항): 콜백 함수에서 this 키워드가..

ESLint ESLint는 자바스크립트 코드에서 문제를 검사하고 일관성 있는 코드 스타일을 유지할 수 있도록 도와주는 정적 코드 분석 도구입니다. ESLint는 사용자가 직접 규칙을 만들거나 다른 사용자가 만든 규칙을 사용할 수 있는데 이 때문에 코드의 문법에 문제가 없어도 규칙을 어기면 에러가 뜹니다. 미리 작성된 template기반으로 동적으로 Vue 코드를 생성해주는 프로그램을 개발중에 띄어쓰기, 줄바꿈 같은 규칙까지 지키면서 만들 수가 없어서 eslint-disable을 사용했습니다. Disable vscode의 Quick Fix에서는 두가지 disable 옵션이 있습니다. - Disable prettier/prettier for this line 에러 나는 코드 위에 해당 구문을 추가하는데 이는..

1. 파일 손상문제 발생 자바스크립트 단에서 파일을 DB에 업로드, 다운로드를 진행하다가 파일이 깨지는 문제가 발생했습니다. 아래는 문제가 발생했을 당시 코드입니다. var reader = new FileReader(); const file = document.getElementById("fileInput").files[0]; const fileName = file.name; const fileSize = file.size; const fileType = file.type; let fileBlob = ""; reader.readAsArrayBuffer(file); reader.onload = function (evt) { fileBlob = evt.target.result; let data = { Nam..

Object.keys() 를 이용해 배열을 순회하려고 하는데 key값이 index로 들어가는 문제가 있었습니다. Object.keys() 함수는 객체의 키들을 배열로 반환합니다. 이 배열의 인덱스는 0부터 시작하므로, for...in 루프를 사용하여 객체의 키들을 순회할 때, 첫 번째 키는 0이 됩니다. 이 경우 for...in 루프 대신 for...of 루프를 사용하면, 배열의 각 요소를 직접 참조할 수 있습니다. for...of 루프는 배열의 값을 순회하며, 배열의 인덱스를 신경쓰지 않기 때문에 위와 같은 문제가 발생하지 않습니다. let data = this.data; let keys = Object.keys(data); for (let key of keys) { this.data[key] = da..

기존 tree 라이브러리의 getNodeByKey함수를 사용하던 것을 div로 바꾸면서 만든 특정 key값를 가진 노드를 찾는 함수입니다. const objArr = [ { id: 1, name: 'Alice', children: [{ id: 11, name: 'Bob' }] }, { id: 2, name: 'Charlie', children: [{ id: 21, name: 'Dave' }] } ]; const key = 'Bob'; let node = getNodeByKey(objArr, key); function getNodeByKey(arr, value) { let result = null; for (let i = 0; i < arr.length; i++) { const obj = arr[i]; i..

아래의 코드에서 setTimeout 함수를 이용하던 중 함수 내부의 this와 함수 외부의 this가 다른 것을 가르키는 것을 확인했습니다. let elem = document.querySelector('#' + this._id + ' #' + elemId); if (elem == null) { setTimeout(function () { elem = document.querySelector('#' + this._id + ' #' + elemId); }); } setTimeout 함수 setTimeout 함수는 비동기 함수로서, 일정 시간이 경과한 후에 함수를 실행하는 기능을 제공합니다. 따라서 setTimeout 함수 내부에서는 콜백 함수를 정의하여 사용해야 합니다. setTimeout 함수의 this..

[요구사항] 1. mian 페이지에서 subPage를 오픈. 2. 어떤 페이지에서 로그아웃되면 전체 페이지에서 로그아웃 (한 창만 로그아웃화면으로 이동하고 나머지는 닫음) 3. 부모창을 닫으면 자식창도 닫침. (부모창 닫을때 컨펌) 4. mian페이지 위에 최상위 부모창이 있을 경우도 있음. subPage1 $scope.logout = function () {//subPage1에서 로그아웃할때 바로 /lougout으로 이동하지 않고 상위 페이지 close sessionStorage.clear(); localStorage.setItem("closeAllTabs", "Y"); localStorage.setItem("closeTabsTrigger", "subPage1"); window.opener.close(..

웹 페이지 로드 과정 Prompt for unload 페이지를 벗어날 때(다른 페이지로 이동할 때) 발생한다. unloadEventStart에서 window에 beforeunload 이벤트가 발생한 후 unload 이벤트가 발생한다. Redirect (redirectStart, redirectEnd) 서버쪽에서 redirect 신호가 오면 발생한다.(HTTP code 301, 302) optional이라서, 발생하지 않을 수 도 있음. AppCache 서버에서 데이터를 받아오기 전에 브라우저에 캐시가 있는지 확인 내부 네트워크 처리 단계(DNS, TCP, Request, Response) DNS(domainLookupStart, domainLookupEnd) DNS에 요청을 보내기 전에 먼저 브라우저에 ..