JavaScript - 아이폰 스톱워치 만들기

기능시작 / 정지 / 재시작 분, 초, 밀리초로 표시랩See the Pen Stop Watch by powerku (@powerku) on CodePen.

• format_list_bulleted Develop/JavaScript
• · 2025. 3. 21.
• textsms

사용하지 않는 dependency 정리하기 depcheck

사용하지 않는 dependency 정리하기 프로젝트를 점점 진행하다보면 package.json 파일에 dependency가 점점 쌓이게 됩니다.초기 프로젝트 세팅을 위한 vue, react, express 등등eslint, prettier, test tool 등각종 편의를 위한 라이브러리 등 모두 프로젝트에 사용하면 좋겠지만, 테스트를 위해 추가했다고 지우지 않고 커밋을 한다던가,더 이상 사용하지 않는 기능이라서 dependency에만 남아있는 경우가 있습니다.사용하지 않는 dependency가 계속 프로젝트에 남아 있으면프로젝트가 무거워지고 build 할때도 오래 걸리게 됩니다. 이럴때 필요한 라이브러리가 있습니다.depcheckpackage.json 에서 더 이상 사용하지 않는 쓸모 없는 depend..

• format_list_bulleted Develop/JavaScript
• · 2024. 12. 19.
• textsms

자바스크립트 - Promise all, allSettled 사용법, 차이점

