분류 전체보기

[JS] textarea 줄바꿈 갯수

코드 const rowsCount = (target) => { // 개수 console.log( target.value.split("\n").length - 1 ); } Enter를 입력 시 줄바꿈 되는 개행(\n)을 기준으로 잘라 개수를 셀 수 있습니다.

[JS] 프로그래머스 예산

출처 https://programmers.co.kr/learn/courses/30/lessons/12982 코딩테스트 연습 - 예산 S사에서는 각 부서에 필요한 물품을 지원해 주기 위해 부서별로 물품을 구매하는데 필요한 금액을 조사했습니다. 그러나, 전체 예산이 정해져 있기 때문에 모든 부서의 물품을 구매해 줄 수는 programmers.co.kr 문제 S사에서는 각 부서에 필요한 물품을 지원해 주기 위해 부서별로 물품을 구매하는데 필요한 금액을 조사했습니다. 그러나, 전체 예산이 정해져 있기 때문에 모든 부서의 물품을 구매해 줄 수는 없습니다. 그래서 최대한 많은 부서의 물품을 구매해 줄 수 있도록 하려고 합니다. 물품을 구매해 줄 때는 각 부서가 신청한 금액만큼을 모두 지원해 줘야 합니다. 예를 들어..

[JS] 다중 배열 하나의 배열로 묶기 (flat)

flat 메서드 const newArr = arr.flat([depth]) flat 메서드는 모든 배열 요소를 지정한 깊이까지 이어 붙인 새로운 배열을 생성하는 메서드입니다. 빈 요소가 있으면 무시하며 depth에 따라 합치는 정도를 정할 수도 있습니다. (기본은 1입니다.) [1, 2, [3, 4]].flat(); // [1, 2, 3, 4] [1, 2, [3, 4, [5, 6]]].flat(); // [1, 2, 3, 4, [5, 6]] [1, 2, [3, 4, [5, 6]]].flat(2); // [1, 2, 3, 4, 5, 6] [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]].flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 어디서 ..

[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을 사용 시 메인 모니터를 기준 값이기에 서브 모니터에서 페이지를 ..

[CSS] 요소 좌우반전

코드 .class { transform: scaleX(-1); } 위 코드를 좌우반전 시킬 요소에 스타일을 적용시키면 됩니다.

[JS] 전화번호 자동 하이픈(-) 정규식

첫 번째 코드 const phone = '01012345678'; phone.replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`); // '010-1234-5678' 00-000-0000 또는 000-0000-0000 전화번호를 (2, 3) - (3, 4) - (4) 자리에 숫자 그룹을 지어 묶어줍니다. replace() 메서드로 각 그룹($1, $2, $3)을 순서대로 배치하고 사이에 하이픈을 추가시켜 하이픈이 추가된 전화번호를 완성시켜 줍니다. const phone = "010-12345678"; phone .replace(/[^0-9]/g, '') // 숫자를 제외한 모든 문자 제거 .replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-..

[JS] 백준 2920번 음계

출처 백준 온라인 저지 https://www.acmicpc.net/problem/2920 2920번: 음계 다장조는 c d e f g a b C, 총 8개 음으로 이루어져있다. 이 문제에서 8개 음은 다음과 같이 숫자로 바꾸어 표현한다. c는 1로, d는 2로, ..., C를 8로 바꾼다. 1부터 8까지 차례대로 연주한다면 ascending, 8 www.acmicpc.net 문제 다장조는 c d e f g a b C, 총 8개 음으로 이루어져 있다. 이 문제에서 8개 음은 다음과 같이 숫자로 바꾸어 표현한다. c는 1로, d는 2로,..., C를 8로 바꾼다. 1부터 8까지 차례대로 연주한다면 ascending, 8부터 1까지 차례대로 연주한다면 descending, 둘 다 아니라면 mixed이다. 연주..

[JS] 아주 큰 숫자 한계 처리

문제점 자바스크립트의 기본 자료형의 수는 한계점이 존재합니다. Number.MAX_SAFE_INTEGER의 값보다 큰 값은 정확하지 않을 때가 많습니다. 해결방법 BigInt 타입의 값을 만들어 계산하는 방법으로 해결할 수 있습니다. 숫자 뒤에 BigInt을 호출하거나 n을 붙여 값을 만들 수 있습니다. 이를 사용하여 기본 자료형의 수로 연산하여 나온 Infinify의 한계를 넘을 수 있습니다. 하지만 주의해야 할 점은 BigInt형의 값은 BigInt형의 값만으로 연산할 수 있으며 기본 숫자형의 값으로는 연산할 수 없습니다. 그 후 toString 메서드를 이용하여 맨뒤에 붙어있는 n을 제거한 문자열로 바꿀 수 있습니다. 참고사이트 https://developer.mozilla.org/ko/docs/W..

[JS] 백준 2748번 피보나치 수 2

출처 백준 온라인 저지 https://www.acmicpc.net/problem/2748 2748번: 피보나치 수 2 피보나치 수는 0과 1로 시작한다. 0번째 피보나치 수는 0이고, 1번째 피보나치 수는 1이다. 그 다음 2번째 부터는 바로 앞 두 피보나치 수의 합이 된다. 이를 식으로 써보면 Fn = Fn-1 + Fn-2 (n ≥ 2)가 www.acmicpc.net 문제 피보나치 수는 0과 1로 시작한다. 0번째 피보나치 수는 0이고, 1번째 피보나치 수는 1이다. 그다음 2번째부터는 바로 앞 두 피보나치 수의 합이 된다. 이를 식으로 써보면 Fn = Fn-1 + Fn-2 (n ≥ 2)가 된다. n=17일 때까지 피보나치 수를 써보면 다음과 같다. 0, 1, 1, 2, 3, 5, 8, 13, 21, ..

[JS] 별점 드래그 구현

완성본 코드 See the Pen Drag Star by hyukson (@hyukson) on CodePen. 코드 풀이 ★★★★★ ★★★★★ // JAVASCRIPT CODE const drawStar = (target) => { document.querySelector(`.star span`).style.width = `${target.value * 10}%`; } // JQUERY CODE const drawStar = (target) => { $(`.star span`).css({ width: `${target.value * 10}%` }); } 별점 뒤에 숨겨진 input range의 값을 드래그로 조절할 수 있습니다. 해당하는 value값만큼 별 width를 늘려주는 방식입니다. 먼저 이미지..

JS] 프로그래머스 가운데 글자 가져오기

출처 https://programmers.co.kr/learn/courses/30/lessons/12903 코딩테스트 연습 - 가운데 글자 가져오기 단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다. 재한사항 s는 길이가 1 이상, 100이하인 스트링입니다. 입출력 예 s ret programmers.co.kr 문제 단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두 글자를 반환하면 됩니다. 제한 사항 s는 길이가 1 이상, 100이하인 스트링입니다. 풀이 글자의 길이의 반에서 올림한 값을 구해 중앙을 찾고 -1을 해줍니다. ( slice메서드를 사용하기 위해 ) sl..

[JS] 배열 특정 값 찾기 ( find, findIndex, filter )

find const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // callback(element, index, array) array.find(v => v > 5); // 6 find 메서드는 해당 조건에 만족하는 첫 번째 요소의 값을 반환하며 만족하지 않으면 undefined를 반환합니다. const array = [{name: 'red'}, {name: 'green'}, {name: 'yellow'}]; array.find(v => v.name === 'green'); // {name: 'green'}; find 메서드는 object가 담겨있는 배열에서도 유용하게 사용 가능합니다. findIndex const array = [1, 2, 3, 4, 5, 6, 7, 8, ..