매일 꾸준히, 더 깊이

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. v-tooltip v-tooltip을 사용하면 Vuetify 홈페이지를 보면 알 수 있듯, 마우스를 특정 요소에 올리면 tip이 표시되도록 할 수 있다. v-tooltip 사용법 v-tooltip 태그로 감싸, template내에서 tooltip이 반응했으면 하는 요소를 쓴다. icon이나 span등 어떤 태그여도 가능하다. 그리고 커서를 맞출 때 표시하는 tooltip의 내용을 v-tooltip태그 바로 아래에 쓴다. v-image나 h1태그 등에도 사용 가능하다. 위에 팝업 tooltip에 표시할 것 작성했듯 위에 팝업이라는 문자에 커서를 올리면 "tooltip에 표시할 것..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 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,..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 심리적 안전성이란? 심리적 안전성이란 구글에서 검색해보면 "직장에서 누군가에게 어떤 말을 들어도 인간 관계가 틀어지지 않고, 벌을 받는 기분이 아닌 상태"를 의미한다. 그러나 이 정도로는 어떤 의미인지 와닿지 않는다. 그래서 심리적 안전성을 제시한 에이미 에드먼슨의 "두러움 없는 조직"을 읽어봤다. 책에는 다양한 사례를 이용해 조직에서의 심리적 안전성을 설명하고 있었다. 심리적 안전성이 높은 조직은 어떤 조직인가에 대해서 간단히 요약하자면 다음과 같다. "이대로는 위험하지 않을까?"라고 생각한 사건에 대해서 "여기서 이 상태로는 괜찮은가요?"라고 누구에도 물어볼 수 있는 환경으..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 왜 비동기 처리를 의식해야하는가? 예를 들면 아래와 같은 케이스가 있다고 가정해보자. // 화면에 Hello World를 표시한다. expect(wrapper.text()).toMatch('Hello World') Hello World가 표시되는 것을 테스트하고자한다. 그러나 가정으로 //화면에 Hello World를 표시한다. 부분이 비동기 처리가 된 경우(여기서는 편의를 위해서 주석으로 처리를 설명하고 있지만 그러한 처리를 하는 코드가 작성되어 있다고 가정), Hello World가 표시되기전에 expect(wrapper.text()).toMatch('Hello World'..

※ 일본의 할 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 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..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. TDD(Test Driven Development)란? 한 줄로 설명하자면, Clean Code that works을 구현하기 위해 테스트를 실행하면서 코드를 완성시켜가는 방법이다. TDD(Test Driven Development)의 방법 아래의 그림과 같이 3개 요소가 포함된 사이클을 계속해서 반복해나가면서 TDD를 실현해나간다. 세 개의 요소는 다음과 같다. Red : 테스트의 실패 Green : 테스트의 성공 Refactor : 리팩터링 실시 기본적으로 사이클은 (1~6)을 반복해서 실행하며, 코딩해나간다. 1. 작성하고자하는 코드의 목표를 생각한다. 2. 그 목표를 달..

※ 이 포스트는 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주면 감사하겠습니다. ※ 이 포스팅은 DDD를 신천하기 위한 안내서(리포지터리편)의 전편입니다. 후편은 여기를 참조해주세요. DDD란 Domain-Driven Design(도메인 기반 설계)의 약어로 에릭 에반스라는 사람이 제시한 소프트웨어 설계를 집약한 개념이다. 그러나 이 개념은 폭이 넓고, 추상적인 부분이 많아 이해하기 힘들다는 목소리가 왕왕 들린다. 이번 포스팅에서는 이런 어려움을 겪는 사람들을 위해 수 년에 걸쳐 DDD를 실천한필자의 독단적인 해석과 실천 방법에 대해 소개하고자한다. DDD란? DDD가 커버하는 영역 DDD가 다루는 범위는 앞서 말했듯 꽤 넓다. 에릭 에반스가 말..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. ※ 시리즈 포스트입니다. 전편은 여기를 참조해주세요. 시작하기에 앞서 리포지터리 패턴은 DDD로 유명한 도메인 모델의 영속화를 위한 디자인 패턴이다. 지금 여러군데에서 "Repository"이라는 이름을 경우를 꽤 많이 보게 되지만 오남용하는 경우가 많이 있다. 따라서 이번 포스트를 통해 리포지터리 패턴의 의도나 본질을 이해하는 것을 목표하고 있다. 그리고 리포지터리 패턴에는 도움이 되는 사고 방식이 있기 때문에 패턴을 채용하지 않아도 알아두면 분명히 도움이 될 것이다. 또한 코드의 예는 Kotlin을 작성하고 있지만, 오브젝트 지향 언어라면 비슷하므로 이해하기는 어렵지 않을 ..

※ 일본의 한 포스트 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. JPA(Java Persistence API)와 ORM(Object-Relational Mapping) Java 표준의 ORM(Object-Relational Mapping)이다. ORM은 Java로 말하자면 오브젝트와 데이터 베이스의 맵핑을 하는 역할을 한다. ORM에 대해서 구체적으로 살펴보자면, 앞서말했듯 어플리케이션의 오브젝트와 데이터 베이스(이하, DB)의 레코드 및 오브젝트 간의 관계와 테이블 간의 관계를 상호 맵핑하는 기법으로, ORM를 실현하기 위한 기능이나 소트프웨어를 OR 맵퍼라고 말한다. 오브젝트 지향, 데이터 저장소에서 릴레이션 데이터 베이스를 사용했을 때..