자바스크립트에서비동기 작업 중 여러개의 API를 동시에 호출하고모든 비동기 작업이 완료 되었을 때, 새로운 코드를 작성하고 싶을 때가 있습니다. 또, 여러개의 API를 순차적으로 날리지 않고 동시에 호출하여 웹 성능을 향상할 수도 있습니다. 그럴때 Promise 메서드 중 all 과 allSettled 를 사용할 수 있습니다. Promise.all()Promise.all() 의 경우에는 n개의 비동기 함수를 동시에 실행하고 모든 함수가 완료하면, 함수의 결과 값을 반환합니다.하지만, 단 하나의 함수라도 실패하면 Promise가 실패되게 됩니다. const response = await Promise.all([ getExcelFile('name1.xls', 1000), getExcelFile('name..

• format_list_bulleted Develop/JavaScript
• · 2024. 8. 29.
• textsms

자바스크립트 - 비동기 Promise 란?

자바스크립트에서 비동기 함수들을 사용할 때, Promise를 많이 사용합니다.또 confirm, modal 등 미래에 일어날 일들에 대해서 Promise를 사용해서 개발을 진행하면편리하게 개발할 수 있는 장점이 있습니다. Promise 란?Promise 란 비동기 작업을 할 때, 미래에 일어날 결과 또는 실패 값을 나타내는 객체입니다. Promise 에는 세 가지 상태가 있습니다.pending (완료하지 않은 아직 대기 상태)fulfilled (완료)reject (실패)const getExcelFile = (name, delay = 1000, isSuccess = true) => { return new Promise((resolve, reject) => { setTimeout(() => { ..

• format_list_bulleted Develop/JavaScript
• · 2024. 8. 24.
• textsms

JavaScript - 조건부 배열 추가 하기

자바스크립트에서 조건에 따라서 배열에 값을 추가하고 싶을 때가 있습니다. 1. if문 이용하기고전적인 방법이지만 if 문을 이용하여 조건부로 추가할 수 있습니다.const arr = [];const condition = true;if (condition) { arr.push('superman');} 2. 삼항 연산자 이용하기삼항연산자를 이용하여 조건부로 배열의 값을 추가 할 수 있습니다.true 시 값이 있는 배열은 push 가 되고, 빈 배열은 아무값도 추가되지 않습니다.const condition = true;const arr = [ ...(condition ? ['superman'] : [])]   JavaScript - 조건부 객체 속성 추가하기조건에 따라서 객체의 속성을 추가하고 싶을 때..

• format_list_bulleted Develop/JavaScript
• · 2024. 6. 27.
• textsms

자바스크립트 - 사칙 연산 계산기 만들기

더하기, 빼기, 곱셉, 나누기, 나머지 계산하는 계산기 입니다. html계산기 첫번째값: 두번째값: + - * / % 계산결과:  javascriptconst num1 = document.getElementById('num1');const num2 = document.getElementById('num2');const plusBtn = document.getElementById('plusBtn');const subBtn = document.getElementById('subBtn');const multBtn = document.getElementById('multBtn');const divBtn = document.getElementById('divBtn');const res..

• format_list_bulleted Develop/JavaScript
• · 2024. 6. 23.
• textsms

자바스크립트 - 객체 속성 값을 변수로 만드는 방법

자바스크립트에서 객체를 사용하다고 보면 key 값을 변수로 사용하고 싶을 때가 있습니다.ES2015 문법 부터는 쉽게 객체의 key 값을 변수로 선언하여 사용할 수 있습니다. 객체 초기화 하기일반적으로는 아래와 같이 초기화 할 수 있습니다.var user = { name: 'superman', age: '23', job: 'developer'} 객체 초기화 (약식 문법)객체에 프로퍼티명을 약식으로 만들면 객체 property 값을 본인이 원하는 값으로 선언할 수 있습니다.const name = 'superman';const age = 23;const job = 'developler';var user = { name, age, job }  Computed Property 사용해서 객체 속성 변수..

• format_list_bulleted Develop/JavaScript
• · 2024. 6. 11.
• textsms

객체 구조 분해 이용하여 속성, key, property 삭제 하기

객체, 배열 구조 분해 사용법객체, 배열 구조 분해 할당을 사용하면 객체, 배열 내에 있는 값들을 쉽게 사용할 수 있습니다.const [a, b] = [1, 2]// a: 1, b: 2const { name, age } = { name: 'superman', age: 25 }// name: 'superman', age: 25  구조 분해 Rest Parameters 기능 사용하여 객체 Property 삭제 하기Rest Parameters란? 아래와 같이 뒤에 있는 남은 매개 변수를 한번에 받을 수 있는 방법입니다.function foo(...a) { console.log(a)}foo(1, 2, 3, 4) // [1, 2, 3, 4] 객체 구조 분해 Rest Parameters를 사용하면 객체의 키를..

• format_list_bulleted Develop/JavaScript
• · 2024. 6. 4.
• textsms

자바스크립트 - map 함수에서 비동기 함수 사용하기 async, Promise.all

map 함수에서 비동기 사용하기 async function asynFunction(id) { const res = await fetch('https://dummyjson.com/products/${id}'); const data = await res.json(); console.log(data); return data } const array = [1, 2, 3, 4, 5]; const userList = array.map(async (id) => await asyncFunction()); console.log(userList); 위와 같이 map 함수에서 비동기 함수를 호출하게 되면 아래와 같이 데이터의 결과 값들이 아니라 Promise 객체가 반환 됩니다. await 의 경우에는 promise 객체는..

• format_list_bulleted Develop/JavaScript
• · 2024. 4. 19.
• textsms

자바스크립트 - 함수 속도 측정할 수 있는 방법 console.time(), performance.now()

프론트엔드 개발에서 성능 향상은 중요한 요소 중에 하나 입니다. 성능 향상을 위해 자바스크립트 함수 속도를 측정 할 수 있는 방법에 대해서 알려드리겠습니다. console.time() console.time(); doSomething(); console.timeEnd(); // default: 8007.467041015625 ms console 의 static 메서드인 time을 이용해서 속도를 측정할 수 있습니다. time 메서드 호출 이후, timeEnd 메서드를 호출하기까지의 시간을 계산해서 콘솔에 표시 해줍니다. 간단히 속도를 콘솔에서 확인할 수 있는 장점이 있지만, 콘솔에서만 확인할 수 있고, 데이터로 처리 하거나, 다른 방법으로 확인할 수 없는 단점이 있습니다. performance.now()..

• format_list_bulleted Develop/JavaScript
• · 2024. 3. 31.
• textsms