Atelier BiCute

#1. 비주얼 스튜디오 코드 설치하기 브라우저의 주소창에(https://code.visualstudio.com/)를 입력하여 비주얼 스튜디오 코드 홈페이지로 접속합니다. 오른쪽 위에 다운로드 페이지로 들어가는 방법도 있지만, 화면 중앙의 버튼을 이용하면 자신의 운영체제에 맞는 다운로드 버튼이 나타납니다. 이 버튼을 눌러 비주얼 스튜디오 코드 설치 파일을 다운로드합니다. 다운이 완료되면 파일을 더블클릭하여 설치를 진행합니다. (특별히 건드릴 세팅 없음) #2. 비주얼 스튜디오 코드 실행하기 처음 비주얼 스튜디오 코드를 실행하면 한글 패치부터 시작하는 것이 좋습니다. 한글 패치 외 추천할만한 플러그인들에 관한 것은 다음글을 참고해 주세요 ※ 참고: 비주얼 스튜디오 코드 확장 프로그램 추천 (12종) #3. ..

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)를 사용하여 다시 객체로..