매일 꾸준히, 더 깊이

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Vue.js의 이벤트 수식자 이벤트 수식자로 아래의 여섯 종류가 있다. .stop .prevent .capture .self .once .passive 이 중에서도 사용빈도가 높은 .stop과 .prevent와 사용 방법에 대해서 간단하게 소개하려고 한다. 사용법 .stop .stop은 JavaScript의 stopPropagation을 호출한다. 용어 그대로 현재 이벤트의 추가 전파(propagation)을 중지한다는 의미이다. Vue.js의 공식 문서에는 부모 요소로의 전달을 멈춘다고 기재되어 있다. 즉, Vue.js의 이벤트 수식자 .stop은 자식 요소의 이벤트가 부모의..

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

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용이 있으면 지적해주시면 감사하겠습니다. 스토리 포인트란? 스토리 포인트는 과제의 크기를 표시하는 수치이다. 이용할 수 있는 수치로는 1, 2, 3, 5, 8, 13, 21, 40이 있다. 이것은 시간을 표시하는 것이 아닌 단순히 과제의 크기라는 것을 주의하자. 시간 견적이 아닌 이유 방금 작성했듯 스토리 포인트는 시간이 아니다. 그 이유는 다음과 같다. 시간 견적은 사람에 따라 큰 차이가 있다. 예를 들어 다음과 같은 과제가 있다고 상정하자. ## Done의 정의(완료 요건) - Google계정을 이용하여 등록, 로그인할 수 있도록 하는 것 ## 이용 기술 - Ruby on Rails 어떤 개발자 A는 이 기..

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

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 이번 내용에서는 애자일 개발, 개발 중에서도 가장 많이 채용되고 있는 스크럼 개발 프래임 워크와 툴 등의 공유해보고자 한다. 프로젝트 프로젝트란 아래의 그림대로, 명확히 정의되어 있는 목표를 달성하기 위한 계획, 수행하기 위한 관리 환경이다. 애자일 개발이란 애자일(Agile)이란 재빠르다, 기민한, 머리 회전이 빠른 의미이다. 애자일 개발은 시스템이나 소프트 개발에 있어서의 한 방법으로 커다란 단위로 시스템을 구분하는 것이 아닌, 작은 단위로 테스트나 구현을 반복해나가는 개발 방법으로, “만들면서 생각해보자”는 방법이다. 애자일 개발의 역사 프로젝트 관리 방법은 제2차세계 대..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 공식 문서에 template 태그의 다양한 역할에 대해 기재되어 있지만, 적혀 있는 곳들이 다 분산되어 있기 때문에 혼란되기 쉽다. 따라서 이번 포스트를 통해서 정리하고자한다. 태그는 다음과 같은 역할이 있다. 조건이 붙은 랜더링으로 여러개의 요소를 대상으로 하는 경우(v-if) 리스트 랜더링으로 여러개의 요소를 대상으로 하는 경우 (v-for) 이름이 붙은 스코프 (v-slot) 단일 파일의 컴포넌트 조건이 붙은 랜더링으로 여러 개의 요소를 대상으로 하는 경우 (v-if) 공식 문서의 예를 인용해보자면 다음과 같다. Title Paragraph 1 Paragraph 2 v-i..

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