정렬

[JS] 객체 value 값으로 정렬 시키기

객체를 value 값을 기준으로 sort() 시켜 줄 수 있게 데이터를 변환시켜 주는 과정이 필요합니다. 코드 const fruits = { Apple: 4000, Banana: 10000, Cherry: 800, Kiwi: 7000, }; const object = Object.fromEntries( Object.entries(fruits).sort((a, b) => a[1] - b[1]) ); console.log(object); // { "Apple": 4000, "Banana": 10000, "Cherry": 800, "Kiwi": 7000 } sort() 메서드를 이용하기 위해서 배열로 변환시킨 후, 다시 객체로 만들어 주는 방법을 거쳐줍니다. 코드 풀이 const fruits = { Apple..

[JS] Sort(), 다중 조건 정렬

단일 조건 const data = [ { age: 19, name: '김씨' }, { age: 25, name: '박씨' }, { age: 18, name: '김씨' }, { age: 19, name: '나씨' }, ]; data.sort((a, b) => a.age - b.age); 해당 데이터에서 정렬을 시켜주면, age(나이)가 같은 값은 정렬이 되지 않습니다. 이를 해결하기 위해선 다중 조건으로 정렬을 해줘야 합니다. 다중 조건 const data = [ { age: 19, name: '김씨' }, { age: 25, name: '박씨' }, { age: 18, name: '김씨' }, { age: 19, name: '나씨' }, ]; data.sort((a, b) => a.age - b.age ..

[JS] 문자열 배열 정렬 (영어,한글)

GitHub - hyukson/hangul-util: 한글 관련 자바스크립트 유틸 라이브러리입니다. 한글 관련 자바스크립트 유틸 라이브러리입니다. Contribute to hyukson/hangul-util development by creating an account on GitHub. github.com 'hangul-util' 라이브러리 코드를 기반으로 작성된 포스트입니다. sortByASC(['멜론', '귤', '참외']); // [ '귤', '멜론', '참외' ] sortByGroups(["대리", "사원", "사장", "회장", "부장"], groups); // [ '회장', '사장', '부장', '대리', '사원' ] Array.sort() 메서드 const data = ['a가가', '나나..

[JS] Canvas에서 가운데 정렬 텍스트 그리기

다양한 방법으로 가운데(중앙) 정렬시킨 텍스트(글자)를 Canvas에 그릴 수 있습니다. 첫 번째 코드 const cw = width / 2; const ch = height / 2; // 그리는 기준점을 글자의 가운데로 ctx.textAlign = "center" ctx.fillStyle = "#000"; ctx.fillText( text, cw, ch ); ctx.fill(); 글자를 그리기 전에 텍스트의 X 시작점을 가운데로 옮기는 속성을 적용시키면 간단하게 중앙 정렬시킬 수 있습니다. 두 번째 코드 const cw = width / 2; const ch = height / 2; // 그릴 텍스트의 넓이 구하기 const textWidth = ctx.measureText(text).width; ct..

[JS] 팝업창 가운데에 위치시키기

코드 const width = 600; const height = 600; let left = (document.body.offsetWidth / 2) - (width / 2); let tops = (document.body.offsetHeight / 2) - (height / 2); left += window.screenLeft; const popup = window.open('/', 'popup', `width=${width}, height=${height}, left=${left}, top=${tops}`); 코드 설명 해당 코드는 screen.width을 사용하지 않습니다. 그 이유는 듀얼 모니터 때문입니다. screen.width을 사용 시 메인 모니터를 기준 값이기에 서브 모니터에서 페이지를 ..