반응형
반응형
자바스크립트에서 조건에 따라서 배열에 값을 추가하고 싶을 때가 있습니다. 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..
저는 운동선수도 아닌데 운동을 너무 많이 하고 있다는 생각을 하였습니다. 운동할 시간에 업무 관련 공부나, 독서, 아니면 블로그 글이라도 하나 더 써야뭔가 하루를 잘 살았다는 생각이 들어서 운동을 좀 적당히 하였습니다. 하지만, 여름 맞이 다이어트 겸 해서 겸사겸사 최근 약 2달 정도 아침운동을 하고 있습니다.5월엔 주로 동네 조깅을 진행하였고, 6월엔 주로 헬스장을 갔습니다. 아침 운동하면서 느낀점을 간단히 작성해보려고 합니다. 1. 밤에 잠이 잘 옵니다.퇴근 후 저녁에 격한 운동을 하게 되면, 흥분 상태가 돼서 일찍 잠이 못 들게 됩니다.운동하고 씻고, 쉬다가 보면 새벽 2~3시가 되고, 다음날 피곤한 하루를 보내게 됩니다. 2. 기분이 좋아집니다.뭐 운동을 하면 당연한 이야기지만, 특히 아침 운동을..
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: '..
한강이나 서울숲에서 연을 날리시는 분들을 종종 볼 수 있습니다.하늘 저 높이 나는 연을 보면 신기하기도 하고,그래서 이번에 직접 연을 날려보기 위해서 연을 구매하였습니다. 연을 들고 집 근처 운동장으로 가서 연을 날리려고 했습니다만,한강에서 날리시던 분들은 아주 쉽게 연을 멀리 날리는 것처럼 보였지만연 날리기는 것은 결코 쉽지 않았습니다. 50~100번을 날리면10번 정도는 어느 정도 뜨다가 떨어지고,1~2번 정도 100m 이상 날아가는 정도 였습니다. 연 날리기에 중요한 것연 날리기 3일 차이지만,연을 날릴 때 중요한 것은 바람, 장비(연, 얼레), 기술(얼레질)입니다. 일단 장비가 좋아야 합니다.연이 잘 나는 연이어야 하고 실을 빠르게 풀고 빠르게 감을 수 있는 좋은 얼레가 있어야 합니다. 바람에 따..