매일 꾸준히, 더 깊이

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. slot이란? 어제 포스팅에서 이미 설명한 내용이지만, 한번 더 복습하는 의미에서 한 번 더 확인해보고자한다. slot은 부모 컴포넌트에서 자식 컴포넌트로 사용할 컴포넌트를 전달할 수 있는 Vue의 기능이다. 가벼운 예제로 살펴보자. Hello World message: message: Hello World가 표시된다. 그리고 스코프가 있는 슬롯은 자식 컴포넌트가 가지고 있는 속성을 부모 컴포넌트의 slot 부분에서 참조할 수 있게 된다. {{ parentComponentUser.user.name }} name:{{ user.age }} child-component에서 user..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. slot이란? slot이란 부모가 되는 컴포넌트쪽에서 자식 컴포넌트의 템플렛의 일부를 삽입하는 기능이다. 참고로, Vue.js Version2.5 이후는 slot-scope, Version 2.6이후는 slot-scope와 v-slot이 준비되어 있다. slot은 크게 기본 slot, 이름이 붙은 slot, 스코프가 있는 slot 세 개로 나눠서 볼 수 있다. 기본 slot /src/components 바로 아래에 매우 간단한 컴포넌트를 작성한다. name: Mirai Taro /src/views/About.vue에는 만든 컴포넌트를 호출한다. 아래의 코드에서는 의 태그로 컴포..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 이번 포스트에서 설명할 함수 이번 포스트에서 설명할 함수는 ROW_TO_JSON과 JSON_AGG두 가지이다. 각각의 함수로 출력되는 JSON형식은 다음과 같다. ROW_TO_JSON {"id":1,"name":"taro"} Object같은 JSON을 반환하는 함수 JSON_AGG [{"id":1,"name":"taro"},{"id":2,"name":"jiro"}] Array형식의 JSON을 반환하는 함수 ROW_TO_JSON ROW란? ROW_TO_JSON의 ROW는 행이라고 할 수 있지만, 실체는 튜플이라고 생각하는 것이 좋다. 메뉴얼에는 "복합 값"이라는 이름으로 등장한다..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. CSS 아키텍처란? CSS는 사양이 단순하기 때문에 배우기 쉽지만, 대규모 사이트나 팀에서 코딩할 때나 장기간 유지 보수하는 등에 있어서는 사양 외에 많은 지식이 요구된다. CSS의 사양을 구석구석 이해하여, 미디어 쿼리나 CSS 애니메이션등을 능숙하게 사용할 수 있다고 해도 그것으로 CSS의 스킬이 높다고는 말할 수 없다. CSS의 사양대로 설계할 수 있는 것은 최종 목표가 아닌 기본 능력이다. 코드의 가독성이나 유지보수, 팀 빌딩이 가능한지등은 다른 면으로 굉장히 중요하다. CSS에는 이러한 사양 외에의 규약을 제공해주는 아키텍처가 몇 가지가 준비되어 있다. 이 몇 가지 아..

Vuex란? vue.js의 기본을 알고있다는 전제에 한해서 설명하도록 하겠다. 수 많은 컴포넌트가 있는 어느 정도 규모가 있는 프로젝트가 있다고 가정하자. 이 그림에서 ComponentA의 데이터를 ComponentC나 ComponentE에 전달하고자 한다면 어떻게 할까? 일반적인 vue.js라면 부모 컴포넌트에서 자식 컴포넌트로, 다시 자식 컴포넌트에서 부모 컴포넌트로의 데이터를 전달하는 는 과정을 여러번 걸쳐야한다. 여기서 Vuex를 사용하면 글로벌 변수와 같은 느낌으로 데이터를 다룰 수 있게 된다. 이것으로 복잡했던 컴포넌트 간의 데이터 송신 과정을 줄일 수 있다. Vuex의 도입 Vuex의 패키지를 설치한다. vue cli으로 프로젝트를 생성하면 세트로 설치되므로 이러한 경우에는 필요하지 않다. ..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 시작하기에 앞서 빌카윈의 저서 SQL AntiPatterns 내용을 가볍게 정리해보았다. [1장] 무단횡단(제이워크) 1개의 칼럼에 컴마(,) 구분의 값을 넣으면 안 된다. 그 이유는 다음과 같다. 검색하기 어렵다. 문자열 칼럼의 문자 수 제한이라는 암묵적 제약을 받는다. validation을 걸기 어렵다. 해결방법은 교차 테이블을 생성하는 것이다. [2장] 순진한 트리 트리형태의 계층 구조를 1개의 테이블로 표현하면 안된다. 그 이유는 다음과 같다. 계층 구조가 깊어지면 그만큼 SQL을 써야한다. 노드를 삭제하기 어려워진다. 해결방법은 대체 트리 모델을 사용하는 것이다. [3..

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