매일 꾸준히, 더 깊이

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. computed란? computed(산출 속성)는 리액티브한 데이터를 포함한 복잡한 로직을 기재하여 데이터의 변경이 있을 때, 자동적으로 재계산해주는 기능을 가지고 있다. 예를 들어, 템플릿 내에서 동적으로 변경된 email 속성을 기재하고 "@" 전의 문자를 소문자로 변환하는 처리를 하려고 한다. {{ email.split('@')[0].toLowerCase() }} Vue.js에 있어서는 이러한 리액티브한 데이터를 포함한 복잡한 로직을 처리하는 경우 기본적으로 computed를 사용한다. 반환값은 ref가 된다. 그러므로, ref도 동일하게 publishedBooksMess..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 개요 이번 포스트에서는 Vue 미경험이었던 상태에서 약 5개월이 된 지금, 그 동안 축적해 온 Vue의 패턴이나 잔기술에 대해 공유하고자 한다. v-model의 커스터마이즈 v-model은 기본적으로 아래와 같이 바꿔 쓸 수 있다. 그러나, 이를 아래를 이용해 v-model 커스터마이스할 수 있다. model: { prop: "isExpanded", event: "toggle" }, props: { isExpanded: { type: Boolean, default: false } }, 폼과 같은 컴포넌트라면 v-model과 연결시켜 prop명과 event명을 그대로 value,..

※ 일본의 할 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. every every는 배열의 모든 요소가 조건을 만족한 경우에 true를 반환한다. const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] arr.every(value => value > 0) // return true arr.every(value => value { return value }) // return true const arr = ['hello', true, 0 /* JS..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 이번에 포스트에서 다룰 것 다음과 같은 object가 있다고 가정하자. sample object { "key-1": "value-1", "key-2": "value-2", "key-3": "value-3" } 이 object를 아래와 같은 list로 변경하는 것이 이번 포스트에서 목표로 하고 있는 것이다. sample list [ { "key": "key-1", "value": "value-1" }, { "key": "key-2", "value": "value-2" }, { "key": "key-3", "value": "value-3" } ] Object.entries()를 이..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. spread 구문 ...foo 와 같은 형태로 기재되며, 배열이나 오브젝트의 요소를 문자 그대로 전개하는 구문이다. 단순한 정의로는 어떤 구문인지 한번에 이해하기 어려울 것 같으므로, 배열과 오브젝트 각각의 경우를 살펴보자. 배열 const foo = [1, 2]; // 배열의 복사 const bar = [...foo]; // => [1, 2] // 요소를 추가하여 새로운 배열을 생성 const baz = [...foo, 3, 4]; // => [1, 2, 3, 4] // 배열 합치기 const hoge = [...foo, ...bar]; // => [1, 2, 1, 2] Ar..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 시작전에 JavaScript의 async/await에 관련된 포스트로, 다음의 사람을 대상으로한다. 지금까지 $.Deferred()나 Promise등으로 비동기 처리를 쓴 적이 있지만, async/awit에 대해서 잘 모른다. $.Deferred()나 Promise등의 비동기 처리 작성법보다 더 간단하게 쓸 수 있는 방법이 있다면 알고싶다. 지금까지의 비동기 처리 작성법에 비교해서 좋은 점을 잘 모르겠다. $.Deferred()나 Promise등으로 비동기 처리를 작성했던 경험이 있는 것을 전제로하므로, 비동기 처리 자체에 대한 설명을 이번에 생략한다. 기재된 이용 예의 코드는..

코드를 작성하다보면 조건문이 복잡해지는 (깊이가 깊어지는) 경우가 있다. 예를 들면 다음과 같은 경우이다. if( c { if (isOnline) { // 온라인시의 처리 makeReservation(); ... ... } else { // 오프라인시의 처리 alert('오프라인입니다.'); } } After const checkConnection = (isOnline) => { if (!isOnline) { alert('오프라인입니다.'); return; } // 온라인시의 처리 makeReservation(); ... ... } 삼항연산자 사용하기 삼항연산자 사용하여 가독성을 높일 수 있다. Before const checkAge = (age) => { if (age > 18) { console.lo..

Vuetify(Vue UI 라이브러리)를 이용해서 셀렉트 박스를 구현하는 경우 v-select 컴포넌트를 사용한다. 사용법은 간단하며, 셀렉트 박스를 두고 싶은 곳에 v-select 컴포넌트를 기재하면 된다. 위의 select 요소라는 option 요소나 Vuretify의 속성을 추가하는 것으로 셀렉트 박스를 구현해나간다. v-select로 셀렉트 박스 구현하기 실제로 v-select 컴포넌트로 셀렉트 박스를 구현해보자. 여기서는 v-select에서 자주 사용되는 옵션 리스트의 설정, 라벨의 설정, 스타일의 변경, input의 높이를 낮게 하는 방법 등에 대해서 소개하도록 하겠다. 옵션 리스트를 설정하기 옵션 리스트는 v-select의 items 속성의 값에 배열을 지정하여 설정한다. select 요소에..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 부모 컴포넌트에서 props으로 건내 받은 변수를 자식 컴포넌트에서 갱신하고 싶을 때 대처법에 대해서 기록하고자 한다. 인트로 Vue.js는 부모 컴포넌트에서 전달된 변수를 자식 컴포넌트에서 갱신하려고 하면 아래와 같은 경고가 발생한다. [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop..

※ 일본의 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. setter, getter이란? setter, getter이란 java 개발자들 사이에 널리퍼진 암묵적 코드 규약으로, 클래스 안에 변수를 세팅, 획득하기 위한 전문 메소드를 의미한다. 즉, 변수를 세팅하기 위한 메소드가 setter 메소드, 변수를 획득하기만 하는 메소드는 getter 메소드이다. 실제 코드 작성 방법, 명명 규약에 대해서는 입문 서적에 잘 설명되어 있지만, 다음과 같이 쓰는 것이 setter/getter이다. public class sample { private String name; // gettter public String getName() { return..