Atelier BiCute

간혹 진행률을 표시하기위해 전체 수량을 완료된 수량으로 나누게 되면 57.999999999999% 처럼 소수부분이 길게 표시되는 경우가 있는데, 이때 원하는 소수 자리수만큼만 표시하는 방법입니다. 또한 58.00% 같이 뒤에 소수점 뒤에 끝자리가 0일 경우, 필요없는 0을 제거하는 방법도 함께 설명합니다. # toFixed() let workCount = 7; // 완료 수량 let totalQuantity = 50; // 전체 수량 let percentage = ((workCount / totalQuantity) * 100).toFixed(2); console.log(percentage); toFixed() 메서드를 이용하면 원하는 소수점 자리수를 지정할 수 있습니다. # 소수점 끝자리 0 제거하기 l..

비동기 코드를 순차적으로 실행하는 방법에는 여러 가지가 있습니다. 다음은 이와 관련된 몇 가지 패턴입니다. #1 Chaining Promises Promise의 then 메서드를 사용하여 여러 비동기 작업을 함께 연결하여 순서대로 실행되도록 할 수 있습니다. async function runSequentially() { await doSomethingAsync() .then(result => doSomethingElseAsync(result)) .then(result => doThirdThingAsync(result)); } #2 Async/Await Promise가 완료될 때까지 await 키워드를 사용하여 비동기 함수의 실행을 일시 중지할 수 있습니다. 다음과 같이 작성하여 비동기 작업을 순차적으로 ..

부모 컴포넌트에 추가된 자식 컴포넌트의 함수를 부모 컴포넌트 측에서 직접 호출하는 방법입니다. #1. 사용할 함수 정의 자식 컴포넌트에서 호출할 함수를 methods에 정의합니다. // 자식 컴포넌트 export default { methods: { childFunction() { // 실행할 코드 작성 } } } #2. ref 속성 추가 상위 컴포넌트에서 하위 컴포넌트에 ref속성을 사용하여 하위 컴포넌트에 대한 참조를 추가합니다.. // 부모 컴포넌트 #3. 함수 호출 부모 컴포넌트의 메서드에서 ref 및 함수 이름을 사용하여 자식 컴포넌트의 함수를 호출할 수 있습니다 // 부모 컴포넌트 export default { methods: { parentFunction() { this.$refs.child..

Vue에서는 사용자 지정 이벤트를 사용하여 서로 다른 컴포넌트 간에 통신할 수 있습니다. 템플릿에서 사용자 지정 이벤트를 내보내려면 $emit메서드를 사용하여 이벤트 이름과 이벤트에 포함할 페이로드를 전달할 수 있습니다. 아래는 $emit 메서드를 이용하여 자식 컴포넌트가 부모 컴포넌트에게 데이터를 전달하거나 데이터를 변경하도록 요청하는 방법들입니다. # 템플릿에서 이벤트를 요청 $emit 메서드를 사용하여 이벤트 이름과 이벤트에 포함할 페이로드를 전달할 수 있습니다. // 자식 컴포넌트의 템플릿에서 사용자 지정 이벤트를 요청 Click me # 스크립트에서 이벤트를 요청 this.$emit 메서드를 사용하여 컴포넌트의 스크립트 태그에서 사용자 지정 이벤트를 내보낼 수도 있습니다 . // 자식 컴포넌트의..

버튼 예를 들어, 위와 같은 버튼이 있을 경우 여러 번 클릭해도 한 번만 실행되도록 하고 싶을 경우 아래와 같은 방법들을 사용할 수 있습니다. # removeEventListener를 사용 const button = document.querySelector('button'); // 이벤트 핸들러를 생성 button.addEventListener('click', handleClick); function handleClick() { console.log('Button clicked!'); button.removeEventListener('click', handleClick); } 내부 함수 작동 후 removeEventListener를 이용하여, 더이상 함수가 호출되지 않도록 이벤트 핸들러를 제거해 줍니다...

# 주어진 범위 내에서 임의의 정수를 생성하는 방법 function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; } console.log(getRandomInt(1, 10)); 작동 방식 1. 입력받은 최소값(min)을 올림(Math.ceil), 최대값(max)을 내림(Math.floor)한다. 이는 min과 max가 소수일 경우 소수 자리를 제거하기 위함입니다. 2. Math.random 함수를 이용해 0과 1 사이의 임의의 실수를 생성한다. 3. 생성한 임의의 실수에 (max - min + 1)을 곱한다. 이는 min과..

# 숫자로 UUID 만들기 function generateUUID() { const digits = []; for (let i = 0; i < 16; i++) { digits.push(Math.floor(Math.random() * 10)); } return `${digits[0]}${digits[1]}${digits[2]}${digits[3]}-${digits[4]}${digits[5]}-${digits[6]}${digits[7]}-${digits[8]}${digits[9]}-${digits[10]}${digits[11]}${digits[12]}${digits[13]}${digits[14]}${digits[15]}`; } console.log(generateUUID()); for 반복문을 16번 반복하..

# Reduce const data = ['1', '3', '5', '7', '9']; function useReduce() { const sum = data.reduce((acc, element) => acc + parseInt(element), 0); console.log('reduce() = ', sum); } useReduce() // "reduce() = " 25 동작 방식 reduce() 메서드는 데이터 배열의 각 요소에 대해 reducer 함수를 호출하는데, 첫 번째 반복에서 acc는 초기값 0으로 설정되고 element는 데이터 배열의 첫 번째 요소인 '1'로 이 들어옵니다. reducer 함수는 parseInt()를 호출하여 요소를 숫자로 변환하고 현재 0인 acc에 더합니다. Reduc..

# 합자(Ligature)란? 합자(合字, Ligature)는 둘 이상의 글자를 합하여 한 글자를 만드는 것. 또는 그 글자. 자주 쓰이는 주요 합자들의 모양은 대게 비슷하며, 꼭 어떻게 해야한다고 정해진것이 아니기에 폰트에 따라 독자적인 형태를 가지고 있는것 또한 존재한다. # VS CODE에서 합자를 사용하는 방법 (1) 합자를 지원하는 폰트를 설치한다. 우선 아무 폰트나 가능한것이 아니기에, 합자를 지원하는 폰트를 설치해야합니다. 종류는 너무나 많으니 유료, 무료 등 원하는 합자를 지원하는 폰트를 설치합니다. (2) VS Code 설정 ① 설정을 열고(cmd + ,) 글꼴이라고 검색한 후, Editor: Font Family에 합자로 사용할 폰트를 가장 앞쪽에 작성해 줍니다. ② Font Ligat..