자바스크립트 런타임 Bun 이란? 사용법, 설치방법

귀여운 로고를 가진 자바스크립트 런타임 프로그램이 새로 생겼습니다. 자바스크립트 런타임(실행 환경)이란?자바스크립트는 빈공간에서 혼자 실행되지 않습니다.브라우저나 Node.js 와 같은 런타임 환경에서 작동합니다. 브라우저에서는 자체 자바스크립트 엔진을 사용하여 정적인 웹페이지를 동적으로 만들 수 있습니다. Node.js 에서는 C++로 만들어진 크롬 V8 엔진을 사용하여 자바스크립트 코드를 실행합니다.Node.js 를 설치하면 서버, 웹 앱, 커맨드 등에서 자바스크립트를 사용할 수 있습니다.Bun 이란?Bun은 자바스크립트 런타임입니다.또한, 자바스크립트 bundler, test runner 와 package manager 의 기능을 가진 도구 입니다. Bun 은 Zig 라는 언어로 만들어졌고,내부적으..

• format_list_bulleted Develop/etc
• · 2024. 10. 23.
• textsms

npm cache clean vs verify

프로젝트에서 npm pacakge 설치를 위해 npm install을 사용합니다.설치를 하다가 오류가 나거나, 파일이 손상될 경우에 실행이 되지 않는 경우가 있습니다. 그럴 경우에는 캐시를 직접 삭제 또는 확인하는 방법을 통해서 다시 설치해야 합니다.npm cache clean --forcenpm cache verify 위 두 가지 명령어를 사용하여 해결할 수 있습니다. npm cache 란?npm package를 설치하면 일반적인 http 요청 데이터와 package에 필요한 기타 데이터들을 캐시에 저장합니다.기본적으로는 C:\Users\{userName}\AppData\Roaming\npm-cache\_cacache 해당 폴더에 저장합니다. npm cache 데이터는 삭제되지 않고, 계속 증가하게 됩..

• format_list_bulleted Develop/etc
• · 2024. 10. 18.
• 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

CSS - table-layout 테이블 크기 고정 시키기 fixed, auto 차이

table-layout 속성은 테이블 레이아웃을 정의할 때 사용하는 알고리즘을 선택합니다auto, fixed 가 있습니다.table.a { table-layout: auto; width: 300px}table.b { table-layout: fixed; width: 300px} table-layoutauto 브라우저에서 자동 테이블 레이아웃 알고리즘을 사용합니다.테이블 열의 크기는 테이블이 깨지지 않는 선에 한해서 가장 넓은 내용으로 설정됩니다. fixed고정 테이블 레이아웃 알고리즘을 사용합니다.테이블 내에서 첫 행의 너비로 지정되고, 나머지 행의 너비는 영향을 끼치지 않습니다.만약에 첫 행의 너비가 없으면, 콘텐츠 내부 내용과는 상관없이, 모든 행이 동일한 너비를 가지게 됩니다. 성능 차이fi..

• format_list_bulleted Develop/CSS
• · 2024. 6. 20.
• textsms

Vue - Component에서 v-model 사용하는 방법

Vue에서는 v-model을 이용해서 양방향 바인딩을 할 수 있는 장점이 있습니다.v-model 기본 사용법기본적으로 아래와 같이 v-model을 이용해서 양방향 바인딩을 할 수 있습니다.  Vue 양방향 바인딩 v-modelVue에서는 양방향 바인딩을 v-model를 이용하여 간단하고 쉽게 할 수 있는 방법이 있습니다. 양방향 바인딩이란? 입력요소의 이벤트를 수신하는 동시에 값을 보내는 방식입니다. 동시에 데이터 통powerku.tistory.com컴포넌트에서 v-model 사용하기v-model 은 기본적으로 modelValue를 prop으로 사용하고 update:modelValue를 이벤트로 사용합니다.아래와 같이 사용하면 양방향 바인딩이 가능합니다. name = value"/> BaseInput.v..

• format_list_bulleted Develop/Vue
• · 2024. 6. 15.
• textsms

Vue - 동적 컴포넌트, KeepAlive, activated 사용법

동적 컴포넌트(Dynamic Component) 란?Vue에서는 컴포넌트를 동적으로 사용할 수 있는 방법이 있습니다. 위와 같이 라는 특수 컴포넌트가 있습니다.is Props에 컴포넌트 이름의 문자열이나, 컴포넌트 객체를 넣으면 컴포넌트를 동적으로 만들 수 있습니다. 주로 탭패널이나, 동적으로 변경되어야 할 사항에서 사용합니다.동적 컴포넌트를 이용하여 컴포넌트를 변경하면, 컴포넌트가 변경될 때, unmounted 상태가 됩니다.unmounted 상태가 되면, 이전에 가지고 있었던 데이터들이 손실되게 됩니다. 특정한 탭 패널 같은 경우에는 탭 전환이 일어나도, 이전에 가지고 있었던 데이터를 그대로 사용하고 싶을 때가 있습니다.그럴 경우에 KeepAlive 태그를 사용합니다.  KeepAlive 태그를 ..

• format_list_bulleted Develop/Vue
• · 2024. 6. 15.
• 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