Atelier BiCute

Mitt는 작고 빠른 JavaScript 이미터(emitter) 라이브러리입니다. 브라우저와 Node.js 환경 모두에서 작동하도록 설계되었으며 이벤트를 내보내고 처리하기 위한 간단하고 직관적인 인터페이스를 제공합니다. Mitt를 사용하면 사용자 정의 이벤트를 생성하고, 이벤트 핸들러를 연결하여 이러한 이벤트를 수신하고, 무언가 발생했음을 코드의 다른 부분에 알리고 싶을 때마다 이러한 이벤트를 트리거할 수 있습니다. ※ emitter란? 코드의 다른 부분에 알림을 보낼 수 있는 소프트웨어 디자인 패턴입니다. # 설치 npm npm install --save mitt yarn yarn add mitt # 등록 전역 플러그인으로 설치 import Vue from 'vue' import mitt from 'm..

form 데이터를 콘솔로그나 화면에 출력해보면 "[object FormData]” 라고만 출력이 됩니다. 이 내용을 확인하는 방법들에 대한 글입니다. # FormData FormData는 양식 데이터의 키-값 쌍을 저장하는 데 사용되는 JavaScript의 개체입니다. get 메소드를 사용하고 검색하려는 값의 키를 전달하여 FormData 객체의 내용에 액세스할 수 있습니다. let formData = new FormData(); formData.append('key1', 'value1'); formData.append('key2', 'value2'); console.log(formData.get('key1')); // 출력 'value1' console.log(formData.get('key2')); ..

JavaScript에서 class는 ① 객체(특정 데이터 구조)를 만들고, ② 상태(멤버 변수 또는 속성)에 대한 초기 값을 제공하고, ③ 동작 구현(멤버 함수 또는 메서드) 을 위한 템플릿입니다. # class 다음은 Person이라는 이름의 기본 클래스의 예입니다. class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`); } } 클래스를 사용하려면 new키워드를 사용하여 클래스의 객체(인스턴스)를 만든 다음 해당 인스턴스에서 메서드를 호출할 수 있습니다. 예를들..

Vue.js에서 조건에 따라 클래스를 지정하려면 v-bind디렉티브를 사용하여 부울 값(참, 거짓)으로 평가되는 표현식에 클래스를 바인딩할 수 있습니다. 단일 조건부 클래스 :class="{'클래스명': '조건'}" 다음은 단일 조건부 클래스의 예입니다. isActive의 속성이 true인 경우 div 요소에 active 클래스가 적용 됩니다. 다중 조건부 클래스 :class="{'클래스명': '조건', '클래스명': '조건'}" 다음은 다중 조건부 클래스의 예입니다. isActive가 ture인 경우 active 클래스를 추가하고, hasError가 true인 경우 'text-danger' 클래스를 추가합니다. 삼항 연산자를 사용한 조건부 클래스 :class="[조건 ? '조건이 true일 경우의 클래..

일반 함수를 Promise로 변환하는 여러가지가 있지만, 모두 새로운 Promise 객체를 반환하고 resolve및 reject 콜백을 사용하여 성공 사례와 실패 사례를 각각 처리해야 합니다. # function function add(a, b) { return new Promise((resolve, reject) => { if (a && b) { resolve(a + b); } else { reject(new Error('Invalid arguments')); } }); } 이 예제에서 add 함수는 new Promise를 반환하는 일반 함수로 정의됩니다. 콜백은 인수(a와 b)의 합계를 반환하는 resolve와 콜백의 인수가 유효하지 않은 경우 오류를 반환하는 reject가 있습니다. # Arrow ..

[JavaScript] 비동기 코드를 순차적으로 실행하도록 만드는 패턴들에서 이어지는 내용입니다. 순차적으로 만드는 다양한 패턴들중 가장 많이 사용되는 asnyc / await 와 promise.all()의 동작에 관하여 간단히 정리해 보았습니다. # async / awiat async function processFunctions() { try { var result1 = await func1(); var result2 = await func2(); console.log(result1, result2); } catch(error) { console.error(error); } } (1) 함수 앞에 async 라는 예약어를 붙입니다. (2) 함수 내부에서 순서대로 처리하고 싶은 비동기 메서드 앞에 awa..

# JSON.parse(JSON.stringify(obj)) let originalArray = [1, 2, 3, 4, 5]; let copiedArray = JSON.parse(JSON.stringify(originalArray)); console.log(copiedArray); // [1, 2, 3, 4, 5] JSON.stringify(obj)는 JavaScript 개체를 JSON 문자열로 변환하는 JavaScript의 메서드입니다. JSON.parse(jsonString)는 JSON 문자열을 JavaScript 객체로 변환하는 메서드입니다. 객체는 JSON.stringify(obj)를 통해 JSON 문자열로 변환된 다음 해당 문자열을 JSON.parse(jsonString)를 사용하여 다시 객체로..

간혹 진행률을 표시하기위해 전체 수량을 완료된 수량으로 나누게 되면 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..