매일 꾸준히, 더 깊이

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 이번에 포스트에서 다룰 것 다음과 같은 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등으로 비동기 처리를 작성했던 경험이 있는 것을 전제로하므로, 비동기 처리 자체에 대한 설명을 이번에 생략한다. 기재된 이용 예의 코드는..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Jest로 함수의 인수를 여러개 패턴 체크하고 싶은 경우, 일일히 작성하는 방법 혹은 test.each로 테이블과 같은 형태로 기재하는 방법이 있다. 후자의 방법이 테스트의 가독성이 좋아지므로 추천한다. 그러므로 이번 포스팅을 통해서 소개하고자한다. Jest의 test.each란? Jest에서 Parameterized test를 할 수 있는 메소드이다. 함수의 인수와 기대값을 여러개 부여할 수 있으며, Jest는 그것들을 모두 실행시켜준다. 예를 들면 다음과 같은 코드를 살펴보자. test.each([ [1, 1, 2], [1, 2, 3], [2, 1, 3], ])(".add(..

mock이란? mock은 한마디로 테스트에 필요한 부품값을 임의로 설정하는 것을 뜻한다. 예를 들어, 클래스 A의 단체 테스트 코드를 쓸 때, " 지금 만들고 있는 테스트에 필요한 클래스 B가 미완성이라서 테스트 코드를 쓸 수 없지 않을까?", " 지금 만들고 있는 테스트에 필요한 클래스 B의 처리 양이 너무 방대해서 변경이 힘들지 않을까?" 와 같은 벽에 부딪힐 때가 있을 것이다. 테스트를 하는 클래스 이외의 내용을 일부러 변경하는 것도 번거롭고, 변경하는 곳의 클래스가 복잡하고 방대한 처리를 하다 보면 변경, 저장, 실행의 수만큼 수고가 생긴다. 그런 곤란한 문제가 생겼을 때 사용하는 것이 "mock"이다. 테스트를 수행하는 클래스가 다른 클래스 메서드의 반환 값을 사용하고 있을 때 mock을 사용하..

코드를 작성하다보면 조건문이 복잡해지는 (깊이가 깊어지는) 경우가 있다. 예를 들면 다음과 같은 경우이다. 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..

※ 일본의 블로그 글을 번역한 포스트입니다. 오역 및 직역, 의역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 지난 클린 아키텍처1에 이어서 두 번째 그림에 대해 해설하기 위한 포스팅이다. 클린 아키텍처1에서 만든 코드를 위와 같은 그림으로 표현하자면 다음과 같다. 박스 위에 글자가 있는 것이 있는데 는 Interface고, 는 Data Structure(데이터구조체)이다. 대체로 그림대로 재현하고 있지만 유일하게 외부쪽 환경에서 UserCreateViewModel에 의존하는 View가 재현되지 못 했다. 이번 스크립트는 Presenter가 ViewModel를 다뤄, Consol 표현을 하고 있으므로 원래 View의 역할을 Presenter가 하고 있는 형상이 됐다. 이 부분을 어떻게 하면..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주면 감사하겠습니다. 클린 아키텍처의 가장 추정적인 것이라고 한다면 바로 이 그림일 것이다. 따라서 이번 포스팅에서는 샘플코드와 함께 이 그림에 대해 해설해보고자 한다. 샘플 코드 https://github.com/nrslib/CleanArchitecture 언어는 C#이다. 프로젝트 구성등 실제의 제품과 동일한 형식으로 기재되어 있기 때문에 괜찮다면 참고하길 바란다. 원 그림의 해설 원 그림은 레이어를 의미한다. 레이어의 이름은 이 위치에 기재되어 있다. 그럼 하나 하나 설명하도록 하겠다. Enterprise Business Rules 노란색 레이어인 Enterprise Business Rules는..