JS

[CSS] 스크롤바 없애기(숨기기)

파이어폭스와 익스플로러는 기타 브라우저와 다른 코드를 적용해줘야합니다. 예제 코드 See the Pen Scrollbar hide by hyukson (@hyukson) on CodePen. 코드 /* ( 크롬, 사파리, 오페라, 엣지 ) 동작 */ .scroll::-webkit-scrollbar { display: none; } 영역::-webkit-scrollbar : 스크롤바 영역에 대한 설정으로 display: none 속성으로 스크롤바를 없앨 수 있습니다. .scroll { -ms-overflow-style: none; /* 인터넷 익스플로러 */ scrollbar-width: none; /* 파이어폭스 */ } 익스플로러, 파이어폭스는 -webkit-scrollbar 코드로 동작이 되지 않으며..

[JS] 중복없는 특정 범위의 랜덤 숫자 배열

코드 예제 See the Pen Lotto Number by hyukson (@hyukson) on CodePen. Set 객체 function getRandomNumber(max, min = 1) { return Math.floor(Math.random() * max) + min; } function getUniqueNumberList(count, max, min = 1) { const list = new Set(); while (count > list.size) { list.add(getRandomNumber(max, min)); } return [...list]; } getUniqueNumberList(3, 10); // [4, 7, 9] Set 객체를 활용하면 중복된 값을 제거할 수 있습니다. 매..

[JS] Element 크기 변화 감지 (ResizeObserver)

window창은 resize 이벤트를 이용해서 창 크기 변화를 감지할 수 있습니다. 하지만 div, p와 같은 HTML 태그들은 resize 이벤트에 해당하지 않습니다. ResizeObserver API const $target = document.querySelector('div'); const observer = new ResizeObserver((entries) => { // 관찰 중인 배열 형식의 객체 리스트 entries.forEach((entry) => { ... }); }); // 크기변화를 관찰할 요소지정 observer.observe($target); Resize Observer API는 resize 이벤트와 다르게 설정한 요소의 크기 변화를 관찰하며, 크기가 변경될 때마다 관찰자에게 정..

[JS] 키보드 단축키 만들기

keydown Event에 담겨오는 다양한 키 정보를 이용해서 단축키를 생성할 수 있습니다. 예제 코드 See the Pen JS hotkey by hyukson (@hyukson) on CodePen. 코드 document.addEventListener('keydown', (event) => { event.preventDefault(); // keyCode if (event.keyCode === 67 && event.shiftKey) { alert('Shift + C 단축키'); return false; } // key if (event.key === 'v' && event.altKey && event.ctrlKey) { alert('Ctrl + V + ALT 단축키'); return false; } ..

[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] getWeek(), 특정 날짜가 몇주차인지 구하기

코드 const getWeek = (date) => { const currentDate = date.getDate(); const firstDay = new Date(date.setDate(1)).getDay(); return Math.ceil((currentDate + firstDay) / 7); }; const week = getWeek(new Date("2022-11-11")); console.log(week + "주차"); // 2주차 2022-11-11와 같은 Date 객체를 넘길 시, 해당 날짜가 위치한 주차를 구해서 반환해주는 함수입니다. 코드 풀이 const date = new Date('2022-11-11'); const currentDate = date.getDate(); // 11 c..

[JS] HEX, RGB 색상코드 변환하기

흔한 웹사이트에서는 색깔을 지정하는 방법으로 HEX(FFFFFF), RGB(255,255,255) 방식의 색상 코드를 많이 사용합니다. 완성 코드 See the Pen RGB to HEX by hyukson (@hyukson) on CodePen. HEX 영어 16의 줄임말로 10진수를 16진수로 변환시켜 사용하는 색깔 코드입니다. RGB (red, green, blue) 각 세 가지의 10진수 색상이(0~255) 조합된 색깔 코드입니다. 예시 → 255, 255, 255 = ( FFFFFF ) 코드 const getHEX = (RGB) => { const colors = RGB.split(","); return colors .map(color => Number(color) .toString(16) .p..

[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] SVG 다운로드 (내보내기), PNG로 변환

SVG 다운로드 const $svg = document.querySelector("svg"); const data = new XMLSerializer().serializeToString($svg); const blob = new Blob([data], {type: "image/svg+xml;charset=utf-8"}); const $link = document.createElement("a"); $link.download = "export.svg"; $link.href = URL.createObjectURL(blob); $link.click(); SVG의 텍스트 데이터를 추출해 Blob 객체를 만들어주고 URL.createObjectURL 메서드를 이용한 다운로드 URL을 사용해 다운로드하는 코드입니다..

[JS] 룰렛 구현하기

JavaScript와 캔버스(Canvas)를 사용하여 룰렛을 구현해보았습니다. 코드 See the Pen Canvas Roulette by hyukson (@hyukson) on CodePen. 코드 풀이 const $c = document.querySelector("canvas"); const ctx = $c.getContext(`2d`); // 룰렛에 들어갈 항목 const product = [ "떡볶이", '돈가스', "초밥", "피자", "냉면", "치킨", '족발', "피자", "삼겹살", ]; // 각 항목에 해당하는 색상 const colors = [ "#dc0936", "#e6471d", "#f7a416", "#efe61f ", "#60b236", "#209b6c", "#169ed8", "..

[JS] 프로그래머스 두 큐 합 같게 만들기

출처 https://school.programmers.co.kr/learn/courses/30/lessons/118667 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 길이가 같은 두 개의 큐를 나타내는 정수 배열 queue1, queue2가 매개변수로 주어집니다. 각 큐의 원소 합을 같게 만들기 위해 필요한 작업의 최소 횟수를 return 하도록 solution 함수를 완성해주세요. 단, 어떤 방법으로도 각 큐의 원소 합을 같게 만들 수 없는 경우, -1을 return 해주세요. 제한사항 1 ≤ queue1의 길이 = queue2의 길이 ≤ 300..

[JS] 프로그래머스 성격 유형 검사하기

출처 https://school.programmers.co.kr/learn/courses/30/lessons/118666 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 매우 동의나 매우 비동의 선택지를 선택하면 3점을 얻습니다. 동의나 비동의 선택지를 선택하면 2점을 얻습니다. 약간 동의나 약간 비동의 선택지를 선택하면 1점을 얻습니다. 모르겠음 선택지를 선택하면 점수를 얻지 않습니다. 검사 결과는 모든 질문의 성격 유형 점수를 더하여 각 지표에서 더 높은 점수를 받은 성격 유형이 검사자의 성격 유형이라고 판단합니다. 단, 하나의 지표에서 각 성격 ..