기록

check list 형태를 자주 쓰게 되어서 All 체크박스 컨트롤 방법을 코드로 남김 {{ group.name }} All {{ file.name }} openList(idx1): function { let target = document.getElementById('group_' + idx1); if (target.style.display == 'none') { target.style.display = block; } else { target.style.display = none; } }, checkAll: function (e, idx1) { const isChecked = e.target.checked; let that = this; this.groups[idx1].children.forEach(..

Vue에서 동적 속성 바인딩을 수행할 때 사용하는 콜론(:)은 "v-bind" 디렉티브라고 불립니다. "v-bind" 디렉티브를 사용하면 Vue 템플릿에서 HTML 속성에 동적으로 값을 바인딩할 수 있습니다. 주로 HTML 속성을 Vue 컴포넌트의 데이터나 계산된 속성과 연결할 때 사용됩니다. 조건문과 삼항 연산자를 사용하여 조건부 할당이 가능합니다. 예제) 다양한 속성의 예시 {{ datas.type === 'a' ? item.AId : item.BId }}

1. 다양한 형태의 axios axios는 서버로 HTTP 요청을 보내고 응답을 받는 데 사용되며, 다양한 형태로 사용할 수 있습니다. get요청의 예시 입니다. 1-1. 기본적인 GET 요청: await axios.get(url); 가장 기본적인 GET 요청을 보내는 방법입니다. axios.get() 메서드를 사용하여 지정된 url로 GET 요청을 보내고, 응답을 받습니다. 이때 await 키워드를 사용하여 비동기적으로 응답을 기다립니다. 1-2. GET 요청에 파라미터 전달: await axios.get(url, { params: params }); GET 요청 시 쿼리 파라미터를 전달하는 방법입니다. axios.get() 메서드의 두 번째 인자로 객체를 전달하고, params 속성을 사용하여 쿼리 ..

position이 absoulte인 요소의 위치를 width에 따라 설정하던 중 스크롤바의 생성 여부에 따라 위치가 달라졌습니다. 스크롤바 넓이를 제외한 넓이를 구하기 위해 다양한 width를 가져오는 속성에 대해 알아봤습니다. offsetWidth: offsetWidth는 요소의 전체 너비를 반환하는 속성입니다. 이 너비에는 요소의 가시적인 너비, 안쪽 여백(padding), 테두리(border) 및 수직 스크롤바의 너비가 포함됩니다. offsetWidth는 읽기 전용 속성으로, 픽셀 단위의 정수값을 반환합니다. clientWidth: clientWidth는 요소의 내용 영역의 너비를 반환하는 속성입니다. 내용 영역은 요소의 가시적인 너비와 스크롤바를 제외한 영역입니다. 내용 영역은 안쪽 여백(padd..

가장 간단하게는 파일명이 중복되지 않을 때 까지 반복문을 사용하여 확인 할 수 있다. 예시 코드입니다. //java String orgName = fileObj.getFileName(); String newName = NewNameService.getNewName(fileObj); int idx = 1; while(newName != null){ fileObj.setFileName(orgName + "(" + (idx+1).toString() + ")"); newName = NewNameService.getNewName(fileObj); } 하지만 저는 아래와 같은 생각 때문에 쿼리한번으로 처리 하고자 했습니다. 1. 성능: 반복문을 사용하는 경우: 각각의 fileName를 가져와서 (idx)를 붙여서 ..

제이쿼리를 사용하지 못 하는 상황에서 한 element의 왼상단에 아이콘을 띄우는 작업을 하려고 했다. 처음에 style.top 속성(offsetTop과 동일)을 사용했는데 div안에 element가 있을 경우에 위치에 오류가 있었다. icon.style.position = 'absolute'; icon.style.top = element.style.top.replace('px', '') - 27 + 'px'; icon.style.left = element.style.left; 제이쿼리를 사용할 때 let top = $(element).offset().top let lfet = $(element).offset().left 제이쿼리를 사용하지 않고 직접 계산 function getElementAbsolut..

1. 아이디 선택자(ID Selector): 특정 아이디를 가진 요소를 선택합니다. #my-id { font-weight: bold; } 2. 클래스 선택자(Class Selector): 특정 클래스를 가진 요소를 선택합니다. .my-class { color: red; } 3. 요소 선택자(Element Selector): 특정 HTML 요소를 선택합니다. p { text-align: center; } 4. 자식 선택자(Child Selector): 부모요소 > 자식요소: 부모 요소의 직계 자식 요소를 선택합니다 .my-class > li (x) .my-class> ul > li (o) 이 선택자는 클래스 이름이 "my-class"인 요소의 직계 자식인 요소를 선택합니다. Item 1 Item 2 Ite..

- Object.assign() Object.assign([], data) Object.assign()은 JavaScript에서 객체를 복사하는 메서드입니다. 첫 번째 매개변수는 대상 객체이고, 나머지 매개변수는 복사하고자 하는 소스 객체입니다. Object.assign([], data)는 빈 배열([])에 data 객체의 속성을 복사하여 새로운 배열을 생성하는 코드입니다. []는 빈 배열을 생성하는 것이며, data 객체의 속성들을 복사하여 새로운 배열로 만듭니다. - 예시 전체리스트를 객체의 특정 속성 값에 따라 분류할 때 this.AList.push(data) 데이터를 push하는데 이때 AllList의 객체를 참조하게 됩니다. 그래서 아래에서 children메뉴를 필터링 할 때 BList의 값이 ..

- 문제 컨텍스트 메뉴를 구현하던 중 이미지가 뜨지 않는 문제가 있었습니다. 콘솔 로그를 확인해 보니 정상적으로 불러와진 이미지는 파일명과 확장자 사이에 파일의 내용에 기반한 해시 값이 들어가있었습니다. 이 url을 눌리면 직접 img를 띄울 수 있습니다. *이는 파일의 캐시된 버전을 나타내는 URL입니다. 브라우저는 이 URL을 통해 해당 파일의 최신 버전을 요청하고, 필요한 경우 캐시된 버전을 업데이트합니다. 반면 콘솔로그에 파일을 찾지 못했다는 에러에는 해시값이 빠져 있었습니다. 해시값은 vue에서 자동으로 처리되고 사용자가 제어할 필요 없는데 이게 이루어 지지 않은 것을 보고 src를 주소로 인식하지 못한 것을 확인했습니다. 처음 작성한 코드입니다. {{ subMenu.key }} 번들러는 일반적..

// 각 등수별 남은 개수와 총 개수 const prizes = [ { rank: 1, remaining: 2, total: 5 }, { rank: 2, remaining: 1629, total: 4000 }, { rank: 3, remaining: 1965, total: 5000 }, { rank: 4, remaining: 4030, total: 10000 }, { rank: 5, remaining: 4033, total: 10000 } ]; // 등수별 확률 및 누적 확률 계산 const probabilities = prizes.map(prize => prize.remaining / prize.total); const cumulativeProbabilities = probabilities.reduce..