본문 바로가기
클라이언트/JavaScript
 (49)
[자바스크립트(JavaScript)] 최대공약수, 최소공배수 구하기(유클리드 호제법) // 최대공약수, GCD - 반복문으로 나머지를 계산하며 최대공약수를 구할 수도 있지만 수의 크기가 클 때는 주로 유클리드 호제법을 사용한다. * 유클리드 호제법 - 두 수 a, b가 주어졌을 때, a를 b로 나눈 나머지를 다시 b와 비교하는 과정을 반복한다.(재귀) - 나머지가 0이 되었을 때 b가 두 수의 최대공약수가 된다. const gcd = (a, b) => a % b === 0 ? b : gcd(b, a % b); // 최소공배수, LCM - 두 수의 곱을 최대공약수로 나눈다. const gcd = (a, b) => a % b === 0 ? b : gcd(b, a % b); const lcm = (a, b) => a * b / gcd(a, b); ※ n개의 수의 최소공배수(https://sch..
[자바스크립트(JavaScript)] 리덕스(Redux) // 리덕스, Redux - Cross-Component나 App-Wide 상태 관리 라이브러리 // Cross-Component State - 여러 컴포넌트에 영향을 미치는 state ~ 모달창 open / close // App-Wide State - 애플리케이션 전체에 영향을 미치는 state ~ 사용자 인증 - 하나의 중앙 데이터 저장소 > 딱 하나에 원하는 state를 모두 저장한다. - 컴포넌트는 저장소에 있는 state를 직접 변경하지 않고 Reducer 함수를 이용하여 변경한다. > Component ->(dispatch) action -> Reducer 함수 -> Central State Store 1. 저장소 생성 const redux = require('redux'); const 저장..
[자바스크립트(JavaScript)] Million.js // Million.js - 빠르고 효율적인 JavaScript 프레임워크 - 공식 홈페이지에 보면, 컴포넌트를 최대 70%나 빠르게 만들어주는 매우 빠르고 가벼운 최적화 컴파일러라고 설명이 되어있다. - React의 가상 DOM 매커니즘을 대체하여 더 효율적인 매커니즘으로 DOM 업데이트를 수행한다. - 공식 홈페이지: https://million.dev/ Million.js | Million.js The Virtual DOM Replacement for React million.dev 1. 설치 npm install million 2. 컴파일러 추가 - vite 기반의 React 프로젝트인 경우 vite.config.js 파일을 수정하여 추가한다. import million from "million/..
[자바스크립트(JavaScript)] 특정 범위에서 약수의 개수 구하기(에라토스테네스의 체) 해당 수의 약수인지 아닌지 1부터 그 수까지 반복문을 돌려서 구할 수도 있지만, 효율성이 많이 떨어진다. 코테에서는 시간 초과가 될 가능성도 크다. 특히 특정 범위의 모든 수의 약수를 각각 구해야 하는 경우는 매우 비효율적이다. 소수를 효율적으로 구할 때 에라토스테네스의 체라는 알고리즘을 사용하는데, 역시나 같은 알고리즘을 사용할 수 있다. 에라토스테네스의 체는, 1부터 n까지의 수들의 배수를 차례대로 채워나가면서 효율적으로 약수의 개수를 구할 수 있는 알고리즘이다. 만약 1부터 n까지의 범위에 있는 모든 수의 약수의 개수를 각각 구하려면, 크기가 n+1인 배열 생성 - index 와 수를 일치시키기 위해 n+1 크기로 배열을 생성한다. - 생성한 배열의 기본값을 모두 0으로 채운다. const numb..
[자바스크립트(JavaScript)] 특정 범위에서 소수 구하기(에라토스테네스의 체) 해당 수가 소수인지 아닌지 반복문을 돌려서 구할 수도 있지만, 효율성이 많이 떨어진다.특히 특정 범위에서 소수를 모두 구해야 하는 경우는 해당 범위 * 범위에 속한 수의 크기만큼 반복문을 돌려야하기 때문에 매우 비효율적이다.function isPrime(number) { if(number === 1) return false; for(let i = 2; i - 좋지 않은 예시효율적으로 특정 범위에 있는 모든 소수를 구할 때 사용되는 알고리즘이 바로 에라토스테네스의 체이다.에라토스테네스의 체는, 소수의 배수들을 차례대로 지워나가면서 효율적으로 소수만 구할 수 있는 알고리즘이다.만약 1부터 n까지의 범위에 있는 수 중 소수를 모두 구하려면,크기가 n+1인 배열 생성 - index 와 수를 일치시키..
[자바스크립트(JavaScript)] Builder 패턴 // Builder 패턴 - 복잡한 객체의 생성 과정을 단순화하는 디자인 패턴 - 가독성, 유지보수성을 높일 수 있다. - 객체가 여러 개의 매개변수를 가질 때 주로 사용한다.(3개 이상) - 단계 Builder 인터페이스를 정의하여 매개변수를 받아 정의한다. Builder 인터페이스를 구현하는 상세 클래스를 정의한다. 상세 클래스가 필요한 부분에서 Builder 인터페이스를 사용하여 객체를 생성한다. - Builder 인터페이스, 구현 클래스 export class playBuilder { duration(duration) { this.duration = duration; return this; } character(character) { this.character = character; return ..
[자바스크립트(JavaScript)] Audio // Audio - 자바스크립트에서 오디오를 사용할 수 있게 해주는 객체 - 생성 const 변수명 = new Audio('오디오 파일 주소'); - 메소드 play() : 오디오 재생 pause() : 오디오 일시정지 load() : 오디오 src 변경 후 재로딩 const sound = new Audio('경로1'); sound.play(); sound.pause(); sound.src = '경로2'; sound.load(); sound.play(); sound.pause();
[자바스크립트(JavaScript)] 정규식 (Test, Match) // Test - 주어진 문자열이 정규식에 일치하는지 확인하는 javaScript 메서드 - 문자열에서 주어진 정규식과 일치하는 부분이 있는지 결과를 Boolean으로 반환한다. - 정규식 객체에 적용된다. const regex = /^(aya|ye|woo|ma)+$/; console.log(regex.test('ayaya')); console.log(regex.test('ayawoo)); // Match - 문자열에서 정규식을 사용하여 패턴을 찾는 JavaScript 메서드 - 문자열에서 주어진 정규식과 일치하는 부분을 찾아 결과를 배열로 반환한다. (일치하는 부분이 없다면 null 반환) - 문자열 객체에 적용된다. // g(전역검색) - g 플래그가 있으면 문자열 전체의 결과를 반환하고, 없으면 첫..

티스토리툴바