매일 꾸준히, 더 깊이

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. UNION과 UNION ALL의 차이점에 대해서 설명하고자 한다. UNION ALL은 이름 그대로 UNION의 형제같은 것이다. 따라서 먼저 UNION에 대해서 이야기한 후에 UNION ALL에 대한 이야기를 하고자한다. UNION이란? 2개의 SQL 실행 결과를 세로 방향으로 연결시키는 구문이다. 예를 들면 다음과 같다. 다음과 같이 두 개의 테이블이 있다고 가정하자. 첫 번째 테이블 test_pk test_val 1 a 2 b 두 번째 테이블 test_pk test_val 2 b 10 a2 11 b2 13 c2 두 개의 테이블의 UNION으로 결합하면 다음과 같은 테이블이 ..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠씁니다. postgres에 한정하지 않고 RDBMS에서는 테이블 설계를 할 때 적절한 데이터형을 고르는 것이 중요하다. 또한 postgres에서는 기존의 데이터형을 확장한 형태가 몇 가지 준비되어 있다. 이러한 데이터형을 사용하는 것으로 유연한 데이터의 표현을 할 수 있다. 이번 포스팅에서는 그 중에서 세 종류를 소개하고자 한다. 배열 postgres에서는 임의의 데이터 형의 배열형을 사용할 수 있다. 데이터형의 정의 배열로 하고 싶은 데이터형의 뒤에 []를 추가한다. 예를 들면 다음과 같다. int[] 리터럴 {}를 감싸고 ,로 구분된 배열의 리터럴 표현은 다음과 같이 할 수 있다. S..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 이번에 설명할 구현 클래스 자주 사용되는 Collection계 클래스는 다음과 같다. ArrayList LinkedList HashSet HashMap HashMap은 Collection이 아닌 Map의 구현 클래스이지만, 자주 사용되는 점과 HashSet과 관계가 깊기 때문에 이번에 함께 설명하도록 하겠다. 클래스 그림은 다음과 같다. 그리고, 인터페이스의 역할은 다음과 같다. 인터페이스 역할 List 요소의 순서가 부여된 그룹. 기본적으로 중복이 허가된다. Set 요소의 중복을 허가하지 않은 그룹(집합). 순서는 구현 클래스에 따른다. ArrayList ; 배열에 의한 Li..

결론 먼저 결과를 말하자면, map(T -> R)은 T 데이터 형을 R의 데이터형으로 1:1 변환 flatMap(T -> R)은 T 데이터형에서 Stream으로 1:N 변환 Stream의 map() List nameList = Arrays.asList("Tanaka", "Suzuki", "Takahashi"); Stream stream = nameList.stream().map(x -> x.length()); System.out.println(stream.collect(Collectors.toList())); 실행 결과는 다음과 같다. [6, 6, 9] Tanaka Suzuki Takahashi ↓ ↓ ↓ 6 6 9 위와 같이 문자열에서 문자열 길이로 1:1변환하고 있다. Stream의 flatMap()..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 직역, 의역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 전제 유저 ID 이름 메일주소 작성한 포스트 수 받은 좋아요 수 1 홍길동 example1@example.com 10 5000 2 김철수 example2@example.com 1 7 3 이영희 example3@example.com 3709 6446131 다음과 같이 데이터를 추출하려고 한다고 가정하자. 테이블의 유저 ID는 프라이머리 키, 이름이나 메일 주소는 프라이머리 키와 동일한 users 테이블의 필드에 존재하는 정보라고 생각하게 된다. 추출할 데이터가 users 테이블의 데이터뿐이라면 큰 문제는 아니다. 단순히 다음과 같은 select 문으로 하면 된다. SELECT *..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. anyMatch: 판정 (일부 일치) anyMatch 메소드는 filter 메소드에도 사용할 수 있으며, 판정하기 위해 함수형 인터페이스인 Predicate를 인수로 받아, boolean(1개라도 조건에 일치하는 값이 있다면 true)를 반환한다. 조건에 일치하는 값이 발견됐을 시점에 처리를 종료하므로 ||와 동일하다. anyMatch의 사용법 String의 Collection에서 문자열을 검색하는 샘플 코드를 살펴보자. List strs = Arrays.asList("hoge", "fuga", "bars"); // 람다식 boolean b = strs.stream().anyM..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Vue.js에서 프론트엔드 요소를 조건문으로 나타낼 때 v-if나 v-show를 사용한다. 그러나 이 두 가지의 차이점을 잘 몰랐기에 이번 기회에 정리하고자 한다. v-if v-if="조건"으로 쓰면 조건의 참거짓에 따라 요소를 표시할지 안 할지는 컨트롤 할 수 있다. Vue is awesome! Oh no! 여러 가지 요소의 표시/비표시를 한꺼번에 컨트롤 할 때는 v-if를 태그에 기재한다. Title Paragraph 1 Paragraph 2 조건이 참일 때에 요소 전체가 표시되며, 거짓일 때는 요소 전부가 비표시하게 된다. v-show v-if와 동일하게 v-show="조..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 자식 컴포넌트에서 부모 컴포넌트 메소드등을 실행시킬 때 $emit을 사용하지만, 반대의 경우는 refs를 사용한다. refs를 사용하는 방법은 다음과 같다. 부모 컴포넌트 자식 컴포넌트 정리 포인트는 다음과 같다. $refs를 사용 ref="xxx"를 자식 컴포넌트에 설정 this.$refs.xxx.some_method()로 자식 컴포넌트의 메소드를 호출 참고자료 https://r17n.page/2020/07/07/vue-call-child-component-method-from-parent/ https://proglearn.com/2021/03/12/vue-js%E3%81%A..

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