매일 꾸준히, 더 깊이

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 존재하며 틀린 내용은 지적해주시면 감사하겠습니다. CSS로 규정의 폭보다 문자 수가 많아지는 경우에 텍스트를 생략형으로 바꾸는 방법에 대해서 설명하고자한다. 그리고 한 줄의 텍스트뿐만 아니라 2줄 이상의 텍스트도 적용가능하다. 한 줄 텍스트의 경우 text-overflow를 사용한다. 사용할 때는 두 가지 규칙이 있다. overflow: hidden; 및 white-space: nowrap; 과 함께 사용해야한다. text-overflow는 Block요소에 대해 inline(옆 방향)으로 튀어 나온 텍스트에 효과가 있다. Block 요소 샘플 코드 // HTML CSS로 텍스트를 생략하는 테스트입니다. // CSS .text-over..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 개요 작업 브랜치로 편집한 후에 pull request를 냈을 때 충돌이 발생했을 때 어떻게 해결해야하는지에 대해서 설명하고자 한다. 이 포스트에서 등장하는 브랜치는 총 세 가지이다. develop (merge할 곳) a_branch (이미 develop에 merge되어 있는 브랜치) b_branch (작업 브랜치) 전제 조건은 작업 브랜치(b_branch)에서 develop로 pull request를 냈을 때이다. 그리고 이미 a_branch는 merge되어 있어, 그 브랜치에서 편집편집된 것과 충돌이 발생한 상황이라고 가정한다. 충돌이 발생한 상황에서 pull request..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 이 포스트에서 설명할 것 이 포스트에서는 서적 관리 어플리케이션을 만드는 것을 예제로 오브젝트 지향의 계승(상속)/캡슐화/다형성에 대해서 설명하고자한다. 서적 관리 어플리케이션은 서적의 대출, 반환이 되며, 대출시에 Mail을 송신하는 기능으로 한정하고 있다. 오브젝트 지향에 관련된 설명을 목적으로 하고 있기 때문에, 서적 관리 어플리케이션의 상세한 코드는 작성하지 않았다. 백엔드와 관련된 내용이다. 그러므로, 혼자서 독학 등으로 Web 어플을 개발 경험이 있는 사람이 이 포스트의 대상이 된다. 코드는 PHP로 작성했지만, 다른 언어를 대입해서 봐도 무리 없이 이해할 수 있는 ..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Flexbox란? Flexible Box Layout Module로 CSS3에서 도입된 레이아웃 모듈이다. 사용법 flex 레이아웃을 적용하고 싶은 요소의 부모 요소에 flex로 지정한다. .flexbox { display: flex; } 혹은 .flexbox { display: inline-flex; } 기본 레이아웃 기본 정렬 LOGO List1 List2 List3 List4 List5 ul { display: -webkit-flex; display: flex; list-style: none; } li { margin: 10px; padding: 20px; border-r..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 이번 포스트에서 설명할 함수 이번 포스트에서 설명할 함수는 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에는 이러한 사양 외에의 규약을 제공해주는 아키텍처가 몇 가지가 준비되어 있다. 이 몇 가지 아..

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

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