반응형
반응형
자바스크립트에서 비동기 함수들을 사용할 때, Promise를 많이 사용합니다.또 confirm, modal 등 미래에 일어날 일들에 대해서 Promise를 사용해서 개발을 진행하면편리하게 개발할 수 있는 장점이 있습니다. Promise 란?Promise 란 비동기 작업을 할 때, 미래에 일어날 결과 또는 실패 값을 나타내는 객체입니다. Promise 에는 세 가지 상태가 있습니다.pending (완료하지 않은 아직 대기 상태)fulfilled (완료)reject (실패)const getExcelFile = (name, delay = 1000, isSuccess = true) => { return new Promise((resolve, reject) => { setTimeout(() => { ..
자바스크립트에서 조건에 따라서 배열에 값을 추가하고 싶을 때가 있습니다. 1. if문 이용하기고전적인 방법이지만 if 문을 이용하여 조건부로 추가할 수 있습니다.const arr = [];const condition = true;if (condition) { arr.push('superman');} 2. 삼항 연산자 이용하기삼항연산자를 이용하여 조건부로 배열의 값을 추가 할 수 있습니다.true 시 값이 있는 배열은 push 가 되고, 빈 배열은 아무값도 추가되지 않습니다.const condition = true;const arr = [ ...(condition ? ['superman'] : [])] JavaScript - 조건부 객체 속성 추가하기조건에 따라서 객체의 속성을 추가하고 싶을 때..
더하기, 빼기, 곱셉, 나누기, 나머지 계산하는 계산기 입니다. 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..
table-layout 속성은 테이블 레이아웃을 정의할 때 사용하는 알고리즘을 선택합니다auto, fixed 가 있습니다.table.a { table-layout: auto; width: 300px}table.b { table-layout: fixed; width: 300px} table-layoutauto 브라우저에서 자동 테이블 레이아웃 알고리즘을 사용합니다.테이블 열의 크기는 테이블이 깨지지 않는 선에 한해서 가장 넓은 내용으로 설정됩니다. fixed고정 테이블 레이아웃 알고리즘을 사용합니다.테이블 내에서 첫 행의 너비로 지정되고, 나머지 행의 너비는 영향을 끼치지 않습니다.만약에 첫 행의 너비가 없으면, 콘텐츠 내부 내용과는 상관없이, 모든 행이 동일한 너비를 가지게 됩니다. 성능 차이fi..
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..
동적 컴포넌트(Dynamic Component) 란?Vue에서는 컴포넌트를 동적으로 사용할 수 있는 방법이 있습니다. 위와 같이 라는 특수 컴포넌트가 있습니다.is Props에 컴포넌트 이름의 문자열이나, 컴포넌트 객체를 넣으면 컴포넌트를 동적으로 만들 수 있습니다. 주로 탭패널이나, 동적으로 변경되어야 할 사항에서 사용합니다.동적 컴포넌트를 이용하여 컴포넌트를 변경하면, 컴포넌트가 변경될 때, unmounted 상태가 됩니다.unmounted 상태가 되면, 이전에 가지고 있었던 데이터들이 손실되게 됩니다. 특정한 탭 패널 같은 경우에는 탭 전환이 일어나도, 이전에 가지고 있었던 데이터를 그대로 사용하고 싶을 때가 있습니다.그럴 경우에 KeepAlive 태그를 사용합니다. KeepAlive 태그를 ..
자바스크립트에서 객체를 사용하다고 보면 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 사용해서 객체 속성 변수..
객체, 배열 구조 분해 사용법객체, 배열 구조 분해 할당을 사용하면 객체, 배열 내에 있는 값들을 쉽게 사용할 수 있습니다.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를 사용하면 객체의 키를..
프론트엔드 개발을 하면 많은 오류를 만날 수 있습니다. 서버에서 오류가 날 때,Vue 렌더링 할 때,클라이언트에서 오류 등개발 중 또는 Product 시점에서도 오류가 나타날 수 있습니다. 오류가 나타날 것을 예상해 적절하게 처리를 해준다면, 사용자도 개발자도 더 편리하게 사이트를 사용할 수 있습니다. Nuxt에서 오류처리 하는 방법에 대해서 알아보도록 하겠습니다. 오류 처리하는 방법치명적 오류 ▶ 전체 페이지가 오류 페이지로 전환비치명적 오류 ▶ 오류가 발생 createError()사용법 const { data } = await useFetch(`/api/products`)if (!data.value) { throw createError({ statusCode: 404, statusMessage: '..
Vue Query 란?Vue 에서 비동기 데이터를 fetch, update를 하고 데이터를 캐싱 처리 할 수 있는 훅을 가진 라이브러리입니다.React Query 를 기반으로 만들어졌습니다. React Query - 비동기 상태 관리 라이브러리 알아보기React Query란? React Query는 비동기 상태 관리 라이브러리입니다. React에서 서버의 데이터 fetch를 도와주고 관리할 수 있는 라이브러리입니다. React Query 장점 1. 적은 보일러 플레이트 코드 2. 캐싱 3.powerku.tistory.com장점 Vue에서는 주로 Vuex를 이용하여 전역 상태 관리를 클라이언트에서 하였습니다.하지만, 서버에서 받은 데이터의 상태를 관리할 수 있는 방법이 없었습니다. 서버에서 받은 데이터 변..